/* ==========================================================================
   MEDCARS EXPERIENCE SYSTEM  (loaded after app/components/pages, before responsive)
   Moroccan + contemporary + confident + editorial + premium + useful.
   One system for every page. Tokens extend (never fork) the ones in app.css.
   Documented in docs/MEDCARS_DESIGN_SYSTEM.md.
   ========================================================================== */

:root{
  /* --- spacing scale (4px base) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;
  /* --- type scale (fluid display, fixed text) --- */
  --fs-xs:11.5px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px;
  --fs-2xl:clamp(26px,3vw,34px); --fs-3xl:clamp(32px,4.2vw,50px); --fs-4xl:clamp(40px,6vw,76px);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  /* --- state colours (semantic) --- */
  --sample-bg:#FFF3D6; --sample-fg:#7A5A00; --sample-bd:#E8CF8E;
  --ok-bg:#E3F0E6; --ok-fg:#1E3D26; --none-bg:#EFEDE8; --none-fg:#5C6067;
  --focus:0 0 0 3px rgba(47,93,58,.35);
  --motif-opacity:.07;
}
[data-theme="dark"]{
  --sample-bg:#3A3118; --sample-fg:#F0D58A; --sample-bd:#5E5025;
  --ok-bg:#1F3326; --ok-fg:#A9D8B4; --none-bg:#2A2C2E; --none-fg:#A9ACB2;
  --motif-opacity:.12;
}

/* ---------- focus & skip link (accessibility) ---------- */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip-link:focus{inset-inline-start:12px}

/* ---------- Moroccan geometric motif: 8-point star lattice, restrained ---------- */
.mc-motif{position:relative;isolation:isolate}
.mc-motif::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--motif-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%232F5D3A' stroke-width='1'><path d='M36 4 44 20 60 12 52 28 68 36 52 44 60 60 44 52 36 68 28 52 12 60 20 44 4 36 20 28 12 12 28 20Z'/><circle cx='36' cy='36' r='6'/></g></svg>");
  background-size:72px 72px}
.mc-motif-band{height:14px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><path d='M14 1 18 7 14 13 10 7Z' fill='%23C9A227' opacity='.75'/><path d='M0 7h6M22 7h6' stroke='%23C9A227' stroke-width='1' opacity='.5'/></svg>");background-repeat:repeat-x;background-position:center}

/* ---------- Typography helpers ---------- */
.mc-h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:var(--sp-3) 0 var(--sp-3)}
.mc-h2{font-size:var(--fs-2xl);line-height:var(--lh-snug)}
.mc-lead{font-size:var(--fs-lg);color:var(--text-2);max-width:62ch;line-height:var(--lh-body)}
.mc-muted{color:var(--text-2)} .mc-faint{color:var(--text-3)} .mc-small{font-size:var(--fs-sm)} .mc-xs{font-size:var(--fs-xs)}
.mc-stack>*+*{margin-top:var(--sp-4)} .mc-stack-lg>*+*{margin-top:var(--sp-6)}
.mc-section{padding:var(--sp-8) 0} .mc-section-sm{padding:var(--sp-7) 0} .mc-page{padding-top:110px;min-height:70vh}
.mc-alt{background:var(--surface-2)}
.mc-grid{display:grid;gap:var(--sp-5)} .mc-grid-2{grid-template-columns:repeat(2,1fr)} .mc-grid-3{grid-template-columns:repeat(3,1fr)} .mc-grid-4{grid-template-columns:repeat(4,1fr)}
.mc-row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap} .mc-between{justify-content:space-between}

/* ---------- Buttons / links (extends .btn) ---------- */
.btn{min-height:44px}.btn-sm{min-height:36px}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.mc-link{color:var(--green);font-weight:600;border-bottom:1px solid transparent}.mc-link:hover{border-bottom-color:currentColor}

/* ---------- Chips (filters, categories, trip types) ---------- */
.mc-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.mc-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;transition:all .2s var(--ease);min-height:36px}
.mc-chip:hover{border-color:var(--green);color:var(--text)}
.mc-chip.is-active,.mc-chip[aria-current="page"]{background:var(--green);border-color:var(--green);color:#fff}
.mc-chip .n{opacity:.65;font-size:var(--fs-xs)}

/* ---------- Badges: verified / sample / not recorded ---------- */
.mc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;line-height:1.2}
.mc-badge svg{width:11px;height:11px}
.mc-badge.ok{background:var(--ok-bg);color:var(--ok-fg)}
.mc-badge.sample{background:var(--sample-bg);color:var(--sample-fg);border:1px dashed var(--sample-bd)}
.mc-badge.none{background:var(--none-bg);color:var(--none-fg)}

