/* 
 * Hotel Calendar - Lacivert Tema
 * Sadece hotel sayfaları için özel takvim stilleri
 * Daterangepicker için optimize edilmiş
 */

/* ============================================
   GENEL AYARLAR VE RESET
   ============================================ */
/* date_picker.css override'larını engelle */
body .daterangepicker td.in-range {
    background-color: rgba(4, 42, 81, 0.08) !important;
    color: #000 !important;
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background-color: transparent !important;
    border: 1px solid #042a51 !important;
    color: #042a51 !important;
}

/* ============================================
   FLIGHT & HOTEL DATE RANGE INPUTS
   ============================================ */
/* Ensure parent has relative positioning */
#flight-search-form .sb-date,
#flight-search-form1 .sb-date,
#hotel-search-form .sb-date {
    position: relative !important;
}

#range-date-flight,
#range-date-flight-alt {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    opacity: 0 !important;
    z-index: 10 !important;
}

#range-date-hotel {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    z-index: 10 !important;
}

/* ============================================
   CONTAINER VE GENEL AYARLAR
   ============================================ */
.daterangepicker {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    padding: 15px !important;
}

.daterangepicker .drp-calendar {
    padding: 10px !important;
    max-width: 340px !important;
}

.daterangepicker .calendar-table {
    background: white !important;
    border: none !important;
}

/* ============================================
   HÜCRE BOYUTLARI VE TEMEL STİLLER
   ============================================ */
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    position: relative !important;
    line-height: 42px !important;
}

