/*
 * AĞABEYOĞLU YAZILIM A.Ş.
 * Tema: [Land of Holiday]
 * Sürüm: 0.1 - DEMO
 * Geliştirici: Ağabeyoğlu® Grup Medya İnşaat Yazılım San. ve Tic. A.Ş.
 * Web: https://agabeyoglu.com
 * Lisans:  ©2025 Özel Kullanım | Tüm Hakları Saklıdır.
*/

/* Root variables should ideally be in style.css or a shared variables file.
   If this file is loaded independently or overrides, then they can stay.
   For consistency, using the same variable names as style.css is better.
*/
:root {
    /* Using primary set of variables from style.css for consistency */
    --primary: #F7A713;
    --primary-rgb: 247, 167, 19;
    --secondary: #2D96CD; /* Updated to match style.css */
    --secondary-rgb: 45, 150, 205;
    --success: #28a745; /* Updated to match style.css */
    --danger: #dc3545;  /* Updated to match style.css */
    --warning: #ffc107; /* Updated to match style.css */
    --info: #00bcd4;    /* Can be kept or updated to style.css's --info */
    --light: #FFFFFF;   /* Updated to match style.css --light */
    --dark: #1A1A1A;    /* Updated to match style.css --dark */
    --white: #FFFFFF;
    --black: #000000;
    --gray: #F5F5F5;    /* Updated to match style.css --gray */
    --gray-medium: #e0e0e0;
    --gray-dark: #6c757d; /* Kept as is, can be style.css's --gray-dark if desired */
    
    /* Specific to mobile-app.css or can be merged */
    --border-color: rgba(0, 0, 0, 0.1);
    --bg-secondary: #f8f9fa; /* This is a light gray, similar to --gray */
    --text-primary: var(--dark); /* Use existing variables */
    --text-secondary: var(--gray-dark); /* Use existing variables */

    /* Spacing and Radius can also be inherited or defined here */
    --spacing-mobile-xs: 0.25rem; /* 4px */
    --spacing-mobile-sm: 0.5rem;  /* 8px */
    --spacing-mobile-md: 1rem;   /* 16px */
    --spacing-mobile-lg: 1.25rem; /* 20px */

    --radius-mobile-sm: 8px;
    --radius-mobile-md: 12px;
    --radius-mobile-lg: 16px;
}

[data-theme="dark"] {
    --border-color: rgba(255, 255, 255, 0.15);
    --bg-secondary: #2a2a2a; /* Darker gray for dark theme */
    /* text-primary and text-secondary will use dark theme's --dark and --gray-dark */
}


/* Base Layout */
.mobile-app-layout {
    background: var(--light);
    min-height: 100vh;
    padding-top: 60px; /* Height of .mobile-header */
    /* This class is likely applied to the body or a main wrapper when mobile-app view is active */
}

/* Mobile Header */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--light); /* Use consistent light variable */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* Softer shadow */
    z-index: 1000; /* Standard header z-index */
    border-bottom: 1px solid var(--border-color); /* Subtle separator */
}

.mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--spacing-mobile-md); /* Consistent padding */
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-mobile-sm); /* Consistent gap */
}

.mobile-logo img {
    height: 36px;
    width: auto; /* Maintain aspect ratio */
    object-fit: contain;
}

.mobile-logo span {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: var(--primary);
    line-height: 1; /* Better vertical alignment */
}

.mobile-header-actions {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: var(--spacing-mobile-xs); /* Smaller gap for icon buttons */
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary); /* Use text-primary */
    font-size: 1.25rem; /* 20px */
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex; /* To center icon inside */
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: var(--gray); /* Use consistent gray */
    color: var(--primary); /* Highlight on hover */
}
.icon-btn:active {
    background: var(--gray-medium); /* Feedback on click */
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--black-rgb, 0, 0, 0), 0.5); /* Use RGB for opacity */
    z-index: 1900; /* Below menu content, but above other page content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility change */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Assuming .mobile-menu-content is part of .mobile-menu from style.css or a separate one */
/* If this is the main mobile menu, it might conflict/duplicate style.css .mobile-menu */
/* Let's assume this is an alternative or specific "app-like" menu */
.mobile-menu-content { /* This class name is a bit generic, ensure it's unique if needed */
    position: fixed; /* Use fixed for full screen behavior */
    right: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 300px; /* Slightly narrower */
    background: var(--light);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Shadow on the left */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother transition */
    display: flex;
    flex-direction: column;
    z-index: 2000; /* Should be above overlay */
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

/* Mobile Menu Header (inside .mobile-menu-content) */
.mobile-menu-content .mobile-menu-header { /* More specific selector */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-mobile-lg) var(--spacing-mobile-md);
    border-bottom: 1px solid var(--border-color);
    min-height: 60px; /* Match mobile-header height */
}

