/* Event Page Themes */

/* Theme Selector Styles */
.theme-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.theme-selector-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #333;
}

.theme-circles {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.theme-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.theme-circle:hover {
    transform: scale(1.1);
}

.theme-circle.active {
    border-color: #333;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

.theme-circle[data-theme="classic"] {
    background: linear-gradient(135deg, #647B64 50%, #4B3F35 50%);
}

.theme-circle[data-theme="sky"] {
    background: linear-gradient(135deg, #87CEEB 50%, #5B9BD5 50%);
}

.theme-circle[data-theme="olive"] {
    background: linear-gradient(135deg, #8B9A6B 50%, #6B7B5B 50%);
}

.theme-circle[data-theme="candlelight"] {
    background: linear-gradient(135deg, #E8D5B7 50%, #C4A56D 50%);
}

.theme-circle[data-theme="stone"] {
    background: linear-gradient(135deg, #8C8C8C 50%, #5C5C5C 50%);
}

.theme-name {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.75rem;
    font-weight: 500;
}

/* ================================================
   THEME: CLASSIC (Default)
   Clean, minimal, neutral white and gray
   NOTE: Classic theme class should NOT be applied.
   When Classic is selected, no theme class is added,
   so the page uses its default white appearance.
   ================================================ */
.theme-classic {
    --theme-primary: #7E8C81;
    --theme-primary-hover: #647B64;
    --theme-secondary: #7E8C81;
    --theme-accent: #7E8C81;
    --theme-background: #FFFFFF;
    --theme-card-bg: #FFFFFF;
    --theme-text-primary: #333333;
    --theme-text-secondary: #666666;
    --theme-border-color: #E5E5E5;
    --theme-header-bg: #FFFFFF;
    --theme-tab-active: #7E8C81;
    --theme-tab-inactive: #555555;
    --theme-font-heading: 'Lora', serif;
    --theme-font-body: 'Lora', serif;
}

/* ================================================
   THEME: SKY
   Light, open, peaceful - soft blues and airy spacing
   ================================================ */
.theme-sky {
    --theme-primary: #5B9BD5;
    --theme-primary-hover: #4A8BC5;
    --theme-secondary: #87CEEB;
    --theme-accent: #5B9BD5;
    --theme-background: #F0F8FF;
    --theme-card-bg: #FFFFFF;
    --theme-text-primary: #2C3E50;
    --theme-text-secondary: #5D6D7E;
    --theme-border-color: #D4E6F1;
    --theme-header-bg: #FFFFFF;
    --theme-tab-active: #5B9BD5;
    --theme-tab-inactive: #7F8C8D;
    --theme-font-heading: 'Lora', serif;
    --theme-font-body: 'Lora', serif;
}

/* ================================================
   THEME: OLIVE BRANCH
   Symbol of peace and comfort - gentle greens, community warmth
   ================================================ */
.theme-olive {
    --theme-primary: #6B7B5B;
    --theme-primary-hover: #5A6A4A;
    --theme-secondary: #8B9A6B;
    --theme-accent: #7A8A5B;
    --theme-background: #F5F7F2;
    --theme-card-bg: #FFFFFF;
    --theme-text-primary: #3D4A2D;
    --theme-text-secondary: #6B7B5B;
    --theme-border-color: #D5DCC8;
    --theme-header-bg: #FFFFFF;
    --theme-tab-active: #6B7B5B;
    --theme-tab-inactive: #8B9A6B;
    --theme-font-heading: 'Lora', serif;
    --theme-font-body: 'Lora', serif;
}

/* ================================================
   THEME: CANDLELIGHT
   Memorial-inspired - warm neutrals, soft glow, intimate feeling
   ================================================ */
.theme-candlelight {
    --theme-primary: #C4A56D;
    --theme-primary-hover: #B3945C;
    --theme-secondary: #E8D5B7;
    --theme-accent: #D4B87D;
    --theme-background: #FBF8F3;
    --theme-card-bg: #FFFFFF;
    --theme-text-primary: #5C4A32;
    --theme-text-secondary: #8B7355;
    --theme-border-color: #E8D5B7;
    --theme-header-bg: #FFFFFF;
    --theme-tab-active: #C4A56D;
    --theme-tab-inactive: #8B7355;
    --theme-font-heading: 'Lora', serif;
    --theme-font-body: 'Lora', serif;
}

/* ================================================
   THEME: STONE
   Grounded and traditional - muted grays, timeless, strong
   ================================================ */
.theme-stone {
    --theme-primary: #6B6B6B;
    --theme-primary-hover: #5A5A5A;
    --theme-secondary: #8C8C8C;
    --theme-accent: #7A7A7A;
    --theme-background: #F5F5F5;
    --theme-card-bg: #FFFFFF;
    --theme-text-primary: #3A3A3A;
    --theme-text-secondary: #6B6B6B;
    --theme-border-color: #D5D5D5;
    --theme-header-bg: #FFFFFF;
    --theme-tab-active: #5C5C5C;
    --theme-tab-inactive: #8C8C8C;
    --theme-font-heading: 'Lora', serif;
    --theme-font-body: 'Lora', serif;
}

/* ================================================
   Apply Theme Variables to Event Page Elements
   ================================================ */

/* Body/Background - !important needed to override inline white background for Classic */
[class*="theme-"] .event-page-content,
[class*="theme-"] .preview-container {
    background-color: var(--theme-background) !important;
}

/* Headers and Titles */
[class*="theme-"] .profile-name,
[class*="theme-"] h1.loved-one-name {
    color: var(--theme-text-primary);
    font-family: var(--theme-font-heading);
}

/* Bio and descriptions */
[class*="theme-"] .profile-bio,
[class*="theme-"] .event-bio {
    color: var(--theme-text-secondary);
    font-family: var(--theme-font-body);
}

/* Cards */
[class*="theme-"] .content-card,
[class*="theme-"] .card,
[class*="theme-"] .fund-container {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border-color);
}

/* Primary buttons */
[class*="theme-"] .btn-primary,
[class*="theme-"] .contribute-btn {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

[class*="theme-"] .btn-primary:hover,
[class*="theme-"] .contribute-btn:hover {
    background-color: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
}

/* Tabs */
[class*="theme-"] .tab-active,
[class*="theme-"] .event-tab.active {
    color: var(--theme-tab-active);
    border-bottom-color: var(--theme-tab-active);
}

[class*="theme-"] .tab-inactive,
[class*="theme-"] .event-tab {
    color: var(--theme-tab-inactive);
}

/* Borders and dividers */
[class*="theme-"] .section-divider,
[class*="theme-"] .tab-border {
    border-color: var(--theme-border-color);
}

/* Text colors */
[class*="theme-"] .text-primary {
    color: var(--theme-text-primary);
}

[class*="theme-"] .text-secondary {
    color: var(--theme-text-secondary);
}

/* Accent elements */
[class*="theme-"] .accent-text,
[class*="theme-"] .accent-border {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}

/* Progress bars */
[class*="theme-"] .progress-fill {
    background-color: var(--theme-primary);
}