/* For Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Root variables for color scheme */
:root {
  /* Base colors */
  --ig-background: #F8F8F8;
  --ig-white: #FFFFFF;
  --ig-text-primary: #3A3A3A;
  --ig-text-secondary: #727272;
  --ig-border: #E8E8E8;
  
  /* Brand red (primary accent — red gradients + black) */
  --brand-red: #C81E2D;
  --brand-red-light: #E23B3B;
  --brand-red-gradient: linear-gradient(135deg, #E23B3B, #C81E2D);

  /* Muted accent colors */
  --accent-sage: #C1C9BF;      /* Muted sage green */
  --accent-dusty-blue: #A0B5C8; /* Dusty blue */
  --accent-blush: #D9C0C0;     /* Soft blush pink */
  --accent-taupe: #B8A99A;     /* Warm taupe */
  --accent-lavender: #B5B1C8;  /* Subtle lavender */
  
  /* Active/selected state */
  --active-color: var(--accent-dusty-blue);
  --active-bg: #F2F4F6;
  
  /* Like button color */
  --like-color: #ed4956;       /* Instagram heart red */
  
  /* Menu colors */
  --menu-bg: var(--ig-white);
  --menu-border: var(--ig-border);
  --menu-text: var(--ig-text-primary);
  --menu-hover: #F5F5F5;
  --menu-active: var(--active-bg);
  --menu-count: var(--ig-text-secondary);
  --menu-shadow: rgba(0, 0, 0, 0.03);
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--ig-background);
    color: var(--ig-text-primary);
}

.dropdown-menu { 
    display: none; 
}

.nav-item:hover .dropdown-menu { 
    display: block; 
}

header {
    background: var(--ig-white);
    border-bottom: 1px solid var(--ig-border);
}

.navbar-brand img {
    transition: max-height 0.3s ease;
}

@media (max-width: 991px) {
    .navbar-brand img {
        max-height: 40px;
    }
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

.activat {
    background: var(--ig-background);
}

.placeholder {
    background: var(--ig-background);
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 800px 104px;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmer;
    animation-timing-function: linear;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 250px;
    z-index: 6; /* Increased z-index */
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--accent-dusty-blue);
    z-index: 7; /* Higher z-index than placeholder */
}

@keyframes placeholderShimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

/* Fix placeholder image proportions - CSS solution */
.progressive-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 66.67%; /* Default 2:3 aspect ratio as fallback */
}

.progressive-image-placeholder,
.progressive-image-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* This ensures image proportions are maintained */
    background-color: var(--ig-background);
}

.progressive-image-main.loaded {
    z-index: 2;
}

/* Show actual image dimensions once loaded */
.progressive-image-container:has(.progressive-image-main.loaded) {
    height: auto;
    padding-bottom: 0;
}

.progressive-image-container:has(.progressive-image-main.loaded) .progressive-image-main.loaded {
    position: relative;
    height: auto;
}

/* For browsers that don't support :has() */
.progressive-image-main.loaded {
    position: relative;
    height: auto;
    min-height: auto;
}

/* Ensure placeholder stays behind main image */
.progressive-image-main.loaded ~ .progressive-image-placeholder {
    z-index: 1;
    opacity: 0; /* Force complete transparency once main image is loaded */
    transition: opacity 0.5s ease; /* Smooth transition */
}

/* Fix spinner positioning */
.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6;
}

footer {
    background-color: var(--ig-white);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--ig-border);
}

footer .social-icons a {
    margin: 0 10px;
    color: var(--ig-text-primary);
    transition: color 0.3s ease;
}

footer .social-icons a:hover {
    color: var(--accent-dusty-blue);
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.img-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    margin-bottom: 55px; /* Increased to make room for Instagram-style buttons */
    cursor: pointer;
    background-color: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 8px; /* match the inner image radius */
}

/* Instagram-style like button */
.like-button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    position: absolute;
    bottom: -45px;
    right: 10px;
    background-color: transparent;
    border: none;
    height: 40px;
    padding: 0 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    border-radius: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hide Bootstrap icons */
.like-button .bi-heart,
.like-button .bi-heart-fill {
    display: none;
}

/* Instagram heart icon (empty). Real element (not ::before) so the like count can
   sit on the same row next to it. */
.like-heart {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 auto;
}

/* Filled heart for the liked state. */
.like-button.liked .like-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed4956' stroke='%23ed4956' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E");
    animation: heartPop 0.3s ease forwards;
}

@keyframes heartPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.like-count {
    font-weight: 600;
    transition: all 0.3s ease;
}

.like-button.has-likes .like-count {
    display: inline;
}

.like-button:hover {
    opacity: 0.7;
}

.like-button:active {
    transform: scale(0.95);
}

.full-width-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

.full-width-img-container {
    width: 100%;
    position: relative;
    min-height: 300px;
    margin-bottom: 55px; /* Increased for Instagram-style buttons */
    cursor: pointer;
    background-color: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 8px; /* match the inner image radius */
}

.full-width-img-container img,
.full-width-img-container video {
    width: 100%;
    height: auto;
    display: block;
    min-height: 250px;
    object-fit: cover;
}

.full-width-like-button {
    position: absolute;
    bottom: -45px;
    right: 10px;
    z-index: 10;
}

/* Instagram-style share button */
.share-buttons {
    position: absolute;
    bottom: -45px;
    left: 10px;
    z-index: 10;
}

.share-button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: transparent;
    border: none;
    border-radius: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #262626;
    transition: all 0.2s ease;
    padding: 0 8px;
}

.share-button:hover {
    opacity: 0.7;
}

.share-button:active {
    transform: scale(0.95);
}

/* Instagram-style share icon */
.share-button .bi-share {
    display: none; /* Hide Bootstrap icon */
}

/* Add Instagram paper plane icon */
.share-button::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'%3E%3C/path%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bi-share {
    font-size: 24px;
    color: #262626;
}

/* Instagram-style see more button (three dots) */
.see-more-btn {
    position: absolute;
    bottom: -45px;
    right: 80px;
    background-color: transparent;
    border: none;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    z-index: 10;
    cursor: pointer;
}

.see-more-btn i {
    display: none;
}

.see-more-btn:hover {
    opacity: 0.7;
}

.see-more-btn:active {
    transform: scale(0.95);
}

.see-more-btn::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262626'%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='6' cy='12' r='1.5'/%3E%3Ccircle cx='18' cy='12' r='1.5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Labelled action bar under each image (share / details / like). The three buttons
   flow inside this flex bar instead of being individually absolute-positioned, so the
   labels never overlap. Share sits on the left; details + like group on the right. */
.image-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 0 6px;
    z-index: 10;
}
.image-actions-right { display: flex; align-items: center; gap: 6px; }

/* Neutralise the old absolute positioning for buttons now living inside the bar. */
.image-actions .share-buttons,
.image-actions .see-more-btn,
.image-actions .like-button {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
}
/* ===== Action bar — Variant A: minimal, Instagram-style =====
   Flatten the wrapper groups so all three buttons become flex items of
   .image-actions, then reorder: Apreciază + Distribuie on the left, Detalii
   pushed to the right. No cards/borders/shadows — clean ghost actions. */
.image-actions .share-buttons,
.image-actions .image-actions-right { display: contents; }

.image-actions .like-button     { order: 1; }
.image-actions .share-button    { order: 2; }
.image-actions .see-more-btn    { order: 3; }                    /* Detalii — after like + share */
.image-actions .favorite-button { order: 4; margin-left: auto; } /* Salvează — right */