/* Tüm tarihlere varsayılan yuvarlak stil */
.daterangepicker td {
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Normal günler */
.daterangepicker td.available {
    background-color: white !important;
    color: #333 !important;
    border-radius: 50% !important;
}

/* ============================================
   TARİH ARALIĞI SEÇİMİ - LAVİVERT TEMA
   ============================================ */

/* ARA GÜNLER (In-Range) - Açık gri yuvarlak arka plan */
body .daterangepicker td.in-range,
body .daterangepicker .calendar-table td.in-range {
    background-color: rgba(4, 42, 81, 0.08) !important;
    color: #000 !important;
    border-radius: 50% !important;
    position: relative !important;
    border: none !important;
}

/* BAŞLANGIÇ TARİHİ - Lacivert */
body .daterangepicker td.start-date,
body .daterangepicker .calendar-table td.start-date {
    background-color: #042a51 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 10 !important;
    border: none !important;
}

/* BİTİŞ TARİHİ - Lacivert */
body .daterangepicker td.end-date,
body .daterangepicker .calendar-table td.end-date {
    background-color: #042a51 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 10 !important;
    border: none !important;
}

/* TEK GÜN SEÇİMİ (başlangıç ve bitiş aynı) */
body .daterangepicker td.start-date.end-date {
    background-color: #042a51 !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* ============================================
   HOVER EFEKTLER
   ============================================ */

/* Hover efekti - sadece seçili olmayanlar için */
.daterangepicker td.available:hover:not(.active):not(.in-range):not(.start-date):not(.end-date) {
    background-color: rgba(4, 42, 81, 0.04) !important;
    border: 1px solid rgba(4, 42, 81, 0.3) !important;
    border-radius: 50% !important;
}

/* In-range hover */
.daterangepicker td.in-range:hover:not(.start-date):not(.end-date) {
    background-color: rgba(4, 42, 81, 0.12) !important;
    border-radius: 50% !important;
}

/* ============================================
   ÖZEL DURUMLAR
   ============================================ */

/* Bugün */
.daterangepicker td.today:not(.active):not(.start-date):not(.end-date):not(.in-range) {
    background-color: #f5f5f5 !important;
    color: #000 !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    position: relative !important;
}

/* Bugün - alt çizgi efekti */
.daterangepicker td.today:not(.active):not(.start-date):not(.end-date):not(.in-range)::after {
    content: '';
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background-color: #042a51 !important;
    border-radius: 50% !important;
}

/* Disabled günler */
.daterangepicker td.disabled,
.daterangepicker td.off.disabled {
    color: #ccc !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.4 !important;
    border-radius: 50% !important;
}

/* Önceki/Sonraki ay günleri */
.daterangepicker td.off:not(.disabled):not(.in-range):not(.active):not(.start-date):not(.end-date) {
    color: #999 !important;
    background-color: transparent !important;
    border-radius: 50% !important;
}

/* Off ve in-range durumu (önceki/sonraki aydan seçili tarih aralığı) */
body .daterangepicker td.off.in-range {
    background-color: rgba(4, 42, 81, 0.05) !important;
    color: #999 !important;
    border-radius: 50% !important;
}

/* ============================================
   BAŞLIKLAR VE NAVİGASYON
   ============================================ */

/* Ay başlıkları */
.daterangepicker .calendar-table thead tr:first-child th {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #042a51 !important;
    padding: 12px 0 !important;
    background: none !important;
}

/* Hafta günleri */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
    color: #666 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    padding: 8px 0 !important;
    text-transform: uppercase !important;
}

/* Navigation okları */
.daterangepicker .calendar-table .prev,
.daterangepicker .calendar-table .next {
    color: #042a51 !important;
    font-size: 20px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s !important;
}

.daterangepicker .calendar-table .prev:hover,
.daterangepicker .calendar-table .next:hover {
    background-color: rgba(4, 42, 81, 0.08) !important;
}

/* ============================================
   RANGES (Hazır Tarih Aralıkları) BUTONLARI
   ============================================ */
.daterangepicker .ranges li {
    padding: 8px 12px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.daterangepicker .ranges li.active {
    background-color: #042a51 !important;
    color: #fff !important;
}

.daterangepicker .ranges li:hover:not(.active) {
    background-color: rgba(4, 42, 81, 0.08) !important;
}

/* ============================================
   BUTONLAR
   ============================================ */
.daterangepicker .drp-buttons {
    border-top: 1px solid #e5e5e5 !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}

.daterangepicker .drp-buttons .btn {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.daterangepicker .drp-buttons .btn-primary {
    background-color: #042a51 !important;
    border-color: #042a51 !important;
    color: #fff !important;
}

.daterangepicker .drp-buttons .btn-primary:hover {
    background-color: #053461 !important;
    border-color: #053461 !important;
}

.daterangepicker .drp-buttons .btn-default {
    background-color: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    color: #333 !important;
}

.daterangepicker .drp-buttons .btn-default:hover {
    background-color: #e5e5e5 !important;
}

/* ============================================
   JQUERY UI DATEPICKER DESTEĞI (FLIGHT İÇİN)
   ============================================ */

/* jQuery UI Datepicker container - MAXIMUM SPECIFICITY */
body div#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-corner-all,
body #ui-datepicker-div.ui-datepicker,
#ui-datepicker-div {
    background-color: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    
    /* FLIGHT DATEPICKER POZİSYONLAMA DÜZELTMESİ */
    filter: drop-shadow(0px 0px 35px rgba(0, 0, 0, 0.1)) !important;
    border: 0 !important;
    min-width: 350px !important;
    transform: translate(0px, 10px) !important;
    left: 40.5% !important;
    top: 271px !important;
    z-index: 9999 !important;
    position: absolute !important;
    --rightVal: 85%;
}

/* jQuery UI Datepicker Arrow/Pointer */
#ui-datepicker-div::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    left: 30px !important;
    width: 0 !important;
    height: 0 !important;
    border: 16px solid transparent !important;
    border-bottom-color: #fff !important;
    border-top: 0 !important;
    margin-left: -16px !important;
    margin-top: -10px !important;
    right: var(--rightVal) !important;
    left: auto !important;
}

/* FLIGHT CSS CONFLICT OVERRIDE */
/* flight/search/ui.css'teki top: 171px kuralını ezme */
body.grey-skin #ui-datepicker-div,
body #ui-datepicker-div.ui-datepicker.ui-widget,
div#ui-datepicker-div.ui-datepicker {
    top: 271px !important;
    left: 40.5% !important;
    min-width: 350px !important;
    position: absolute !important;
    z-index: 9999 !important;
}

/* Date picker title before pseudo element */
#ui-datepicker-div.ui-helper-clearfix:before {
    content: attr(data-before) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #042a51 !important;
    margin-bottom: 1rem !important;
    margin-left: 0.5rem !important;
    display: block !important;
}

