/* ===================================
   Gallery Base CSS - Client-Facing Design System
   PhotoReflect Gallery
   Version: 1.0

   This file contains:
   - CSS Variables (inherits brand colors from base.css concept)
   - Reset & Typography
   - Core Layout Components
   - Utility Classes

   For photographer client galleries (public-facing pages)
   =================================== */

/* === CSS VARIABLES === */
:root {
    /* =============================================
       PhotoReflect Brand Colors
       =============================================
       Original brand colors:
       - Purple (Labtricity): #9B73B2
       - Red:                 #E02427
       - Cyan:                #55C5D0
       - Lime (PhotoReflect): #BFD849
       - Gold:                #EEB936
       - Orange:              #F4773B

       These are muted below for a subtle, professional
       look similar to Pixieset and ShootProof.
       ============================================= */

    /* Primary Colors - Brand Green */
    --color-primary: #9EC186;
    --color-primary-hover: #8DB376;
    --color-primary-light: #F4F8F0;
    --color-primary-dark: #6E9556;

    /* Secondary Colors - Brand Cyan */
    --color-secondary: #8DCCE2;
    --color-secondary-hover: #6FBDD8;
    --color-secondary-light: #EEF7FB;
    --color-secondary-dark: #4A9BB5;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-bg: #FFFFFF;
    --color-bg-subtle: #FAFAFA;

    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    /* Text Colors */
    --color-text: #2C2C2C;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-text-inverse: #FFFFFF;

    /* Border Colors */
    --color-border: #E5E5E5;
    --color-border-light: #F0F0F0;

    /* Semantic Colors */
    --color-success: #7EA944;
    --color-success-light: #F4F8E9;
    --color-warning: #D4A53A;
    --color-warning-light: #FDF8E8;
    --color-danger: #C93A3D;
    --color-danger-light: #FCEEEE;
    --color-info: #8DCCE2;
    --color-info-light: #EEF7FB;

    /* Typography - Raleway with lining numerals enabled via font-feature-settings */
    --gallery-font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-family: var(--gallery-font);
    --font-family-heading: var(--gallery-font);

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --heading-letter-spacing: normal;
    --heading-text-transform: none;

    /* Photographer logo: one size for every surface it appears on. 56px matches
       what EventGallery and Pic-Time both used for a header logo. */
    --logo-max-height: 56px;
    --logo-max-width: 320px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 100000;
    --z-modal: 100001;
    --z-tooltip: 100002;
}


/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    /* Activate Raleway's built-in lining numerals (fixes old-style/uneven numbers) */
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    margin: 0 0 var(--space-4) 0;
    color: var(--color-text);
}

h1, .h1 { font-size: var(--font-size-4xl); }
h2, .h2 { font-size: var(--font-size-3xl); }
h3, .h3 { font-size: var(--font-size-2xl); }
h4, .h4 { font-size: var(--font-size-xl); }
h5, .h5 { font-size: var(--font-size-lg); }
h6, .h6 { font-size: var(--font-size-base); }

p {
    margin: 0 0 var(--space-4) 0;
}

a {
    color: var(--color-secondary-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}


/* === CONTAINER === */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.container-sm { max-width: 640px; }
.container-md { max-width: 960px; }
.container-lg { max-width: 1200px; }
.container-xl { max-width: 1400px; }
.container-fluid { max-width: 100%; }


/* === GALLERY HEADER (List Page) === */
.gallery-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

/* A logo is 56px against the name's 26px, so the padding tuned for text leaves a
   logo header half empty. Tighten it only when a logo is actually rendered, so a
   text header keeps its own proportions. */
.gallery-header:has(.photographer-logo-img) {
    padding: 10px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photographer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.photographer-logo:hover {
    opacity: 0.7;
}

/* Footer logo with no link -- pages that must not offer a route back to the
   photographer's site (Photo.aspx view-only / unpublished). Kill the affordance
   so it does not read as clickable. */
.photographer-logo--nolink,
.photographer-logo--nolink:hover {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

/* Photographer logo, wherever it stands in for the name text. Uploads are
   arbitrary dimensions, so every use needs a cap or the layout follows the file. */
.photographer-logo-img {
    display: block;
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
    width: auto;
    height: auto;
    object-fit: contain;
}

.photographer-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.header-nav {
    display: flex;
    gap: var(--space-6);
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text);
}


/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 20px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(158, 193, 134, 0.3);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary Button */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 1px 2px rgba(158, 193, 134, 0.3);
}

.btn-primary:hover {
    background: var(--color-secondary-dark);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(141, 204, 226, 0.4);
}

/* Secondary Button */
.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-text);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-secondary-dark);
    transform: none;
}

/* Button Sizes */
.btn-sm {
    padding: 8px 14px;
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: 16px 28px;
    font-size: var(--font-size-base);
}


/* === GALLERY HERO === */
.gallery-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.gallery-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cover of a gallery with no photos yet. */
.gallery-hero-image-empty {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center / 72px no-repeat,
        linear-gradient(135deg, var(--color-gray-400, #9CA3AF) 0%, var(--color-gray-700, #374151) 100%);
}

.gallery-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
}

.gallery-hero-content {
    width: 100%;
    padding: var(--space-8);
    color: #fff; /* Always white over photo — never use var(--color-white) which dark themes override */
    text-align: center;
}

.gallery-hero-photographer {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-4);
    opacity: 0.8;
}

/* Cover logo. Sits ABOVE .gallery-hero-photographer rather than replacing it: a dark
   logo can vanish into a dark cover, and the label always reads against the scrim.
   Tight bottom margin so the two group as one lockup above the title. */
.gallery-hero-logo {
    display: block;
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto var(--space-2);
}

.gallery-hero-cta {
    display: inline-block;
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.gallery-hero-cta:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
    text-decoration: none;
}

.scroll-anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

.gallery-hero-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3) 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.gallery-hero-meta {
    font-size: var(--font-size-lg);
    opacity: 0.9;
}

.gallery-hero-date,
.gallery-hero-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}


/* === GALLERY ACTION BAR === */
.gallery-action-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.gallery-action-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
}

.gallery-action-left,
.gallery-action-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Capped to the action-button height so a logo does not grow the sticky bar,
   which the grid offsets against via --gallery-action-bar-h. */
.gallery-action-left .photographer-logo-img {
    max-height: 34px;
    max-width: 200px;
}

.gallery-action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    text-decoration: none;
    transition: color var(--transition-fast);
    cursor: pointer;
}

.gallery-action-button:hover {
    color: var(--color-text);
}

.gallery-action-button.primary {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.gallery-action-button.primary:hover {
    color: var(--color-primary-dark);
}

/* Photographer link in action bar */
.gallery-photographer-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.gallery-photographer-link:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.gallery-photographer-link .photographer-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Icon sizing in action buttons */
.gallery-action-button svg,
.gallery-action-button i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Hide labels on small screens */
@media screen and (max-width: 600px) {
    .gallery-action-button .btn-label {
        display: none;
    }
}


/* === GALLERY CONTENT === */
.gallery-content {
    padding: 0;
}


/* === GALLERY GRID === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-8);
    padding: var(--space-4) 0;
}


/* === GALLERY CARD === */
.gallery-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-slow);
    cursor: pointer;
    text-decoration: none;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Image container with aspect ratio */
.gallery-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-gray-100);
}

.gallery-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Pixieset-style zoom on hover */
.gallery-card:hover .gallery-card-image {
    transform: scale(1.05);
}

.gallery-card-content {
    padding: var(--space-2) var(--space-2) 0 var(--space-2);
}

.gallery-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text);
    line-height: 1.25;
    min-height: calc(var(--font-size-base) * 1.25 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.gallery-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.gallery-card-date,
.gallery-card-count {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.gallery-card-date svg,
.gallery-card-date i,
.gallery-card-count svg,
.gallery-card-count i {
    width: 14px;
    height: 14px;
}

.gallery-card-lock {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(0,0,0,0.6);
    color: var(--color-white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    backdrop-filter: blur(4px);
}

.gallery-card-lock svg,
.gallery-card-lock i {
    width: 12px;
    height: 12px;
}

/* Lock badge on PhotoSetViewer gallery cards */
.ps-photo-container[data-locked="true"] .ps-photo-anchor {
    position: relative;
}
/* Blur disabled for now — enable if we want locked galleries to blur their cover
.ps-photo-container[data-locked="true"] .ps-photo-anchor img.ps-photo,
.ps-photo-container[data-locked="true"] .ps-photo-anchor div.ps-photo {
    filter: blur(6px);
    -webkit-filter: blur(6px);
}
*/
.ps-photo-container[data-locked="true"] .ps-photo-anchor::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}


/* === PASSWORD PROTECTION === */
.password-panel {
    max-width: 420px;
    margin: 100px auto;
    padding: var(--space-8);
    text-align: center;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.password-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5) auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
}

.password-icon svg,
.password-icon i {
    width: 32px;
    height: 32px;
    color: var(--color-gray-500);
}

.password-panel h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3);
}

.password-panel p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.password-input {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.password-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(158, 193, 134, 0.2);
}

.password-submit {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.password-submit:hover {
    background: var(--color-primary-hover);
}

.password-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}


/* === GALLERY NOT FOUND === */
.gallery-not-found {
    max-width: 500px;
    margin: 120px auto;
    padding: var(--space-8);
    text-align: center;
}

.gallery-not-found .not-found-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    background: var(--color-gray-100);
    border-radius: 50%;
}

.gallery-not-found .not-found-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-gray-400);
}

.gallery-not-found h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text);
}

.gallery-not-found p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: var(--line-height-normal);
}

.gallery-not-found .not-found-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.gallery-not-found .not-found-button:hover {
    background: var(--color-primary-hover);
    text-decoration: none;
    color: var(--color-white);
}

.gallery-not-found .not-found-button svg {
    width: 18px;
    height: 18px;
}

