/**
 * BriskTransfer - Responsive Override CSS
 * Fixes mobile/tablet responsiveness across all public pages
 * Load this AFTER all other stylesheets
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design System)
   ============================================ */
:root {
    /* Colors */
    --bt-primary: #10375C;
    --bt-primary-light: #1a4a7a;
    --bt-primary-dark: #0A2647;
    --bt-accent: #D39D55;
    --bt-accent-light: #e0b577;
    --bt-success: #28A745;
    --bt-danger: #dc3545;
    --bt-warning: #FF9800;
    --bt-text: #2d3436;
    --bt-text-light: #636e72;
    --bt-text-muted: #b2bec3;
    --bt-bg: #f8f9fa;
    --bt-bg-input: #f5f7fa;
    --bt-border: #e0e0e0;
    --bt-white: #ffffff;

    /* Spacing */
    --bt-space-xs: 4px;
    --bt-space-sm: 8px;
    --bt-space-md: 16px;
    --bt-space-lg: 24px;
    --bt-space-xl: 32px;
    --bt-space-2xl: 48px;

    /* Typography */
    --bt-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bt-text-xs: 0.75rem;
    --bt-text-sm: 0.875rem;
    --bt-text-base: 1rem;
    --bt-text-lg: 1.125rem;
    --bt-text-xl: 1.25rem;
    --bt-text-2xl: 1.5rem;
    --bt-text-3xl: 1.875rem;

    /* Borders & Shadows */
    --bt-radius: 10px;
    --bt-radius-sm: 6px;
    --bt-radius-lg: 16px;
    --bt-radius-full: 50%;
    --bt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --bt-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --bt-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --bt-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --bt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bt-transition-fast: all 0.15s ease;
    --bt-min-touch: 44px;
}

/* ============================================
   DESIGN SYSTEM - FORM INPUTS
   ============================================ */

/* Unified form input wrapper (replaces scattered inline styles) */
.bt-input-wrap {
    background-color: var(--bt-bg-input);
    border-radius: var(--bt-radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--bt-space-md);
    border: 1.5px solid var(--bt-border);
    transition: var(--bt-transition-fast);
}

.bt-input-wrap:focus-within {
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 3px rgba(16, 55, 92, 0.1);
    background-color: var(--bt-white);
}

.bt-input-wrap i,
.bt-input-wrap .input-icon {
    font-size: 16px;
    color: var(--bt-text-light);
    margin-right: 10px;
    flex-shrink: 0;
    transition: var(--bt-transition-fast);
}

.bt-input-wrap:focus-within i,
.bt-input-wrap:focus-within .input-icon {
    color: var(--bt-primary);
}

.bt-input-wrap input,
.bt-input-wrap select,
.bt-input-wrap textarea {
    border: none;
    background: none;
    outline: none;
    font-size: var(--bt-text-base);
    color: var(--bt-text);
    flex-grow: 1;
    padding: 4px 0;
    font-family: var(--bt-font);
}

.bt-input-wrap input::placeholder,
.bt-input-wrap textarea::placeholder {
    color: var(--bt-text-muted);
}

/* Form labels */
.bt-label {
    font-size: var(--bt-text-sm);
    font-weight: 600;
    color: var(--bt-text);
    margin-bottom: 6px;
    display: block;
}

/* ============================================
   DESIGN SYSTEM - BUTTONS
   ============================================ */

/* Primary action button */
.bt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: var(--bt-text-base);
    font-weight: 600;
    font-family: var(--bt-font);
    border: none;
    border-radius: var(--bt-radius);
    cursor: pointer;
    transition: var(--bt-transition);
    text-decoration: none;
    line-height: 1.5;
    min-height: var(--bt-min-touch);
}

.bt-btn-primary {
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-light));
    color: var(--bt-white);
    box-shadow: 0 4px 12px rgba(16, 55, 92, 0.3);
}

.bt-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 55, 92, 0.4);
    color: var(--bt-white);
}

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