.image-actions .share-button,
.image-actions .see-more-btn,
.image-actions .like-button {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    min-width: 0;
    padding: 4px;
    gap: 6px;
    line-height: 1.1;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ig-text-primary);
    transition: color 0.15s ease, transform 0.12s ease;
}
.image-actions .share-button:hover,
.image-actions .see-more-btn:hover,
.image-actions .like-button:hover { color: var(--brand-red); opacity: 1; transform: scale(1.06); }
.image-actions .share-button:active,
.image-actions .see-more-btn:active,
.image-actions .like-button:active { transform: scale(0.94); }

/* Bigger, clean icons. */
.image-actions .share-button::before { width: 24px; height: 24px; }
.image-actions .like-heart { width: 24px; height: 24px; }

/* Like: heart + count inline, no text label; turns red when liked. */
.like-top { display: inline-flex; align-items: center; gap: 5px; }
.image-actions .like-count { display: none; font-size: 14px; font-weight: 600; color: var(--ig-text-primary); }
.image-actions .like-button.has-likes .like-count { display: inline; }
.image-actions .like-button.liked .like-count { color: #ed4956; }

/* Hide the Apreciază / Distribuie text labels (icon-only), but keep them for
   screen readers. */
.image-actions .like-button .action-label,
.image-actions .share-button .action-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Detalii: a discreet text link with a chevron (the three-dots icon is hidden). */
.image-actions .see-more-btn { width: auto; }
.image-actions .see-more-btn::before { display: none; }
.image-actions .see-more-btn .action-label {
    font-size: 13px; font-weight: 600; color: var(--ig-text-secondary); white-space: nowrap;
}
.image-actions .see-more-btn::after {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 1px;
    background-position: center; background-repeat: no-repeat; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
.image-actions .see-more-btn:hover .action-label { color: var(--brand-red); }

/* When the card shows a title/subtitle caption, drop the bar below it. */
.image-text-container ~ .image-actions { bottom: -56px; }

/* ===== Photo corners — small, Instagram-style radius ===== */
.progressive-image-container,
.video-container { border-radius: 8px; overflow: hidden; }
.progressive-image-main,
.progressive-image-placeholder,
.full-width-img-container img,
.full-width-img-container video { border-radius: 8px; }
.full-width-img-container { border-radius: 8px; }

/* ===== Favorite (bookmark) — now lives in the action bar (Instagram-style save) ===== */
.image-actions .favorite-button {
    position: static;
    height: auto;
    max-width: none;
    padding: 4px;
    gap: 6px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--ig-text-primary);
    transition: color 0.15s ease, transform 0.12s ease;
}
/* Bookmark drawn as an inline SVG (Instagram/Feather-style outline) so it matches
   the heart + send icons. The Bootstrap glyph is hidden (font-size:0); favorites.js
   still toggles .is-favorite on the button, which swaps to the filled red bookmark. */
.image-actions .favorite-button i {
    font-size: 0;
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.image-actions .favorite-button:hover { background: none; transform: scale(1.06); }
.image-actions .favorite-button.is-favorite { background: none; }
.image-actions .favorite-button.is-favorite i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C81E2D' stroke='%23C81E2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
/* Icon-only in the bar — keep the label for screen readers. */
.image-actions .favorite-button .favorite-button-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Favorite (bookmark) button — legacy top-right overlay style (no longer used now
   that the bookmark lives in the action bar, but kept as a harmless fallback). */
.favorite-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    max-width: calc(100% - 16px);
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #262626;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.favorite-button i { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.favorite-button .favorite-button-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favorite-button:hover { background: #fff; transform: scale(1.04); }
.favorite-button:active { transform: scale(0.96); }
.favorite-button.is-favorite { background: linear-gradient(135deg, #E23B3B, #C81E2D); color: #fff; }
.favorite-button.is-favorite i { animation: heartPop 0.3s ease forwards; }

/* Favourites page */
/* ===== Favourites page — unified card panel, on the site's muted palette ===== */
.favorites-page { padding-top: 8px; }

/* Header + actions card (matches the site's rounded white cards). */
.favorites-panel {
    max-width: 1100px;
    margin: 16px auto 24px;
    padding: 20px 22px;
    background: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.favorites-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.favorites-panel-title { display: flex; align-items: center; gap: 14px; }
.favorites-panel-title > i { font-size: 2rem; color: var(--accent-dusty-blue); line-height: 1; }
.favorites-panel-title h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ig-text-primary);
}
.favorites-sub { margin: 3px 0 0; font-size: 0.85rem; color: var(--ig-text-secondary); }
.favorites-sub #favoritesCount { font-weight: 700; color: var(--accent-dusty-blue); }

.favorites-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pill buttons: filled accent = primary actions, ghost = secondary. */
.btn-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-fav-primary {
    background: linear-gradient(135deg, #e8505b 0%, #cf2e3c 100%);
    border-color: #cf2e3c;
    color: #fff;
}
.btn-fav-primary:hover { filter: brightness(0.95); color: #fff; }
.btn-fav-ghost {
    background: transparent;
    border-color: var(--ig-border);
    color: var(--ig-text-secondary);
}
.btn-fav-ghost:hover { background: var(--active-bg); color: var(--ig-text-primary); }
.btn-fav-ghost.danger:hover { color: #b23b43; border-color: #e6b8bb; background: #fcf1f1; }

/* Share-link result lives inside the panel — neutral, on-palette. */
.favorites-share-result {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--active-bg);
    border: 1px solid var(--ig-border);
    border-radius: 12px;
    font-size: 13px;
}
.favorites-share-result label { display: block; margin-bottom: 6px; color: var(--ig-text-secondary); }
.favorites-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.favorites-share-row .form-control { flex: 1 1 240px; min-width: 0; }
.favorites-share-row .btn-fav { flex: 0 0 auto; }
/* On narrow screens the link takes the full row and the two actions sit below it. */
@media (max-width: 575px) {
    .favorites-share-row .form-control { flex: 1 1 100%; }
    .favorites-share-row .btn-fav { flex: 1 1 auto; justify-content: center; }
}

/* Shared-list banner (viewing someone else's list) — kept distinct (amber). */
.favorites-import-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 12px 16px;
    background: #fff7e6;
    border: 1px solid #ffe2a8;
    border-radius: 12px;
    font-weight: 600;
    color: #6b5300;
}

/* Empty state — its own soft card. */
.favorites-empty {
    max-width: 640px;
    margin: 24px auto;
    padding: 48px 24px;
    text-align: center;
    background: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 14px;
}
.favorites-empty .fav-empty-icon { font-size: 3rem; color: var(--accent-dusty-blue); }
.favorites-empty h2 { font-size: 1.25rem; margin-top: 14px; color: var(--ig-text-primary); }
.favorites-empty p { color: var(--ig-text-secondary); margin-bottom: 18px; }
.favorites-empty .btn-fav { display: inline-flex; }

/* Mobile: stack the header and let the action buttons fill the width. */
@media (max-width: 575px) {
    .favorites-panel-head { flex-direction: column; align-items: stretch; }
    .favorites-actions { width: 100%; }
    .favorites-actions .btn-fav { flex: 1 1 auto; justify-content: center; }
}

/* Header "Favorite" badge count. */
.fav-count.is-empty { opacity: 0.6; }

/* ===== Footer (Editorial elegant) ===== */
.site-footer {
    text-align: left;
    background: var(--ig-white);
    border-top: 1px solid var(--ig-border);
    padding: 3rem 0 0;
}
.site-footer .footer-brand-logo { max-height: 72px; width: auto; }
.site-footer .footer-tagline {
    color: var(--ig-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 260px;
    margin: 1rem 0 1.2rem;
}
.site-footer .footer-heading {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ig-text-primary);
    margin-bottom: 0.7rem;
    position: relative;
}
.site-footer .footer-heading::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--brand-red-gradient);
    margin-top: 0.35rem;
    border-radius: 2px;
}
.site-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-links li { margin-bottom: 0.4rem; }
.site-footer .footer-links a,
.site-footer .footer-links .footer-contact-static {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ig-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.site-footer .footer-links a:hover { color: var(--brand-red); transform: translateX(2px); }
.site-footer .footer-links a i,
.site-footer .footer-links .footer-contact-static i {
    width: 16px; text-align: center; color: var(--brand-red); flex: 0 0 auto; font-size: 0.9rem;
}
/* Social icon buttons under the brand */
.site-footer .footer-social { display: flex; gap: 0.5rem; }
.site-footer .footer-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ig-white);
    border: 1px solid var(--ig-border);
    color: var(--ig-text-secondary);
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.18s ease;
}
.site-footer .footer-social a:hover {
    color: #fff;
    background: var(--brand-red-gradient);
    border-color: var(--brand-red);
    transform: translateY(-2px);
}
/* Bottom legal bar */
.site-footer .footer-legal-bar {
    border-top: 1px solid var(--ig-border);
    margin-top: 2.5rem;
    padding: 1.1rem 0 1.6rem;
}
.site-footer .footer-firm { font-size: 0.78rem; color: var(--ig-text-secondary); line-height: 1.7; }
.site-footer .footer-firm strong { color: var(--ig-text-primary); }
.site-footer .footer-copy { color: var(--ig-text-secondary); font-size: 0.78rem; margin: 0.25rem 0 0; }
.site-footer .footer-legal-links a { color: var(--ig-text-secondary); text-decoration: none; font-size: 0.8rem; }
.site-footer .footer-legal-links a:hover { color: var(--brand-red); text-decoration: underline; }
.site-footer .footer-legal-sep { color: var(--ig-border); margin: 0 0.45rem; }

@media (min-width: 768px) {
    .desktop-half-left {
        width: 50%;
        float: left;
        margin-right: 1rem;
    }

    .desktop-half-right {
        width: 50%;
        float: right;
        margin-left: 1rem;
    }

    .desktop-half-center {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .desktop-full {
        width: 100%;
    }
}

.full-width-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.full-width-img.portrait {
    object-fit: contain;
    background-color: var(--ig-background);
    max-height: 80vh;
}

@media (min-width: 768px) {
    .desktop-half-left + p,
    .desktop-half-right + p {
        display: inline;
    }
}

.lazy-image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Video-specific styling */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #000;
    margin-bottom: 0 !important; /* Remove the bottom margin */
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    background-color: #000;
    object-fit: cover;
    cursor: pointer;
}

/* Video styling with no controls */
video.full-width-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    background-color: #000;
}