@media screen and (max-width: 480px) {
    .gallery-not-found {
        margin: var(--space-10) var(--space-4);
        padding: var(--space-6);
    }

    .gallery-not-found h2 {
        font-size: var(--font-size-xl);
    }
}


/* === GALLERY LIST HEADER === */
.gallery-list-header {
    text-align: center;
    padding: var(--space-16) var(--space-5) var(--space-10);
    background: var(--color-white);
}

.gallery-list-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.gallery-list-header p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    font-weight: var(--font-weight-light, 300);
}


/* === GALLERY LIST SEARCH ===
   Public gallery-list search box (Default.aspx). Deliberately NOT sharing the
   dashboard's .search-box rules: dashboard-galleries.css never loads on public
   pages, and its focus ring is a hardcoded blue that fights brand theming. */
.gallery-list-search {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.gallery-list-search-box {
    position: relative;
    width: 100%;
    max-width: 380px;
}

.gallery-list-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.gallery-list-search-input {
    width: 100%;
    padding: 10px 36px 10px 40px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.gallery-list-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    /* Gray-300 rather than a fixed rgba: the charcoal/dark themes remap the gray
       scale, so the ring stays visible on dark backgrounds too. */
    box-shadow: 0 0 0 3px var(--color-gray-300);
}

.gallery-list-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--color-gray-200);
    border: none;
    border-radius: 50%;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.gallery-list-search-clear:hover {
    background: var(--color-gray-300);
    color: var(--color-gray-700);
}

.gallery-list-search-clear svg {
    width: 14px;
    height: 14px;
}


/* === FOOTER === */
.gallery-footer {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: var(--space-12) 0;
    margin-top: var(--space-16);
}

.footer-content {
    text-align: center;
}

/* Footer photographer name inherits .photographer-name styles from header */

/* Footer logo takes the shared size; only the centring is its own. */
.footer-content .photographer-logo-img {
    margin: 0 auto;
}

.powered-by {
    margin-top: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.powered-by a {
    color: var(--color-primary-dark);
}

.powered-by a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-contact {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-contact a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-gray-600);
}

/* Photographer social links in the footer */
.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.footer-social-link:hover {
    color: var(--color-primary-dark);
}

/* === CONTACT PHOTOGRAPHER MODAL === */
.contact-modal-dialog {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: none;
    padding: 0;
}

.contact-modal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.contact-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.contact-modal-close {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.contact-modal-close:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
}

.contact-form-body {
    padding: var(--space-5) var(--space-6);
}

.contact-field {
    margin-bottom: var(--space-4);
}

.contact-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-text);
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-field textarea {
    resize: vertical;
    min-height: 80px;
}

.contact-captcha {
    margin-bottom: var(--space-4);
}

.contact-error {
    background: #fef2f2;
    color: #dc2626;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.contact-submit-btn {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-gray-800);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.contact-submit-btn:hover {
    background: var(--color-gray-900);
}

.contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-success {
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.contact-success-icon {
    color: #16a34a;
    margin-bottom: var(--space-3);
}

.contact-success-icon svg {
    width: 48px;
    height: 48px;
}

.contact-success p {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.contact-done-btn {
    padding: var(--space-2) var(--space-6);
    background: var(--color-gray-100);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.contact-done-btn:hover {
    background: var(--color-gray-200);
}


/* === LOADING STATE === */
.loading {
    text-align: center;
    padding: var(--space-16) var(--space-5);
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-5);
}

.empty-state-icon {
    margin-bottom: var(--space-5);
    color: var(--color-gray-300);
}

.empty-state-icon svg,
.empty-state-icon i {
    width: 64px;
    height: 64px;
}

.empty-state h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3) 0;
}

.empty-state p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}


/* === DOWNLOAD PROGRESS MODAL === */
/* --- Download choice menu (favorites / people views) --- */
.gallery-download-wrap {
    position: relative;
    display: inline-flex;
}

.download-choice-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 1000;
    min-width: 230px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.download-choice-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.download-choice-item:last-child {
    border-bottom: none;
}

.download-choice-item:hover,
.download-choice-item:focus {
    background: var(--color-gray-100, #F3F4F6);
}

.download-choice-item svg,
.download-choice-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.download-choice-item:first-child svg,
.download-choice-item:first-child i {
    color: var(--color-primary);
}

.download-progress-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.download-progress-content {
    background: var(--color-white);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 320px;
    max-width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.download-progress-content h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.download-progress-bar {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.download-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.2s ease;
}

.download-progress-message {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
}

.download-cancel-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.download-cancel-btn:hover {
    border-color: var(--color-gray-400);
    color: var(--color-text);
}

/* --- Save to Photos prompt: the share sheet needs its own tap --- */
.download-save-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.download-save-content {
    background: var(--color-white);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 300px;
    max-width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.download-save-content h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.download-save-message {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
}

.download-save-btn {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.download-save-modal .download-cancel-btn {
    width: 100%;
}

/* --- Download PIN Modal --- */
.download-pin-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.download-pin-content {
    background: var(--color-white);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 320px;
    max-width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.download-pin-content h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.download-pin-content p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
}

.download-pin-input {
    width: 160px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-3);
}

.download-pin-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 0, 0), 0.1);
}

.download-pin-error {
    color: var(--color-error, #dc2626);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-3);
}

.download-pin-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}

.btn-pin-cancel {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.btn-pin-submit {
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.btn-pin-submit:hover {
    opacity: 0.9;
}

/* --- Download PIN inline prompt (over a locked video in the lightbox) --- */
.download-pin-inline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    overflow: hidden;
}

.download-pin-inline-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
}

.download-pin-inline-bg .download-pin-inline-poster,
.download-pin-inline-bg .download-pin-inline-teaser {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.5);
}

/* Reuses .download-pin-content for padding/radius/shadow; overrides the
   background so a hint of the teaser shows through. */
.download-pin-inline-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
}

.download-pin-inline-lock {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.download-pin-inline-watch {
    margin-top: var(--space-2);
}


/* === UTILITY CLASSES === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

.hidden { display: none !important; }

/* Margins */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-8); }
.mt-5 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.mb-4 { margin-bottom: var(--space-8); }
.mb-5 { margin-bottom: var(--space-12); }


