/* Mobile Responsive Styles - ETSTUR görselindeki gibi */

/* Mobil için genel düzenlemeler */
@media (max-width: 768px) {
    /* Absolute nav sorunu çözümü - Mobil */
    .booking .content .absolute-nav {
        position: relative !important;
        margin-top: -5vh !important;
        width: 100% !important;
    }
    
    /* Ana container */
    .booking {
        padding: 10px;
    }
    
    .container-f {
        padding: 0;
    }
    
    .content {
        padding: 0;
    }
    
    /* Card düzenlemesi */
    .card {
        /* border-radius: 16px; */
        /* box-shadow: 0 4px 20px rgba(0,0,0,0.1); */
        /* margin: 0; */
        /* overflow: hidden; */
    }
    
    /* Tab menü - Mobil için yatay kaydırılabilir düzen */
    .card-header {
        padding: 12px 16px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .card-header-tabs {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: max-content;
        min-width: 100%;
        padding-bottom: 4px;
    }
    
    .nav-item {
        flex-shrink: 0;
        min-width: 80px;
        max-width: 130px;
    }
    
    .nav-item .cus-btn {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        min-height: 40px;
        border: 1px solid #e0e0e0;
        background: white;
        color: #333;
        transition: all 0.3s ease;
        white-space: nowrap;
    }
    
    .nav-item .cus-btn:not(.active) {
        background: white;
        color: #666;
        border-color: #e0e0e0;
    }
    
    .nav-item .cus-btn:not(.active):hover {
        background: #f8f9fa;
        border-color: #d0d0d0;
        color: #333;
    }
    
    .nav-item .cus-btn.active {
        background: #4D73FC;
        color: white;
        border-color: #4D73FC;
        box-shadow: 0 2px 8px rgba(77, 115, 252, 0.3);
    }
    
    .nav-item .cus-btn svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
    
    /* Tab content - Mobil için dikey düzen */
    .card-body {
        padding: 20px;
    }
    
    .tab-content {
        background: none;
        margin-top: 10px;
    }
    
    /* Flight search container - Mobil için dikey */
    .flight-search-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }
    
    /* Tour Search - Mobil için dikey düzen */
    #tour .tour-search-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
        margin: 0;
    }
    
    #tour .tour-booking .booking-info {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    
    #tour .TypeSelect,
    #tour .DateSelect,
    #tour .ButtonSelect {
        width: 100%;
        margin: 0;
        flex: none;
    }
    
    #tour .search-field {
        width: 100%;
        margin: 0;
    }
    
    #tour .search-input {
        height: 56px;
        padding: 16px 20px;
        font-size: 16px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }
    
    #tour .search-button {
        height: 56px;
        font-size: 18px;
        font-weight: 600;
        margin-top: 8px;
    }
    
    /* Ferry Search - Mobil için dikey düzen */
    #ferry .ferry-search-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
        margin: 0;
    }
    
    #ferry .ferry-booking .booking-info {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    
    #ferry .search-field {
        width: 100%;
        margin: 0;
        flex: none;
    }
    
    #ferry .search-input {
        height: 56px;
        padding: 16px 20px;
        font-size: 16px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }
    
    #ferry .search-button {
        height: 56px;
        font-size: 18px;
        font-weight: 600;
        margin-top: 8px;
    }
    
    #ferry .button-field {
        width: 100%;
        margin: 0;
        flex: none;
    }
    
    /* Transfer Search - Mobil için dikey düzen */
    #transfer .flight-search-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
        margin: 0;
    }
    
    #transfer .search-field {
        width: 100%;
        margin: 0;
        flex: none;
    }
    
    #transfer .search-input {
        height: 56px;
        padding: 16px 20px;
        font-size: 16px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }
    
    #transfer .search-button {
        height: 56px;
        font-size: 18px;
        font-weight: 600;
        margin-top: 8px;
    }
    
    /* Bus Search - Mobil için dikey düzen */
    #bus .flight-search-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
        margin: 0;
    }
    
    #bus .search-field {
        width: 100%;
        margin: 0;
        flex: none;
    }
    
    #bus .search-input {
        height: 56px;
        padding: 16px 20px;
        font-size: 16px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }
    
    #bus .search-button {
        height: 56px;
        font-size: 18px;
        font-weight: 600;
        margin-top: 8px;
    }
    
    /* Search fields - Mobil için tam genişlik */
    .search-field {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: none;
        padding: 10px;
    }
    
    .field-label {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
        display: block;
    }
    
    .search-input {
        width: 100%;
        height: 56px;
        padding: 16px 20px;
        border: 1px solid #e0e0e0;
        background: white;
        font-size: 16px;
        color: #333;
        transition: all 0.3s ease;
    }
    
    .search-input:focus {
        outline: none;
        border-color: #4D73FC;
        box-shadow: 0 0 0 3px rgba(77, 115, 252, 0.1);
    }
    
    .search-input::placeholder {
        color: #999;
        font-size: 16px;
    }
    
    /* Swap button - Mobil için merkezi */
    .swap-button {
        align-self: center;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin: 8px 0;
        transform: rotate(90deg);
        background: #EEE;
        top: 140px;
        left: inherit;
        right: 10px;
    }
    
    /* Passenger trigger - Mobil için */
    .passenger-trigger {
        width: 100%;
        height: 56px;
        padding: 16px 20px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        background: white;
        font-size: 16px;
        color: #333;
    }
    
    .passenger-trigger:hover {
        border-color: #4D73FC;
        box-shadow: 0 0 0 3px rgba(77, 115, 252, 0.1);
    }
    
    /* Search button - Mobil için tam genişlik */
    .search-button {
        width: 100%;
        height: 56px;
        background: #4D73FC;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 8px;
    }
    
    .search-button:hover {
        background: #3d5fd8;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(77, 115, 252, 0.4);
    }
    
    .search-button svg {
        width: 24px;
        height: 24px;
    }
    
    /* Buton metni ve ikonu - Mobil için */
    .search-button .button-text {
        display: inline-block;
        font-size: 18px;
        font-weight: 600;
    }
    
    .search-button .button-icon {
        display: inline-block;
    }
    
    /* Options field - Mobil için */
    .options-field {
        width: 100%;
        margin-top: 16px;
    }
    
    .radio-group {
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .radio-button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 120px;
        justify-content: center;
    }
    
    .radio-button:hover {
        border-color: #4D73FC;
        background: #f8f9fa;
    }
    
    .radio-button input[type="radio"]:checked + label {
        color: #4D73FC;
        font-weight: 600;
    }
    
    .radio-button:has(input[type="radio"]:checked) {
        border-color: #4D73FC;
        background: rgba(77, 115, 252, 0.1);
    }
    
    /* Checkbox field - Mobil için */
    .checkbox-field {
        width: 100%;
        position: relative;
        bottom: inherit;
    }
    
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 12px;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 16px;
        font-weight: 500;
    }
    
    .checkbox-label:hover {
        border-color: #4D73FC;
        background: #f8f9fa;
    }
    
    .checkmark {
        width: 24px;
        height: 24px;
        border: 2px solid #ddd;
        border-radius: 6px;
        background: white;
        position: relative;
        transition: all 0.2s ease;
    }
    
    .checkbox-label input[type="checkbox"]:checked + .checkmark {
        background: #4D73FC;
        border-color: #4D73FC;
    }
    
    .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }
    
    /* Passenger modal - Mobil için */
    .passenger-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .passenger-modal .passenger-area {
        background: white;
        border-radius: 16px;
        padding: 24px;
        max-width: 400px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* Autocomplete - Mobil için */
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        background: white;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 99999 !important;
        position: absolute !important;
    }
    
    .ui-autocomplete .ui-menu-item {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        font-size: 16px;
        color: #333;
        transition: background-color 0.2s ease;
    }
    
    .ui-autocomplete .ui-menu-item:last-child {
        border-bottom: none;
    }
    
    .ui-autocomplete .ui-menu-item:hover,
    .ui-autocomplete .ui-menu-item.ui-state-focus {
        background-color: #4D73FC;
        color: white;
    }
}