.mobile-menu-content .mobile-menu-header img { /* Logo inside menu */
    height: 30px; /* Smaller logo inside menu */
    width: auto;
    object-fit: contain;
}

.mobile-menu-content .close-menu { /* Close button inside menu */
    width: 36px; /* Consistent with icon-btn */
    height: 36px;
    border: none;
    background: transparent;
    font-size: 1.5rem; /* 24px */
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.mobile-menu-content .close-menu:hover {
    background-color: var(--gray);
    color: var(--primary);
}


.mobile-menu-nav {
    flex-grow: 1; /* Take remaining space */
    overflow-y: auto;
    padding: var(--spacing-mobile-sm) 0;
}

.mobile-menu-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-mobile-md); /* 15px */
    padding: var(--spacing-mobile-md) var(--spacing-mobile-lg); /* ~15px 20px */
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem; /* Readable font size */
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active { /* Added .active state */
    background: var(--bg-secondary); /* Use defined variable */
    color: var(--primary); /* Highlight text color */
    padding-left: calc(var(--spacing-mobile-lg) + 5px); /* Indent on hover/active */
}

.mobile-menu-nav i { /* Icon in nav link */
    width: 24px; /* Fixed width for alignment */
    text-align: center; /* Center icon if smaller */
    font-size: 1.25rem; /* 20px */
    color: var(--primary); /* Default icon color */
    transition: color 0.2s ease;
}
.mobile-menu-nav a:hover i,
.mobile-menu-nav a.active i {
    color: var(--primary); /* Keep primary or change if needed */
}

.mobile-menu-footer {
    padding: var(--spacing-mobile-lg);
    border-top: 1px solid var(--border-color);
    background-color: var(--gray); /* Footer distinct background */
}
[data-theme="dark"] .mobile-menu-footer {
    background-color: var(--bg-secondary);
}


.mobile-settings { /* Language/Currency in menu footer */
    display: flex;
    flex-direction: column; /* Stack selects vertically */
    gap: var(--spacing-mobile-sm);
    margin-bottom: var(--spacing-mobile-md);
}

.mobile-settings select {
    width: 100%; /* Full width */
    padding: var(--spacing-mobile-sm) var(--spacing-mobile-md); /* 10px 12px */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-mobile-sm);
    background: var(--white); /* White background for select */
    color: var(--text-primary);
    font-size: 0.875rem; /* 14px */
}
.mobile-settings select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}


.mobile-login-btn {
    width: 100%;
    padding: var(--spacing-mobile-md); /* 12px */
    border: none;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-mobile-sm);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-mobile-sm);
    transition: background-color 0.2s ease;
}
.mobile-login-btn:hover {
    background: var(--primary-hover);
}
.mobile-login-btn i {
    font-size: 1.125rem; /* Slightly larger icon */
}


/* Quick Booking Section */
.quick-booking-section { /* This is likely the main content area for the "app" view */
    padding: var(--spacing-mobile-lg) var(--spacing-mobile-md); /* 20px 15px */
}

.booking-header {
    text-align: center;
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.booking-header h1 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-mobile-xs); /* 5px */
}

.booking-header p {
    color: var(--text-secondary);
    font-size: 0.875rem; /* 14px */
}

/* Vehicle Selection */
.vehicle-selection { /* This class is also in style.css, ensure no conflicts or use more specific selectors */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.vehicle-selection h3 {
    font-size: 1rem; /* 16px */
    font-weight: 600; /* More emphasis */
    margin-bottom: var(--spacing-mobile-md); /* 15px */
    color: var(--dark);
}

.vehicle-slider {
    display: flex;
    gap: var(--spacing-mobile-sm); /* 10px */
    overflow-x: auto;
    padding-bottom: var(--spacing-mobile-sm); /* For scrollbar visibility */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Firefox scrollbar */
    scrollbar-color: var(--primary) var(--gray); /* Firefox scrollbar */
}

.vehicle-slider::-webkit-scrollbar {
    height: 6px; /* Slightly thicker scrollbar */
}

.vehicle-slider::-webkit-scrollbar-track {
    background: var(--gray);
    border-radius: 3px;
}

.vehicle-slider::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}
.vehicle-slider::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