.bt-btn-primary:disabled,
.bt-btn-primary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bt-btn-accent {
    background: linear-gradient(135deg, var(--bt-accent), var(--bt-accent-light));
    color: var(--bt-white);
    box-shadow: 0 4px 12px rgba(211, 157, 85, 0.3);
}

.bt-btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 157, 85, 0.4);
    color: var(--bt-white);
}

.bt-btn-outline {
    background: transparent;
    color: var(--bt-primary);
    border: 2px solid var(--bt-primary);
}

.bt-btn-outline:hover {
    background: var(--bt-primary);
    color: var(--bt-white);
    transform: translateY(-2px);
}

.bt-btn-block {
    width: 100%;
}

.bt-btn-lg {
    padding: 14px 32px;
    font-size: var(--bt-text-lg);
}

/* Loading state for buttons */
.bt-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.bt-btn.loading::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bt-spin 0.6s linear infinite;
    margin-left: 8px;
}

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

/* ============================================
   DESIGN SYSTEM - CARDS
   ============================================ */

.bt-card {
    background: var(--bt-white);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-sm);
    border: 1px solid var(--bt-border);
    overflow: hidden;
    transition: var(--bt-transition);
}

.bt-card:hover {
    box-shadow: var(--bt-shadow);
    transform: translateY(-2px);
}

.bt-card-body {
    padding: var(--bt-space-lg);
}

/* ============================================
   DESIGN SYSTEM - BADGES & STATUS
   ============================================ */

