:root {
  --teal: #00b0c8; --teal-dark: #0090a8;
  --green-yellow: #b5c820; --gold: #c8a820;
  --bg: #f5f0eb; --white: #ffffff; --dark: #1a2a3a;
  --gray: #6b7280; --light-gray: #e5e7eb; --red: #e53935;
  --shadow: 0 2px 12px rgba(0,0,0,0.12); --radius: 10px;
}
*{box-sizing:border-box;}
body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--dark); min-height: 100vh; }

header {
  background: white; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--teal), var(--green-yellow)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
.logo-text { font-size: 20px; font-weight: 700; }
.logo-text span:first-child { color: var(--teal); }
.logo-text span:last-child { color: var(--gold); }
.header-phone { display: flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 700; font-size: 15px; text-decoration: none; }

/* Search widget */
.search-hero{ max-width:1000px;margin:0 auto;padding:48px 20px 30px; }
.search-hero h1{font-size:1.8rem;margin:0 0 6px;color:var(--dark);}
.search-hero p{color:var(--gray);margin:0 0 26px;font-size:.95rem;}
.fw{padding:20px;background:white;border-radius:var(--radius);box-shadow:var(--shadow);}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{padding:7px 18px;border-radius:20px;border:1.5px solid transparent;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;background:var(--bg);color:var(--gray);}
.tab.active{background:var(--teal);color:white;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{position:relative;flex:1;min-width:160px}
.field input{width:100%;padding:12px 16px;background:var(--bg);border:1.5px solid var(--light-gray);border-radius:8px;font-size:14px;color:var(--dark);outline:none;height:48px}
.field input:focus{background:#fff;border-color:var(--teal);}
.swap-btn{width:40px;height:40px;background:var(--dark);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:white;font-size:16px;}
.swap-btn:hover{background:var(--teal-dark);}
.date-field{position:relative;flex:1;min-width:140px}
.date-field input{width:100%;padding:12px 16px;background:var(--bg);border:1.5px solid var(--light-gray);border-radius:8px;font-size:14px;color:var(--dark);outline:none;height:48px;cursor:pointer}
.date-field input:focus{border-color:var(--teal);}
.pax-field{flex:1;min-width:140px;position:relative}
.pax-field input{width:100%;padding:12px 16px;background:var(--bg);border:1.5px solid var(--light-gray);border-radius:8px;font-size:14px;color:var(--dark);outline:none;height:48px;cursor:pointer}
.search-btn{padding:0 28px;height:48px;background:var(--teal);color:white;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.search-btn:hover{background:var(--teal-dark);}
.dropdown{position:absolute;top:52px;left:0;right:0;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.18);z-index:200;max-height:240px;overflow-y:auto;border:1px solid #ddd;min-width:260px}
.dd-item{padding:9px 14px;cursor:pointer;font-size:13px;color:#222;border-bottom:0.5px solid #f0f0f0;display:flex;flex-direction:column;gap:1px}
.dd-item:hover{background:#f0f4ff}
.dd-code{font-weight:700;color:var(--dark);font-size:12px}
.dd-name{color:#444;font-size:12px}
.dd-country{color:#999;font-size:11px}
.calendar{position:absolute;top:52px;left:0;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:200;padding:14px;min-width:270px;border:1px solid #ddd}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head button{background:none;border:none;cursor:pointer;font-size:18px;color:var(--dark);padding:2px 6px;border-radius:4px}
.cal-head button:hover{background:#f0f0f0}
.cal-head span{font-size:14px;font-weight:600;color:var(--dark)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dn{text-align:center;font-size:11px;color:#888;padding:4px 0;font-weight:600}
.cal-day{text-align:center;padding:7px 2px;font-size:12px;cursor:pointer;border-radius:5px;color:#222}
.cal-day:hover:not(.disabled):not(.other-month){background:var(--gold);color:white;font-weight:600}
.cal-day.selected{background:var(--dark);color:#fff;font-weight:600}
.cal-day.today{border:1.5px solid var(--dark);color:var(--dark);font-weight:600}
.cal-day.other-month{color:#ddd;pointer-events:none}
.cal-day.disabled{color:#ddd;cursor:default;pointer-events:none}
.hidden{display:none!important}
.class-btn{padding:5px 12px;border-radius:20px;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:12px;color:#444}
.class-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.loading-txt{font-size:12px;color:#888;padding:10px 14px}
.data-note{font-size:11.5px;color:var(--gray);margin-top:12px;text-align:center;}

/* Results */
.results-layout { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px; align-items: flex-start; }
.filters-panel { width: 220px; flex-shrink: 0; background: white; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); position: sticky; top: 80px; }
.filter-title { font-weight: 700; font-size: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.clear-link { color: var(--teal); font-size: 12px; cursor: pointer; font-weight: 600; }
.filter-section { margin-bottom: 18px; }
.filter-section h4 { font-size: 12.5px; font-weight: 700; color: var(--gray); margin-bottom: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.checkbox-item input[type=checkbox] { accent-color: var(--teal); width: 15px; height: 15px; }
.price-range input[type=range] { width: 100%; accent-color: var(--teal); }
.price-vals { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin-top: 4px; }
.results-main { flex: 1; min-width: 0; }
.back-link{font-size:13px;color:var(--teal);cursor:pointer;display:inline-block;margin-bottom:12px;font-weight:600;text-decoration:none;}
.results-header {
  background: var(--dark); color: white; border-radius: var(--radius); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap:wrap; gap:10px;
}
.results-header .route-label{font-size:15px;font-weight:700;}
.results-header .route-sub{font-size:12px;color:rgba(255,255,255,0.7);margin-top:2px;}
.phone-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.data-source-note{font-size:12px;color:var(--gray);margin-bottom:12px;}
.flight-card { background: white; border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden; border-left: 3px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.flight-card:hover { border-left-color: var(--teal); box-shadow: 0 4px 20px rgba(0,176,200,0.15); }
.flight-card-main { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.airline-logo { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; flex-shrink: 0; font-size: 9px; font-weight: 700; color: var(--red); text-align: center; line-height: 1.2; }
.flight-times { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.time-block { text-align: center; min-width: 60px; }
.time-block .ftime { font-size: 16px; font-weight: 700; }
.time-block .fcity { font-size: 11px; color: var(--gray); }
.duration-block { flex: 1; text-align: center; }
.duration-line { display: flex; align-items: center; gap: 4px; justify-content: center; margin-bottom: 2px; }
.fline { flex: 1; height: 1px; background: var(--light-gray); }
.duration-text { font-size: 12px; color: var(--gray); white-space: nowrap; }
.stops-badge { font-size: 11px; font-weight: 600; }
.price-block { text-align: right; flex-shrink: 0; }
.price-block .pcabin { font-size: 11px; color: var(--teal); font-weight: 600; }
.price-block .pprice { font-size: 18px; font-weight: 800; color: var(--dark); }
.price-block .pper { font-size: 11px; color: var(--gray); }
.select-btn { background: var(--teal); color: white; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; margin-left: 12px; white-space: nowrap; transition: background .2s; }
.select-btn:hover { background: var(--teal-dark); }
.flight-details-toggle { background: #f8fffe; border-top: 1px solid var(--light-gray); padding: 6px 16px; font-size: 12px; color: var(--teal); }
.empty-state{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 20px;text-align:center;color:var(--gray);}

/* Enquiry */
.enquiry-layout { display: flex; gap: 20px; max-width: 1000px; margin: 0 auto; padding: 20px; align-items: flex-start; }
.enquiry-form { flex: 1; min-width: 0; }
.enquiry-sidebar { width: 280px; flex-shrink: 0; }
.section-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.section-header { background: var(--dark); color: white; padding: 12px 16px; font-size: 14px; font-weight: 700; }
.section-body { padding: 20px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.form-group { flex: 1; min-width: 140px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--dark); display: block; margin-bottom: 6px; }
.form-group input, .form-group select { width: 100%; border: 1.5px solid var(--light-gray); border-radius: 7px; padding: 10px 12px; font-size: 14px; outline: none; transition: border-color 0.2s; color: var(--dark); background: white; }
.form-group input:focus, .form-group select:focus { border-color: var(--teal); }
.checkbox-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--gray); line-height: 1.5; }
.checkbox-agree input { margin-top: 2px; accent-color: var(--teal); }
.continue-btn { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.2s; margin-top: 6px; }
.continue-btn:hover { background: var(--teal-dark); }
.summary-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.summary-header { background: var(--dark); color: white; padding: 14px 16px; font-size: 14px; font-weight: 700; text-align: center; }
.summary-body { padding: 20px; }
.price-line { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.price-line.total { font-weight: 800; font-size: 16px; color: var(--teal); border-top: 1px solid var(--light-gray); padding-top: 10px; margin-top: 10px; }
.summary-note { font-size: 11px; color: var(--gray); line-height: 1.5; margin-top: 10px; }
.field-error{color:var(--red);font-size:12px;margin-top:4px;}
.form-error-banner{background:#fdecea;color:var(--red);border:1px solid #f5c6c2;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px;}

/* Confirmation */
.confirmation-page { max-width: 780px; margin: 30px auto; padding: 0 20px; }
.conf-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.conf-header { padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--light-gray); flex-wrap:wrap; gap:12px; }
.conf-title { font-size: 13px; font-weight: 700; text-align: right; color: var(--dark); }
.conf-title .sub { font-size: 11.5px; font-weight: 400; color: var(--gray); margin-top: 2px; }
.enquiry-ref { padding: 16px 28px; background: #1a2a3a; color: white; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.enquiry-ref-num { color: var(--teal); font-size: 18px; font-weight: 800; }
.conf-details { padding: 20px 28px; }
.detail-row { display: flex; gap: 40px; margin-bottom: 16px; flex-wrap: wrap; }
.detail-item { font-size: 13px; }
.detail-item .di-label { color: var(--gray); }
.detail-item .di-value { font-weight: 600; color: var(--dark); }
.table-container { overflow-x: auto; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #1a2a3a; color: white; padding: 10px 14px; text-align: left; font-size: 12px; }
td { padding: 12px 14px; border-bottom: 1px solid var(--light-gray); }
tr:last-child td { border-bottom: none; }
.conf-notes { padding: 20px 28px; background: #f9f9f9; font-size: 12px; color: var(--gray); line-height: 1.8; border-top: 1px solid var(--light-gray); }
.conf-notes h4 { font-weight: 700; color: var(--dark); margin-bottom: 10px; font-size: 13px; }

@media(max-width: 768px) {
  .results-layout, .enquiry-layout { flex-direction: column; }
  .filters-panel, .enquiry-sidebar { width: 100%; position: static; }
  .flight-card-main { flex-wrap: wrap; }
  .price-block { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; }
  .select-btn { margin-left: 0; }
  .enquiry-sidebar { order: -1; }
  .row{flex-direction:column}
  .field,.date-field,.pax-field{width:100%;min-width:0;flex:none}
  .swap-btn{align-self:center}
  .search-btn{width:100%;height:48px}
}
@media(max-width: 480px) { header { padding: 10px 14px; } .logo-text { font-size: 16px; } }