/* Çok küçük ekranlar için ek optimizasyonlar */
@media (max-width: 480px) {
    .booking {
        padding: 0px;
        margin-top: 25%;
    }
    
    .card-header {
        padding: 8px 12px;
    }
    
    .card-body {
        padding: 16px;
    }
    
    /* Tab menü - Çok küçük ekranlar için daha da küçük */
    .nav-item {
        min-width: 120px;
    }
    
    .nav-item .cus-btn {
        padding: 10px;
        font-size: 14px;
        min-height: 50px;
    }
    
    .nav-item .cus-btn svg {
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }
    
    .search-input,
    .passenger-trigger,
    .search-button {
        height: 42px;
        font-size: 12px;
    }
    
    .search-input {
        padding: 10px 5px;
    }
    
    .passenger-trigger {
        padding: 14px 16px;
    }
    
    .search-button {
        font-size: 16px;
        height: 52px;
    }
    
    .field-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .radio-button {
        padding: 10px;
        min-width: 100px;
    }
    
    .checkbox-label {
        padding: 14px 16px;
        font-size: 15px;
    }
    
    /* Tour, Ferry, Transfer, Bus - Çok küçük ekranlar için */
    #tour .tour-search-container,
    #ferry .ferry-search-container,
    #transfer .flight-search-container,
    #bus .flight-search-container {
        padding: 16px;
        gap: 12px;
    }
    
    #tour .search-input,
    #ferry .search-input,
    #transfer .search-input,
    #bus .search-input {
        height: 48px;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    #tour .search-button,
    #ferry .search-button,
    #transfer .search-button,
    #bus .search-button {
        height: 48px;
        font-size: 16px;
    }
    
    #tour .field-label,
    #ferry .field-label,
    #transfer .field-label,
    #bus .field-label {
        font-size: 11px;
        margin-bottom: 6px;
    }
}