.bt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--bt-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bt-badge-surge {
    background: linear-gradient(135deg, #FF9800, #FF5722);
    color: white;
    font-size: var(--bt-text-sm);
    padding: 6px 14px;
    animation: bt-pulse-badge 2s ease-in-out infinite;
}

@keyframes bt-pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.bt-badge-new { background: #E3F2FD; color: #1565C0; }
.bt-badge-assigned { background: #FFF3E0; color: #E65100; }
.bt-badge-started { background: #E8F5E9; color: #2E7D32; }
.bt-badge-completed { background: #E8F5E9; color: #1B5E20; }
.bt-badge-cancelled { background: #FFEBEE; color: #C62828; }
.bt-badge-paid { background: #E8F5E9; color: #1B5E20; }
.bt-badge-pending { background: #FFF8E1; color: #F57F17; }

/* ============================================
   DESIGN SYSTEM - FARE DISPLAY
   ============================================ */

.bt-fare-card {
    background: var(--bt-white);
    border-radius: var(--bt-radius);
    border: 1px solid var(--bt-border);
    overflow: hidden;
}

.bt-fare-card .fare-header {
    background: linear-gradient(135deg, var(--bt-primary-dark), var(--bt-primary));
    color: white;
    padding: 16px 20px;
    font-weight: 600;
    font-size: var(--bt-text-lg);
}

.bt-fare-card .fare-body {
    padding: 20px;
}

.bt-fare-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: var(--bt-text-sm);
    color: var(--bt-text-light);
}

.bt-fare-row:last-child {
    border-bottom: none;
}

.bt-fare-row .fare-value {
    font-weight: 600;
    color: var(--bt-text);
}

.bt-fare-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-top: 2px solid var(--bt-primary);
    font-size: var(--bt-text-xl);
    font-weight: 700;
}

.bt-fare-total .total-price {
    color: var(--bt-primary);
    font-size: var(--bt-text-2xl);
}

/* ============================================
   DESIGN SYSTEM - VEHICLE CARDS
   ============================================ */

.de-item-list {
    transition: var(--bt-transition);
    border-radius: var(--bt-radius-lg) !important;
    border: 1.5px solid var(--bt-border) !important;
    overflow: hidden;
}

.de-item-list:hover {
    border-color: var(--bt-primary) !important;
    box-shadow: var(--bt-shadow);
    transform: translateY(-3px);
}

.de-item-list .d-img img {
    border-radius: var(--bt-radius);
    transition: var(--bt-transition);
}

.de-item-list:hover .d-img img {
    transform: scale(1.02);
}

/* Price highlight on vehicle cards */
.price-highlight {
    font-size: var(--bt-text-2xl) !important;
    font-weight: 700 !important;
    color: var(--bt-primary) !important;
    display: block;
    margin: 4px 0;
}

/* Surge badge on vehicle cards */
.surge-badge {
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(135deg, #FF9800, #FF5722);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* Book now button in vehicle cards */
.d-price .btn,
.d-price [type="submit"] {
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-light)) !important;
    color: white !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: var(--bt-radius) !important;
    font-weight: 600 !important;
    font-size: var(--bt-text-base) !important;
    transition: var(--bt-transition) !important;
    box-shadow: 0 4px 12px rgba(16, 55, 92, 0.25) !important;
    cursor: pointer;
}

.d-price .btn:hover,
.d-price [type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 55, 92, 0.35) !important;
}

/* ============================================
   DESIGN SYSTEM - TRIP DETAILS SIDEBAR
   ============================================ */

.item_filter_group {
    background: var(--bt-white);
    border-radius: var(--bt-radius-lg);
    padding: var(--bt-space-lg);
    border: 1px solid var(--bt-border);
    box-shadow: var(--bt-shadow-sm);
}

.item_filter_group h4 {
    color: var(--bt-primary);
    font-weight: 700;
    font-size: var(--bt-text-lg) !important;
    margin-bottom: var(--bt-space-md) !important;
}

.item_filter_group ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: var(--bt-text-sm);
}

.item_filter_group ul li:last-child {
    border-bottom: none;
}

/* ============================================
   CHECKOUT - PAY BUTTON ENHANCEMENT
   ============================================ */

/* Override inline-styled pay buttons */
[style*="background-color: #10375C"][style*="width:100%"],
[style*="background-color:#10375C"][style*="width:100%"] {
    background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-light)) !important;
    padding: 14px 24px !important;
    font-size: var(--bt-text-lg) !important;
    font-weight: 600 !important;
    border-radius: var(--bt-radius) !important;
    transition: var(--bt-transition) !important;
    box-shadow: 0 4px 15px rgba(16, 55, 92, 0.3) !important;
    letter-spacing: 0.5px;
}

[style*="background-color: #10375C"][style*="width:100%"]:hover,
[style*="background-color:#10375C"][style*="width:100%"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 55, 92, 0.4) !important;
}

/* ============================================
   CHECKOUT - PAYMENT METHOD SECTION
   ============================================ */

/* Secure payment badge area */
[style*="background-color: #e8fbe8"],
[style*="background-color:#e8fbe8"] {
    background: linear-gradient(135deg, #f0f9f0, #e8f5e9) !important;
    border: 1px solid #c8e6c9 !important;
    border-radius: var(--bt-radius) !important;
    padding: 16px !important;
}

/* ============================================
   INLINE STYLE OVERRIDES - FORM WRAPPERS
   ============================================ */

/* Target the repeated inline-styled input wrappers across all pages */
[style*="background-color: #f9f9f9"][style*="border-radius: 8px"][style*="display: flex"] {
    background-color: var(--bt-bg-input) !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: var(--bt-radius) !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    transition: var(--bt-transition-fast) !important;
}

[style*="background-color: #f9f9f9"][style*="border-radius: 8px"][style*="display: flex"]:focus-within {
    border-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 55, 92, 0.1) !important;
    background-color: var(--bt-white) !important;
}

/* Icons inside input wrappers */
[style*="background-color: #f9f9f9"] > i.fas,
[style*="background-color: #f9f9f9"] > i.fa {
    color: var(--bt-text-light) !important;
    transition: var(--bt-transition-fast) !important;
}

[style*="background-color: #f9f9f9"]:focus-within > i.fas,
[style*="background-color: #f9f9f9"]:focus-within > i.fa {
    color: var(--bt-primary) !important;
}

/* ============================================
   COOKIE CONSENT BANNER - FORCE STYLES
   ============================================ */
#cookieConsent {
    background: #0A2647 !important;
    color: #ffffff !important;
}
#cookieConsent * {
    color: #ffffff !important;
}
#cookieConsent p,
#cookieConsent p * {
    color: #cccccc !important;
}
#cookieConsent a {
    color: #D39D55 !important;
}