/* Make the play indicator more prominent */
.video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    z-index: 3;
    pointer-events: auto;
    opacity: 0.9;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    padding: 15px;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hide video indicator when playing */
video:playing + .video-indicator {
    opacity: 0;
}

/* Hide video controls until hover for cleaner look */
video.full-width-img:not(:hover) {
    cursor: pointer;
}

/* Make sure indicators are clickable */
.video-container, .full-width-img-container {
    position: relative;
}

/* Fix video indicator positioning in all layouts */
.desktop-half-left .video-indicator,
.desktop-half-right .video-indicator,
.desktop-half-center .video-indicator,
.desktop-full .video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* More prominent pseudo-album styling */
#photoGallery .pseudo-album-header,
.row .pseudo-album-header,
.col-12.pseudo-album-header {
    padding: 35px 25px;
    margin-bottom: 40px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; 
    width: 100% !important;
}

/* Desktop specific styles with !important */
@media (min-width: 768px) {
    #photoGallery .pseudo-album-header,
    .row .pseudo-album-header,
    .col-12.pseudo-album-header {
        max-width: 80% !important;
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .pseudo-album-title {
        font-size: 32px !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 15px !important;
    }
    
    .pseudo-album-description {
        font-size: 14px !important;
        line-height: 1.2 !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
}

/* Ensure title and description are visible */
.pseudo-album-title {
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--ig-text-primary);
    font-size: 24px;
    display: block !important;
    line-height: 1.2;
}

.pseudo-album-description {
    margin-top: 5px;
    color: var(--ig-text-secondary);
    font-size: 14px;
    display: block !important;
    line-height: 1.2;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;

}

/* Fluid responsive gallery (desktop/tablet, >=768px). Columns auto-fit by a
   minimum card width, so the grid grows 2 → 3 → 4 → 5 → 6 columns as the viewport
   widens — no fixed breakpoints. Mobile (<768px) stays 1 column (handled below).
   Tune density by changing the 300px min-card width. */
@media (min-width: 768px) {
    #photoGallery,
    #searchResultsGrid,
    #latestPhotosGrid,
    #keywordImagesGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-min, 380px), 1fr));
        gap: 1rem;
        align-items: start;
    }
    /* Neutralize Bootstrap column sizing/padding inside the grid — the grid's
       `gap` handles spacing; otherwise col widths + paddings fight the grid. */
    #photoGallery > [class*="col-"],
    #searchResultsGrid > [class*="col-"],
    #latestPhotosGrid > [class*="col-"],
    #keywordImagesGrid > [class*="col-"],
    #photoGallery > .row,
    #searchResultsGrid > .row,
    #latestPhotosGrid > .row,
    #keywordImagesGrid > .row {
        max-width: none;
        flex: none;
        width: auto;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* Promo (CTA) cards and pseudo-album header rows span the whole row. */
    #photoGallery > .col-12,
    #searchResultsGrid > .col-12,
    #latestPhotosGrid > .col-12,
    #keywordImagesGrid > .col-12,
    #photoGallery > .row,
    #searchResultsGrid > .row,
    #latestPhotosGrid > .row,
    #keywordImagesGrid > .row {
        grid-column: 1 / -1;
    }

    /* Keyword-filter page grid — same fluid behaviour. */
    #keywordFilterGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-min, 380px), 1fr));
        gap: 1rem;
        align-items: start;
    }
    #keywordFilterGrid > [class*="col-"],
    #keywordFilterGrid > .row {
        max-width: none; flex: none; width: auto; margin: 0; padding-left: 0; padding-right: 0;
    }
    #keywordFilterGrid > .col-12,
    #keywordFilterGrid > .row { grid-column: 1 / -1; }

    /* Favourites page grid — same fluid behaviour. */
    #favoritesGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-min, 380px), 1fr));
        gap: 1rem;
        align-items: start;
    }
    #favoritesGrid > [class*="col-"],
    #favoritesGrid > .row {
        max-width: none; flex: none; width: auto; margin: 0; padding-left: 0; padding-right: 0;
    }
    #favoritesGrid > .col-12,
    #favoritesGrid > .row { grid-column: 1 / -1; }
}

/* Gallery density control — visitor picks Compact / Normal / Larg (desktop only).
   Sets --gallery-card-min, which the grid above uses. Persisted in localStorage. */