.vehicle-option { /* Class name is similar to style.css's .vehicle-card */
    flex: 0 0 130px; /* Slightly smaller width */
    background: var(--gray);
    border: 2px solid transparent;
    border-radius: var(--radius-mobile-md); /* 12px */
    padding: var(--spacing-mobile-sm); /* 10px */
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.vehicle-option.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    transform: translateY(-2px); /* Slight lift for active */
}
.vehicle-option:hover:not(.active) { /* Hover for non-active */
    border-color: var(--gray-medium);
}


.vehicle-option img {
    width: 100%;
    max-height: 70px; /* Max height for consistency */
    height: auto;    /* Let height adjust based on width and object-fit */
    object-fit: contain;
    margin-bottom: var(--spacing-mobile-xs); /* 8px (can be sm) */
}

.vehicle-option h4 {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--dark);
    white-space: nowrap; /* Prevent wrapping if too long */
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-option p {
    font-size: 0.75rem; /* 12px */
    color: var(--gray-dark);
    margin-bottom: var(--spacing-mobile-xs); /* 5px */
}

.vehicle-option .price {
    font-size: 0.7rem; /* 11px, can be slightly larger */
    color: var(--primary);
    font-weight: 600;
}

/* Transfer Type Toggle */
.transfer-type-toggle {
    display: flex;
    background: var(--gray);
    border-radius: var(--radius-mobile-md); /* 12px */
    padding: 4px;
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.toggle-option { /* This is for the span inside label or button */
    flex: 1;
    padding: var(--spacing-mobile-sm) var(--spacing-mobile-xs); /* 10px */
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius-mobile-sm); /* 8px, slightly smaller than parent */
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}

.toggle-option.active {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.3);
}

.toggle-option input { /* Assuming radio button is hidden */
    display: none;
}

/* Location Inputs */
.location-inputs {
    position: relative;
    margin-bottom: var(--spacing-mobile-md); /* 15px, reduced from 20px */
}

.location-input-group {
    position: relative;
    margin-bottom: var(--spacing-mobile-md); /* 15px */
}
.location-input-group:last-child {
    margin-bottom: 0;
}

.location-input-group .input-icon { /* Generic class for icon */
    position: absolute;
    left: var(--spacing-mobile-md); /* 15px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* 16px */
    color: var(--text-secondary); /* Default icon color */
    pointer-events: none; /* Allow click through icon */
}

.pickup-icon { color: var(--success); } /* Match semantic colors */
.dropoff-icon { color: var(--danger); }


.location-input-group input {
    width: 100%;
    padding: var(--spacing-mobile-md) calc(var(--spacing-mobile-md) + 36px + var(--spacing-mobile-xs)) var(--spacing-mobile-md) calc(var(--spacing-mobile-md) + 20px + var(--spacing-mobile-xs)); /* P: 15px R: 15+36+4=55 L:15+16+4=35 */
    border: 1px solid var(--gray-medium); /* Use medium gray for border */
    border-radius: var(--radius-mobile-md); /* 12px */
    background: var(--white); /* White background for inputs */
    color: var(--dark);
    font-size: 0.875rem; /* 14px */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.location-input-group input::placeholder {
    color: var(--gray-dark);
    opacity: 0.8;
}
.location-input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}


.location-input-group .location-btn { /* .location-btn already defined, ensure it's this one */
    position: absolute;
    right: var(--spacing-mobile-sm); /* 10px */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-mobile-sm); /* 8px */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* Icon size */
    transition: background-color 0.2s ease;
}
.location-input-group .location-btn:hover {
    background-color: var(--primary-hover);
}


.swap-locations { /* Button to swap locations */
    position: absolute;
    right: calc(50% - 18px); /* Center horizontally */
    top: calc(50% - 18px - var(--spacing-mobile-md)/2); /* Adjust for vertical centering between inputs */
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-medium);
    background: var(--white); /* White background for visibility */
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.swap-locations:hover {
    transform: rotate(180deg) scale(1.05);
    background-color: var(--gray);
}
.swap-locations i {
    font-size: 0.9rem; /* Adjust icon size */
}


/* DateTime Selection */
.datetime-selection {
    display: flex;
    gap: var(--spacing-mobile-sm); /* 10px */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.datetime-group {
    flex: 1;
}

.datetime-group label {
    display: block;
    font-size: 0.75rem; /* 12px */
    color: var(--text-secondary);
    margin-bottom: var(--spacing-mobile-xs); /* 5px */
    font-weight: 500;
}

.datetime-group input {
    width: 100%;
    padding: var(--spacing-mobile-sm); /* 12px (can be sm) */
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-mobile-sm); /* 8px */
    background: var(--white);
    color: var(--dark);
    font-size: 0.875rem; /* 14px */
}
.datetime-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}