/* ---------- Alerts ---------- */
.mc-alert{display:flex;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);font-size:var(--fs-sm);line-height:1.55}
.mc-alert b{display:block;margin-bottom:2px}
.mc-alert.demo{background:var(--sample-bg);border-color:var(--sample-bd);color:var(--sample-fg)}
.mc-alert.error{border-color:var(--error);color:var(--error)}
.mc-alert.info{border-color:var(--info)}
.mc-demo-ribbon{background:var(--sample-bg);color:var(--sample-fg);border-bottom:1px solid var(--sample-bd);font-size:var(--fs-xs);text-align:center;padding:6px 12px;font-weight:600;position:relative;z-index:101}

/* ---------- Empty / loading states ---------- */
.mc-empty{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--text-2);background:var(--surface)}
.mc-empty h3{color:var(--text);margin-bottom:var(--sp-2)} .mc-empty .btn{margin-top:var(--sp-4)}
.mc-skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius)}
.mc-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:mc-shimmer 1.4s infinite}
@keyframes mc-shimmer{to{transform:translateX(100%)}}
.mc-loading{opacity:.55;pointer-events:none;transition:opacity .2s}

/* ---------- Cards ---------- */
.mc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-1)}
.mc-card-flat{box-shadow:none}
.mc-card h3{font-size:var(--fs-xl);margin-bottom:var(--sp-2)}

/* ---------- Segmented toggle (LIST | MAP) ---------- */
.mc-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:3px;background:var(--surface)}
.mc-seg a{padding:7px 18px;border-radius:999px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.mc-seg a[aria-current="true"]{background:var(--ink);color:#fff}

/* ---------- Tabs (agency, account, city) ---------- */
.mc-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin:var(--sp-5) 0}
.mc-tabs a{padding:12px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.mc-tabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--green)}

/* ---------- Drawer (mobile filters via <details>) ---------- */
.mc-drawer>summary{list-style:none;cursor:pointer}.mc-drawer>summary::-webkit-details-marker{display:none}

/* ---------- Photography treatment ---------- */
.mc-media{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius)}
.mc-media img{width:100%;height:100%;object-fit:cover;display:block}
.mc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(23,24,26,.18));pointer-events:none}
.mc-media .mc-badge{position:absolute;z-index:2;top:12px;inset-inline-start:12px}

/* ---------- Trust treatment ---------- */
.mc-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.mc-trust-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-6);position:relative;overflow:hidden}
.mc-trust-card .ico{width:46px;height:46px;border-radius:14px;background:var(--ok-bg);color:var(--ok-fg);display:grid;place-items:center;font-size:22px;margin-bottom:var(--sp-4)}
.mc-trust-card h3{font-size:var(--fs-xl);margin-bottom:var(--sp-2)}
.mc-trust-card p{color:var(--text-2);font-size:var(--fs-sm)}
.mc-terms{display:grid;gap:6px;font-size:var(--fs-sm)}
.mc-terms div{display:flex;justify-content:space-between;gap:var(--sp-3);border-bottom:1px dashed var(--border);padding:6px 0}
.mc-terms dt{color:var(--text-2)} .mc-terms dd{font-weight:600;text-align:end}
.mc-terms .nr{color:var(--text-3);font-weight:500;font-style:italic}
.mc-rep{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.mc-rep>div{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);background:var(--surface)}
.mc-rep b{display:block;font-size:var(--fs-lg);font-family:var(--font-display)} .mc-rep span{font-size:var(--fs-xs);color:var(--text-3)}

/* ---------- Trip-type tiles ("Perfect for your trip") ---------- */
.mc-triptiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.mc-triptile{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;transition:all .25s var(--ease)}
.mc-triptile:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--shadow-2)}
.mc-triptile .ico{font-size:30px;line-height:1} .mc-triptile b{font-size:var(--fs-md)} .mc-triptile span{font-size:var(--fs-xs);color:var(--text-2)}

/* ---------- Booking journey stages ---------- */
.mc-stages{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin:var(--sp-4) 0 var(--sp-5)}
.mc-stage{padding:6px 12px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;background:var(--surface-2);color:var(--text-3)}
.mc-stage.done{background:var(--ok-bg);color:var(--ok-fg)} .mc-stage.now{background:var(--ink);color:#fff} .mc-stage.later{opacity:.6;border:1px dashed var(--border-strong);background:transparent}

/* ---------- Forms ---------- */
.mc-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.mc-field label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.mc-field input,.mc-field select,.mc-field textarea{padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit;min-height:44px}
.mc-field input:focus,.mc-field select:focus,.mc-field textarea:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
.mc-field .err{color:var(--error);font-size:var(--fs-xs)}
.mc-field.has-error input,.mc-field.has-error select,.mc-field.has-error textarea{border-color:var(--error)}
.mc-fields-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}