/* Landscape orientation için optimizasyon */
@media (max-width: 768px) and (orientation: landscape) {
    .card-header-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .nav-item {
        flex: 1;
        min-width: 120px;
    }
    
    .nav-item .cus-btn {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 48px;
    }
    
    .flight-search-container {
        gap: 12px;
    }
    
    .search-input,
    .passenger-trigger,
    .search-button {
        height: 48px;
    }
    
    /* Tour, Ferry, Transfer, Bus - Landscape için */
    #tour .tour-search-container,
    #ferry .ferry-search-container,
    #transfer .flight-search-container,
    #bus .flight-search-container {
        gap: 12px;
        padding: 16px;
    }
    
    #tour .search-input,
    #ferry .search-input,
    #transfer .search-input,
    #bus .search-input {
        height: 48px;
        font-size: 14px;
    }
    
    #tour .search-button,
    #ferry .search-button,
    #transfer .search-button,
    #bus .search-button {
        height: 48px;
        font-size: 16px;
    }
}

/* Tablet optimizasyonu */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tour, Ferry, Transfer, Bus - Tablet için */
    #tour .tour-search-container,
    #ferry .ferry-search-container,
    #transfer .flight-search-container,
    #bus .flight-search-container {
        gap: 8px;
        padding: 16px;
    }
    
    #tour .TypeSelect,
    #tour .DateSelect,
    #tour .ButtonSelect,
    #ferry .search-field,
    #transfer .search-field,
    #bus .search-field {
        flex: 1;
        min-width: 150px;
        margin: 0 4px;
    }
    
    #tour .search-input,
    #ferry .search-input,
    #transfer .search-input,
    #bus .search-input {
        height: 50px;
        font-size: 14px;
    }
    
    #tour .search-button,
    #ferry .search-button,
    #transfer .search-button,
    #bus .search-button {
        height: 50px;
        font-size: 14px;
    }
}