/* Passenger Section */
.passenger-section { /* This could be .form-group from style.css */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.passenger-section label {
    display: block;
    font-size: 0.875rem; /* 14px */
    color: var(--dark);
    margin-bottom: var(--spacing-mobile-sm); /* 10px */
    font-weight: 500;
}
/* Passenger counter itself might use styles from style.css's .passenger-counter */


/* Additional Services Mobile */
.additional-services-mobile { /* If this is different from style.css .additional-services */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.additional-services-mobile h3 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    margin-bottom: var(--spacing-mobile-md); /* 15px */
    color: var(--dark);
}

.service-grid { /* This class is also in style.css, ensure specificity or unique name if different */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* More flexible columns */
    gap: var(--spacing-mobile-sm); /* 10px */
}

.service-card { /* Also in style.css, if different, rename or make specific */
    position: relative; /* For checkbox positioning */
    cursor: pointer;
    /* Remove display:flex if not needed for this layout */
}

.service-card input[type="checkbox"] { /* Explicitly style checkbox if not inheriting */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.service-card .service-content { /* .service-content is in style.css too */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content */
    padding: var(--spacing-mobile-md); /* 15px */
    background: var(--gray);
    border: 2px solid transparent;
    border-radius: var(--radius-mobile-md); /* 12px */
    transition: border-color 0.2s ease, background-color 0.2s ease;
    min-height: 110px; /* Ensure cards have similar height */
}

.service-card input[type="checkbox"]:checked + .service-content {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}
.service-card input[type="checkbox"]:focus + .service-content {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}


.service-card .service-content i {
    font-size: 1.5rem; /* 24px */
    color: var(--primary);
    margin-bottom: var(--spacing-mobile-xs); /* 5px */
}

.service-card .service-content span { /* Name of service */
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 2px;
    text-align: center; /* Ensure text is centered */
}

.service-card .service-content small { /* Price */
    font-size: 0.7rem; /* 11px */
    color: var(--primary);
    font-weight: 600;
}

/* Special Requests */
.special-requests-section {
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.special-requests-section label {
    display: flex;
    align-items: center;
    gap: var(--spacing-mobile-xs); /* 8px */
    font-size: 0.875rem; /* 14px */
    color: var(--dark);
    margin-bottom: var(--spacing-mobile-sm); /* 10px */
    font-weight: 500;
}
.special-requests-section label i {
    color: var(--primary); /* Icon color */
}

.special-requests-section textarea {
    width: 100%;
    padding: var(--spacing-mobile-sm); /* 12px */
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-mobile-sm); /* 8px */
    background: var(--white);
    color: var(--dark);
    font-size: 0.875rem; /* 14px */
    resize: vertical;
    min-height: 80px;
}
.special-requests-section textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Price Display Card */
.price-display-card {
    background: var(--gray);
    border-radius: var(--radius-mobile-md); /* 12px */
    padding: var(--spacing-mobile-lg); /* 20px */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-mobile-sm); /* 10px */
    font-size: 0.875rem; /* 14px */
    color: var(--text-secondary);
}
.price-row:last-child {
    margin-bottom: 0;
}

.price-row span:last-child { /* Value part of the row */
    font-weight: 500;
    color: var(--text-primary);
}

.price-row.total {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: var(--primary); /* Total price highlighted */
    padding-top: var(--spacing-mobile-sm); /* 10px */
    margin-top: var(--spacing-mobile-xs);
    border-top: 1px solid var(--border-color); /* Use defined border color */
}
.price-row.total span:first-child {
    color: var(--text-primary); /* "Total" label */
}


.calculate-btn { /* Button to calculate price */
    width: 100%;
    padding: var(--spacing-mobile-md); /* 12px */
    margin-top: var(--spacing-mobile-md); /* 15px */
    border: none;
    background: var(--secondary); /* Use secondary color */
    color: var(--white);
    border-radius: var(--radius-mobile-sm); /* 8px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-mobile-xs); /* 8px */
    transition: background-color 0.2s ease;
}
.calculate-btn:hover {
    background-color: var(--secondary-hover);
}
.calculate-btn i {
    font-size: 0.9rem;
}

/* Membership Toggle */
.membership-toggle {
    display: flex;
    gap: var(--spacing-mobile-sm); /* 10px */
    margin-bottom: var(--spacing-mobile-lg); /* 20px */
}

.membership-option { /* Label wrapping input and span */
    flex: 1;
    position: relative;
    cursor: pointer;
}

.membership-option input[type="radio"] { /* Hidden radio */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.membership-option span { /* Visual part */
    display: block;
    padding: var(--spacing-mobile-sm); /* 12px */
    background: var(--gray);
    border: 2px solid transparent;
    border-radius: var(--radius-mobile-sm); /* 8px */
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.membership-option input[type="radio"]:checked + span {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}
.membership-option input[type="radio"]:focus + span {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* Submit Button */
.submit-button { /* Main form submission button */
    width: 100%;
    padding: var(--spacing-mobile-md); /* 16px (can be md) */
    border: none;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-mobile-md); /* 12px */
    font-size: 1rem; /* 16px */
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-mobile-sm); /* 10px */
    margin-bottom: var(--spacing-mobile-md); /* 15px */
    transition: background-color 0.2s ease;
    text-transform: uppercase; /* Common for main action buttons */
}
.submit-button:hover {
    background: var(--primary-hover);
}
.submit-button i {
    font-size: 1.125rem;
}


/* Payment Info */
.payment-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-mobile-xs); /* 8px */
    font-size: 0.75rem; /* 12px */
    color: var(--text-secondary);
    text-align: center;
}
.payment-info i {
    font-size: 0.875rem;
    color: var(--success); /* Green for payment/security icon */
}