/* ---------- Search result header, filters, map ---------- */
.mc-result-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.mc-result-head h1{font-size:var(--fs-2xl);text-transform:uppercase;letter-spacing:.02em}
.mc-bar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.mc-sort{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);min-height:40px}
.mc-filter-group{padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}.mc-filter-group:last-of-type{border-bottom:0}
.mc-filter-group h4{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--sp-2)}
.mc-pricerange{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.mc-pricerange input{padding:9px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);min-height:40px;width:100%}
.mc-results{display:flex;flex-direction:column;gap:var(--sp-4)}
.search-shell[data-view="map"] .mc-listcol{display:none}
.mc-pin-active{outline:3px solid var(--gold);outline-offset:3px}
.vcard .vterms{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-2)}

/* ---------- Header / nav refinement (5 items) ---------- */
.mainnav{gap:28px}.mainnav a{font-size:14px;white-space:nowrap}
.header-right .btn-primary{white-space:nowrap}

/* ---------- Footer (4 columns + brand, bottom row) ---------- */
footer .fbottom{flex-wrap:wrap;gap:var(--sp-3)}
footer .flangs{display:flex;gap:10px;font-weight:600;letter-spacing:.05em}
footer .flangs button{background:none;border:0;color:#9A9EA5;cursor:pointer;font:inherit}
footer .flangs button.active{color:#F0EDE6}

/* ---------- Account / My Morocco ---------- */
.mc-account{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-6);align-items:start}
.mc-sidenav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-3)}
.mc-sidenav a{padding:10px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.mc-sidenav a[aria-current="page"]{background:var(--ok-bg);color:var(--ok-fg)}
.mc-journey{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:var(--sp-4) 0}
.mc-journey .stop{padding:8px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:600}
.mc-journey .link{width:36px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 10px)}
.mc-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5)}
.mc-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-2xl)} .mc-stat span{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Article ---------- */
.mc-cta-band{background:var(--green-deep);color:#F7F3EC;border-radius:var(--radius-lg);padding:var(--sp-6);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.mc-cta-band h3{color:#F7F3EC;font-size:var(--fs-xl)} .mc-cta-band p{color:#C9D6CC;font-size:var(--fs-sm)}
.mc-cta-band .btn{background:var(--gold);color:#17181A;border-color:var(--gold)}

/* ---------- Responsive (system-level; page rules stay in responsive.css) ---------- */
@media(max-width:1180px){
  .mc-triptiles{grid-template-columns:repeat(3,1fr)}
  .mc-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1080px){
  .search-shell{grid-template-columns:240px 1fr}
  .search-shell .map-pane{display:none}
  .search-shell[data-view="map"]{grid-template-columns:1fr}
  .search-shell[data-view="map"] .map-pane{display:block;height:70vh;position:relative;top:0}
  .search-shell[data-view="map"] .filters{display:none}
}
@media(max-width:820px){
  .mc-account{grid-template-columns:1fr}
  .mc-sidenav{position:static;flex-direction:row;overflow-x:auto}
  .mc-sidenav a{white-space:nowrap}
  .mc-trust-grid,.mc-grid-3,.mc-rep{grid-template-columns:1fr}
  .mc-grid-2{grid-template-columns:1fr}
  .mc-fields-2{grid-template-columns:1fr}
  .mc-page{padding-top:92px}
  .mc-section{padding:var(--sp-7) 0}
  /* Search on small screens: filters become a collapsible drawer above results, never hidden. */
  .search-shell{grid-template-columns:1fr}
  .search-shell .filters{display:block;position:static}
  .search-shell .filters .mc-filter-body{display:none}
  .search-shell .filters[open] .mc-filter-body,.search-shell details.filters[open] .mc-filter-body{display:block}
  .mc-seg{width:100%;justify-content:center}.mc-seg a{flex:1;text-align:center}
}
@media(max-width:520px){
  .mc-triptiles{grid-template-columns:repeat(2,1fr)}
  .mc-grid-4{grid-template-columns:1fr}
  .mc-journey .link{width:18px}
}
@media(min-width:821px){
  .search-shell details.filters>summary{display:none}
  .search-shell details.filters .mc-filter-body{display:block}
}

/* ---------- Booking request page (summary left, sticky price right; sticky submit bar on phones) ---------- */
.mc-bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-6);align-items:start}
.mc-bk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5)}
.mc-bk-h{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-3);font-family:var(--font-body)}
.mc-bk-sticky{position:sticky;top:96px}
.mc-bk-submit{width:100%;margin-top:var(--sp-4)}
@media(max-width:900px){
  .mc-bk-grid{grid-template-columns:1fr}
  .mc-bk-sticky{position:static}
  .mc-bk-summary{order:-1}
  .mc-bk-submit{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:5;box-shadow:var(--shadow-2)}
}