/* ============================================
   GLOBAL RESPONSIVE FIXES
   ============================================ */

/* Prevent horizontal overflow on all pages */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Make all images responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* Minimum touch target size for all interactive elements */
button, .btn, a.btn, input[type="submit"],
input[type="button"], select, .form-select {
    min-height: var(--bt-min-touch);
}

/* Better form inputs on mobile */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control,
.form-select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
}

/* ============================================
   GOOGLE PLACES AUTOCOMPLETE - RESPONSIVE
   ============================================ */
.pac-container {
    width: calc(100vw - 40px) !important;
    max-width: 400px !important;
    min-width: 260px !important;
}

/* ============================================
   HEADER & NAVIGATION - MOBILE
   ============================================ */
@media (max-width: 991px) {
    header .container {
        padding: 0 15px;
    }

    header nav {
        padding: 10px 0;
    }

    header img.logo {
        max-width: 130px;
        height: auto !important;
        width: auto !important;
    }

    .phone-topbar, .social-topbar {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    header img.logo {
        max-width: 110px;
    }

    #subheader {
        padding: 30px 0 50px 0 !important;
    }

    #subheader h1 {
        font-size: 1.5rem !important;
        margin-top: 60px !important;
    }
}

/* ============================================
   INDEX.PHP - HERO FORM SECTION
   ============================================ */

/* Hero form card */
.shadow-soft {
    transition: var(--bt-transition);
}

/* Form input wrappers - the inline styled divs */
@media (max-width: 767px) {
    /* Stack form columns */
    .col-lg-5.offset-lg-1 {
        margin-top: 20px;
    }

    /* Hero text section */
    .col-lg-6 h1 {
        font-size: 1.8rem !important;
    }

    .col-lg-6 p {
        font-size: 0.95rem !important;
    }

    /* Passenger selector buttons */
    .de_form .qty-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        font-size: 16px !important;
    }

    .de_form .qty-display {
        min-width: 30px;
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    .col-lg-6 h1 {
        font-size: 1.4rem !important;
    }

    /* Radio image vehicle selector - 2 per row on mobile */
    .radio-img.col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .radio-img label {
        font-size: 12px;
    }

    .radio-img label img {
        max-width: 60px;
    }
}

/* ============================================
   BOOKING_VEHICLE.PHP - MAP & VEHICLE CARDS
   ============================================ */

/* Responsive map */
#map {
    height: 400px;
    width: 100%;
    border-radius: var(--bt-radius);
    transition: height 0.3s ease;
}

@media (max-width: 991px) {
    #map {
        height: 300px;
    }
}

@media (max-width: 576px) {
    #map {
        height: 220px;
    }
}

/* Vehicle selection cards */
.vehicle-card,
.card-vehicle {
    transition: var(--bt-transition);
    border-radius: var(--bt-radius) !important;
    overflow: hidden;
}

.vehicle-card:hover,
.card-vehicle:hover {
    transform: translateY(-2px);
    box-shadow: var(--bt-shadow-hover);
}

