/**
 * Theme CSS - Dynamic Page-Based Color Theming
 * 
 * This file provides theme-specific styling for:
 * - Tours (GREEN): .theme-tours
 * - Flight (BLUE): .theme-flight  
 * - Bus (ORANGE): .theme-bus
 * 
 * CSS Variables used:
 * --primary, --primary-dark, --secondary
 * --theme-overlay, --theme-gradient-start, --theme-gradient-end
 */

/* ============================================
   THEME UTILITY CLASSES
   ============================================ */

/* Background theme colors */
.bg-theme {
    background-color: var(--primary) !important;
}

.bg-theme-dark {
    background-color: var(--primary-dark) !important;
}

.bg-theme-light {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}

.bg-theme-gradient {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

/* Text theme colors */
.text-theme {
    color: var(--primary) !important;
}

.text-theme-dark {
    color: var(--primary-dark) !important;
}

/* Border theme colors */
.border-theme {
    border-color: var(--primary) !important;
}

.border-theme-light {
    border-color: rgba(var(--primary-rgb), 0.3) !important;
}

/* ============================================
   BUTTON THEME OVERRIDES
   ============================================ */

/* Primary CTA Buttons */
.site-button,
.btn-theme {
    background-color: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.site-button:hover,
.btn-theme:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

.site-button:focus,
.btn-theme:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.4);
}

/* Outline style button */
.btn-theme-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-theme-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* ============================================
   CARD THEME OVERRIDES
   ============================================ */

/* Card hover border effect */
.tour-card:hover,
.card-theme:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.15);
}

.card-theme {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   FORM FOCUS STATES
   ============================================ */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
    outline: none;
}

/* ============================================
   STEP NUMBER BOXES (Flight/Bus pages)
   ============================================ */

.theme-flight .step-number,
.theme-bus .step-number,
.theme-tours .step-number,
.bg-primary {
    background-color: var(--primary);
}

/* Step icon circles - use secondary for accent */
.theme-flight .step-icon-circle,
.theme-bus .step-icon-circle,
.theme-tours .step-icon-circle {
    background-color: var(--secondary);
}

/* ============================================
   HEADER/NAVBAR THEME
   ============================================ */

/* Fixed header with theme tint */
.site-header.is-fixed {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Active nav indicator */
.navbar-nav .active > a,
.navbar-nav li:hover > a {
    color: var(--secondary) !important;
}

/* ============================================
   BADGE THEME
   ============================================ */

.badge-theme {
    background-color: var(--primary);
    color: white;
}

.badge-theme-light {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
}

/* ============================================
   LINK THEME (Action links only)
   ============================================ */

.link-theme,
.action-link {
    color: var(--primary);
    transition: color 0.2s ease;
}

.link-theme:hover,
.action-link:hover {
    color: var(--primary-dark);
}

/* ============================================
   ACCENT ELEMENTS
   ============================================ */

/* Section title underlines */
.section-title-underline {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

/* Dividers */
.divider-theme {
    background-color: var(--primary);
}

/* Icon backgrounds */
.icon-theme-bg {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

/* Active tabs/filters */
.tab-theme.active,
.filter-theme.active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loader .dot {
    background-color: var(--primary);
}

/* ============================================
   CTA SECTION BACKGROUNDS
   ============================================ */

section.bg-primary {
    background-color: var(--primary);
}

/* ============================================
   FOOTER THEME
   ============================================ */

footer.bg-primary,
footer {
    background-color: var(--primary);
}

/* Newsletter section accent */
.bg-citrusyellow {
    background-color: var(--secondary);
}

/* Social icons */
.bg-citrusyellow.hover\\:rounded-2lg {
    background-color: var(--secondary);
}