/* === RESPONSIVE === */
@media screen and (max-width: 992px) {
    .gallery-hero-title {
        font-size: var(--font-size-3xl);
    }

    .gallery-action-bar-content {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .gallery-action-left .photographer-logo-img {
        max-height: 28px;
        max-width: 150px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-5);
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 0 var(--space-4);
    }

    .gallery-hero-content {
        padding: var(--space-6);
    }

    .gallery-hero-title {
        font-size: var(--font-size-2xl);
    }

    .gallery-hero-logo {
        max-height: 36px;
        max-width: 180px;
    }

    /* The header nav sits beside the logo, and there is only ~343px of content
       width on a phone. Keep the mark clear of it. */
    .gallery-header .photographer-logo-img {
        max-width: 200px;
    }

    .gallery-hero-meta {
        font-size: var(--font-size-base);
    }

    .gallery-action-bar-content {
        padding: var(--space-3) var(--space-4);
    }

    .gallery-action-left,
    .gallery-action-right {
        gap: var(--space-2);
    }

    .gallery-action-button {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .gallery-list-header {
        padding: var(--space-10) var(--space-4) var(--space-8);
    }

    .gallery-list-header h1 {
        font-size: var(--font-size-3xl);
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .gallery-card-content {
        padding: var(--space-4);
    }

    .gallery-card-title {
        font-size: var(--font-size-base);
    }
}

@media screen and (max-width: 480px) {
    .gallery-hero-title {
        font-size: var(--font-size-xl);
    }

    .gallery-action-bar-content {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-action-left,
    .gallery-action-right {
        justify-content: center;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card-image {
        height: 200px;
    }

    .password-panel {
        margin: var(--space-10) var(--space-4);
        padding: var(--space-6);
    }
}



/* photo set viewer control - filter tabs */
div.photo-set-filter-tabs { margin-top: 5px; margin-bottom:10px !important; width: 95%; overflow:hidden; cursor: pointer; }
div.photo-set-filter-tabs div.filter {  position: relative; padding-right: 20px; display: inline-block;  border: solid 1px rgba(128,128,128,.5) ; border-bottom-width: 0;  padding-left: 20px; padding-top: 5px; padding-bottom: 5px; margin-right: 5px; margin-top: 5px; min-width:80px; border-radius: 3px 3px 0px 0px; cursor: pointer;}
div.photo-set-filter-tabs div.filter:hover { text-decoration: underline; }
div.photo-set-filter-tabs div.filter.active::after,
div.photo-set-filter-tabs div.filter.active::before  {  display: block; content: ''; position: absolute;
    bottom: 0px; height: 0px;width: 999em; border-bottom: 1px solid rgba(128,128,128,.5); pointer-events: none; }
div.photo-set-filter-tabs div.filter.active::before {  right: 100%;  margin-right: 1px;  }
div.photo-set-filter-tabs div.filter.active::after { left: 100%;   margin-left: 2px; }
.IE8 div.photo-set-filter-tabs div.filter { border: solid 1px #888; }
.IE7 div.photo-set-filter-tabs div.filter,
.IE6 div.photo-set-filter-tabs div.filter { border: solid 1px #888; display:inline; }
.photo-set-copyright { font-size: 85%; opacity: .7; }

.photo-set-filter-tabs .filter span.icon { font-family:'PhotoReflectWebDingsRegular';  display: inline-block; margin: 0 5px;}
.photo-set-filter-tabs .filter span.image { 
    width:20px; height:20px; margin: 0 5px; display: inline-block; float: left;
    background-size: 30px; background-repeat: no-repeat; background-position: 50% 50%;
}

span.icon.al-edit { font-size: 100%;}


/* === GALLERY CAPTION STYLES === */
/* Clean caption styling for gallery cards */

/* Card hover effects */
.gallery-card-item {
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gallery-card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Image zoom on hover */
.gallery-card-item .ps-photo {
    transition: transform 0.4s ease;
}

.gallery-card-item:hover .ps-photo {
    transform: scale(1.03);
}

/* Caption text color change on hover */
.gallery-card-item:hover .ps-caption-event-name {
    color: var(--color-primary-dark);
}

.gallery-card-item .ps-photo-caption-wrapper {
    text-align: center;
}

.gallery-card-item .ps-photo-caption {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    padding: var(--space-1) var(--space-1);
}

.gallery-card-item .ps-caption-event-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-2);
}

.gallery-card-item .hidden-caption-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gallery-card-item .hidden-caption-info li {
    display: inline;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.gallery-card-item .hidden-caption-info li::after {
    content: "·";
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}

.gallery-card-item .hidden-caption-info li:last-of-type::after {
    content: "";
    margin: 0;
}

.gallery-card-item .ps-caption-event-date,
.gallery-card-item .ps-caption-event-photo-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.gallery-card-item .ps-caption-event-photo-count br {
    display: none;
}

.gallery-card-item .ps-caption-event-description {
    display: none;
}

/* Homepage gallery cards 2 across on phones. The control writes a fixed 200px
   card for the desktop grid, so the inline size is overridden here. */
@media screen and (max-width: 767px) {
    .default-page .photo-set-viewer.grid .photo-set-ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .default-page .photo-set-viewer.grid .gallery-card-item {
        box-sizing: border-box;
        width: calc(50% - 12px);
        margin: 6px;
    }

    /* Square box via padding so a background-image div keeps its height */
    .default-page .photo-set-viewer.grid .gallery-card-item .ps-photo {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100%;
    }

    .default-page .photo-set-viewer.grid .gallery-card-item .ps-photo-caption-wrapper {
        max-width: none !important;
    }

    /* Date and count stack as whole lines rather than breaking mid-value */
    .default-page .photo-set-viewer.grid .gallery-card-item .gallery-card-meta {
        flex-wrap: wrap;
        justify-content: center;
    }

    .default-page .photo-set-viewer.grid .gallery-card-item .gallery-card-date,
    .default-page .photo-set-viewer.grid .gallery-card-item .gallery-card-count {
        white-space: nowrap;
    }
}

/* Contain mode for gallery cards (e.g. EventGallery booth templates) */
.brand-eventgallery .gallery-grid-wrapper .ps-photo,
.brand-eventgallery .gallery-cards .ps-photo {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center !important;
    background-color: var(--color-gray-100);
}


/* ============================================
   MARKETING HOME PAGE STYLES
   ============================================ */

/* Marketing Body */
.marketing-body {
    background-color: var(--color-white);
}

/* Marketing Header */
.marketing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    padding: var(--space-4) 0;
}

.marketing-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marketing-header .brand-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xl);
    color: var(--color-text);
    text-decoration: none;
}

.marketing-header .brand-logo:hover {
    text-decoration: none;
}

.marketing-header .brand-logo svg,
.marketing-header .brand-logo .logo-icon {
    width: 28px;
    height: 28px;
    color: var(--color-primary-dark);
    position: relative;
    top: -1px;
}

.marketing-header .brand-logo strong {
    color: var(--color-primary-dark);
}

.marketing-header .brand-logo-img {
    height: 48px;
    width: auto;
}

.marketing-header .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.marketing-header .nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

.marketing-header .nav-link:hover {
    color: var(--color-text);
    text-decoration: none;
}

.marketing-header .mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.marketing-header .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    flex-direction: column;
    gap: var(--space-3);
    z-index: 999;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu-link {
    display: block;
    padding: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    border-radius: var(--radius-md);
}

.mobile-menu-link:hover {
    background: var(--color-gray-50);
}

/* Marketing Main */
.marketing-main {
    padding-top: 68px;
}

/* Marketing Sections */
.marketing-section {
    padding: var(--space-16) 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header h1,
.section-header h2 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.section-header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

/* Hero Section */
.marketing-hero {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.marketing-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--space-6);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

/* Hero brand-name H1 (e.g. "Event Gallery") - brand color, tighter kerning */
.hero-content h1.hero-brand {
    color: var(--color-primary);
    letter-spacing: -0.03em;
}

/* Hero value tagline (H2 sitting under a brand-name H1) */
.hero-tagline {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-top: calc(-1 * var(--space-3));
    margin-bottom: var(--space-5);
}

/* Hero media image (product demo) */
.hero-image .hero-media {
    display: block;
    max-width: 100%;
    max-height: 560px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* Alternating image + text feature rows (modern landing layout) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.feature-row-media {
    display: flex;
    justify-content: center;
}

.feature-row-media img {
    max-width: 100%;
    max-height: 520px;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.feature-row-reverse .feature-row-media {
    order: -1;
}

.feature-row-text h2 {
    margin-bottom: var(--space-4);
}

.feature-row-lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.feature-row-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-row-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    color: var(--color-text);
    line-height: 1.5;
}

.feature-row-points li i {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .feature-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .feature-row-reverse .feature-row-media {
        order: 0;
    }
}

/* Centered text-only hero variant (no side image) */
.marketing-hero.hero-centered {
    min-height: auto;
    padding: var(--space-16) 0 var(--space-12);
}

.marketing-hero.hero-centered .container {
    grid-template-columns: 1fr;
    text-align: center;
}

.marketing-hero.hero-centered .hero-content {
    max-width: 820px;
    margin: 0 auto;
}

.marketing-hero.hero-centered .hero-actions {
    justify-content: center;
}

/* ============================================================
   Event Gallery homepage - modern styling layer (scoped .eg-home)
   ============================================================ */

/* Hero: subtle neutral backdrop (pending a real hero image) */
.eg-home .marketing-hero.hero-centered {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    padding: var(--space-16) 0;
}

/* Hero with a full-bleed photo background (dark overlay set inline) */
.eg-home .marketing-hero.hero-photo {
    background-size: cover;
    background-position: center;
    padding: var(--space-16) 0;
}

.eg-home .marketing-hero.hero-photo .hero-brand,
.eg-home .marketing-hero.hero-photo .hero-tagline {
    color: #fff;
}

.eg-home .marketing-hero.hero-photo .hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
}

.eg-home .marketing-hero.hero-photo .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

/* Keep hero ghost button readable on hover (generic :hover fills near-white) */
.eg-home .marketing-hero.hero-photo .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* Section eyebrow kicker above headings */
.eg-home .section-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* Roomier sections + larger row headings */
.eg-home .marketing-section {
    padding: var(--space-16) 0;
}

.eg-home .feature-row {
    gap: var(--space-16);
}

.eg-home .feature-row-text h2 {
    font-size: 2.25rem;
    line-height: 1.15;
}

/* Ground the device shots with a soft brand glow + strong shadow (kills the floating-tablet look) */
.eg-home .feature-row-media {
    position: relative;
}

.eg-home .feature-row-media::before {
    content: "";
    position: absolute;
    left: 6%;
    top: 8%;
    width: 88%;
    height: 84%;
    background: radial-gradient(closest-side, rgba(183, 28, 28, 0.13), transparent 72%);
    filter: blur(30px);
    z-index: 0;
}

.eg-home .feature-row-media img {
    position: relative;
    z-index: 1;
    max-height: 560px;
    border-radius: 18px;
    box-shadow: var(--shadow-xl);
}

/* Modern feature cards */
.eg-home .feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.eg-home .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-border);
}

.eg-home .feature-icon,
.eg-home .feature-icon-secondary {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.eg-home .feature-icon i,
.eg-home .feature-icon-secondary i {
    width: 26px;
    height: 26px;
}

/* Pricing: a real card, not a one-liner */
.eg-home .features-plans-callout .features-plan-summary {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-10);
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.eg-home .features-plans-callout .features-plans-link {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

/* "Share to" card graphic (Integrated Sharing section) - uses the real share-dialog icons */
.eg-home .share-card {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 auto;
    padding: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}

.eg-home .share-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

.eg-home .share-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6) var(--space-4);
}

.eg-home .share-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.eg-home .share-chip .chip-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eg-home .share-chip:hover .chip-icon {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.eg-home .share-chip .chip-icon svg {
    width: 26px;
    height: 26px;
}

.eg-home .share-chip .chip-icon i {
    width: 24px;
    height: 24px;
}

.eg-home .share-chip-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.eg-home .share-card-caption {
    margin-top: var(--space-6);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.eg-home .chip--facebook { color: #1877F2; }
.eg-home .chip--x { color: #0F1419; }
.eg-home .chip--whatsapp { color: #25D366; }
.eg-home .chip--threads { color: #000000; }
.eg-home .chip--pinterest { color: #BD081C; }
.eg-home .chip--text { color: #22B45E; }
.eg-home .chip--email { color: var(--color-primary); }
.eg-home .chip--copy { color: #64748B; }
.eg-home .chip--qr { color: #334155; }

/* Product screenshot showcase (e.g. AI face search) */
.eg-home .ai-showcase {
    position: relative;
    max-width: 860px;
    margin: 0 auto var(--space-10);
}

.eg-home .ai-showcase::before {
    content: "";
    position: absolute;
    left: 8%;
    top: 12%;
    width: 84%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(183, 28, 28, 0.14), transparent 72%);
    filter: blur(34px);
    z-index: 0;
}

.eg-home .ai-showcase img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xl);
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Hero Mockup */
.hero-mockup {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.mockup-header {
    background: var(--color-gray-100);
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

.mockup-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-300);
}

.mockup-content {
    padding: var(--space-6);
}

.mockup-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.mockup-photo {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-100) 100%);
    border-radius: var(--radius-md);
}

/* Features Section */
.features-section {
    background: var(--color-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.feature-card {
    text-align: center;
    padding: var(--space-6);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-light);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary-dark);
}

.feature-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.feature-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Feature Icon - Secondary Color Variant */
.feature-icon-secondary {
    background: var(--color-secondary-light);
}

.feature-icon-secondary svg {
    color: var(--color-secondary-dark);
}

/* Features Page - Plans Callout */
.features-plans-callout {
    background: var(--color-primary-light);
}

.features-plan-summary {
    text-align: center;
}

.features-plan-summary h2 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

.features-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3) var(--space-6);
    max-width: 800px;
    margin: 0 auto var(--space-6);
    text-align: left;
}

.features-included-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.features-included-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary-dark);
    flex-shrink: 0;
}

.features-plans-link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.features-plans-link a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* How It Works Section */
.how-it-works-section {
    background: var(--color-gray-50);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.step-card {
    text-align: center;
    padding: var(--space-6);
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 auto var(--space-4);
}

.step-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

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

/* Testimonials / Stats Section */
.testimonials-section {
    background: var(--color-white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
}

.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    padding: var(--space-6);
}

.stat-value {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    text-align: center;
}

.cta-content h2 {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.cta-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
}

.cta-section .btn-primary {
    background: var(--color-white);
    color: var(--color-primary-dark);
}

.cta-section .btn-primary:hover {
    background: var(--color-gray-100);
}

/* Pricing Section */
.pricing-header-section {
    padding-bottom: 0;
}

.pricing-cards-section {
    padding-top: var(--space-8);
}

/* Billing Toggle */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.toggle-label-active {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-gray-300);
    border-radius: 12px;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-save {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: var(--space-1);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}

/* Column count tracks the number of cards the brand renders (PhotoReflect 4,
   EventGallery 3) so the row fills the width and stays centered instead of
   leaving an empty column. Pricing.aspx sets the cols-N class from the plan count. */
.pricing-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 360px)); justify-content: center; }
.pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pricing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Fair-use asterisk + footnote for "unlimited storage" marketing references (Terms
   §3.8). These live here (not components.css) because the marketing pages load
   gallery-base.css. The footnote reads as intentional fine print: separated from the
   cards, centered, and width-constrained. */
.fair-use-ref {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-primary);
    margin-left: 0.15em;
}
.fair-use-ref:hover { text-decoration: underline; }
.fair-use-footnote {
    max-width: 640px;
    margin: var(--space-8) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
}
.fair-use-footnote a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.fair-use-footnote a:hover { text-decoration: underline; }

.pricing-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card-featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.pricing-card-header {
    text-align: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.pricing-card-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.price-amount {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.price-period {
    color: var(--color-text-muted);
}

.pricing-card-body {
    min-height: 280px;
    flex: 1;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    color: var(--color-text-secondary);
}

.pricing-features li svg {
    width: 18px;
    height: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

.pricing-card-footer {
    margin-top: auto;
    padding-top: var(--space-4);
}

/* Disabled features in pricing cards */
.pricing-feature-disabled {
    opacity: 0.5;
}

.pricing-feature-disabled svg {
    color: var(--color-text-muted) !important;
}

/* Store commission note */
.pricing-commission-note {
    text-align: center;
    margin-top: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pricing-commission-note a {
    color: var(--color-primary);
}

/* Comparison Table */
.pricing-comparison-section {
    background: var(--color-white);
}

.pricing-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.pricing-comparison-table th,
.pricing-comparison-table td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.pricing-comparison-table th:first-child,
.pricing-comparison-table td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.pricing-comparison-table thead th {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border);
}

.pricing-comparison-table td {
    color: var(--color-text-secondary);
}

.pricing-comparison-table tr:last-child td {
    border-bottom: none;
}

.pricing-comparison-table .plan-featured {
    background: rgba(var(--color-primary-rgb, 107, 142, 95), 0.04);
}

.pricing-comparison-table thead .plan-featured {
    color: var(--color-primary);
}

/* Check/X icons in comparison table */
.icon-yes {
    color: var(--color-success);
}

.icon-no {
    color: var(--color-gray-300);
}

.pricing-comparison-table svg {
    width: 18px;
    height: 18px;
}

/* FAQ Section */
.faq-section {
    background: var(--color-gray-50);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.faq-item {
    background: var(--color-white);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.faq-item h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.faq-item p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* About Section */
.about-header-section {
    background: var(--color-gray-50);
}

.about-story-section {
    background: var(--color-white);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.about-text h2 {
    font-size: 2rem;
    margin-bottom: var(--space-6);
}

.about-text p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.about-image-placeholder {
    aspect-ratio: 1;
    background: var(--color-gray-100);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image-placeholder svg {
    width: 80px;
    height: 80px;
    color: var(--color-gray-300);
}

/* Values Section */
.values-section {
    background: var(--color-gray-50);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.value-card {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
}

.value-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.value-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary-dark);
}

.value-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.value-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* About Stats Section */
.about-stats-section {
    background: var(--color-white);
}

/* Contact Section */
.contact-section {
    background: var(--color-gray-50);
}

.contact-content {
    text-align: center;
}

.contact-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.contact-content > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 800px;
    margin: 0 auto;
}

.contact-option {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
}

.contact-option svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.contact-option h4 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
}

.contact-option a,
.contact-option span {
    color: var(--color-text-secondary);
}

/* Signup Section */
.signup-section {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    background: var(--color-gray-50);
    padding: var(--space-12) 0;
}

.signup-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.signup-info h1 {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}

.signup-info > p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.signup-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.signup-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
}

.signup-benefit svg {
    width: 20px;
    height: 20px;
    color: var(--color-success);
}

.signup-form-card {
    background: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.signup-form-card h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
    text-align: center;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.form-checkbox input {
    margin-top: 4px;
}

.form-checkbox label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.form-checkbox a {
    color: var(--color-primary-dark);
}

.signup-login-link {
    text-align: center;
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.signup-login-link a {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
}

/* Input Group for domain field */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-left: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Alert styles */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.alert-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.alert-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* Confirmation Page Styles */
.confirmation-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
}

.confirmation-card {
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-white);
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.confirmation-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
}

.confirmation-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-primary-dark);
}

.confirmation-icon.success {
    background: var(--color-success-light);
}

.confirmation-icon.success svg {
    color: var(--color-success);
}

.confirmation-icon.error {
    background: var(--color-danger-light);
}

.confirmation-icon.error svg {
    color: var(--color-danger);
}

.confirmation-card h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.confirmation-message {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

.confirmation-message.error-message {
    color: var(--color-danger);
}

.confirmation-instructions {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.confirmation-details {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.confirmation-details strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-primary-dark);
    word-break: break-all;
}

.confirmation-tips {
    background: var(--color-gray-50);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    text-align: left;
}

.confirmation-tips h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.confirmation-tips ul {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.confirmation-tips li {
    margin-bottom: var(--space-1);
}

.confirmation-next-steps {
    background: var(--color-success-light);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    text-align: left;
}

.confirmation-next-steps h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-success);
}

.confirmation-next-steps ul {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.confirmation-next-steps li {
    margin-bottom: var(--space-1);
}

.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.confirmation-actions .btn {
    width: 100%;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn-outline:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--color-secondary-dark);
    text-decoration: underline;
    padding: var(--space-2);
}

.btn-link:hover {
    color: var(--color-secondary);
}

/* Marketing Footer */
.marketing-footer {
    background: var(--color-gray-100);
    color: var(--color-text);
    padding: var(--space-12) 0 var(--space-6);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-brand .brand-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.footer-brand .brand-logo:hover {
    text-decoration: none;
}

.footer-brand .brand-logo svg,
.footer-brand .brand-logo .logo-icon {
    width: 28px;
    height: 28px;
    color: var(--color-primary-dark);
    position: relative;
    top: -1px;
}

.footer-brand .brand-logo strong {
    color: var(--color-primary-dark);
}

.footer-brand .brand-logo-img {
    height: 48px;
    width: auto;
}

.footer-brand p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.footer-links h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.footer-links a {
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-1) 0;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-text);
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.footer-social-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0 !important;
}

.footer-social-icon:hover {
    color: var(--color-text);
    background: var(--color-gray-100);
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
    text-align: center;
}

.footer-bottom p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Responsive - Marketing Pages */
@media (max-width: 992px) {
    .marketing-hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-image {
        display: none;
    }

    .features-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid,
    .pricing-grid.cols-1,
    .pricing-grid.cols-2,
    .pricing-grid.cols-3,
    .pricing-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-included-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .about-image {
        order: -1;
    }

    .signup-wrapper {
        grid-template-columns: 1fr;
    }

    .signup-info {
        text-align: center;
    }

    .signup-benefits {
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .marketing-header .header-nav {
        display: none;
    }

    .marketing-header .mobile-menu-btn {
        display: block;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 2rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .features-grid,
    .steps-grid,
    .stats-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid,
    .pricing-grid.cols-1,
    .pricing-grid.cols-2,
    .pricing-grid.cols-3,
    .pricing-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .pricing-card-featured {
        order: -1;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .features-included-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        margin-bottom: var(--space-4);
    }

    .footer-brand .brand-logo {
        justify-content: center;
    }
}

/* ===================================
   Subevent Navigation Tabs
   For galleries with subevents (e.g., wedding: ceremony, reception, etc.)
   =================================== */
/* Row gap is deliberately much tighter than the column gap: each tab already
   carries vertical padding for its tap target, so a matching row gap stacks two
   paddings and leaves wrapped rows floating far apart. */
.subevent-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.5rem;
    /* Symmetric padding rather than a one-sided bottom margin: the photo grid
       brings no top spacing of its own, so this padding is the whole gap
       between the tabs and the first photo, above and below alike. */
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}

.subevent-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.subevent-lock {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    stroke-width: 2;
    opacity: 0.75;
}

.subevent-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-gray-500);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.subevent-tab:hover {
    color: var(--color-gray-700);
    text-decoration: none;
}

.subevent-tab.active {
    color: var(--color-gray-900);
}

.subevent-tab.active::after {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    /* Wraps and pushes the photos down, same as desktop. A horizontal scroller
       hid the later sets: nothing on screen says there is more to the right. */
    .subevent-tabs {
        gap: 0.25rem 1rem;
        padding: 0.75rem 1rem;
    }

    .subevent-tab {
        font-size: 0.85rem;
        max-width: 100%;
    }
}

/* Inline per-set password prompt, rendered inside the photo viewer area when a
   locked set tab is clicked (tabs stay visible above; photos replace this on unlock).
   Mirrors .password-panel so the two look identical; only the outer layout differs
   (this renders inside the photo viewer box, so no full-page card margin). */
.set-password-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    margin: 60px auto;
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.set-password-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5) auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
}