@media (max-width: 991px) {
    /* Stack sidebar and content on tablets */
    .col-lg-3 {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    /* Vehicle card images */
    .vehicle-card img,
    .card-vehicle img {
        max-height: 120px;
        object-fit: contain;
    }

    /* Fare display */
    .fare-amount, .total-fare {
        font-size: 1.3rem !important;
    }

    /* Surge pricing notice */
    .surge-notice, [style*="background-color: #fff3cd"] {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
}

/* ============================================
   CHECKOUT.PHP - PAYMENT FORM
   ============================================ */

/* Fix the two-column layout for tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-lg-5 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}

/* Form field wrapper boxes */
@media (max-width: 767px) {
    /* Make all inline-styled form wrappers responsive */
    [style*="background-color: #f9f9f9"][style*="border-radius: 8px"] {
        padding: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Form inputs inside wrappers */
    [style*="background-color: #f9f9f9"] input,
    [style*="background-color: #f9f9f9"] select {
        font-size: 15px !important;
        padding: 8px 5px !important;
    }

    /* Form icons */
    [style*="background-color: #f9f9f9"] i.fas,
    [style*="background-color: #f9f9f9"] i.fa {
        font-size: 16px !important;
        margin-right: 8px !important;
    }

    /* Labels */
    label[style*="font-size: 14px"],
    label[style*="font-size: 16px"] {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
}

/* Phone number input - country selector */
@media (max-width: 576px) {
    /* Country dropdown */
    #countryDropdown {
        width: calc(100vw - 60px) !important;
        max-width: 300px !important;
    }

    /* Country button text */
    #selectedCountryText {
        width: 75px !important;
        font-size: 13px !important;
    }

    /* Checkout columns - full width */
    .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Payment button */
.btn-pay, [style*="background-color: #10375C"][style*="width:100%"] {
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: var(--bt-radius) !important;
    transition: var(--bt-transition);
}

.btn-pay:hover, [style*="background-color: #10375C"][style*="width:100%"]:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Fare breakdown card */
@media (max-width: 576px) {
    .fare-breakdown,
    [style*="border-left: 4px solid"],
    [style*="border-left:4px solid"] {
        margin: 10px 0 !important;
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   SUCCESS.PHP - CONFIRMATION PAGE
   ============================================ */
@media (max-width: 576px) {
    /* Main container */
    .main-container,
    [style*="max-width: 700px"] {
        padding: 10px !important;
        margin: 10px auto !important;
    }

    /* Success header */
    .success-header {
        padding: 25px 15px !important;
    }

    .success-header h1 {
        font-size: 1.4rem !important;
    }

    .success-header p {
        font-size: 0.85rem !important;
    }

    /* Success icon */
    .success-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }

    /* Info grid - single column on mobile */
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Section cards */
    .section-card {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }

    /* Route display - stack vertically */
    .route-display {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .route-display .route-line {
        display: none !important;
    }

    .route-point {
        width: 100% !important;
    }

    /* Trip badges */
    .trip-badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    /* Fare breakdown */
    .fare-row {
        font-size: 0.85rem !important;
    }

    .total-row {
        font-size: 1rem !important;
    }
}

@media (max-width: 767px) and (min-width: 577px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   DESTINATIONS.PHP
   ============================================ */
@media (max-width: 576px) {
    .destination-card img {
        max-height: 200px;
        object-fit: cover;
    }

    .destination-card h4 {
        font-size: 1.1rem;
    }
}

/* ============================================
   FORM ERROR MESSAGES - ALL PAGES
   ============================================ */
.error-message,
[style*="color: red"],
.alert-danger {
    font-size: 0.9rem;
    padding: 10px 15px;
    border-radius: 8px;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ============================================
   LOADING SPINNER - MODERN
   ============================================ */
.page-loader,
[style*="position: fixed"][style*="z-index: 9999"] {
    backdrop-filter: blur(4px) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   GENERAL IMPROVEMENTS - ALL PAGES
   ============================================ */

/* Better scrollbar on mobile */
@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

    /* Remove spacer elements on mobile */
    .spacer-single,
    .spacer-double {
        height: 20px !important;
    }

    .spacer-20 {
        height: 10px !important;
    }

    /* Reduce section padding */
    section {
        padding: 40px 0 !important;
    }

    /* Better container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Better focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--bt-primary) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Better link transitions */
a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Card hover effects */
.card, .shadow-soft, [class*="rounded"] {
    transition: var(--bt-transition);
}

/* ============================================
   FOOTER - RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    footer .col-lg-3,
    footer .col-lg-4,
    footer .col-md-6 {
        margin-bottom: 25px;
        text-align: center;
    }

    footer .social-icons {
        justify-content: center;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    header, footer, nav, .no-print, .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .main-container, .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}