/* Quick Access Section */
.quick-access-section { /* Bottom navigation bar like section */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Flexible columns */
    gap: var(--spacing-mobile-xs); /* 5px for tighter packing */
    padding: var(--spacing-mobile-sm) var(--spacing-mobile-sm); /* 10px 10px */
    background: var(--gray);
    border-top: 1px solid var(--border-color);
    /* This could be a fixed bottom bar as well:
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    */
}

.quick-access-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    gap: 4px; /* Smaller gap */
    padding: var(--spacing-mobile-xs); /* ~10px (can be sm) */
    background: transparent; /* Blend with parent background */
    border-radius: var(--radius-mobile-sm); /* 8px */
    text-decoration: none;
    color: var(--text-secondary); /* Default color */
    transition: background-color 0.2s ease, color 0.2s ease;
    min-height: 60px; /* Minimum height for touch target */
}

.quick-access-btn:hover,
.quick-access-btn.active { /* Added .active state */
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.quick-access-btn i {
    font-size: 1.25rem; /* 20px (was 24px) */
    color: var(--text-secondary); /* Default icon color, changes with parent on hover/active */
    transition: color 0.2s ease;
}
.quick-access-btn:hover i,
.quick-access-btn.active i {
    color: var(--primary);
}


.quick-access-btn span {
    font-size: 0.65rem; /* 10px (was 12px), very small, ensure readability */
    font-weight: 500;
    text-align: center; /* Center text if it wraps */
    line-height: 1.2;
}

/* Hide desktop elements on mobile - This logic might be in main.js or server-side */
/* These rules directly hide large sections, which is a bit aggressive.
   Usually, responsiveness is handled by adjusting layouts, not wholesale hiding.
   However, if this is the intended behavior for a distinct "mobile app" view vs "desktop site" view, it's fine.
*/
@media (max-width: 768px) {
    /* If .header, .nav etc. are from style.css, this will hide them */
    /* Consider if this is what you want or if style.css should handle its own mobile visibility */
    /*
    .header,
    .nav,
    .hero,
    .transfer-section,
    .rent-car-section,
    .services-section {
        display: none !important;
    }
    */
    /* Ensure mobile-app-layout is visible */
    .mobile-app-layout {
        display: block; /* Or flex, grid depending on its content */
    }
}

/* Show mobile elements only on mobile - This is the more common approach */
@media (min-width: 769px) {
    .mobile-header,
    .mobile-menu-overlay, /* And its .mobile-menu-content */
    .quick-booking-section,
    .quick-access-section,
    .mobile-app-layout .mobile-app-specific-element { /* Example for specific elements */
        display: none !important; /* Hide these when not in "mobile app" view (i.e., on desktop) */
    }
    
    .mobile-app-layout {
        /* If mobile-app-layout is always present but its content changes,
           then the padding-top might not be needed on desktop. */
        /* padding-top: 0; (If this layout is not used on desktop) */
    }
}