/* ================================================================
   frontend.css — Global styles for the CI frontend
   Replaces styled-components from React
   ================================================================ */

:root {
    /* Yellow color scheme for buttons */
    --primary-color: #FFC107;
    --secondary-color: #FFD54F;
    --accent-color: #FFEB3B;
    --primary-light: #FFD54F;
    --primary-dark: #FFA000;
    
    /* Button colors - Yellow theme */
    --btn-color: #FFC107;
    --btn-hover-color: #FFA000;
    --btn-text-color: #000000;
    
    /* Header and footer */
    --header-color: #2d2d2d;
    --footer-color: #2d2d2d;
    
    /* Text colors */
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --text-white: #ffffff;
    
    /* Background colors */
    --bg-light: #F8F9FA;
    --bg-white: #ffffff;
    
    /* Border colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    
    /* RGB values for rgba usage */
    --primary-color-rgb: 255, 193, 7;
    --secondary-color-rgb: 255, 213, 79;
}

/* ----------------------------------------------------------------
   Base
   ---------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

#site-header .nav-link {
    transition: opacity 0.2s;
}
#site-header .nav-link:hover {
    opacity: 0.75;
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.footer-link {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.footer-link:hover { color: #fff; }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}
.social-link:hover { background: var(--btn-color); color: #fff; }

/* ----------------------------------------------------------------
   Hero Section
   ---------------------------------------------------------------- */
#hero-section {
    position: relative;
}

/* ----------------------------------------------------------------
   Search Form
   ---------------------------------------------------------------- */
#search-form .form-control,
#search-form .form-select {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    padding: 10px 14px;
}

.select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* ----------------------------------------------------------------
   Bus Cards (Booking page)
   ---------------------------------------------------------------- */
.bus-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.bus-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* ----------------------------------------------------------------
   Seat Map
   ---------------------------------------------------------------- */
.seat-map {
    max-width: 400px;
    margin: 0 auto;
}
.seat-btn {
    user-select: none;
    transition: transform 0.1s, background 0.2s;
}
.seat-btn:hover:not([data-booked="1"]) {
    transform: scale(1.1);
}

/* ----------------------------------------------------------------
   Ticket Cards
   ---------------------------------------------------------------- */
.sidebar-tab {
    border-radius: 6px;
    text-align: left;
    background: transparent;
    border: none;
    color: #333;
    padding: 10px 14px;
    transition: background 0.2s;
}
.sidebar-tab:hover,
.sidebar-tab.active {
    background: var(--btn-color) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------
   Page Content (About, FAQ, Privacy, Terms)
   ---------------------------------------------------------------- */
.page-content {
    line-height: 1.8;
}
.page-content h1, .page-content h2, .page-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.page-content p { margin-bottom: 1rem; }
.page-content img { max-width: 100%; border-radius: 8px; }

/* ----------------------------------------------------------------
   Route Cards
   ---------------------------------------------------------------- */
.route-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.route-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border-color: var(--btn-color) !important;
}

/* ----------------------------------------------------------------
   Payment Gateway Options
   ---------------------------------------------------------------- */
.gateway-option {
    transition: border-color 0.2s, background 0.2s;
}
.gateway-option:hover {
    border-color: var(--btn-color) !important;
}

/* ----------------------------------------------------------------
   Buttons (dynamic color from settings)
   ---------------------------------------------------------------- */
.btn-brand {
    background: var(--btn-color);
    color: var(--btn-text-color);
    border: none;
}
.btn-brand:hover {
    background: var(--btn-hover-color);
    color: var(--btn-text-color);
}

/* ----------------------------------------------------------------
   Flatpickr overrides
   ---------------------------------------------------------------- */
.flatpickr-input {
    background: #fff !important;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    #hero-section { min-height: 400px; }
    .seat-map { max-width: 100%; }
}

/* ----------------------------------------------------------------
   Print styles
   ---------------------------------------------------------------- */
@media print {
    #site-header, #site-footer, .btn, nav { display: none !important; }
    #print-ticket-content { display: block !important; }
}