:root { --ink:#112438; --navy:#071f32; --blue:#1777ba; --azure:#0d5b90; --orange:#f58527; --sun:#f7b521; --mist:#f4f7f8; --line:#dbe3e7; --muted:#6e7d88; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); font-family:'DM Sans',sans-serif; background:var(--mist); } .app-shell { min-height:100vh; display:grid; grid-template-columns:270px 1fr; } .sidebar { background:var(--navy); color:#eaf2f5; padding:28px 22px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh; } .brand { display:flex; align-items:center; min-height:122px; padding:14px; margin:0 0 26px; border-radius:13px; background:#fff; text-decoration:none; box-shadow:0 14px 30px #00000024; } .brand-logo { display:block; width:100%; height:88px; object-fit:contain; object-position:center; } nav { display:grid; gap:5px; } .nav-link { text-decoration:none; color:#c4d1d7; display:flex; align-items:center; gap:11px; padding:13px 12px; border-radius:9px; font-size:14px; } .nav-link.active { color:#fff; background:linear-gradient(90deg,#0d5b90,#1777ba); box-shadow:inset 3px 0 var(--sun); } .nav-link.muted { opacity:.58; } .nav-link em { margin-left:auto; color:#f9bd38; font-size:9px; font-style:normal; text-transform:uppercase; } .sidebar-bottom { margin-top:auto; border-top:1px solid #23465d; padding:20px 9px 0; font-size:11px; color:#8da3b0; } .sidebar-bottom p { margin:0 0 4px; color:#d7e4e9; font-size:9px; letter-spacing:1.2px; } main { max-width:1360px; width:100%; margin:0 auto; padding:0 48px 60px; } .topbar { min-height:115px; display:flex; align-items:center; justify-content:space-between; } .eyebrow { color:var(--blue); font-size:10px; font-weight:700; letter-spacing:1.5px; margin:0 0 7px; } h1,h2,h3,p { margin-top:0; } h1 { font-family:'Playfair Display'; margin-bottom:0; font-size:28px; } h2 { font-family:'Playfair Display'; font-size:26px; margin-bottom:0; } .user-chip { display:flex; align-items:center; gap:10px; font-size:12px; } .user-chip>span { width:40px; height:40px; display:grid; place-items:center; background:linear-gradient(135deg,var(--orange),var(--sun)); color:#fff; border-radius:50%; font-weight:700; } .user-chip strong,.user-chip small { display:block; } .user-chip small { color:var(--muted); margin-top:2px; } .hero { color:#fff; position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(110deg,#061f32 0%,#0d5b90 58%,#1777ba 100%); border-radius:16px 16px 0 0; min-height:232px; padding:38px 48px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .hero::before { content:""; position:absolute; z-index:-2; width:440px; height:440px; right:-120px; top:-195px; border:54px solid #f7b52135; border-radius:50%; } .hero::after { content:""; position:absolute; z-index:-1; inset:0; background:url('assets/mms-logo-watermark.svg') no-repeat right 42px center / 270px auto; opacity:.2; mix-blend-mode:screen; } .hero .eyebrow { color:#c9e6fa; } .hero h2 { max-width:700px; font-size:34px; } .hero-copy>p:not(.eyebrow) { color:#e1f0f8; max-width:650px; line-height:1.55; margin:11px 0 0; font-size:14px; } .hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .hero-tags span { border:1px solid #ffffff45; border-radius:999px; background:#051a2f45; padding:6px 10px; color:#fff; font-size:10px; font-weight:700; } .status { position:relative; background:#041d31b8; border:1px solid #ffffff20; padding:10px 13px; font-size:11px; border-radius:999px; white-space:nowrap; } .status span { display:inline-block; width:7px; height:7px; background:var(--sun); border-radius:50%; margin-right:6px; } .search-card { display:grid; grid-template-columns:1.35fr repeat(3,1fr) auto; gap:14px; background:#fff; padding:19px; border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; box-shadow:0 14px 28px #11243810; } .field { border:1px solid var(--line); border-radius:7px; padding:8px 11px; background:#fff; } label { display:block; color:var(--muted); font-size:10px; font-weight:600; margin-bottom:3px; } input,select { width:100%; border:0; outline:0; color:var(--ink); font:600 13px 'DM Sans'; background:transparent; } .search-card>button { border:0; border-radius:7px; background:linear-gradient(135deg,var(--orange),#e9701c); color:#fff; font:700 13px 'DM Sans'; padding:0 22px; cursor:pointer; box-shadow:0 8px 16px #f5852740; } .search-card>button:hover { filter:brightness(1.06); } .search-card>button span { padding-left:8px; font-size:18px; } .results { padding-top:45px; } .section-title { display:flex; justify-content:space-between; align-items:end; } .section-title h2 { font-size:23px; } .result-count { color:var(--muted); font-size:12px; } .filters { margin:22px 0 18px; display:flex; gap:8px; flex-wrap:wrap; } .filters button { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); padding:7px 12px; font:600 11px 'DM Sans'; cursor:pointer; } .filters .active { color:var(--blue); border-color:var(--blue); background:#edf7fa; } .filters .sort { margin-left:auto; } .rate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .rate-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:21px; position:relative; box-shadow:0 4px 10px #11243808; } .rate-card.best-rate { border-color:#b7d1dd; } .best-label { position:absolute; right:15px; top:-10px; color:#fff; background:var(--blue); font-size:9px; letter-spacing:.5px; padding:5px 8px; border-radius:4px; text-transform:uppercase; } .hotel-line { display:flex; justify-content:space-between; gap:12px; } .hotel-line h3 { margin:0 0 3px; font-size:16px; } .stars { color:var(--orange); font-size:11px; letter-spacing:1px; } .supplier-badge { height:max-content; background:#eef3f5; color:#385568; font-size:10px; font-weight:700; padding:5px 7px; border-radius:4px; white-space:nowrap; } .room { color:var(--muted); font-size:12px; margin:12px 0; } .details { padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:7px; color:#526571; font-size:11px; } .green { color:#278263; } .amber { color:#ad7121; } .card-footer { display:flex; align-items:end; justify-content:space-between; padding-top:15px; } .card-footer small,.card-footer strong { display:block; } .card-footer small { font-size:10px; color:var(--muted); margin-bottom:3px; } .card-footer strong { font-size:20px; } .choose { border:0; background:var(--navy); color:#fff; border-radius:5px; padding:9px 15px; font:700 11px 'DM Sans'; cursor:pointer; } .connection-panel { display:flex; justify-content:space-between; gap:30px; margin-top:45px; padding:29px 32px; background:#e8f0f3; border-radius:10px; } .connection-panel h2 { font-size:21px; } .connection-panel p:last-child { max-width:610px; color:#596b76; font-size:13px; line-height:1.5; margin:8px 0 0; } .supplier-list { display:grid; grid-template-columns:repeat(2,145px); gap:8px; align-content:center; } .supplier-list span { background:#fff; border-radius:5px; padding:9px 10px; font-size:11px; font-weight:600; } .supplier-list b { display:block; color:var(--blue); margin-top:3px; font-size:9px; text-transform:uppercase; } dialog { border:0; border-radius:12px; padding:0; box-shadow:0 20px 50px #0004; max-width:420px; } dialog::backdrop { background:#08131bb3; } .dialog-content { padding:28px; position:relative; } .dialog-content h2 { font-size:23px; margin-bottom:12px; } .dialog-content>p:not(.eyebrow) { color:#526571; font-size:13px; line-height:1.55; } .dialog-content a { display:inline-block; margin-top:8px; color:#fff; background:var(--blue); padding:10px 14px; border-radius:5px; text-decoration:none; font-size:12px; font-weight:700; } .close { position:absolute; right:13px; top:10px; border:0; background:transparent; color:var(--muted); font-size:23px; cursor:pointer; }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; } .sidebar { position:static; height:auto; min-height:0; padding:18px; } .brand { padding-bottom:12px; } nav { display:flex; overflow:auto; } .nav-link { white-space:nowrap; } .sidebar-bottom { display:none; } main { padding:0 20px 40px; } .rate-grid { grid-template-columns:1fr; } .search-card { grid-template-columns:1fr 1fr; } .location-field { grid-column:span 2; } .search-card>button { min-height:45px; } }
@media (max-width:580px) { .topbar { min-height:92px; } .user-chip div { display:none; } .hero { padding:28px 22px; } .hero::after { background-size:200px auto; background-position:right -45px center; } .hero h2 { font-size:26px; } .hero-tags { display:none; } .status { display:none; } .search-card { grid-template-columns:1fr; } .location-field { grid-column:auto; } .section-title h2 { font-size:20px; } .filters .sort { margin-left:0; } .connection-panel { display:block; padding:25px; } .supplier-list { margin-top:20px; grid-template-columns:1fr 1fr; } }

.topbar-actions { display:flex; align-items:center; gap:22px; }
.demo-toggle { border:1px solid #c8d8e3; color:var(--azure); background:#fff; border-radius:999px; padding:9px 13px; font:700 11px 'DM Sans'; cursor:pointer; }
.demo-toggle span { color:var(--orange); font-size:13px; margin-right:4px; }
.demo-toggle[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,var(--orange),#e9701c); border-color:transparent; box-shadow:0 8px 16px #f5852740; }
.demo-toggle[aria-pressed="true"] span { color:#fff; }
.demo-toggle:disabled { cursor:default; opacity:1; }
.service-switch { display:flex; align-items:stretch; gap:10px; padding:16px 18px; margin-top:20px; border:1px solid var(--line); background:#fff; border-radius:12px; box-shadow:0 6px 18px #11243808; }
.service-tab { min-width:190px; border:1px solid var(--line); background:#fff; color:var(--muted); padding:10px 12px; border-radius:8px; text-align:left; font:700 13px 'DM Sans'; cursor:pointer; }
.service-tab span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:7px; border-radius:6px; color:var(--blue); background:#eaf5fb; }
.service-tab small { display:block; padding-left:33px; margin-top:2px; color:#82919a; font-size:9px; font-weight:600; }
.service-tab.active { color:var(--navy); border-color:#9ccbe7; background:#f3faff; }
.service-tab.active span { color:#fff; background:var(--blue); }
.service-switch p { align-self:center; max-width:360px; margin:0 0 0 auto; color:var(--muted); font-size:11px; line-height:1.45; }
.advanced-filters { display:grid; grid-template-columns:1.25fr repeat(3,minmax(130px,1fr)) auto auto; align-items:end; gap:12px; padding:14px 18px; margin-top:16px; border:1px solid var(--line); background:#fff; border-radius:12px; box-shadow:0 6px 18px #11243808; }
.filter-heading { align-self:center; } .filter-heading span,.filter-heading small { display:block; } .filter-heading span { color:var(--ink); font-size:12px; font-weight:700; } .filter-heading small { color:var(--muted); margin-top:3px; font-size:10px; }
.compact-field { display:block; color:var(--muted); font-size:10px; font-weight:700; } .compact-field select,.compact-field input { margin-top:5px; border:1px solid var(--line); border-radius:6px; padding:8px 9px; color:var(--ink); font:600 11px 'DM Sans'; }
.check-filter { align-self:center; display:flex; align-items:center; gap:6px; color:var(--ink); font-size:11px; font-weight:700; white-space:nowrap; } .check-filter input { accent-color:var(--blue); }
.flight-only[hidden] { display:none !important; }
.reset-filters { align-self:center; border:0; background:transparent; color:var(--blue); font:700 11px 'DM Sans'; cursor:pointer; white-space:nowrap; }
.apply-filters { align-self:center; border:0; border-radius:6px; background:var(--blue); color:#fff; padding:9px 13px; font:700 11px 'DM Sans'; cursor:pointer; white-space:nowrap; box-shadow:0 5px 12px #1777ba32; }
.demo-mode .service-switch { border-color:#f6cb81; background:#fffaf1; }
.demo-mode .best-label { background:var(--orange); }
.flight-card .airline-code { display:block; color:var(--blue); margin-bottom:4px; font-size:10px; font-weight:700; letter-spacing:1px; }
.flight-route { color:var(--ink); font-size:13px; font-weight:600; margin:14px 0; }
.flight-times { display:grid; grid-template-columns:1fr 22px 1fr 1fr; align-items:center; gap:8px; padding:12px 0; border-top:1px solid var(--line); }
.flight-times strong,.flight-times small { display:block; }
.flight-times strong { color:var(--navy); font-size:16px; }
.flight-times small { color:var(--muted); margin-top:3px; font-size:9px; }
.flight-times>span { color:var(--orange); font-size:18px; }
@media (max-width:900px) { .service-switch { flex-wrap:wrap; } .service-switch p { width:100%; max-width:none; margin-left:0; } }
@media (max-width:1050px) { .advanced-filters { grid-template-columns:repeat(3,1fr); } .filter-heading { grid-column:1/-1; } }
@media (max-width:580px) { .topbar-actions { gap:10px; } .demo-toggle { padding:8px 10px; font-size:10px; } .service-tab { min-width:calc(50% - 5px); } .flight-times { grid-template-columns:1fr 18px 1fr; } .flight-times div:last-child { grid-column:1/-1; } }
.prebook-action { display:block; border:0; border-radius:5px; background:linear-gradient(135deg,var(--orange),#e9701c); color:#fff; padding:10px 14px; margin-top:16px; font:700 12px 'DM Sans'; cursor:pointer; } .prebook-action:disabled { opacity:.65; cursor:wait; } .prebook-action[hidden] { display:none !important; }

.booking-form { margin-top:17px; padding-top:15px; border-top:1px solid var(--line); }
.booking-form-title { color:var(--ink); font-weight:700; margin-bottom:10px; }
.guest-fields { display:grid; grid-template-columns:82px 1fr 1fr; gap:8px; }
.guest-fields label { color:var(--muted); font-size:10px; }
.guest-fields input,.guest-fields select { margin-top:5px; width:100%; border:1px solid var(--line); border-radius:5px; padding:8px; font:600 12px 'DM Sans'; }
.booking-confirmation { display:flex; align-items:flex-start; gap:7px; margin:13px 0 0; color:var(--ink); font-size:11px; line-height:1.4; }
.booking-confirmation input { width:auto; margin-top:1px; accent-color:var(--blue); }
@media (max-width:580px) { .guest-fields { grid-template-columns:1fr; } }

.field-help { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
#destination { min-width:0; }

.hotel-name-filter input[type="search"] { margin-top:5px; border:1px solid var(--line); border-radius:6px; padding:8px 9px; color:var(--ink); font:600 11px 'DM Sans'; }
.hotel-name-filter[hidden] { display:none !important; }


.certification-case-panel {
  margin: 22px 0 0;
  padding: 18px 26px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 210px minmax(240px, 1fr);
  gap: 22px;
  align-items: center;
  background: #fff8e9;
  border: 1px solid #f2c36d;
  border-radius: 16px;
}
.certification-case-panel strong { display: block; color: var(--ink); }
.certification-case-panel small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.certification-case-panel label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.certification-case-panel select { display:block; width:100%; margin-top: 6px; }
.certification-case-panel p { margin: 0; color: #77531a; line-height: 1.45; font-size: .9rem; }
@media (max-width: 900px) { .certification-case-panel { grid-template-columns: 1fr; } }