.gallery-density-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ig-text-secondary, #777);
}
.gallery-density-bar .gdb-label { margin-right: 2px; }
.gallery-density-bar .gdb-label.gdb-sep { margin-left: 14px; }
.gallery-density-bar .gdb-btn {
    border: 1px solid var(--ig-border, #dbdbdb);
    background: #fff;
    color: #444;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
    transition: all .15s ease;
}
.gallery-density-bar .gdb-btn:hover { background: #f2f2f2; }
.gallery-density-bar .gdb-btn.active {
    background: linear-gradient(135deg, #E23B3B, #C81E2D);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
@media (max-width: 767px) {
    /* Density (card width) is meaningless on mobile (single column), so hide that bar —
       but keep the album ORDER control visible (it has the .has-order marker). */
    .gallery-density-bar { display: none !important; }
    .gallery-density-bar.has-order {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        font-size: 12px;
    }
    .gallery-density-bar.has-order .gdb-label:not(.gdb-sep),
    .gallery-density-bar.has-order .gdb-btn[data-level] { display: none; }
    .gallery-density-bar.has-order .gdb-label.gdb-sep {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 2px;
    }
    .gallery-density-bar.has-order .gdb-btn { padding: 4px 12px; font-size: 12.5px; }
}

/* Mobile layout fixes - make everything full width */
@media (max-width: 767px) {
    /* Make all columns full width */
    .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Make all image containers full width */
    .img-container,
    .full-width-img-container,
    .video-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        min-height: 250px;
    }
    
    /* Remove desktop layout classes on mobile */
    .desktop-half-left,
    .desktop-half-right,
    .desktop-half-center,
    .desktop-full {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Adjust container paddings */
    .container-fluid,
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Make row have no margins on mobile */
    .row {
		margin-left: -10px;
        margin-right: -10px;
    }
    
    /* Make all images and videos scale to full width */
    .progressive-image-main,
    .progressive-image-placeholder,
    video.full-width-img {
        width: 100% !important;
        height: auto;
    }
    
    /* Adjust the gallery's column layout */
    #photoGallery {
        display: block;
    }
    
    /* Adjust spacing between items */
    .col-12 {
        margin-bottom: 2rem;
    }
    
    /* Make full-width wrappers truly full width */
    .full-width-wrapper {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    
    /* Adjust the button positioning for better mobile experience */
    .like-button,
    .share-buttons,
    .see-more-btn {
        bottom: -40px;
    }
    
    /* Increase tap target sizes */
    .like-button,
    .share-button,
    .see-more-btn {
        height: 44px;
        width: auto;
        padding: 0 15px;
    }
    
    /* Adjust container margins to accommodate buttons */
    .img-container,
    .full-width-img-container {
        margin-bottom: 60px;
    }
	.share-buttons,
    .like-button {
        position: absolute;
        bottom: -45px;
    }

    .share-buttons {
        left: 10px;
    }

    .like-button {
        right: 10px;
    }
    
    .img-container,
    .full-width-img-container {
        min-height: 200px;
    }
    
    .progressive-image-container,
    .progressive-image-placeholder,
    .progressive-image-main,
    .placeholder {
        min-height: 180px;
    }
    
    /* Ensure pseudo-album title and description are properly displayed on mobile */
    .pseudo-album-header {
        padding: 25px 15px;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .pseudo-album-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    
    .pseudo-album-description {
        font-size: 14px;
        max-width: 100%;
    }
}

/* For very small screens */
@media (max-width: 360px) {
    /* Make buttons more compact */
    .like-button,
    .share-button {
        font-size: 12px;
    }
    
    /* Stack buttons if needed */
    .share-buttons,
    .like-button {
        display: flex;
        align-items: center;
    }
}

/* For larger screens */
@media (min-width: 992px) {
    .img-container,
    .full-width-img-container {
        min-height: 400px;
    }
    
    .progressive-image-container,
    .progressive-image-placeholder,
    .progressive-image-main,
    .placeholder {
        min-height: 350px;
    }
}

/* Ensure images maintain aspect ratio once loaded */
.progressive-image-main.loaded,
.progressive-image-main.loaded ~ .progressive-image-placeholder {
    min-height: 0;
    height: auto;
    object-fit: contain;
}

/* Reset container heights once image is loaded */
.img-container:has(.progressive-image-main.loaded),
.full-width-img-container:has(.progressive-image-main.loaded) {
    min-height: auto;
}

/* For browsers that don't support :has() */
.progressive-image-main.loaded {
    min-height: auto;
}

/* ============================================================================
   Gallery image fit — VARIANT B (natural aspect, no crop, no layout shift).
   The tiny LQIP placeholder is the SAME image at 30px, so it carries the real
   aspect ratio. We let it drive the card height (position: relative) and overlay
   the full image absolutely on top — so the loading box always matches the final
   image exactly: placeholder fills the parent, no fixed 3:2 box, no min-height
   mismatch, no jump on load. !important is used only to beat the older :has()/
   media-query rules above. Scoped to .progressive-image-container, so the photo
   page's main image and <video> grid items are NOT affected.
   ============================================================================ */
/* SCOPED to grid cards only (.img-container / .full-width-img-container). The
   photo-detail main image also uses .progressive-image-container but lives inside
   .main-image-wrapper — it must keep its own CSS (centered, max-height: 80vh,
   object-fit: contain), so it is intentionally NOT matched here. */
.img-container .progressive-image-container,
.full-width-img-container .progressive-image-container {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;   /* drop the fixed 3:2 aspect box */
    overflow: hidden;
}
/* The LQIP placeholder defines the box height = real image aspect ratio. */
.img-container .progressive-image-placeholder,
.full-width-img-container .progressive-image-placeholder {
    position: relative !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain;
}
/* The full image overlays the placeholder box and fills it (same aspect → no crop).
   :not(.video) — videos share the .progressive-image-main class but live in
   .video-container, never get a .loaded class, and must keep their own sizing;
   without this they'd stay opacity:0 and render black. */
.img-container .progressive-image-main:not(.video),
.full-width-img-container .progressive-image-main:not(.video) {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}
.img-container .progressive-image-main:not(.video).loaded,
.full-width-img-container .progressive-image-main:not(.video).loaded {
    opacity: 1;
}
/* Keep the placeholder occupying its height (it's the size driver) but hidden. */
.img-container .progressive-image-main:not(.video).loaded ~ .progressive-image-placeholder,
.full-width-img-container .progressive-image-main:not(.video).loaded ~ .progressive-image-placeholder {
    opacity: 0;
}
/* Cards/spinners no longer impose a fixed height — the image defines it. */
.img-container { min-height: 0 !important; }
.img-container .placeholder { min-height: 0 !important; }

/* GIF autoplay properties */
.gif-image {
    will-change: transform;
    transition: opacity 0.3s ease;
}

/* Double-tap/click highlight effect */
.img-click-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    animation: clickEffect 0.5s ease-out;
}

@keyframes clickEffect {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

/* Make videos respect the layout classes just like images */
.desktop-half-left video.full-width-img,
.desktop-half-right video.full-width-img,
.desktop-half-center video.full-width-img {
    width: 100%;
    height: auto;
}

.desktop-half-left {
    width: 50%;
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.desktop-half-right {
    width: 50%;
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.desktop-half-center {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Ensure video indicators are positioned properly in all layouts */
.full-width-img-container {
    position: relative;
}

.full-width-img-container .video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Video container */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #000;
    margin-bottom: 55px; /* Match other containers */
    height: auto; /* Allow height to adjust based on content */
}

.video-container video {
    width: 100%;
    display: block;
    height: auto;
    min-height: 0;
}

/* Elegant Menu Styling with Muted Colors */
/* Navbar styling */
.navbar {
    padding: 12px 0;
    background-color: var(--menu-bg);
    border-bottom: 1px solid var(--menu-border);
    box-shadow: 0 1px 3px var(--menu-shadow);
}

.navbar-brand {
    margin: 0 auto;
}

.navbar-toggler {
    border: none;
    padding: 8px;
    color: var(--menu-text);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.navbar-toggler:hover {
    opacity: 1;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Offcanvas sidebar styling */
.offcanvas {
    max-width: 300px;
    background-color: var(--menu-bg);
    border-left: 1px solid var(--menu-border);
}

.offcanvas-header {
    border-bottom: 1px solid var(--menu-border);
    padding: 16px;
}

.offcanvas-title {
    font-weight: 500;
    color: var(--menu-text);
    font-size: 16px;
}

/* Icon-only home button in the menu header */
.offcanvas-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--menu-text);
    font-size: 20px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.offcanvas-home-link:hover {
    background-color: var(--menu-hover);
    color: var(--menu-text);
}

.offcanvas-home-link.active {
    background-color: var(--menu-active);
}

/* Header brand logo (responsive — smaller on mobile so it doesn't dominate the navbar). */
.navbar-brand .site-logo { max-height: 50px; width: auto; }
@media (max-width: 767px) {
    .navbar-brand .site-logo { max-height: 34px; }
    /* Slimmer off-canvas menu header on mobile. */
    .offcanvas-header { padding: 8px 12px; }
    .offcanvas-home-link { width: 34px; height: 34px; font-size: 17px; }
}

.btn-close {
    opacity: 0.6;
}

.btn-close:hover {
    opacity: 0.8;
}

/* Navigation menu items */
.navbar-nav .nav-item {
    margin-bottom: 2px;
}

.navbar-nav .btn {
    text-align: left;
    border-radius: 8px;
    font-weight: 400;
    color: var(--menu-text);
    padding: 10px 12px;
    transition: background-color 0.2s;
    border: none;
    font-size: 14px;
}

.navbar-nav .btn-light {
    background-color: transparent;
}

.navbar-nav .btn-light:hover {
    background-color: var(--menu-hover);
}

.navbar-nav .btn-warning {
    background-color: var(--menu-active);
    color: var(--menu-text);
    font-weight: 500;
}

.navbar-nav .btn-success {
    background-color: #0095F6 !important; /* Instagram blue */
    border-color: #0095F6 !important;
    color: white !important;
    font-weight: 500;
}

.navbar-nav .btn-success:hover {
    background-color: #A99989; /* Slightly darker taupe */
}

/* Badge styling */
.badge {
    background-color: var(--menu-count) !important;
    font-weight: 400;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 10px;
}

/* Submenu toggle button */
.menu-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);  /* Subtle background for better visibility */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: rgba(0, 0, 0, 0.1);  /* Darker on hover */
    transform: scale(1.1);  /* Slight scale effect */
}

/* Make chevron more visible */
.menu-toggle i {
    color: #555;  /* Darker color for better contrast */
    font-size: 16px;  /* Larger icon */
    transition: all 0.3s ease;
}

/* Pulsing animation to indicate expandability */
@keyframes pulseChevron {
    0% { transform: translateY(0); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* Chevron stays calm on load (no pulse) */
.menu-toggle[aria-expanded="false"] i {
    animation: none;
}

/* Remove animation on hover to avoid confusion */
.menu-toggle:hover i {
    animation: none;
}

/* Smooth rotation for better UX */
.menu-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.menu-toggle[aria-expanded="false"] i {
    transform: rotate(0deg);
}

/* Submenus */
.navbar-nav .list-unstyled {
    padding-left: 12px;
}

.navbar-nav .list-unstyled .btn {
    font-size: 13px;
    padding: 8px 12px;
}


/* Menu toggle button when it's the full-width expander */
.navbar-nav .btn.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Ensure the chevron icon stays on the right side */
.navbar-nav .btn.menu-toggle .bi-chevron-down {
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* Rotate chevron when expanded */
.navbar-nav .btn.menu-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Ensure badge stays properly positioned when chevron is present */
.navbar-nav .btn.menu-toggle .badge {
    margin-right: 8px;
}

/* Ensure badge stays properly positioned when chevron is present */
.navbar-nav .btn.menu-toggle .badge {
    margin-left: 8px;
    margin-right: 8px;
}

/* Card styling */
.card {
    border: 1px solid var(--ig-border);
    border-radius: 4px;
    background-color: var(--ig-white);
}

.card-title {
    color: var(--ig-text-primary);
}

.card-text {
    color: var(--ig-text-secondary);
}

/* Button styling */
.btn-success {
    background-color: var(--accent-dusty-blue);
    border-color: var(--accent-dusty-blue);
}

.btn-success:hover {
    background-color: #91A5B8; /* Slightly darker dusty blue */
    border-color: #91A5B8;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ig-text-primary);
}

p {
    color: var(--ig-text-secondary);
}

.gif-image.loaded {
    display: inline-block !important;
    opacity: 1 !important;
    animation: none !important;
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

/* New category styling in menu */
.navbar-nav .category-header {
    color: var(--accent-lavender);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 16px 12px 8px;
    margin-top: 8px;
    opacity: 0.9;
}

/* Alert styling */
.alert-warning {
    background-color: rgba(var(--accent-blush), 0.15);
    color: var(--ig-text-primary);
    border-color: rgba(var(--accent-blush), 0.3);
}

/* Custom page title styling */
.page-title {
    color: var(--ig-text-primary);
    font-weight: 500;
    letter-spacing: -0.5px;
    text-align: center;
    margin: 20px 0;
}

.page-description {
    color: var(--ig-text-secondary);
    font-size: 15px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

.navbar-nav .btn-success:hover,
.card .btn-success:hover,
.offcanvas .btn-success:hover {
   background-color: #E23B3B !important; /* Instagram gradient purple */
   border-color: #E23B3B !important;
}

/* WhatsApp button */
.btn-whatsapp,
.card .btn-secondary[href*="wa.me"] {
   background-color: #E23B3B !important; /* Instagram gradient purple */
   border-color: #E23B3B !important;
   color: white !important;
}

.btn-whatsapp:hover,
.card .btn-secondary[href*="wa.me"]:hover {
   background-color: #22C35D !important;
   border-color: #22C35D !important;
}

/* Online shop button */
.btn-shop,
.card .btn-secondary[href*="shop."] {
   background-color: #E23B3B !important; /* Instagram gradient purple */
   border-color: #E23B3B !important;
   color: white !important;
}

.btn-shop:hover,
.card .btn-secondary[href*="shop."]:hover {
   background-color: #375499 !important;
   border-color: #375499 !important;
}

/* Email/contact button */
.btn-email,
.card .btn-secondary[href*="cerere_oferta"] {
   background-color: #E23B3B !important; /* Instagram gradient purple */
   border-color: #E23B3B !important;
   color: white !important;
}

.btn-email:hover,
.card .btn-secondary[href*="cerere_oferta"]:hover {
   background-color: #4B45C6 !important;
   border-color: #4B45C6 !important;
}

/* Custom video controls - hide progress bar, keep only volume and fullscreen */
video::-webkit-media-controls-panel {
  display: flex !important;
  justify-content: flex-end !important;
}

video::-webkit-media-controls-timeline-container,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-rewind-button {
  display: none !important;
}

/* Ensure only volume and fullscreen are visible */
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button {
  display: flex !important;
}

/* Firefox specific rules */
video::-moz-range-track {
  display: none !important;
}

/* Hide default controls and use our own play button */
.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

/* Make sure indicator works properly with this change */
.video-indicator {
  z-index: 10;
}

.reload-image-btn {
    opacity: 0.7;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 6px;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reload-image-btn:hover {
    opacity: 1;
}

.reload-image-btn i {
    font-size: 16px;
}

.progressive-image-main.error ~ .progressive-image-placeholder {
    opacity: 1 !important;
}

/* Random Image Button Styling */
.random-image-btn {
    background: linear-gradient(135deg, #F4B5A6 0%, #E88A8A 100%) !important;
    animation: none !important;
    border: none !important;
    color: var(--ig-text-primary) !important;
    font-weight: 500 !important;
    padding: 12px !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(232,138,138,0.30) !important;
}

.navbar-nav .cere-oferta-button {
    background: linear-gradient(135deg, #E23B3B 0%, #C81E2D 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(211,47,47,0.30) !important;
    transition: all 0.25s ease !important;
}

.navbar-nav .cere-oferta-button:hover {
    background: linear-gradient(135deg, #C42B2B 0%, #9E1B1B 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(211,47,47,0.42) !important;
}

/* Hover effect */
.random-image-btn:hover {
    background: linear-gradient(135deg, #F0A593 0%, #E07A7A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(224,122,122,0.42) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

/* Pulsing animation to draw attention */
.pulse-animation {
    animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
	50% {
        transform: scale(1.03);
        box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
}

/* Floating shuffle icon animation */
.random-image-btn i {
    animation: none;
    display: inline-block;
    margin-right: 8px;
}

@keyframes shuffleIcon {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* Background gradient animation */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Consistent button styling for contact card buttons */
.card .btn-secondary {
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* WhatsApp button */
.card .btn-secondary[href*="wa.me"] {
    background-color: #E23B3B !important; /* Instagram gradient purple */
    color: white !important;
}

.card .btn-secondary[href*="wa.me"]:hover {
    background-color: #22C35D !important; /* WhatsApp green */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Cerere de Ofertă button */
.card .btn-secondary[href*="ofertare."] {
    background-color: #E23B3B !important; /* Instagram gradient purple */
    color: white !important;
}

.card .btn-secondary[href*="ofertare."]:hover {
    background-color: #C81E2D !important; /* Instagram pink/red */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Online Shop button */
.card .btn-secondary[href*="shop."] {
    background-color: #E23B3B !important; /* Instagram gradient purple */
    color: white !important;
}

.card .btn-secondary[href*="shop."]:hover {
    background-color: #FF7A6B !important; /* Instagram amber/gold */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Styles for image titles and subtitles */
.image-text-container {
    padding: 12px;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid var(--ig-border);
}

.image-title {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--ig-text-primary);
    font-size: 16px;
}

.image-subtitle {
    color: var(--ig-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

/* Adjust button positioning when there's text */
.image-text-container ~ .like-button,
.image-text-container ~ .share-buttons,
.image-text-container ~ .see-more-btn {
    bottom: -60px;
}

.img-container:has(.image-text-container),
.full-width-img-container:has(.image-text-container) {
    margin-bottom: 70px;
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    .image-text-container {
        padding: 8px;
    }
    
    .image-title {
        font-size: 13px;
    }
    
    .image-subtitle {
        font-size: 11px;
    }
    
    .img-container:has(.image-text-container),
    .full-width-img-container:has(.image-text-container) {
        margin-bottom: 70px;
    }
    
    .image-text-container ~ .like-button,
    .image-text-container ~ .share-buttons,
    .image-text-container ~ .see-more-btn {
        bottom: -65px;
    }

    .image-text-container ~ .image-actions {
        bottom: -65px;
    }
}

/* Fix placeholder image proportions and visibility */
.progressive-image-placeholder {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background-color: var(--ig-background);
}

/* Only hide placeholder when main image is fully loaded */
.progressive-image-main.loaded ~ .progressive-image-placeholder {
    opacity: 0 !important;
}

/* Keep placeholder visible when main image has an error */
.progressive-image-main.error ~ .progressive-image-placeholder {
    opacity: 1 !important;
}

/* Sticky Search Functionality - Updated with proper centering */
.main-search-section {
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 20px 0 20px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--ig-border);
}


/* Search Results Page Specific Styles */
.search-results-header {
    text-align: center;
    padding: 20px 0;
}

.search-results-header .search-meta {
    font-size: 14px;
    color: var(--ig-text-secondary);
    margin-bottom: 10px;
}

.search-results-header .generated-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ig-text-primary);
    margin-bottom: 15px;
    line-height: 1.3;
}

.search-results-header .generated-description {
    font-size: 16px;
    color: var(--ig-text-secondary);
    max-width: 800px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.search-results-header .keywords-display {
    margin-top: 15px;
}

.search-results-header .keywords-display small {
    font-size: 12px;
    color: var(--ig-text-secondary);
}

/* Mobile optimizations - maintain width proportions and centering */
@media (max-width: 768px) {
    .main-search-section {
        position: relative;
        z-index: 10;
        padding: 12px 0;
    }
    


    
    .search-results-header .generated-title {
        font-size: 24px;
    }
    
    .search-results-header .generated-description {
        font-size: 15px;
        padding: 0 15px;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {

    
    .search-results-header .generated-title {
        font-size: 20px;
    }
    
    .search-results-header .generated-description {
        font-size: 14px;
    }
}

/* Additional centering support for the grid layout */
.main-search-section .row {
    justify-content: center;
}

.main-search-section .col-md-8.col-lg-6 {
    display: flex;
    justify-content: center;
}

.main-search-container {
    position: relative;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-input-wrapper:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.search-input-wrapper:focus-within {
    box-shadow: 0 12px 35px rgba(211, 47, 47, 0.2);
    transform: translateY(-2px);
}

.main-search-input {
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    flex: 1;
    background: transparent;
    color: var(--ig-text-primary);
    outline: none;
    box-shadow: none;
}

/* --- Search autocomplete dropdown --- */
.mb-ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 6px auto 0;
    max-width: 600px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 1080;
    text-align: left;
}
.mb-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 15px;
    color: var(--ig-text-primary);
}
.mb-ac-item + .mb-ac-item { border-top: 1px solid #f4f4f4; }
.mb-ac-item.active,
.mb-ac-item:hover { background: #fbeaec; }
.mb-ac-ico { color: var(--brand-red, #C81E2D); font-size: 14px; opacity: .8; }
.mb-ac-kw { flex: 1; }
.mb-ac-count {
    font-size: 12px;
    color: #9aa0a6;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 1px 8px;
}

/* --- Search chips (empty-state "did you mean" + popular searches) --- */
.search-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.search-chip {
    border: 1px solid #e3e3e3;
    background: #fff;
    color: var(--ig-text-primary, #222);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 13.5px;
    line-height: 1.4;
    cursor: pointer;
    transition: all .18s ease;
}
.search-chip:hover {
    border-color: var(--brand-red, #C81E2D);
    color: var(--brand-red, #C81E2D);
    background: #fff;
    transform: translateY(-1px);
}

/* Mobile optimization for search input */
@media (max-width: 768px) {
    .main-search-input {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    .typewriter-placeholder {
        font-size: 14px;
        left: 15px;
    }
    
    .search-input-wrapper {
        max-width: 100%;
        margin: 0 10px;
    }
    
    .main-search-section {
        padding: 12px 0;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .main-search-input {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .typewriter-placeholder {
        font-size: 13px;
        left: 12px;
    }
}

.main-search-input::placeholder {
    color: transparent;
}

.main-search-input:focus::placeholder {
    color: transparent;
}

.typewriter-placeholder {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ig-text-secondary);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.main-search-input:focus + .typewriter-placeholder,
.main-search-input:not(:placeholder-shown) + .typewriter-placeholder {
    opacity: 0;
}

.search-submit-btn {
    border: none;
    background: linear-gradient(135deg, #E23B3B, #C81E2D);
    padding: 12px 25px;
    border-radius: 0 50px 50px 0;
    transition: all 0.3s ease;
    box-shadow: none;
}

/* Mobile optimization for submit button */
@media (max-width: 768px) {
    .search-submit-btn {
        padding: 8px 18px;
    }
    
    .search-submit-btn i {
        font-size: 16px;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .search-submit-btn {
        padding: 6px 15px;
    }
    
    .search-submit-btn i {
        font-size: 14px;
    }
}

.search-submit-btn:hover {
    background: linear-gradient(135deg, #C42B2B, #9E1B1B);
    transform: scale(1.05);
}

.search-submit-btn i {
    font-size: 18px;
    color: white;
}

/* Typewriter Animation */
.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--ig-text-primary);
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Ce caută lumea Button Styling */
.ce-cauta-lumea-btn {
    background: linear-gradient(135deg, #F4B5A6 0%, #E88A8A 100%) !important;
    animation: none !important;
    border: none !important;
    color: var(--ig-text-primary) !important;
    font-weight: 500 !important;
    padding: 12px !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(232,138,138,0.30) !important;
}

/* Hover effect */
.ce-cauta-lumea-btn:hover {
    background: linear-gradient(135deg, #F0A593 0%, #E07A7A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(224,122,122,0.42) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

/* Icon */
.ce-cauta-lumea-btn i {
    animation: none;
    display: inline-block;
    margin-right: 8px;
}

@keyframes peopleIcon {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Ultimele Poze Button Styling */
.ultimele-poze-btn {
    background: linear-gradient(135deg, #F4B5A6 0%, #E88A8A 100%) !important;
    animation: none !important;
    border: none !important;
    color: var(--ig-text-primary) !important;
    font-weight: 500 !important;
    padding: 12px !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(232,138,138,0.30) !important;
}

.ultimele-poze-btn:hover {
    background: linear-gradient(135deg, #F0A593 0%, #E07A7A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(224,122,122,0.42) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

.ultimele-poze-btn i {
    animation: none;
    display: inline-block;
    margin-right: 8px;
}

@keyframes clockIcon {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* ---------------------------------------------------------------------------
   Menu feature buttons — ONE coherent theme: a soft, light gradient of reds
   from the same family as the bold red CTA gradient (lighter / calmer). The
   bold red gradient is reserved for the primary "Cere o ofertă" CTA, so the
   feature buttons stay in-family without competing with it. No borders.
   This overrides the old per-button coral gradient and the Bootstrap-blue
   fallback that "Cuvinte cheie" / "Favoritele mele" previously had.
   --------------------------------------------------------------------------- */
.navbar-nav .random-image-btn,
.navbar-nav .ce-cauta-lumea-btn,
.navbar-nav .ultimele-poze-btn,
.navbar-nav .cuvinte-cheie-btn,
.navbar-nav .favorite-page-btn {
    background: #fff !important;
    border: 1px solid var(--ig-border) !important;
    color: var(--ig-text-primary) !important;
    font-weight: 600 !important;
    padding: 12px !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
/* Icons carry the brand-red accent; the offer CTA stays the only fully-coloured button. */
.navbar-nav .random-image-btn i,
.navbar-nav .ce-cauta-lumea-btn i,
.navbar-nav .ultimele-poze-btn i,
.navbar-nav .cuvinte-cheie-btn i,
.navbar-nav .favorite-page-btn i {
    color: var(--brand-red) !important;
}
.navbar-nav .random-image-btn:hover,
.navbar-nav .ce-cauta-lumea-btn:hover,
.navbar-nav .ultimele-poze-btn:hover,
.navbar-nav .cuvinte-cheie-btn:hover,
.navbar-nav .favorite-page-btn:hover {
    background: #fff !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-red) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(200, 30, 45, 0.14) !important;
}
.navbar-nav .favorite-page-btn .fav-count {
    background-color: var(--brand-red) !important;
    color: #fff !important;
}

/* Popular Searches — refined cards, in the site's calm tone. */
.search-term-card {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 15px 18px;
    background: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    text-decoration: none;
    color: var(--ig-text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.search-term-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-dusty-blue);
    box-shadow: 0 6px 18px rgba(160, 181, 200, 0.22);
    color: var(--ig-text-primary);
}
.search-term-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(160, 181, 200, 0.15);
    color: var(--accent-dusty-blue);
    font-size: 1rem;
}
.search-term-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.search-term-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ig-text-primary);
    word-break: break-word;
}
/* "Ultima dată căutat" — small and discreet. */
.search-term-date {
    font-size: 0.7rem;
    color: var(--ig-text-secondary);
    margin-top: 3px;
    opacity: 0.85;
}
.search-term-date i { font-size: 0.65rem; }

@media (max-width: 768px) {
    .search-term-card { padding: 13px 15px; }
    .search-term-text { font-size: 0.95rem; }
}

/* Hide the search form from sidebar when on main page */
.main-search-section ~ * .offcanvas .search-form {
    display: none;
}


/* Photo page specific styles */
.main-image-container {
    position: relative;
    width: 100%;
    background-color: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 8px; /* match the image radius */
    overflow: visible;  /* keep — the action bar sits just below the container */
    margin-bottom: 70px;
}

/* Once the image (or video) has loaded, shrink the framed box to the image so there
   are no background bands around portrait/smaller photos; keep it centred on the page.
   While loading it stays full-width so the spinner has room. */
.main-image-container:has(.progressive-image-main.loaded, .main-video) {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* After load the wrapper must shrink to the image too, otherwise its 100% width keeps
   the bands and breaks the container's fit-content sizing. */
.main-image-container:has(.progressive-image-main.loaded, .main-video) .main-image-wrapper {
    width: auto;
}

.main-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 0;
    background-color: var(--ig-background);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px; /* clip the image corners to match the frame */
}
/* Keep a loading area only WHILE the image hasn't loaded (so the spinner has room);
   once loaded, the wrapper hugs the image — no oversized gray box. Videos hug too. */
.main-image-wrapper:not(:has(.progressive-image-main.loaded, .main-video)) {
    min-height: 50vh;
}
/* The container hugs the image so the flex wrapper centers it (no left-align gap),
   and the image keeps its natural size capped at 80vh / full width (no letterbox). */
.main-image-wrapper .progressive-image-container {
    width: auto;
    max-width: 100%;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
}
.main-image-wrapper .progressive-image-main.main-image {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.main-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main-image.loaded {
    opacity: 1;
}

/* "Informații suplimentare" card — compact, much smaller type than the CTA card. */
.photo-metadata .card-body { padding: .85rem 1rem; }
.photo-metadata .card-title { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; }
.photo-metadata .card-text { font-size: .78rem; line-height: 1.45; margin-bottom: .4rem; }
.photo-metadata .card-text strong { font-weight: 600; }
.photo-metadata .keyword-tag { font-size: .72rem; padding: 2px 8px; }

.main-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
    background-color: #000;
}

.nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1.5rem 0;
    gap: 10px;
}

.nav-buttons button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ig-text-primary);
    transition: all 0.2s ease;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.nav-buttons button i {
    font-size: 1.15rem;
    line-height: 1;
}

.nav-buttons button:hover {
    border-color: #D32F2F;
    color: #D32F2F;
    background-color: #fdeeee;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.12);
}

.nav-buttons button:active {
    transform: translateY(0) scale(0.98);
}

/* Central "Înapoi la album" = primary action, in the site's mov→roz CTA gradient. */
.nav-buttons .nav-album {
    background: linear-gradient(135deg, #E23B3B, #C81E2D);
    border-color: transparent;
    color: #fff;
}
.nav-buttons .nav-album:hover {
    color: #fff;
    background: linear-gradient(135deg, #C42B2B, #9E1B1B);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(211, 47, 47, 0.25);
}

@media (max-width: 767px) {
    .nav-buttons {
        flex-direction: column;
    }
    
    .nav-buttons button {
        width: 100%;
        margin-bottom: 8px;
    }
}


/* Fix video container styling */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #000;
    margin-bottom: 0 !important;
    height: auto; /* Allow natural height */
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    background-color: #000;
    object-fit: contain; /* Changed from cover to contain */
    cursor: pointer;
    min-height: 200px; /* Minimum height for videos */
}

/* Override the progressive container for videos */
.video-container .progressive-image-container {
    position: relative;
    width: 100%;
    height: auto; /* Remove fixed aspect ratio for videos */
    padding-bottom: 0; /* Remove padding-bottom for videos */
    overflow: visible;
}

/* Ensure video elements don't inherit image styling */
.progressive-image-main.video,
video.progressive-image-main {
    position: relative !important; /* Override absolute positioning */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: #000 !important;
    min-height: 200px;
}

/* Full width video styling */
video.full-width-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Changed from cover to contain */
    background-color: #000;
    min-height: 300px; /* Larger minimum for full-width videos */
}

/* Desktop layout video fixes */
@media (min-width: 768px) {
    .desktop-half-left video.full-width-img,
    .desktop-half-right video.full-width-img,
    .desktop-half-center video.full-width-img {
        width: 100%;
        height: auto;
        min-height: 250px;
    }
    
    .video-container video {
        min-height: 250px;
    }
}

/* Mobile video fixes */
@media (max-width: 767px) {
    .video-container video,
    video.full-width-img,
    video.progressive-image-main {
        min-height: 180px;
        width: 100% !important;
    }
}

/* Navbar search styling */
.navbar-search-form {
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    border: 1px solid var(--ig-border);
    overflow: hidden;
    transition: all 0.3s ease;
    width: 250px;
}

.navbar-search-wrapper:focus-within {
    border-color: var(--accent-dusty-blue);
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.15);
}

.navbar-search-input {
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    flex: 1;
    background: transparent;
    color: var(--ig-text-primary);
    outline: none;
    box-shadow: none;
    width: 100%;
}

.navbar-search-input::placeholder {
    color: var(--ig-text-secondary);
    font-size: 13px;
}

.navbar-search-btn {
    border: none;
    background: transparent;
    padding: 8px 12px;
    transition: all 0.2s ease;
    color: var(--ig-text-secondary);
}

.navbar-search-btn:hover {
    color: var(--accent-dusty-blue);
}

.navbar-search-btn i {
    font-size: 16px;
}

/* Hide navbar search on mobile, show burger menu */
@media (max-width: 991px) {
    .navbar-search-form {
        display: none;
    }
}

/* Menu Search Section Styling */
.menu-search-section {

        padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

.menu-search-section .search-input-wrapper {
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--menu-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.menu-search-section .search-input-wrapper:hover,
.menu-search-section .search-input-wrapper:focus-within {
    transform: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.menu-search-section .main-search-input {
    padding: 10px 15px;
    font-size: 14px;
}

.menu-search-section .typewriter-placeholder {
    font-size: 14px;
    left: 15px;
}

.menu-search-section .search-submit-btn {
    padding: 10px 16px;
    background: transparent !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
}

.menu-search-section .search-submit-btn:hover {
    background: var(--menu-hover) !important;
    transform: none !important;
}

.menu-search-section .search-submit-btn i {
    font-size: 16px;
    color: var(--ig-text-secondary) !important;
}

/* Keyword Tags Styling */
.keyword-tags-container {
    padding: 15px;
    background-color: var(--ig-background);
    border-radius: 8px;
    margin: 15px 0;
}

.keyword-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ig-text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.keyword-tags-label i {
    color: var(--accent-dusty-blue);
}

.keyword-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--ig-white);
    border: 1px solid var(--ig-border);
    border-radius: 16px;
    font-size: 13px;
    color: var(--ig-text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.keyword-tag:hover {
    background-color: var(--accent-dusty-blue);
    color: white;
    border-color: var(--accent-dusty-blue);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Cuvinte Cheie Button Styling */
.cuvinte-cheie-btn {
    background: linear-gradient(135deg, #F4B5A6 0%, #E88A8A 100%) !important;
    animation: none !important;
    border: none !important;
    color: var(--ig-text-primary) !important;
    font-weight: 500 !important;
    padding: 12px !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(232,138,138,0.30) !important;
}

.cuvinte-cheie-btn:hover {
    background: linear-gradient(135deg, #F0A593 0%, #E07A7A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(224,122,122,0.42) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

.cuvinte-cheie-btn i {
    animation: none;
    display: inline-block;
    margin-right: 8px;
}

@keyframes tagsIcon {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* Search Keywords Display - Same styling as photo page keywords */
.search-keywords-container {
    padding: 15px;
    background-color: var(--ig-background);
    border-radius: 8px;
    margin: 15px 0;
}

.search-keywords-container .keyword-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ig-text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-keywords-container .keyword-tags-label i {
    color: var(--accent-dusty-blue);
}

.search-keywords-container .keyword-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Search Loading Animation */
.search-loading-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 248, 248, 0.98);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.search-loading-content {
    text-align: center;
    max-width: 500px;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-loading-icon {
    font-size: 4rem;
    color: #E23B3B;
    margin-bottom: 20px;
    animation: searchPulse 1.5s ease-in-out infinite;
}

.search-loading-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ig-text-primary);
    margin-bottom: 15px;
}

.search-loading-step {
    font-size: 1rem;
    color: var(--ig-text-secondary);
    margin-bottom: 25px;
    min-height: 24px;
    transition: opacity 0.3s ease;
}

.search-progress-bar {
    width: 100%;
    height: 6px;
    background: #E8E8E8;
    border-radius: 3px;
    overflow: hidden;
}

.search-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #E23B3B, #C81E2D, #FF7A6B);
    background-size: 200% 100%;
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
    animation: gradientSlide 2s ease infinite;
}

@keyframes searchPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes gradientSlide {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Mobile optimizations for loading animation */
@media (max-width: 768px) {
    .search-loading-content {
        padding: 30px 20px;
        margin: 20px;
        max-width: 90%;
    }
    
    .search-loading-icon {
        font-size: 3rem;
    }
    
    .search-loading-title {
        font-size: 1.25rem;
    }
    
    .search-loading-step {
        font-size: 0.9rem;
    }
}

/* Search Loading Animation - Instagram Style (Borderless) */
.search-loading-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 248, 248, 0.98);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.search-loading-content {
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 40px;
    background: transparent;
    border-radius: 0;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image Slideshow Container - No Borders */
.search-loading-slideshow {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0 auto 20px;
    border-radius: 0;
    overflow: hidden;
    background: var(--ig-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-loading-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background: var(--ig-white);
}

.search-loading-image.active {
    opacity: 1;
    z-index: 2;
}

.search-loading-image.fade-out {
    opacity: 0;
    z-index: 1;
}

/* Image description below slideshow - No borders */
.search-loading-image-info {
    padding: 15px 0;
    margin-bottom: 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-loading-image-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ig-text-secondary);
    margin: 0;
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: opacity 0.3s ease;
}

/* Loading Text */
.search-loading-text {
    margin-bottom: 25px;
}

.search-loading-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ig-text-primary);
    margin-bottom: 10px;
}

.search-loading-step {
    font-size: 1rem;
    color: var(--ig-text-secondary);
    margin-bottom: 20px;
    min-height: 24px;
    transition: opacity 0.3s ease;
}

/* Progress Bar */
.search-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--ig-border);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.search-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #E23B3B, #C81E2D, #FF7A6B);
    background-size: 200% 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
    animation: gradientSlide 2s ease infinite;
}

@keyframes gradientSlide {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Loading spinner in slideshow while images load */
.search-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.search-loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--accent-dusty-blue);
}

/* Fade effect for image info */
.search-loading-image-info.updating .search-loading-image-title {
    opacity: 0;
}

/* Mobile optimizations for loading animation */
@media (max-width: 768px) {
    .search-loading-slideshow {
        height: 300px;
    }
    
    .search-loading-content {
        max-width: 95%;
        padding: 30px 20px;
    }
    
    .search-loading-title {
        font-size: 1.3rem;
    }
    
    .search-loading-step {
        font-size: 0.95rem;
    }
    
    .search-loading-image-title {
        font-size: 0.85rem;
    }
    
    .search-loading-image-info {
        min-height: 50px;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .search-loading-slideshow {
        height: 250px;
    }
    
    .search-loading-content {
        padding: 25px 15px;
    }
    
    .search-loading-title {
        font-size: 1.2rem;
    }
    
    .search-loading-step {
        font-size: 0.9rem;
    }
    
    .search-loading-image-title {
        font-size: 0.8rem;
    }
    
    .search-loading-image-info {
        min-height: 45px;
        padding: 10px 0;
    }
}