/* Modern Design System */ body { background-color: #f4f7f9 !important; font-family: 'Outfit', 'Inter', sans-serif !important; color: #2d3748; } .kt-portlet { position: relative; border-radius: 20px !important; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.08) !important; border: none !important; } .language-selector-top-right { position: absolute; right: 20px; top: 20px; z-index: 1000; } .language-selector-top-right .kt-header__topbar-wrapper { cursor: pointer; padding: 5px; border-radius: 50%; background: rgba(0,0,0,0.03); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .language-selector-top-right .kt-header__topbar-wrapper:hover { background: rgba(0,0,0,0.06); } .language-selector-top-right img { width: 24px; height: auto; } /* Stepper Enhancements */ .kt-wizard-v3 .kt-wizard-v3__nav { background: #fff; padding: 30px 0; border: none !important; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item .kt-wizard-v3__nav-label { font-size: 1.1rem; font-weight: 600; color: #2d3748; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] .kt-wizard-v3__nav-label { color: #5867dd !important; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="done"] .step-icon { background: #1dc9b7 !important; color: transparent !important; display: flex !important; position: relative; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="done"] .step-icon:after { content: "✓" !important; color: #fff !important; font-size: 1.5rem !important; font-family: Arial, sans-serif !important; position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; top: 0; left: 0; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item .step-icon { font-size: 1.8rem !important; margin-bottom: 5px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,0.03); } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] .step-icon { background: #5867dd !important; color: #fff !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* Search Bar */ .search-bar-container { background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.12); margin-bottom: 35px; border: 1px solid #cbd5e0; transition: all 0.3s ease; } .search-bar-container:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,0.15); } .date_box { margin-bottom: 25px; } .date_box b, .date_box strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #718096; margin-bottom: 12px; display: block; font-weight: 700; } .form-control { border-radius: 10px !important; border: 1px solid #e2e8f0 !important; height: 48px !important; font-weight: 500; color: #2d3748 !important; } .form-control:focus { border-color: #5867dd !important; box-shadow: 0 0 0 4px rgba(0,0,0,0.05) !important; } select.form-control { width: 100% !important; height: 48px !important; padding: 8px 30px 8px 12px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23718096' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat calc(100% - 10px) center !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer; line-height: normal; } .form-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: #4a5568; display: block; } /* Guests Stepper Box */ .guests-stepper-box { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; height: 48px !important; padding: 0 4px; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .guests-stepper-box:focus-within { border-color: #5867dd !important; box-shadow: 0 0 0 4px rgba(0,0,0,0.05) !important; } .guests-stepper-box .btn-stepper { background: transparent; border: none; outline: none; color: #006ce4; font-size: 1.5rem; line-height: 1; font-weight: 400; font-family: inherit; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; padding: 0; border-radius: 8px; transition: transform 0.1s ease, color 0.15s ease, background-color 0.15s ease; } .guests-stepper-box .btn-stepper:hover { color: #004fb0; background-color: rgba(0, 108, 228, 0.06); } .guests-stepper-box .btn-stepper:active { transform: scale(0.9); } .guests-stepper-box input#guests_input { border: none; outline: none; background: transparent; text-align: center; font-size: 1.05rem; font-weight: 600; color: #2d3748; width: 50px; flex: 1; padding: 0; margin: 0; -moz-appearance: textfield; } .guests-stepper-box input#guests_input::-webkit-outer-spin-button, .guests-stepper-box input#guests_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Room List */ .title { color: #2d3748 !important; font-weight: 700 !important; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; } .room-row { border-bottom: 1px solid #edf2f7; padding: 20px 0; transition: background 0.2s ease; } .room-row:hover { background: #fcfdfe; } .border-bottom-mobile { border-bottom: 1px solid #edf2f7; padding-bottom: 15px !important; margin-bottom: 15px !important; } /* Swiper */ .swiper { border-radius: 12px; background: #f8f9fa; } .swiper-slide { display: flex !important; align-items: center !important; justify-content: center !important; height: 250px !important; overflow: hidden; } .swiper-slide img { max-height: 250px !important; width: auto !important; max-width: 100% !important; transition: opacity 0.3s ease; border-radius: 12px; } .swiper-button-next, .swiper-button-prev { background-color: rgba(255, 255, 255, 0.7) !important; width: 40px !important; height: 40px !important; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; color: #000 !important; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 1rem !important; font-weight: 900 !important; } .btn-brand, .btn-primary, .btn-success { height: 50px; border-radius: 12px !important; font-weight: 700 !important; letter-spacing: 0.5px; transition: all 0.3s ease !important; background-color: #5867dd !important; border-color: #5867dd !important; color: #fff !important; } .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; filter: brightness(1.1); } .btn-outline-brand { height: 50px; border-radius: 12px !important; font-weight: 700 !important; letter-spacing: 0.5px; transition: all 0.3s ease !important; background-color: #fff !important; border: 2px solid #5867dd !important; color: #5867dd !important; } .btn-outline-brand:hover { transform: translateY(-2px); background-color: #5867dd !important; border-color: #5867dd !important; color: #fff !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; } /* Stepper Button Visibility Rules */ .kt-wizard-v3 [data-ktwizard-type="action-prev"], .kt-wizard-v3 [data-ktwizard-type="action-submit"], #kt_wizard_v3 [data-ktwizard-type="action-prev"], #kt_wizard_v3 [data-ktwizard-type="action-submit"], .kt-wizard-v3[data-ktwizard-state="first"] [data-ktwizard-type="action-prev"], .kt-wizard-v3[data-ktwizard-state="first"] [data-ktwizard-type="action-submit"], #kt_wizard_v3[data-ktwizard-state="first"] [data-ktwizard-type="action-prev"], #kt_wizard_v3[data-ktwizard-state="first"] [data-ktwizard-type="action-submit"] { display: none !important; } .kt-wizard-v3 [data-ktwizard-type="action-next"], .kt-wizard-v3[data-ktwizard-state="first"] [data-ktwizard-type="action-next"], #kt_wizard_v3[data-ktwizard-state="first"] [data-ktwizard-type="action-next"] { display: inline-flex !important; } .kt-wizard-v3[data-ktwizard-state="last"] [data-ktwizard-type="action-prev"], #kt_wizard_v3[data-ktwizard-state="last"] [data-ktwizard-type="action-prev"] { display: inline-block !important; } .kt-wizard-v3[data-ktwizard-state="last"] [data-ktwizard-type="action-submit"], #kt_wizard_v3[data-ktwizard-state="last"] [data-ktwizard-type="action-submit"] { display: inline-flex !important; } .kt-wizard-v3[data-ktwizard-state="last"] [data-ktwizard-type="action-next"], #kt_wizard_v3[data-ktwizard-state="last"] [data-ktwizard-type="action-next"] { display: none !important; } /* Mobile Optimization */ @media (max-width: 768px) { .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; padding: 10px 0 !important; justify-content: space-around; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item { flex: 1; min-width: 80px; padding: 0 5px !important; align-items: center !important; text-align: center; flex-direction: column !important; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item .kt-wizard-v3__nav-label { font-size: 0.75rem !important; margin-top: 8px !important; margin-left: 0 !important; line-height: 1.2; } .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item span { width: 45px !important; height: 45px !important; font-size: 1.5rem !important; } .card-img-top { margin-bottom: 15px !important; } }