/* Clearfix helper */
.ui-helper-clearfix:after {
    display: flow !important;
}

/* jQuery UI Datepicker başlık */
.ui-datepicker-header {
    background-color: white !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin-bottom: 10px !important;
}

.ui-datepicker-title {
    color: #042a51 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* jQuery UI Navigation okları */
.ui-datepicker-prev,
.ui-datepicker-next {
    top: 10px !important;
    width: 30px !important;
    height: 30px !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: url("/assets/icons/date-picker-chevron.svg") !important;
    background-position: center !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    margin-top: -8px !important;
    margin-left: -8px !important;
    width: 16px !important;
    height: 16px !important;
}

.ui-datepicker-prev span {
    transform: scaleX(-1) !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background-color: rgba(4, 42, 81, 0.08) !important;
    border-radius: 50% !important;
}

/* jQuery UI Hafta günleri */
.ui-datepicker th {
    color: #666 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    padding: 8px 0 !important;
    background-color: white !important;
}

/* jQuery UI Takvim hücreleri */
.ui-datepicker td {
    padding: 2px !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    text-align: center !important;
    border-radius: 50% !important;
    border: 1px solid transparent !important;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: white !important;
    transition: all 0.2s ease !important;
}

/* jQuery UI Hover efekti */
.ui-datepicker td a:hover,
.ui-datepicker-calendar .ui-state-hover {
    background-color: rgba(4, 42, 81, 0.05) !important;
    border: 1px solid #042a51 !important;
    border-radius: 50% !important;
    color: #042a51 !important;
}

/* jQuery UI Seçili tarih - LAVİVERT - MAXIMUM SPECIFICITY */
body div#ui-datepicker-div .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
body div#ui-datepicker-div .ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
body .ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td a.ui-state-active {
    background-color: #042a51 !important;
    color: white !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    border: none !important;
}

/* jQuery UI Base CSS Override - LAVİVERT */
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active,
body .ui-state-active,
body div#ui-datepicker-div .ui-widget-content .ui-state-active,
body div#ui-datepicker-div .ui-widget-header .ui-state-active,
body div#ui-datepicker-div .ui-state-active {
    background: #042a51 !important;
    border: 1px solid #042a51 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* jQuery UI Active button states - LAVİVERT */
body a.ui-button:active,
body .ui-button:active,
body .ui-button.ui-state-active:hover,
body div#ui-datepicker-div a.ui-button:active,
body div#ui-datepicker-div .ui-button:active,
body div#ui-datepicker-div .ui-button.ui-state-active:hover {
    background: #042a51 !important;
    border: 1px solid #042a51 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* jQuery UI Override for all active anchor states in datepicker */
body div#ui-datepicker-div a:active,
body div#ui-datepicker-div a.ui-state-active,
body .ui-datepicker a:active,
body .ui-datepicker a.ui-state-active {
    background: #042a51 !important;
    border-color: #042a51 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* KAPSAMLI jQuery UI LAVİVERT OVERRIDE */
/* Tüm active state'leri için maksimum specificity */
html body .ui-state-active,
html body .ui-widget-content .ui-state-active,
html body .ui-widget-header .ui-state-active,
html body a.ui-button:active,
html body .ui-button:active,
html body .ui-button.ui-state-active:hover,
html body div#ui-datepicker-div .ui-state-active,
html body div#ui-datepicker-div .ui-widget-content .ui-state-active,
html body div#ui-datepicker-div .ui-widget-header .ui-state-active {
    background: #042a51 !important;
    border: 1px solid #042a51 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    background-color: #042a51 !important;
}

/* ULTRA-YÜKSEK SPECİFİCİTY OVERRIDE - #007fff ve #003eff renklerini ezme */
body.grey-skin #ui-datepicker-div .ui-state-active,
body.grey-skin #ui-datepicker-div .ui-widget-content .ui-state-active,
body.grey-skin #ui-datepicker-div .ui-widget-header .ui-state-active,
body.grey-skin div#ui-datepicker-div.ui-datepicker .ui-state-active,
body.grey-skin div#ui-datepicker-div.ui-datepicker .ui-widget-content .ui-state-active,
body.grey-skin div#ui-datepicker-div.ui-datepicker .ui-widget-header .ui-state-active {
    background: #042a51 !important;
    background-color: #042a51 !important;
    border: 1px solid #042a51 !important;
    border-color: #042a51 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* Icon background override */
html body .ui-icon-background,
html body .ui-state-active .ui-icon-background,
html body div#ui-datepicker-div .ui-icon-background,
html body div#ui-datepicker-div .ui-state-active .ui-icon-background {
    border: #042a51 !important;
    background-color: #ffffff !important;
}

