@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.ch-customer{margin:0;display:flex;min-height:100vh;background:#f6f8fc;color:#090e38;font:14px/1.5 Inter,Arial,sans-serif}
.ch-customer *, .ch-dash-search-wrap *, .ch-home-search *, .ch-discovery-search *{box-sizing:border-box !important}
.ch-customer a{text-decoration:none;color:#1f21d1}
.ch-customer button,.ch-customer input{font:inherit}
.ch-customer a:focus-visible,.ch-customer button:focus-visible,.ch-customer summary:focus-visible{outline:3px solid #8588ff;outline-offset:3px}

/* ── Sidebar ── */
.sidebar{width:250px;flex:0 0 250px;background:#17184a;padding:24px 18px;min-height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;white-space:nowrap}
.sidebar .brand{color:#fff}
.brand img{border-radius:100%;border:2px solid #2222cc;object-fit:cover}
.brand-row{display:flex;justify-content:space-between}
.sidebar nav{display:flex;flex-direction:column;gap:6px;margin-top:24px}
.sidebar nav a{min-height:36px;padding:8px 12px;border-radius:10px;color:#ffffffe6;font-size:13px}
.sidebar nav a.active{background:#1f21d1;min-height:44px;padding-top:12px;font-weight:600}
.sidebar nav a:hover{background:#252660}

/* ── Workspace & top header ── */
.workspace{flex:1;min-width:0;width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}
.top{height:72px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dcdcf0;gap:20px}
.top>strong{color:#2222cc;font-size:18px}

/* ── Account area ── */
.account{display:flex;align-items:center;gap:14px;flex-shrink:0;min-width:0}
.account details{display:none}

/* ── CH Avatar (embedded from ch-account-bar) ── */
.ch-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;overflow:hidden;position:relative;background:#1f21d1;color:#fff;flex-shrink:0;vertical-align:middle}
.ch-avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:100%}
.ch-avatar-initial{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:700;line-height:1;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#1f21d1 0%,#3b82f6 100%);border-radius:100%}

/* ── CH Account Dropdown (embedded from ch-account-bar) ── */
.ch-account-dropdown{position:relative;display:inline-block;text-align:left}
.ch-account-trigger{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1.5px solid #d6dbf0;border-radius:30px;padding:4px 14px 4px 4px;cursor:pointer;font:600 13px/1.2 Inter,Arial,sans-serif;color:#090e38;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ch-account-trigger:hover,.ch-account-trigger:focus-visible{background:#f1f5ff;border-color:#1f21d1;outline:none}
.ch-account-trigger[aria-expanded="true"]{border-color:#1f21d1;background:#eff6ff}
.ch-account-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.ch-account-caret{flex-shrink:0;transition:transform .2s ease;color:#64748b}
.ch-account-trigger[aria-expanded="true"] .ch-account-caret{transform:rotate(180deg);color:#1f21d1}
.ch-account-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 12px 28px -6px rgba(15,23,42,.13),0 6px 10px -4px rgba(15,23,42,.08);padding:6px;z-index:99999}
.ch-account-menu[hidden]{display:none !important}
.ch-account-menu-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}
.ch-account-menu-name{font-size:13px;font-weight:700;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-account-menu-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:10px;background:#e0e7ff;color:#3730a3;white-space:nowrap}
.ch-account-menu-list{display:flex;flex-direction:column;gap:1px}
.ch-account-item{display:block;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;color:#334155;text-decoration:none;transition:background .12s,color .12s;line-height:1.4}
.ch-account-item:hover,.ch-account-item:focus-visible{background:#f1f5f9;color:#0f172a;text-decoration:none;outline:none}
.ch-account-item-logout{margin-top:4px;border-top:1px solid #f1f5f9;color:#dc2626 !important}
.ch-account-item-logout:hover,.ch-account-item-logout:focus-visible{background:#fef2f2 !important;color:#b91c1c !important}

/* ── Booking status tags ── */
.booking-status-tag,.payment-status-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;line-height:1.3}
.booking-status-tag{background:#e0e7ff;color:#3730a3}
.booking-status-tag.status-confirmed{background:#dcfce7;color:#15803d}
.booking-status-tag.status-pending{background:#fef9c3;color:#92400e}
.booking-status-tag.status-failed{background:#fee2e2;color:#991b1b}
.booking-status-tag.status-cancelled{background:#f1f5f9;color:#475569}
.booking-status-tag.status-completed{background:#e0f2fe;color:#0369a1}
.payment-status-tag{background:#f0fdf4;color:#166534}

/* ── Main content ── */
.ch-customer main{padding:30px 32px 48px;max-width:100%;box-sizing:border-box}
.ch-customer h1{font-size:26px;line-height:34px;font-weight:600;margin:0;overflow-wrap:anywhere}
.subtitle{color:#636e85;margin:4px 0 18px;font-size:14px}

/* ── Panels & components ── */
.panel{background:#fff;border:1px solid #d6dbf0;border-radius:10px;padding:16px;box-sizing:border-box;max-width:100%}
.ch-dash-search-wrap{margin-bottom:20px;width:100%;max-width:100%;box-sizing:border-box}
.ch-dash-search-wrap .ch-discovery-search{margin:0;background:#fff;border:1px solid #d6dbf0;border-radius:10px;padding:16px;width:100%;max-width:100%;box-sizing:border-box}

.ch-dash-search-wrap form.ch-discovery-search.ch-home-search,
.ch-dash-search-wrap .ch-home-search,
form.ch-discovery-search.ch-home-search,
form.ch-home-search,
.ch-home-search{
  display:grid !important;
  grid-template-columns:minmax(140px,1.6fr) minmax(90px,.8fr) minmax(120px,1.2fr) minmax(115px,1fr) minmax(115px,1fr) minmax(80px,.7fr) minmax(115px,1fr) minmax(105px,.9fr) !important;
  gap:12px !important;
  column-gap:12px !important;
  row-gap:12px !important;
  align-items:end !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.ch-dash-search-wrap .ch-global-search-fields,
.ch-dash-search-wrap .ch-global-search-actions,
.ch-home-search .ch-global-search-fields,
.ch-home-search .ch-global-search-actions{display:contents !important}

.ch-dash-search-wrap .ch-field,
.ch-home-search .ch-field{display:flex !important;flex-direction:column !important;gap:6px !important;min-width:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important}
.ch-dash-search-wrap .ch-nearby-control,
.ch-home-search .ch-nearby-control{display:flex !important;flex-direction:column !important;gap:6px !important;min-width:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important}

.ch-dash-search-wrap input,
.ch-dash-search-wrap select,
.ch-dash-search-wrap button,
.ch-home-search input,
.ch-home-search select,
.ch-home-search button,
.ch-discovery-search input,
.ch-discovery-search select,
.ch-discovery-search button{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.search-fields{display:grid;grid-template-columns:1.2fr 1fr .9fr .9fr .75fr 1fr;gap:14px;box-sizing:border-box;max-width:100%}
.search label{font-size:10px;color:#636e85}
.search-fields input{display:block;width:100%;height:42px;margin-top:4px;border:1px solid #d6dbf0;border-radius:7px;padding:10px 11px;background:#fff;color:#636e85;font-size:12px;opacity:1;-webkit-text-fill-color:#636e85;box-sizing:border-box}
.search-actions{display:flex;justify-content:space-between;margin-top:14px;gap:12px}
.search-actions .button{min-width:184px}
.kids{display:flex;align-items:center;gap:8px;border:1px solid #d6dbf0;border-radius:8px;padding:8px 18px}

/* Date & Time Inputs cursor and native calendar overlay */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  cursor: pointer !important;
  position: relative !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

/* ── Buttons ── */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1.5px solid #d6dbf0;border-radius:8px;background:#ffffff;color:#1f21d1;font-size:12px;font-weight:600;padding:10px 18px;text-align:center;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease}
.button:hover,.button:focus-visible{background:#eff6ff;border-color:#1f21d1;color:#1517a6;text-decoration:none;box-shadow:0 2px 8px rgba(31,33,209,.12)}
.button:active{transform:translateY(0)}
.button.primary{background:linear-gradient(135deg,#1f21d1 0%,#4338ca 100%)!important;color:#ffffff!important;border:1.5px solid transparent!important;box-shadow:0 3px 10px rgba(31,33,209,.3)}
.button.primary:hover,.button.primary:focus-visible{background:linear-gradient(135deg,#1517a6 0%,#312e81 100%)!important;color:#ffffff!important;border-color:transparent!important;box-shadow:0 6px 18px rgba(21,23,166,.42)!important;transform:translateY(-1px);opacity:1!important;text-decoration:none}
.button.primary:active{transform:translateY(0);box-shadow:0 2px 6px rgba(21,23,166,.3)!important}
.button:disabled,.button[disabled]{opacity:.55!important;cursor:not-allowed!important;pointer-events:none!important;box-shadow:none!important;transform:none!important}

/* Pay / Retry bold button */
.booking-table-wrap .button.primary{border-radius:10px;font-weight:700;letter-spacing:.02em;box-shadow:0 3px 10px rgba(31,33,209,.35);transition:opacity .15s,transform .12s,box-shadow .15s}
.booking-table-wrap .button.primary:hover{opacity:1!important;transform:translateY(-1px);box-shadow:0 6px 18px rgba(21,23,166,.45)!important;background:linear-gradient(135deg,#1517a6 0%,#312e81 100%)!important;color:#ffffff!important}

/* ── Grid & layout ── */
.types{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.types .button{font-size:11px;padding:8px 4px}
.availability-note{margin:10px 0 0;font-size:11px;color:#636e85}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}
.metric{padding:14px}
.metric span{font-size:11px;color:#636e85}
.metric strong{display:block;font-size:22px;color:#1f21d1;font-weight:600;margin-top:4px}
.empty{min-height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.empty h2,.empty h3{font-size:17px;font-weight:600;margin:0}
.empty p{font-size:13px;color:#636e85;margin:0}
.section-heading{font-size:18px;font-weight:600;margin:24px 0 14px}
.bottom-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin-top:24px}
.bottom-grid h2{font-size:12px;text-transform:uppercase;margin:0 0 16px;font-weight:600}
.recent p{font-size:12px;color:#636e85}
.quick>.button{width:100%}
.quick>div{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.message-list{padding:0;list-style:none;margin:0}
.message-list li+li{border-top:1px solid #d6dbf0;padding-top:10px;margin-top:10px}
.message-list strong{font-size:12px}
.message-list p{overflow-wrap:anywhere;margin:4px 0}
.message-list time{font-size:11px;color:#636e85}
.destination{margin-top:20px;min-height:260px}
.destination .message-list{text-align:left;width:100%}

/* ── Mobile nav ── */
.mobile-header,#menu-close,.overlay{display:none}
.skip{position:absolute;top:-100px;left:16px;background:#fff;padding:12px;z-index:99}
.skip:focus{top:8px}

@media(max-width:1100px){
  .search-fields{grid-template-columns:repeat(3,1fr)}
  .types{grid-template-columns:repeat(3,1fr)}
  .ch-dash-search-wrap form.ch-discovery-search.ch-home-search,
  .ch-dash-search-wrap .ch-home-search,
  form.ch-discovery-search.ch-home-search,
  form.ch-home-search,
  .ch-home-search{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

@media(max-width:768px){
  .ch-dash-search-wrap form.ch-discovery-search.ch-home-search,
  .ch-dash-search-wrap .ch-home-search,
  form.ch-discovery-search.ch-home-search,
  form.ch-home-search,
  .ch-home-search{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    padding:14px !important;
  }
  .ch-dash-search-wrap .ch-field:first-child,
  .ch-home-search .ch-field:first-child{
    grid-column:1 / -1 !important;
  }
  .ch-dash-search-wrap .ch-global-search-actions,
  .ch-home-search .ch-global-search-actions{
    grid-column:1 / -1 !important;
  }
  .ch-dash-search-wrap .ch-discovery-button,
  .ch-home-search .ch-discovery-button{
    width:100% !important;
    min-height:42px !important;
  }
}

@media(max-width:767px){
  .ch-customer{display:block}
  .mobile-header{display:flex;align-items:center;gap:9px;height:72px;padding:0 18px;background:#fff}
  .mobile-header .brand{font-size:14px;gap:9px}
  .mobile-header .brand img{border-width:1px;border-radius:100%}
  .profile-icon{margin-left:auto}
  .mobile-header button{background:none;border:0;color:#2222cc;font-size:20px;min-height:44px;cursor:pointer}
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:30;width:280px;max-width:calc(100vw - 40px);min-height:0;overflow:auto;visibility:hidden;transform:translateX(-100%)}
  .ch-customer.nav-open .sidebar{visibility:visible;transform:translateX(0)}
  #menu-close{display:block;color:white;background:none;border:0;font-size:24px;min-height:40px}
  .overlay:not([hidden]){display:block;position:fixed;inset:0;background:#12144a66;border:0;z-index:20}
  .ch-customer.nav-open{overflow:hidden}
  .top{display:none}
  .ch-customer main{padding:20px 16px 36px !important}
  .ch-customer h1{font-size:24px;line-height:32px}
  .subtitle{font-size:13px;line-height:20px;margin:6px 0 20px}
  .search{padding:14px}
  .search-fields{grid-template-columns:1fr;gap:8px}
  .search-actions{flex-direction:column;margin-top:8px}
  .search-actions .button{width:100%}
  .types{display:none}
  .metrics{grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid #d6dbf0;border-radius:10px;margin:16px 0}
  .metric{border:0;background:transparent}
  .metric strong{font-size:18px}
  .metric span{font-size:10px}
  .bottom-grid{grid-template-columns:1fr}
  .empty{min-height:180px}
  .section-heading{font-size:17px}
  .account-menu{position:static}
  .ch-account-menu{min-width:200px}
}

@media(max-width:600px){
  .ch-dash-search-wrap form.ch-discovery-search.ch-home-search,
  .ch-dash-search-wrap .ch-home-search,
  form.ch-discovery-search.ch-home-search,
  form.ch-home-search,
  .ch-home-search{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px 12px !important;
  }
  .ch-dash-search-wrap .ch-field,
  .ch-dash-search-wrap .ch-nearby-control,
  .ch-dash-search-wrap .ch-global-search-actions,
  .ch-home-search .ch-field,
  .ch-home-search .ch-nearby-control,
  .ch-home-search .ch-global-search-actions{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .ch-customer main{padding:16px 12px 28px !important}
}