.set-password-icon svg,
.set-password-icon i {
    width: 32px;
    height: 32px;
    color: var(--color-gray-500);
}

.set-password-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
}

.set-password-note {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.set-password-error {
    width: 100%;
    background: var(--color-danger-light);
    color: var(--color-danger);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
}

.set-password-input {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.set-password-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(158, 193, 134, 0.2);
}

.set-password-submit {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.set-password-submit:hover {
    background: var(--color-primary-hover);
}

.set-password-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ===================================
   Loading Spinner
   Simple, elegant loading animation
   =================================== */
.gallery-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
}

.gallery-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-gray-600);
    border-radius: 50%;
    animation: gallery-spin 0.8s linear infinite;
}

@keyframes gallery-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   Next Section Navigation Button
   Appears at bottom of subevent content
   when there's another subevent to view
   =================================== */
.next-section-panel {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem 4rem;
    margin-top: 2rem;
}

.next-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: transparent;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.next-section-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
    text-decoration: none;
}

.next-section-label {
    color: var(--color-gray-400);
    font-size: 0.85rem;
}

.next-section-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.next-section-btn:hover .next-section-title {
    color: var(--color-gray-900);
}

.next-section-btn svg,
.next-section-btn i {
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
    transition: transform 0.2s ease, color 0.2s ease;
}