/* Active link states */
html body .ui-state-active a,
html body .ui-state-active a:link,
html body .ui-state-active a:visited,
html body div#ui-datepicker-div .ui-state-active a,
html body div#ui-datepicker-div .ui-state-active a:link,
html body div#ui-datepicker-div .ui-state-active a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* jQuery UI Bugün */
.ui-datepicker td.ui-datepicker-today a:not(.ui-state-active) {
    background-color: #f5f5f5 !important;
    color: #000 !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    position: relative !important;
}

/* jQuery UI Bugün - alt nokta */
.ui-datepicker td.ui-datepicker-today a:not(.ui-state-active)::after {
    content: '' !important;
    position: absolute !important;
    bottom: 3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background-color: #042a51 !important;
    border-radius: 50% !important;
}

/* jQuery UI Diğer ayların günleri */
.ui-datepicker-other-month .ui-state-default {
    color: #999 !important;
    background-color: transparent !important;
}

/* jQuery UI Disabled günler */
.ui-state-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ============================================
   ÖNCELİK OVERRIDE'LAR - EN YÜKSEK ÖNCELİK
   ============================================ */

/* Active durumu override - transparent olması için */
body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background-color: transparent !important;
    border: 1px solid #042a51 !important;
    color: #042a51 !important;
    border-radius: 50% !important;
}

/* In-range kesinlikle yuvarlak ve gri arka planlı */
body .daterangepicker .calendar-table tbody td.in-range {
    background-color: rgba(4, 42, 81, 0.08) !important;
    border-radius: 50% !important;
    border: none !important;
}

/* Start ve End date'lerin lacivert olması */
body .daterangepicker .calendar-table tbody td.start-date,
body .daterangepicker .calendar-table tbody td.end-date {
    background-color: #042a51 !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
}

/* Start-date ve active birlikte olduğunda */
body .daterangepicker td.start-date.active,
body .daterangepicker td.end-date.active {
    background-color: #042a51 !important;
    color: #fff !important;
    border: none !important;
}

/* Off ve in-range kombinasyonu */
body .daterangepicker .calendar-table tbody td.off.in-range {
    background-color: rgba(4, 42, 81, 0.05) !important;
    color: #999 !important;
    border-radius: 50% !important;
}

/* Spacing ve layout düzenlemeleri */
.daterangepicker .calendar-table table {
    border-spacing: 4px 4px !important;
    border-collapse: separate !important;
}