/* ── Flamenet Photos ──────────────────────────────────────────────────────── */

.fnp-wrap {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    width: 100%;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.fnp-nav {
    background: #003399;
    padding: 4px 8px;
    margin-bottom: 12px;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.fnp-nav a,
.fnp-nav a:visited {
    color: #fff;
    text-decoration: none;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.fnp-nav a:hover {
    background: #002277;
    text-decoration: none;
}

/* ── Flash messages ──────────────────────────────────────────────────────── */

.fnp-msg {
    padding: 6px 10px;
    margin-bottom: 12px;
    font-size: 12px;
    border: 1px solid;
}

.fnp-msg-success { background: #d4edda; border-color: #28a745; color: #155724; }
.fnp-msg-error   { background: #f8d7da; border-color: #CC0000; color: #721c24; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.fnp-tab-row {
    margin-bottom: 12px;
    border-bottom: 2px solid #003399;
}

.fnp-tab {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    color: #003399;
    text-decoration: none;
    border: 1px solid #7F9DB9;
    border-bottom: none;
    background: #EEF2FF;
    margin-right: 2px;
}

.fnp-tab:hover { background: #dde4ff; }
.fnp-tab:visited { color: #003399; }
.fnp-tab.fnp-tab-active:visited { color: #ffffff; }

.fnp-tab-active {
    background: #003399;
    color: #fff;
}

.fnp-tab-active:hover { background: #003399; }

/* ── Photo grid ──────────────────────────────────────────────────────────── */

.fnp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.fnp-card {
    border: 1px solid #7F9DB9;
    background: #fff;
    overflow: hidden;
}

.fnp-thumb-link { display: block; }

.fnp-thumb-wrap {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #EEF2FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fnp-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fnp-album-cover {
    height: 150px;
}

.fnp-album-placeholder {
    font-size: 40px;
    color: #7F9DB9;
}

.fnp-card-label {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    border-top: 1px solid #EEF2FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fnp-card-label a          { color: #0000CC; text-decoration: none; }
.fnp-card-label a:visited  { color: #660099; }
.fnp-card-label a:hover    { text-decoration: underline; }

.fnp-card-meta {
    padding: 2px 6px 5px;
    font-size: 10px;
    color: #666;
}

/* ── Single photo ────────────────────────────────────────────────────────── */

.fnp-photo-wrap {
    border: 1px solid #7F9DB9;
    background: #000;
    margin-bottom: 12px;
    text-align: center;
}

.fnp-photo-full {
    max-width: 100%;
    max-height: 520px;
    display: block;
    margin: 0 auto;
}

.fnp-photo-meta {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #EEF2FF;
    border: 1px solid #7F9DB9;
}

.fnp-photo-title {
    font-size: 15px;
    color: #003399;
    margin: 0 0 6px;
}

.fnp-photo-info {
    font-size: 11px;
    color: #666;
    margin: 0;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.fnp-tags { margin-top: 6px; }

.fnp-tag {
    display: inline-block;
    background: #EEF2FF;
    border: 1px solid #7F9DB9;
    font-size: 10px;
    padding: 1px 6px;
    margin: 2px 2px 0 0;
    color: #003399;
}

/* ── Actions row ─────────────────────────────────────────────────────────── */

.fnp-actions {
    margin-bottom: 12px;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.fnp-share-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    width: 100%;
}

.fnp-share-input {
    flex: 1;
    min-width: 200px;
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #7F9DB9;
    font-family: 'Courier New', monospace;
}

.fnp-share-badge {
    font-size: 10px;
    background: #FFCC00;
    color: #333;
    padding: 1px 6px;
    font-weight: bold;
    vertical-align: middle;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.fnp-btn {
    background: #003399;
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: inline-block;
}

.fnp-btn:hover { background: #002277; }

.fnp-btn-sm {
    background: #003399;
    color: #fff;
    border: none;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: inline-block;
}

.fnp-btn-sm:hover      { background: #002277; }
.fnp-btn-sm:visited    { color: #fff; }

.fnp-btn-delete {
    background: #CC0000;
    color: #fff;
    border: none;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

.fnp-btn-delete:hover { background: #aa0000; }

.fnp-cancel {
    font-size: 11px;
    color: #0000CC;
    text-decoration: none;
}

.fnp-cancel:hover { text-decoration: underline; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.fnp-form-box {
    border: 1px solid #7F9DB9;
    background: #fff;
    max-width: 480px;
}

.fnp-form-title {
    font-size: 14px;
    color: #fff;
    background: #003399;
    margin: 0;
    padding: 6px 12px;
}

.fnp-form { padding: 12px; }
.fnp-form p { margin: 0 0 10px; }

.fnp-form label {
    font-size: 11px;
    font-weight: bold;
    color: #333;
}

.fnp-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #7F9DB9;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 3px;
}

.fnp-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #7F9DB9;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 3px;
}

.fnp-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #7F9DB9;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 3px;
    resize: vertical;
}

/* ── Edit form (inline on photo page) ───────────────────────────────────── */

.fnp-edit-form {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 8px;
    max-width: 460px;
}

.fnp-edit-form p { margin: 0 0 8px; }

/* ── Album header ────────────────────────────────────────────────────────── */

.fnp-album-header {
    border-bottom: 2px solid #003399;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.fnp-album-title {
    font-size: 16px;
    color: #003399;
    margin: 0 0 4px;
}

.fnp-album-desc {
    color: #666;
    font-size: 11px;
    margin: 0 0 4px;
}

/* ── Section title ───────────────────────────────────────────────────────── */

.fnp-section-title {
    font-size: 14px;
    color: #003399;
    border-left: 3px solid #003399;
    padding-left: 8px;
    margin: 0 0 10px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.fnp-breadcrumb {
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
}

.fnp-breadcrumb a          { color: #0000CC; text-decoration: none; }
.fnp-breadcrumb a:visited  { color: #660099; }
.fnp-breadcrumb a:hover    { text-decoration: underline; }

/* ── Limit info ──────────────────────────────────────────────────────────── */

.fnp-limit-info {
    font-size: 11px;
    color: #333;
    background: #EEF2FF;
    border: 1px solid #7F9DB9;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.fnp-pagination { margin: 12px 0; }

.fnp-page-btn {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #7F9DB9;
    font-size: 11px;
    color: #0000CC;
    text-decoration: none;
    margin-right: 2px;
    background: #fff;
}

.fnp-page-btn:visited  { color: #0000CC; }
.fnp-page-btn:hover    { background: #EEF2FF; }

.fnp-page-current {
    background: #003399;
    color: #fff;
    border-color: #003399;
}

.fnp-page-current:hover   { background: #003399; }
.fnp-page-current:visited { color: #fff; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.fnp-empty {
    color: #666;
    font-style: italic;
    font-size: 12px;
}