.next-section-btn:hover svg,
.next-section-btn:hover i {
    transform: translateX(3px);
    color: var(--color-gray-600);
}

@media (max-width: 768px) {
    .next-section-panel {
        padding: 2rem 1rem 3rem;
    }

    .next-section-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.85rem;
    }
}


/* === FANCYBOX 5 LIGHT THEME === */
/* Preview lightbox inherits the event's theme tokens (light, dark, or custom) */
.fancybox__container {
    --fancybox-bg: var(--color-bg, #fff) !important;
    --fancybox-color: var(--color-text, #374151) !important;
    --f-button-bg: rgba(127, 127, 127, 0.15) !important;
    --f-button-hover-bg: rgba(127, 127, 127, 0.28) !important;
    --f-button-color: var(--color-text-secondary, #4b5563) !important;
    --f-button-hover-color: var(--color-text, #1f2937) !important;
}

/* Slideshow: black cinema mode (distinct from the theme-matched preview) */
.fancybox__container.gallery-slideshow {
    --fancybox-bg: #000 !important;
    --f-transition-duration: 0.8s;   /* slower, smoother cross-fade between slides */
    --f-button-bg: rgba(255, 255, 255, 0.12) !important;
    --f-button-hover-bg: rgba(255, 255, 255, 0.22) !important;
    --f-button-color: rgba(255, 255, 255, 0.85) !important;
    --f-button-hover-color: #fff !important;
}

.fancybox__backdrop {
    background: var(--color-bg, #fff) !important;
}
.fancybox__container.gallery-slideshow .fancybox__backdrop {
    background: #000 !important;
}

.fancybox__toolbar {
    background: transparent !important;
}

/* Buttons - target both old and new class names */
.fancybox__button,
.f-button {
    background: rgba(127, 127, 127, 0.15) !important;
    color: var(--color-text-secondary, #4b5563) !important;
    border-radius: 50% !important;
}
.fancybox__container.gallery-slideshow .fancybox__button,
.fancybox__container.gallery-slideshow .f-button {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.fancybox__button:hover,
.f-button:hover {
    background: rgba(127, 127, 127, 0.28) !important;
    color: var(--color-text, #1f2937) !important;
}
.fancybox__container.gallery-slideshow .fancybox__button:hover,
.fancybox__container.gallery-slideshow .f-button:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* Autoplay countdown fill — FancyBox defaults to opacity .2, too faint on the light preview toolbar */
.fancybox__container button > .f-progressbar {
    --f-progressbar-opacity: .7 !important;
}
/* Slideshow countdown fill — light so it reads on the dark toolbar */
.gallery-slideshow button > .f-progressbar {
    --f-progressbar-color: rgba(255, 255, 255, 0.9) !important;
    --f-progressbar-opacity: .55 !important;
}

/* The fill paints over the icon (z-index 30) — lift the play/pause glyph above it so the sweep reads as a background */
.fancybox__container button[data-autoplay-action="toggle"] svg {
    position: relative;
    z-index: 31;
}

/* Slideshow speed chip — text pill in the lightbox toolbar; hidden until autoplay is running */
.fancybox__container .gallery-speed-chip {
    display: none !important;
    width: auto !important;
    min-width: var(--f-button-width);
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fancybox__container.has-autoplay .gallery-speed-chip,
.fancybox__container .has-autoplay .gallery-speed-chip {
    display: flex !important;
}

/* Slideshow-animation toggle — film icon shows when on, image icon when off */
.gallery-slideshow .gallery-anim-toggle .anim-icon-off { display: none; }
.gallery-slideshow .gallery-anim-toggle.is-off .anim-icon-on { display: none; }
.gallery-slideshow .gallery-anim-toggle.is-off .anim-icon-off { display: inline-block; }

/* Don't idle-hide the toolbar while a control in it is hovered (buttons keep pointer-events while faded) */
.fancybox__container.is-idle .f-carousel__toolbar:has(:hover),
.fancybox__container.is-idle.is-ready .f-carousel__toolbar:has(:hover) {
    opacity: 1 !important;
    animation: none !important;
}

/* When the slideshow is paused, stop auto-hiding the controls — idle only hides while it's playing */
.gallery-slideshow.is-idle .fancybox__carousel:not(.has-autoplay) .f-carousel__toolbar,
.gallery-slideshow.is-idle .fancybox__carousel:not(.has-autoplay) .f-button.is-arrow {
    opacity: 1 !important;
    animation: none !important;
    pointer-events: auto !important;
}

/* Slideshow Ken Burns — fullscreen blurred fill behind the sharp photo. CSS-animated and gated on
   .has-autoplay, so the pan freezes when the slideshow is paused or the viewer clicks next/prev. Image slides only. */
.gallery-slideshow .fancybox__slide { overflow: hidden; }
.gallery-slideshow .f-html { background: transparent !important; }   /* video slides: drop FancyBox's white card so the video sits on the black backdrop */
.gallery-slideshow .f-panzoom__wrapper,
.gallery-slideshow .kb-bg {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;   /* only runs while autoplay is active */
    will-change: transform;
}
.gallery-slideshow .has-autoplay .f-panzoom__wrapper,
.gallery-slideshow .has-autoplay .kb-bg {
    animation-play-state: running;
}
.gallery-slideshow .f-panzoom__wrapper { z-index: 1; }
.gallery-slideshow .kb-bg {
    position: absolute;
    inset: -20%;   /* over-scaled so the blurred soft edges stay off-screen */
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: blur(34px) brightness(0.45);
}
@keyframes gallery-kb-0 { from { transform: scale(1.0) translate(0%, 0%); }   to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes gallery-kb-1 { from { transform: scale(1.12) translate(-2%, -1%); } to { transform: scale(1.0) translate(1%, 1%); } }
@keyframes gallery-kb-2 { from { transform: scale(1.0) translate(0%, 0%); }   to { transform: scale(1.10) translate(0%, 0%); } }
@keyframes gallery-kb-3 { from { transform: scale(1.0) translate(1%, 0%); }   to { transform: scale(1.12) translate(-1%, -2%); } }
@keyframes gallery-kb-4 { from { transform: scale(1.08) translate(-1%, -1%); } to { transform: scale(1.0) translate(0%, 0%); } }
@keyframes gallery-kb-5 { from { transform: scale(1.0) translate(0%, 1%); }   to { transform: scale(1.10) translate(1%, -1%); } }

/* Navigation arrows */
.fancybox__nav .fancybox__button,
.fancybox__nav .f-button,
.f-carousel__nav .f-button {
    background: rgba(127, 127, 127, 0.15) !important;
    color: var(--color-text-secondary, #6b7280) !important;
}
.fancybox__container.gallery-slideshow .fancybox__nav .f-button,
.fancybox__container.gallery-slideshow .f-carousel__nav .f-button {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.fancybox__nav .fancybox__button:hover,
.fancybox__nav .f-button:hover,
.f-carousel__nav .f-button:hover {
    background: rgba(127, 127, 127, 0.28) !important;
    color: var(--color-text, #1f2937) !important;
}

/* Caption + counter */
.fancybox__caption {
    color: var(--color-text, #374151) !important;
}
.fancybox__counter,
.f-counter {
    color: var(--color-text-secondary, #6b7280) !important;
}
.fancybox__container.gallery-slideshow .fancybox__caption,
.fancybox__container.gallery-slideshow .fancybox__counter,
.fancybox__container.gallery-slideshow .f-counter {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Light theme thumbs */
.fancybox__thumbs,
.f-thumbs {
    background: var(--color-bg, #fff) !important;
}

/* Content shadow for visibility on light bg */
.fancybox__content {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Content shadow for better visibility on light bg */
.fancybox-light .fancybox__content,
.fancybox-white-bg .fancybox__content {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Custom FancyBox toolbar buttons */
.fancybox-button-favorite,
.fancybox-button-share {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    margin: 0 4px;
    transition: all 0.2s ease;
}

.fancybox-button-favorite:hover,
.fancybox-button-share:hover {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #1f2937 !important;
}

/* Favorite button active state (filled heart) */
.fancybox-button-favorite.active {
    color: #ef4444 !important;
}

.fancybox-button-favorite.active svg {
    fill: #ef4444;
}

/* Ensure SVGs in custom buttons are properly sized */
.fancybox-button-favorite svg,
.fancybox-button-share svg {
    width: 20px;
    height: 20px;
}


/* === SHARE MODAL (Native Dialog - uses browser top-layer) === */
.share-modal-dialog {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: none;
    padding: 0;
}

.share-modal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.share-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
}

.share-modal-close {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-modal-close:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
}

.share-modal-close svg,
.share-modal-close i {
    width: 20px;
    height: 20px;
}

.share-modal-body {
    padding: var(--space-6);
}

.share-util-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.share-link-input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-gray-50);
    min-width: 0;
}

.share-link-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
}

.share-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.share-copy-btn:hover {
    background: var(--color-primary-hover);
}

.share-qr-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.share-qr-btn:hover {
    background: var(--color-gray-50);
}

.share-copy-btn svg, .share-copy-btn i,
.share-qr-btn svg, .share-qr-btn i {
    width: 16px;
    height: 16px;
}

/* QR view, toggled open by the QR button */
.share-qr-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

/* Class display:flex above would override the [hidden] attribute's
   display:none, so re-assert it — otherwise the QR panel shows by default. */
.share-qr-view[hidden] {
    display: none;
}

/* Server-sent text panel, toggled open by the Text tile */
.share-sms-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.share-sms-view[hidden] {
    display: none;
}

.share-sms-view .share-qr-caption {
    text-align: center;
}

.share-sms-captcha:empty {
    display: none;
}

.share-sms-captcha > div {
    margin: 0 auto;
}

.share-qr-img {
    width: 180px;
    height: 180px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
}

.share-qr-caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Channel grid - flex-wrap auto-centers the trailing row at any tile count */
.share-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-3);
    margin-top: var(--space-6);
}

.share-tile {
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.share-tile:hover {
    text-decoration: none;
    color: var(--color-text);
}

/* Circular icon container - dark with white icons */
.share-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-gray-800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.share-tile:hover .share-tile-icon {
    background: var(--color-gray-700);
}

.share-tile-icon svg,
.share-tile-icon i {
    width: 23px;
    height: 23px;
    color: #fff;
}

/* Desktop channel order (mobile keeps natural DOM order) */
.share-grid.is-desktop .share-tile--email { order: 1; }
.share-grid.is-desktop .share-tile--facebook { order: 2; }
.share-grid.is-desktop .share-tile--x { order: 3; }
.share-grid.is-desktop .share-tile--threads { order: 4; }
.share-grid.is-desktop .share-tile--pinterest { order: 5; }
.share-grid.is-desktop .share-tile--whatsapp { order: 6; }
.share-grid.is-desktop .share-tile--more { order: 7; }

@media (max-width: 480px) {
    .share-modal-dialog {
        max-width: calc(100% - var(--space-8));
        border-radius: var(--radius-lg);
    }

    .share-modal-header {
        padding: var(--space-4) var(--space-5);
    }

    .share-modal-body {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   GALLERY FAVORITES
   ========================================================================== */

/* Favorites Badge on Action Bar Button */
.gallery-action-button {
    position: relative;
}

.favorites-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* Gallery Photo Container - clip overlay animations */
.photo-set-viewer.waterfallfill .ps-photo-container,
.photo-set-viewer.flexrowfill .ps-photo-container {
    overflow: hidden;
}

/* Gallery flexrowfill layout support */
.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-container {
    box-sizing: border-box;
}

.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-anchor {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-anchor img,
.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-anchor .ps-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}


/* Gallery Photo Overlay - Favorite Button (top-right dark circle) */
.gallery-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    opacity: 0;
}

.ps-photo-container:hover .gallery-fav-btn {
    opacity: 1;
}

.gallery-fav-btn svg {
    width: 14px;
    height: 14px;
}

.gallery-fav-unselected,
.gallery-fav-selected {
    display: none;
    line-height: 0;
    color: #fff;
}

/* Show unselected heart on hover (when NOT favorited) */
.ps-photo-container:hover .gallery-fav-btn .gallery-fav-unselected {
    display: inline-flex;
}

/* When favorited: show selected heart always */
.ps-photo-container.gallery-photo-favorited .gallery-fav-btn {
    opacity: 1;
}

.ps-photo-container.gallery-photo-favorited .gallery-fav-unselected {
    display: none !important;
}

.ps-photo-container.gallery-photo-favorited .gallery-fav-selected {
    display: inline-flex;
}

/* Filled heart for selected state (Lucide renders outline by default) */
.gallery-fav-selected svg {
    fill: currentColor;
}

/* Gallery Photo Overlay - Bottom Action Bar (slides up on hover) */
.gallery-photo-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ps-photo-container:hover .gallery-photo-actions {
    opacity: 1;
    transform: translateY(0);
}

.gallery-action-share,
.gallery-action-download,
.gallery-action-order {
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-action-share svg,
.gallery-action-download svg,
.gallery-action-order svg {
    width: 18px;
    height: 18px;
}

/* Active favorite button in FancyBox */
.fancybox-favorite-btn.active svg {
    fill: #ef4444;
    stroke: #ef4444;
}

/* Collapse the inline caption wrapper for waterfallfill mode - content is cloned to overlay position */
/* Use height:0 + overflow:hidden instead of display:none so JS can still clone the content */
.photo-set-viewer.waterfallfill .ps-photo-caption-wrapper {
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Filename strip (Design > Show Filenames). The strip is a sibling of the
   caption control inside the wrapper, so the wrapper opens up while the
   caption itself stays collapsed and the hover overlay clone still works. */
.gallery-photo-viewer .ps-photo-container.has-filename .ps-photo-caption-wrapper {
    height: auto !important;
    overflow: visible !important;
}

.gallery-photo-viewer .ps-photo-container.has-filename .ps-photo-caption {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Strip height lives here only: PrxJustified reads it back off the container to
   size its rows, the horizontal anchor gives up exactly this much at the bottom,
   and the hover bar offsets by it. Change this one value and all three follow.
   It is a border-box height, so it covers the text line plus its padding. */
.gallery-photo-viewer {
    --prx-filename-h: 30px;
}

.gallery-photo-viewer .ps-caption-filename {
    box-sizing: border-box;
    height: var(--prx-filename-h);
    line-height: 22px;
    padding: 4px;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Horizontal rows are absolutely sized by PrxJustified: the anchor gives up the
   strip's height at the bottom, and the strip is positioned against the tile.
   Position the strip itself, never its wrapper. A positioned wrapper becomes the
   containing block for .gallery-fav-btn and drags the heart out of the photo and
   down onto the strip. */
.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-container.has-filename .ps-photo-anchor {
    height: auto;
    bottom: var(--prx-filename-h);
}

.gallery-photo-viewer .photo-set-viewer.flexrowfill .ps-photo-container.has-filename .ps-caption-filename {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Keep the hover action bar on the photo, above the strip. It normally slides up
   from under the photo, but the strip now occupies that space, so it would
   travel across the filename. Fade it in place instead. */
.gallery-photo-viewer .ps-photo-container.has-filename .gallery-photo-actions,
.gallery-photo-viewer .ps-photo-container.has-filename:hover .gallery-photo-actions {
    bottom: var(--prx-filename-h);
    transform: none;
}

/* Rounded tiles round their outer box, which includes the strip, so the photo and
   the layers on it round their own bottom corners. */
.gallery-photo-viewer .ps-photo-container.all-rounded-large.has-filename .ps-photo,
.gallery-photo-viewer .ps-photo-container.all-rounded-large.has-filename .ps-photo-anchor::after {
    border-radius: 10px;
}
.gallery-photo-viewer .ps-photo-container.all-rounded-large.has-filename .gallery-photo-actions {
    border-radius: 0 0 10px 10px;
}

/* All Photos Panel (back button when viewing favorites) */
.all-photos-panel {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-4);
    text-align: center;
}

.all-photos-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.all-photos-btn:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-border-dark);
    color: var(--color-text);
    text-decoration: none;
}

.all-photos-btn i {
    width: 16px;
    height: 16px;
}

/* Empty Favorites State */
.favorites-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-muted);
}

.favorites-empty-icon {
    margin-bottom: var(--space-4);
}

.favorites-empty-icon i {
    width: 64px;
    height: 64px;
    color: var(--color-border);
}

.favorites-empty h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.favorites-empty p {
    font-size: var(--font-size-base);
    margin: 0;
}

/* ==========================================================================
   Mobile / Touch Device Overrides
   ========================================================================== */

/* Hide FancyBox navigation arrows on mobile - use swipe instead */
@media (hover: none) and (pointer: coarse) {

    /* Always show favorite button on mobile (hover doesn't work on touch) */
    .gallery-fav-btn {
        opacity: 1;
    }

    /* Show unselected heart on mobile (when NOT favorited) */
    .gallery-fav-btn .gallery-fav-unselected {
        display: inline-flex;
    }

    /* Hide unselected when favorited */
    .ps-photo-container.gallery-photo-favorited .gallery-fav-unselected {
        display: none !important;
    }

    /* Hide bottom action bar on mobile - users access these in FancyBox preview */
    .gallery-photo-actions {
        display: none !important;
    }
}


/* ======================================================================
   COLOR THEMES
   ====================================================================== */
body.color-theme-warm {
    --color-bg: #FAF8F5; --color-text: #3D3228; --color-text-secondary: #6B5D4F;
    --color-text-muted: #9A8B7C; --color-white: #FAF8F5;
    --color-border: #E8DFD6; --color-border-light: #F0EBE5; --color-bg-subtle: #F5F0EB;
}
body.color-theme-rose {
    --color-bg: #FDF2F4; --color-text: #4A2832; --color-text-secondary: #7A4A56;
    --color-text-muted: #A97A86; --color-white: #FDF2F4;
    --color-border: #EECDD2; --color-border-light: #F5E0E4; --color-bg-subtle: #FAE8EB;
}
body.color-theme-sand {
    --color-bg: #F5F0EB; --color-text: #3D3228; --color-text-secondary: #6B5D4F;
    --color-text-muted: #9A8B7C; --color-white: #F5F0EB;
    --color-border: #DDD5CC; --color-border-light: #E8E0D8; --color-bg-subtle: #EDE6DF;
}
body.color-theme-olive {
    --color-bg: #F2F4F0; --color-text: #2D3328; --color-text-secondary: #556050;
    --color-text-muted: #7E8A78; --color-white: #F2F4F0;
    --color-border: #D4D9CF; --color-border-light: #E0E4DC; --color-bg-subtle: #E8EBE5;
}
body.color-theme-sea {
    --color-bg: #F0F4F6; --color-text: #283338; --color-text-secondary: #4F6068;
    --color-text-muted: #788D96; --color-white: #F0F4F6;
    --color-border: #CFD9DE; --color-border-light: #DCE4E8; --color-bg-subtle: #E5ECF0;
}
body.color-theme-charcoal {
    --color-bg: #2C2C2C; --color-text: #F5F5F5; --color-text-secondary: #BBBBBB;
    --color-text-muted: #888888; --color-white: #363636;
    --color-border: #444444; --color-border-light: #3A3A3A; --color-bg-subtle: #333333;
    --color-gray-50: #333333; --color-gray-100: #3A3A3A;
    --color-gray-200: #444444; --color-gray-300: #555555;
    --color-gray-400: #777777; --color-gray-500: #999999;
    --color-gray-600: #AAAAAA; --color-gray-700: #BBBBBB;
    --color-gray-800: #DDDDDD; --color-gray-900: #F0F0F0;
}
body.color-theme-dark {
    --color-bg: #1A1A1A; --color-text: #F0F0F0; --color-text-secondary: #AAAAAA;
    --color-text-muted: #777777; --color-white: #242424;
    --color-border: #333333; --color-border-light: #2A2A2A; --color-bg-subtle: #222222;
    --color-gray-50: #222222; --color-gray-100: #2A2A2A;
    --color-gray-200: #333333; --color-gray-300: #444444;
    --color-gray-400: #666666; --color-gray-500: #888888;
    --color-gray-600: #999999; --color-gray-700: #AAAAAA;
    --color-gray-800: #CCCCCC; --color-gray-900: #E8E8E8;
}


/* ======================================================================
   FONT SETS
   ====================================================================== */
body.font-set-serif {
    --gallery-font: 'Lato', sans-serif;
    --font-family: var(--gallery-font);
    --font-family-heading: 'Playfair Display', Georgia, serif;
    --heading-letter-spacing: 0.02em;
    --heading-text-transform: none;
}
body.font-set-modern {
    --gallery-font: 'Montserrat', sans-serif;
    --font-family: var(--gallery-font);
    --font-family-heading: 'Montserrat', sans-serif;
    --heading-letter-spacing: 0.15em;
    --heading-text-transform: uppercase;
}
body.font-set-elegant {
    --gallery-font: 'Proza Libre', sans-serif;
    --font-family: var(--gallery-font);
    --font-family-heading: 'Cormorant Garamond', Georgia, serif;
    --heading-letter-spacing: 0.03em;
    --heading-text-transform: none;
}
body.font-set-bold {
    --gallery-font: 'Source Sans 3', sans-serif;
    --font-family: var(--gallery-font);
    --font-family-heading: 'Oswald', sans-serif;
    --heading-letter-spacing: 0.08em;
    --heading-text-transform: uppercase;
}
body.font-set-minimal {
    --gallery-font: 'Inter', sans-serif;
    --font-family: var(--gallery-font);
    --font-family-heading: 'Inter', sans-serif;
    --heading-letter-spacing: 0.2em;
    --heading-text-transform: uppercase;
}


/* ======================================================================
   COVER THEMES
   ====================================================================== */

/* --- Cover 1: Grand (default) --- */
/* 100vh full-bleed, centered text overlay — no extra CSS needed */

/* --- Cover 2: Classic — 50vh half-screen --- */
body.cover-theme-classic .gallery-hero { height: 50vh; }

/* --- Cover 3: Editorial — Split: text left, photo right --- */
body.cover-theme-editorial .gallery-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
body.cover-theme-editorial .gallery-hero-image { order: 2; grid-row: 1; }
body.cover-theme-editorial .gallery-hero-overlay {
    position: static;
    order: 1; grid-row: 1;
    background: var(--color-bg);
    display: flex;
    align-items: center; justify-content: center;
}
body.cover-theme-editorial .gallery-hero-content {
    color: var(--color-text); text-align: center; padding: var(--space-8);
}
body.cover-theme-editorial .gallery-hero-title { color: var(--color-text); text-shadow: none; }
body.cover-theme-editorial .gallery-hero-photographer { color: var(--color-text-muted); opacity: 1; }
body.cover-theme-editorial .gallery-hero-cta {
    color: var(--color-text); border-color: var(--color-border);
}
body.cover-theme-editorial .gallery-hero-cta:hover {
    background: var(--color-bg-subtle); color: var(--color-text);
}
@media screen and (max-width: 768px) {
    body.cover-theme-editorial .gallery-hero { grid-template-columns: 1fr; height: auto; }
    body.cover-theme-editorial .gallery-hero-image { order: 2; grid-row: auto; height: 50vh; }
    body.cover-theme-editorial .gallery-hero-overlay { order: 1; grid-row: auto; padding: var(--space-8) var(--space-4); }
}

/* --- Cover 4: Journal — Split: photo left, text right --- */
body.cover-theme-journal .gallery-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
body.cover-theme-journal .gallery-hero-image { order: 1; grid-row: 1; }
body.cover-theme-journal .gallery-hero-overlay {
    position: static;
    order: 2; grid-row: 1;
    background: var(--color-bg);
    display: flex;
    align-items: center; justify-content: center;
}
body.cover-theme-journal .gallery-hero-content {
    color: var(--color-text); text-align: center; padding: var(--space-8);
}
body.cover-theme-journal .gallery-hero-title { color: var(--color-text); text-shadow: none; }
body.cover-theme-journal .gallery-hero-photographer { color: var(--color-text-muted); opacity: 1; }
body.cover-theme-journal .gallery-hero-cta {
    color: var(--color-text); border-color: var(--color-border);
}
body.cover-theme-journal .gallery-hero-cta:hover {
    background: var(--color-bg-subtle); color: var(--color-text);
}
@media screen and (max-width: 768px) {
    body.cover-theme-journal .gallery-hero { grid-template-columns: 1fr; height: auto; }
    body.cover-theme-journal .gallery-hero-image { order: 1; grid-row: auto; height: 50vh; }
    body.cover-theme-journal .gallery-hero-overlay { order: 2; grid-row: auto; padding: var(--space-8) var(--space-4); }
}

/* --- Cover 5: Banner — Compact 280px strip --- */
body.cover-theme-banner .gallery-hero { height: 280px; }
body.cover-theme-banner .gallery-hero-title { font-size: var(--font-size-2xl); }
body.cover-theme-banner .gallery-hero-meta { font-size: var(--font-size-base); }
body.cover-theme-banner .gallery-hero-cta { display: none; }
body.cover-theme-banner .gallery-hero-photographer { display: none; }
body.cover-theme-banner .gallery-hero-logo { display: none; }
@media screen and (max-width: 480px) {
    body.cover-theme-banner .gallery-hero { height: 200px; }
    body.cover-theme-banner .gallery-hero-title { font-size: var(--font-size-xl); }
}

/* --- Cover 6: Frame — Photo inset with padding, title below --- */
body.cover-theme-frame .gallery-hero {
    height: auto;
    padding: var(--space-8);
    background: var(--color-bg);
}
body.cover-theme-frame .gallery-hero-image {
    height: 70vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
body.cover-theme-frame .gallery-hero-overlay {
    position: static;
    background: none;
    padding-top: var(--space-6);
}
body.cover-theme-frame .gallery-hero-content {
    color: var(--color-text); text-align: center;
}
body.cover-theme-frame .gallery-hero-title { color: var(--color-text); text-shadow: none; }
body.cover-theme-frame .gallery-hero-photographer { color: var(--color-text-muted); opacity: 1; }
body.cover-theme-frame .gallery-hero-cta {
    color: var(--color-text); border-color: var(--color-border);
}
body.cover-theme-frame .gallery-hero-cta:hover {
    background: var(--color-bg-subtle); color: var(--color-text);
}
@media screen and (max-width: 768px) {
    body.cover-theme-frame .gallery-hero { padding: var(--space-4); }
    body.cover-theme-frame .gallery-hero-image { height: 50vh; }
}

/* --- Cover 7: Outline — Full-bleed with decorative inset border --- */
body.cover-theme-outline .gallery-hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0) 100%);
}
body.cover-theme-outline .gallery-hero-overlay::before {
    content: '';
    position: absolute;
    inset: var(--space-6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
body.cover-theme-outline .gallery-hero-content {
    padding: var(--space-8);
    padding-bottom: calc(var(--space-6) + var(--space-8));
}
@media screen and (max-width: 768px) {
    body.cover-theme-outline .gallery-hero-overlay::before { inset: var(--space-3); }
    body.cover-theme-outline .gallery-hero-content { padding-bottom: calc(var(--space-3) + var(--space-6)); }
}

/* --- Cover 8: Clean — No photo, title bar only --- */
body.cover-theme-clean .gallery-hero { display: none; }

.gallery-title-bar {
    text-align: center;
    padding: var(--space-12) var(--space-5) var(--space-6);
}
.gallery-title-bar-name {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
}
.gallery-title-bar-date {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}
@media screen and (max-width: 768px) {
    .gallery-title-bar { padding: var(--space-8) var(--space-4) var(--space-4); }
    .gallery-title-bar-name { font-size: var(--font-size-2xl); }
}

/* --- Cover 9: Landing — Full-screen intro page --- */
body.cover-theme-landing.landing-active .gallery-action-bar,
body.cover-theme-landing.landing-active .gallery-content,
body.cover-theme-landing.landing-active .gallery-title-bar,
body.cover-theme-landing.landing-active .gallery-footer {
    display: none;
}
body.cover-theme-landing.landing-active .gallery-hero-cta {
    padding: var(--space-3) var(--space-8);
    font-size: var(--font-size-sm);
}

/* ==============================
   Face / People Filter Bar
   ============================== */

.face-filter-bar {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light, #eee);
    background: var(--color-bg, #fff);
    /* Pin the bar directly BELOW the sticky action bar (top offset = its measured
       height) on all viewports. Without this the desktop bar was static and tucked
       UNDER the menu when scrolled, clipping the face row. `--gallery-action-bar-h`
       is published by updateActionBarOffset(); 52px fallback. The bar's own stacking
       context also then paints above the menu, so the hover zoom clears it too. */
    position: sticky;
    top: var(--gallery-action-bar-h, 52px);
    z-index: var(--z-sticky);
}

.face-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 4px 16px;
    align-items: flex-start;
}

.face-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.15s;
    /* Establish a stacking context at rest at z-index:0 — BELOW the sticky action bar
       (--z-sticky: 200) so the face row still scrolls cleanly UNDER the menu. Hovering
       only raises this already-existing context's value (0 -> --z-fixed), which animates
       cleanly; the earlier snap came from the button turning INTO a stacking context on
       hover (not from the value), and permanently elevating it punched through the menu. */
    position: relative;
    z-index: 0;
}
.face-filter-thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    /* Zoom scales from center and is INSTANT — transform is NOT transitioned, so the
       hovered face's elevated z-index applies in the same frame as the scale. That
       kills the clipped-then-snap glitch (the clip only ever showed during the
       transform animation). Border/shadow still fade for a touch of polish. */
    transition: border-color 0.2s, box-shadow 0.06s ease-out;
}

/* Hover zoom (pointer devices only — no hover on touch). The crop is served at
   150px but shown at 56px, so scaling up to ~140px reveals real detail with no
   extra download and stays crisp. Lift above neighbours while zoomed. */
@media (hover: hover) {
    .face-filter-btn:hover {
        /* Above the sticky menu (200) so the centered zoom clears it. The zoom is
           instant (transform not transitioned), so this z-index applies in the same
           frame — no clipped-then-snap. Resting faces stay z-index:0 (below the menu). */
        z-index: var(--z-fixed);
    }
    .face-filter-btn:hover .face-filter-thumb {
        transform: scale(2.5);
        border-color: var(--color-primary, #2563eb);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    }
}

.face-filter-btn.selected .face-filter-thumb {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
}

.face-filter-count {
    font-size: 11px;
    color: var(--color-text-muted, #999);
    line-height: 1;
}
.face-filter-btn.selected .face-filter-count {
    color: var(--color-primary, #2563eb);
    font-weight: 600;
}

.face-filter-loading,
.face-filter-empty {
    padding: 8px 16px;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-muted, #999);
}

.face-filter-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-muted, #999);
    text-align: center;
}
.face-filter-hint i,
.face-filter-hint svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}
.face-filter-hint p {
    margin: 0;
    font-size: var(--font-size-xl, 20px);
}

/* People button active state */
#PeopleButton.active {
    color: var(--color-primary, #2563eb);
}

/* Active people-filter label — sits in the action-bar gap between the back
   link and the buttons. Hidden until a person is selected, and hidden on mobile
   where the collapsed summary already reports the count. */
.gallery-filter-label {
    display: none;
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    color: var(--color-text-secondary, #555);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 var(--space-3);
}
.gallery-filter-label.active {
    display: block;
}
@media screen and (max-width: 768px) {
    .gallery-filter-label.active { display: none; }
}

/* Drill-down chrome is mobile-only; hidden by default so the desktop face row
   + photos layout is completely unchanged. */
.face-filter-title { display: none; }
.face-filter-summary { display: none; }

/* Mobile People view is a drill-down. On desktop the faces and photos are both
   on screen, so selecting a person visibly updates the grid. A phone can't show
   both, so: State 1 shows every face (wrapped, all visible, no sideways swipe);
   tapping a face collapses the grid to a compact selected-summary and lets the
   photos take the screen. The summary reopens the grid to change people. */
@media screen and (max-width: 768px) {
    .face-filter-bar {
        position: sticky;
        top: var(--gallery-action-bar-h, 52px);
        z-index: var(--z-sticky);
        padding: var(--space-2) 0;
    }

    /* State 1 — browse: all faces visible */
    .face-filter-bar:not(.people-collapsed) .face-filter-title {
        display: block;
        padding: 2px 14px 4px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted, #999);
    }
    .face-filter-list {
        gap: 10px;
        padding: 4px 12px;
    }
    .face-filter-thumb {
        width: 52px;
        height: 52px;
    }

    /* State 2 — collapsed: grid hidden, selected summary shown */
    .face-filter-bar.people-collapsed .face-filter-list {
        display: none;
    }
    .face-filter-bar.people-collapsed .face-filter-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
    }
    .face-summary-chips {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
    }
    .face-summary-thumb {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--color-primary, #2563eb);
        flex: 0 0 auto;
    }
    .face-summary-label {
        font-size: var(--font-size-sm, 14px);
        color: var(--color-text-secondary, #555);
        white-space: nowrap;
    }
    .face-summary-change {
        margin-left: auto;
        flex: 0 0 auto;
        background: none;
        border: none;
        padding: 6px 4px 6px 10px;
        color: var(--color-primary, #2563eb);
        font-size: var(--font-size-sm, 14px);
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .face-filter-hint {
        padding: 32px 20px;
    }
}

/* ============================================================
   Video items — play overlay + duration badge
   Scoped to .gallery-photo-viewer per PhotoSetViewer rules
   ============================================================ */

/* Play icon — centered circle with triangle */
.gallery-photo-viewer .ps-video-item .ps-photo-anchor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='9.5,7.5 16.5,12 9.5,16.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.gallery-photo-viewer .ps-video-item .ps-photo-anchor:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(0, 0, 0, 0.7);
}

/* Duration badge — bottom-right corner */
.gallery-photo-viewer .ps-video-item .ps-duration-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 5;
    pointer-events: none;
}

/* Video hover preview — hide play icon and duration badge when preview is active */
.gallery-photo-viewer .ps-video-item.ps-preview-active .ps-photo-anchor::after {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gallery-photo-viewer .ps-video-item.ps-preview-active .ps-duration-badge {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Preview video element — covers the thumbnail */
.gallery-photo-viewer .ps-preview-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

/* ===================================
   Competitor Comparison Pages
   /home/compare/pixieset etc.
   =================================== */

/* Hero */
.compare-hero {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    padding: var(--space-16) 0 var(--space-12);
}

.compare-hero .section-header p {
    font-size: var(--font-size-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Section titles */
.compare-section-title {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-8);
}

/* Pricing table */
.compare-pricing-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.compare-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.compare-table thead th {
    padding: var(--space-3) var(--space-1);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.compare-table thead th:first-child {
    text-align: left;
}

.compare-table tbody td {
    padding: var(--space-3) var(--space-1);
    border-bottom: 1px solid var(--color-gray-100);
    text-align: center;
}

.compare-subheader th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    padding-top: 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.compare-tier-label {
    text-align: left !important;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.compare-col-them {
    color: var(--color-text-secondary);
}

.compare-col-us {
    color: var(--color-text);
    background: var(--color-secondary-light);
}

.compare-table thead .compare-col-us {
    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}

/* Cards grid */
.compare-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

.compare-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.compare-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.compare-card-icon svg {
    width: 20px;
    height: 20px;
}

.compare-card-win .compare-card-icon {
    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}

.compare-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.compare-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Wins / honest sections */
.compare-wins-section {
    background: var(--color-bg-subtle);
}

/* Verified date */
.compare-verified {
    text-align: center;
    padding: var(--space-6) 0 var(--space-8);
}

.last-verified-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .compare-cards-grid {
        grid-template-columns: 1fr;
    }

    .compare-table {
        font-size: var(--font-size-sm);
    }

    .compare-table thead th,
    .compare-table tbody td {
        padding: var(--space-2) var(--space-3);
    }
}

/* ===================================
   Session Photo Highlighting — FancyBox Thumb Strip
   Booth session photos highlighted, others dimmed
   =================================== */
.f-thumbs__slide.session-highlight {
    outline: 2px solid rgba(255,255,255,0.9) !important;
    outline-offset: -2px;
    border-radius: 3px;
}

/* Fit full photo in thumbs instead of cropping — EG brand only (booth strips/templates) */
.brand-eventgallery .f-thumbs__slide img {
    object-fit: contain;
    object-position: center center;
}

.brand-eventgallery .f-thumbs__slide button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-thumbs__slide.session-dimmed {
    opacity: 0.3;
    transition: opacity 0.3s;
}

.f-thumbs__slide.session-dimmed:hover {
    opacity: 1;
}

.f-thumbs__slide.session-highlight:hover,
.f-thumbs__slide.session-highlight:hover button {
    outline: 3px solid #fff !important;
    outline-offset: -3px;
    cursor: pointer;
}

.f-thumbs__slide.session-highlight:hover img {
    filter: brightness(1.2);
    transition: filter 0.2s;
}

.session-indicator {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 4px 12px;
    background: #fff;
    border-radius: 12px;
    z-index: 1060;
    pointer-events: none;
}


/* Gallery QR code + custom footer (set via EventSettings.ShowQRCode / CustomFooter) */
.gallery-qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 32px 16px 24px;
    gap: 12px;
    text-align: center;
}
.gallery-qr-image {
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gallery-qr-caption {
    color: #666;
    font-size: 13px;
    text-align: center;
}
.custom-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 16px 0;
    line-height: 1.6;
    color: #444;
    text-align: center;
}
.custom-footer a {
    color: inherit;
    text-decoration: underline;
}
.custom-footer p {
    margin: 0 0 12px;
}
.custom-footer p:last-child {
    margin-bottom: 0;
}