:root {
    --ivory:#fbf7ef;
    --paper:#fffdf8;
    --cream:#f1e6d5;
    --emerald:#0b4436;
    --emerald-2:#0e5a47;
    --gold:#b98639;
    --gold-soft:#d9b875;
    --ink:#19342d;
    --muted:#5c6660;
    --line:rgba(177,133,61,.28);
    --shadow:0 22px 70px rgba(34,45,38,.10);
    font-family:"Tahoma","Arial",system-ui,sans-serif;
}

*{box-sizing:border-box}
/* Guarantee the native `hidden` attribute always wins over a component class
   that sets `display` directly (.btn, .empty-state, etc). Both have equal
   selector specificity (0-1-0), so without !important the later author-origin
   class rule silently beats the UA stylesheet's [hidden] default - confirmed
   by rendering business.blade.php's waitlist button (class="btn ... hidden"):
   it rendered visible despite the hidden attribute, because .btn sets
   display:inline-flex. Fixing it here (not per-template) also corrects every
   other hidden-toggled element project-wide - e.g. home.blade.php's
   appointment-date rows/empty-state - without touching those templates. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);direction:rtl}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button,a{touch-action:manipulation}
img{display:block;max-width:100%}
.container{width:min(1220px,calc(100% - 40px));margin-inline:auto}
.site-shell{overflow:hidden;background:var(--ivory)}

.site-header{position:relative;z-index:20;background:rgba(255,253,248,.94);border-bottom:1px solid var(--line);box-shadow:0 8px 35px rgba(24,44,37,.05)}
.utility-bar{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(177,133,61,.16);font-size:13px}
.utility-message{color:var(--emerald)}
.utility-left{display:flex;align-items:center;gap:24px}
.utility-left>a{font-weight:700}
.socials{display:flex;align-items:center;gap:8px}
.socials a{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-size:10px;font-weight:800;color:var(--emerald);transition:.2s}
.socials a:hover{background:var(--emerald);color:white;transform:translateY(-1px)}

.brand-row{display:grid;grid-template-columns:1fr 1fr 210px 1.2fr;align-items:center;gap:26px;min-height:170px;padding-block:24px}
.brand-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:130px}
/* VNext brand redesign: the old circular seal (border/gradient/crossed-oval
   flourish) is replaced by resources/views/partials/brand-mark.blade.php's
   SVG, which already carries its own complete background/shape - this is
   now just a sizing wrapper around whatever mark size is passed in. */
.brand-ornament{position:relative;display:grid;place-items:center;width:76px;height:76px;line-height:1}
.brand-ornament svg{width:100%;height:100%}
/* VNext brand redesign: the Arabic wordmark is the PRIMARY identity element
   (not a small label beside a seal) - sized up accordingly; the Latin
   companion label stays clearly secondary. */
.brand-ar{font-weight:800;color:var(--emerald);font-size:23px;letter-spacing:-.2px;line-height:1}
.brand-en{display:block;margin-top:-2px;font-family:Georgia,serif;letter-spacing:2.5px;font-size:9.5px;color:var(--gold);text-transform:uppercase;opacity:.85}
.header-action{min-height:65px;border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px;background:rgba(255,255,255,.52);transition:.25s;box-shadow:0 5px 18px rgba(31,55,45,.035)}
.header-action:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,55,45,.08)}
.header-action--primary{background:linear-gradient(135deg,var(--emerald),#062e25);color:#fff;border-color:#b68a43}
.header-action--wide{justify-content:flex-start}
.header-action small{display:block;color:var(--muted);margin-top:3px;font-size:11px}
.action-icon{color:var(--gold);font-size:25px}

.main-nav{border-top:1px solid rgba(177,133,61,.16)}
.nav-inner{min-height:62px;display:flex;align-items:center;justify-content:center}
.nav-links{display:flex;align-items:center;gap:0}
.nav-links a{position:relative;padding:20px 32px;font-weight:700;border-left:1px solid rgba(177,133,61,.15)}
.nav-links a:last-child{border-left:0}
.nav-links a.active,.nav-links a:hover{color:var(--gold)}
.nav-links a.active:after{content:"";position:absolute;right:25%;left:25%;bottom:0;height:2px;background:var(--gold)}
.mobile-menu{display:none;border:0;background:none;font-size:26px;color:var(--emerald)}

.hero{position:relative;min-height:720px;padding:65px 0 45px;isolation:isolate}
/* .hero-reference (pre-VNext hero background, url('/assets/mawedna/hero-reference-source.png'),
   a 2.9MB PNG) removed 2026-08-12 perf audit: superseded by .hero-v2 (icon/glyph based, no
   photo) per CLAUDE.md §16 VNext homepage redesign - no template referenced this class or
   fetched the image, this was dead CSS pointing at dead weight. hero-reference-source.png
   itself is left on disk (design-source asset, not deleted as part of a code edit). */
.hero-overlay{position:absolute;inset:0;z-index:-2;background:
    linear-gradient(180deg,rgba(251,247,239,.82) 0%,rgba(251,247,239,.61) 42%,rgba(251,247,239,.89) 100%),
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.82),rgba(255,255,255,.26) 55%,rgba(11,68,54,.06))}
.hero-content{text-align:center}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:13px;color:var(--emerald);font-family:Georgia,serif;margin-bottom:12px}
.eyebrow i{display:block;width:42px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(38px,5vw,70px);line-height:1.18;margin:0;color:var(--emerald);font-weight:800;letter-spacing:-1.5px;text-shadow:0 2px 20px rgba(255,255,255,.92)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero> .container>p,.hero-content>p{max-width:710px;margin:20px auto 28px;line-height:1.9;font-size:17px;font-weight:600;color:#314b43}

.hero-search{margin:0 auto 24px;display:grid;grid-template-columns:1fr 1fr 1fr 180px;gap:10px;background:rgba(255,253,248,.93);padding:12px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(14px);text-align:right}
.hero-search label{min-height:62px;padding:7px 14px;border-left:1px solid rgba(177,133,61,.18);border-radius:12px;transition:.15s}
.hero-search label span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.hero-search select,.hero-search input{width:100%;border:0;background:transparent;color:var(--ink);outline:0;font-weight:700}
.hero-search label:focus-within{background:rgba(11,68,54,.06);box-shadow:inset 0 0 0 2px var(--emerald)}
.hero-search .btn-primary:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.btn{border:0;border-radius:13px;min-height:48px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--emerald);color:#fff;font-weight:800;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);background:var(--emerald-2)}
/* Tactile press feedback (Master Mission "controlled motion system"): the
   existing blanket `.btn{transition:.2s}` already animates this, so no new
   transition declaration is needed here - just the pressed-state target. */
.btn:active{transform:scale(.97)}
/* Success-confirmation micro-state: bindPublicBooking()'s booking-submit
   handler (app.js) adds this class for a brief moment after a successful
   booking, alongside a checkmark label, before navigating to the follow-up
   page - a calm color-flash acknowledgment rather than an abrupt redirect
   with no feedback at all. The existing `.btn{transition:.2s}` animates the
   background-color swap smoothly. */
.btn.is-success{background:var(--success)}
.btn-primary{height:100%;min-height:62px}
.btn-small{min-height:40px;padding-inline:18px;font-size:13px}
.btn-gold{background:linear-gradient(135deg,#c79c52,#a8732c);color:#fff;min-width:210px;box-shadow:0 10px 26px rgba(168,115,44,.22)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(168,115,44,.32)}

.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:20px}
.category-card{position:relative;overflow:hidden;border-radius:17px;border:1px solid rgba(177,133,61,.36);background:rgba(255,253,248,.94);box-shadow:0 10px 30px rgba(35,52,44,.07);padding-bottom:13px;transition:.25s}
.category-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(35,52,44,.12)}
.category-card img{width:100%;height:106px;object-fit:cover}
.category-icon{position:absolute;top:86px;right:50%;transform:translateX(50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--gold-soft);color:var(--gold);box-shadow:0 4px 14px rgba(50,40,25,.1)}
.category-card strong{display:block;margin:27px 10px 3px;color:var(--ink);font-size:14px}
.category-card small{display:block;padding-inline:8px;color:var(--muted);font-size:10px}
.outline-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:10px 20px;border:1px solid var(--gold-soft);border-radius:999px;background:rgba(255,253,248,.82);color:#8a632a;font-weight:800;font-size:13px}

.section{padding:88px 0}
.section-featured{background:var(--paper)}
.section-heading{text-align:center;margin-bottom:34px}
.section-kicker{display:inline-block;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.3px;margin-bottom:5px}
.section-heading h2,.owner-copy h2{font-size:clamp(30px,4vw,46px);margin:3px 0 7px;color:var(--emerald);line-height:1.25}
.section-heading p{margin:0;color:var(--muted)}

.featured-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.featured-row{display:grid;grid-template-columns:92px 1.4fr 1fr auto;align-items:center;gap:22px;padding:16px 12px;border-bottom:1px solid var(--line);transition:.2s}
.featured-row:hover{background:#fffaf1}
.business-thumb{width:92px;height:68px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.business-main h3{margin:0 0 3px;font-size:17px}.business-main p{margin:0;color:var(--muted);font-size:13px}
.business-meta{display:flex;align-items:center;gap:24px;color:#52635d;font-size:13px}.business-meta span{display:flex;align-items:center;gap:5px}.rating{color:#966d2c}.rating small{color:var(--muted)}
.business-actions,.appointment-actions{display:flex;align-items:center;gap:9px}
.favorite-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--emerald);cursor:pointer}
.favorite-btn.is-favorite{background:#f7ece3;color:#9c3f35;border-color:#e1b5aa}
.empty-state,.loading-card{padding:28px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}

.appointments-section{background:linear-gradient(180deg,#faf4e9,#f7efe2)}
.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:18px}
.date-strip button{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:11px 6px;color:var(--ink);cursor:pointer}
.date-strip button strong,.date-strip button span{display:block}.date-strip button span{font-size:11px;color:var(--muted);margin-top:3px}
.date-strip .selected{background:var(--emerald);color:#fff;border-color:var(--emerald)}.date-strip .selected span{color:#ddede8}
.appointments-table{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper);box-shadow:0 16px 50px rgba(34,45,38,.07)}
.appointment-head,.appointment-row{display:grid;grid-template-columns:.65fr 1.25fr 1fr 1.6fr 1.1fr;align-items:center;gap:12px}
.appointment-head{padding:14px 20px;background:#f0e5d5;color:#715b37;font-size:12px;font-weight:900}
.appointment-row{padding:16px 20px;border-top:1px solid rgba(177,133,61,.16)}
.appointment-row time{font-size:19px;font-weight:900;color:var(--emerald)}
.location{display:flex;align-items:center;gap:5px}.appointment-business strong,.appointment-business small{display:block}.appointment-business small{color:var(--muted);margin-top:3px}
.appointments-note{text-align:center;color:var(--muted);font-size:12px;margin-top:14px}

.how-section{background:var(--paper)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step-card{position:relative;border:1px solid var(--line);border-radius:20px;background:#fffaf2;overflow:hidden;padding-bottom:22px;box-shadow:0 12px 34px rgba(39,50,43,.055)}
.step-photo{height:160px;overflow:hidden}.step-photo img{width:100%;height:100%;object-fit:cover}
.step-number{position:absolute;top:138px;right:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--emerald);color:white;font-family:Georgia,serif;font-weight:900;border:3px solid #fff}
.step-card h3{margin:30px 20px 7px;font-size:18px;color:var(--emerald)}.step-card p{margin:0 20px;color:var(--muted);line-height:1.8;font-size:13px}

.owner-cta{background:linear-gradient(135deg,#f4eadc,#fffdf8)}
.owner-cta-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:52px}
.owner-copy h2{text-align:right}.owner-copy h2 em{font-style:normal;color:var(--gold)}
.owner-copy>p{color:var(--muted);line-height:1.9;max-width:540px}
.feature-checks{padding:0;list-style:none;margin:24px 0;display:grid;gap:12px}.feature-checks li:before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e0eee8;color:var(--emerald);font-weight:900;margin-left:9px}
.cta-note{display:block;color:var(--muted);margin-top:9px}
.dashboard-preview{position:relative;min-height:430px;display:grid;place-items:center}
.dashboard-window{width:min(100%,560px);background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 35px 80px rgba(30,47,39,.17);padding:22px;transform:perspective(1000px) rotateY(-4deg)}
.dashboard-top{display:flex;justify-content:space-between;font-weight:900;color:var(--emerald);padding-bottom:16px;border-bottom:1px solid var(--line)}
.dashboard-tabs{display:flex;gap:8px;padding:18px 0}.dashboard-tabs span{padding:7px 15px;border-radius:999px;background:#f0e8dc;color:var(--muted);font-size:12px}.dashboard-tabs .on{background:var(--emerald);color:white}
.calendar-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-mini span{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;background:#f8f4ec;font-size:11px;color:#66766f}.calendar-mini .busy{background:#d7eadf;color:var(--emerald);font-weight:900;box-shadow:inset 0 0 0 1px #9fc9b7}
.floating-booking{position:absolute;left:-20px;bottom:20px;width:220px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 60px rgba(25,45,37,.18);padding:17px}
.floating-booking strong,.floating-booking p,.floating-booking span{display:block}.booking-badge{color:var(--gold);font-size:11px;font-weight:900;margin-bottom:10px}.floating-booking p{color:var(--muted);font-size:12px}.confirmed{margin-top:10px;padding:7px;border-radius:9px;background:#e3f1ea;color:var(--emerald);font-size:11px;font-weight:900}

.site-footer{padding:56px 0 20px;background:#f8f1e5;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.35fr;gap:34px}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:10px}.footer-grid h3{font-size:15px;color:var(--emerald);margin:0 0 7px}.footer-grid a{font-size:12px;color:#5c6b65}.footer-grid a:hover{color:var(--gold)}
.footer-logo{align-items:flex-start;width:max-content}.footer-logo .brand-ornament{width:58px;height:58px;font-size:38px}
.footer-brand p,.newsletter p{font-size:12px;line-height:1.9;color:var(--muted);max-width:240px}.socials-footer{margin-top:12px}
.newsletter form{display:flex;border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden;transition:.15s}.newsletter input{min-width:0;width:100%;border:0;outline:0;padding:11px;background:transparent}.newsletter button{border:0;background:var(--emerald);color:#fff;padding-inline:14px;font-weight:800}.newsletter small{font-size:10px;color:var(--muted)}.newsletter form:focus-within{box-shadow:inset 0 0 0 2px var(--emerald)}
.footer-bottom{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:center;color:#7a817d;font-size:11px}

.simple-page{min-height:100vh;background:var(--ivory)}
.simple-header{height:72px;padding-inline:max(20px,calc((100vw - 1220px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper)}
.mini-brand{font-weight:900;color:var(--emerald)}
.search-page,.business-page,.simple-content{padding-block:70px}.search-page h1,.business-page h1,.simple-content h1{font-size:42px;color:var(--emerald)}
.business-hero-card,.services-panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 18px 60px rgba(33,48,42,.06);margin-bottom:24px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fffaf2}.service-card h3{color:var(--emerald)}.service-card span,.service-card strong{display:block;margin-top:8px}

@media (max-width:1020px){
    .brand-row{grid-template-columns:1fr 1fr 180px}.header-action--wide{display:none}
    .category-grid{grid-template-columns:repeat(3,1fr)}
    .featured-row{grid-template-columns:82px 1.2fr 1fr auto}
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:38px}
    .owner-cta-grid{gap:35px}
}
@media (max-width:780px){
    .container{width:min(100% - 24px,1220px)}
    .utility-message{display:none}.utility-bar{justify-content:center}.utility-left{width:100%;justify-content:space-between}
    .brand-row{grid-template-columns:1fr 120px 1fr;min-height:125px;gap:8px}.header-action{min-height:52px;padding:9px;font-size:12px}.header-action:nth-child(2){display:none}
    .brand-ornament{width:58px;height:58px;font-size:38px}.brand-ar{font-size:12px}
    .mobile-menu{display:block}.nav-inner{justify-content:flex-start}.nav-links{display:none;position:absolute;top:100%;right:12px;left:12px;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px}.nav-links.open{display:flex}.nav-links a{width:100%;border:0;padding:13px}
    .hero{padding-top:45px;min-height:auto}.hero h1{font-size:39px}.hero-content>p{font-size:14px}
    .hero-search{grid-template-columns:1fr 1fr}.hero-search .btn-primary{grid-column:1/-1}.hero-search label:nth-child(3){border-left:0}
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .featured-row{grid-template-columns:70px 1fr auto;gap:12px}.business-thumb{width:70px;height:58px}.business-meta{grid-column:2/3;gap:12px;flex-wrap:wrap}.business-actions{grid-row:1/3;grid-column:3}
    .date-strip{display:flex;overflow:auto;padding-bottom:6px}.date-strip button{min-width:105px}
    .appointment-head{display:none}.appointment-row{grid-template-columns:75px 1fr auto;gap:8px}.appointment-row>span:nth-child(2){display:none}.appointment-row .location{grid-column:2}.appointment-business{grid-column:2}.appointment-actions{grid-row:1/4;grid-column:3;flex-direction:column}
    .steps-grid{grid-template-columns:repeat(2,1fr)}
    .owner-cta-grid{grid-template-columns:1fr}.dashboard-preview{order:-1;min-height:360px}.floating-booking{left:5px}
    .footer-grid{grid-template-columns:1fr 1fr}.footer-brand,.newsletter{grid-column:1/-1}
    .services-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:500px){
    .brand-row{grid-template-columns:1fr 105px 1fr}.header-action{font-size:11px}.action-icon{display:none}
    .hero h1{font-size:33px}.hero-search{grid-template-columns:1fr}.hero-search label{border-left:0;border-bottom:1px solid rgba(177,133,61,.12)}.hero-search .btn-primary{grid-column:auto}
    .category-grid{gap:8px}.category-card img{height:90px}.category-card strong{font-size:12px}.category-card small{display:none}
    .section{padding:60px 0}.section-heading h2,.owner-copy h2{font-size:31px}
    .featured-row{grid-template-columns:62px 1fr}.business-actions{grid-column:1/-1;grid-row:auto;justify-content:flex-start;padding-right:74px}.business-meta{grid-column:2}
    .appointment-row{grid-template-columns:64px 1fr}.appointment-actions{grid-column:1/-1;grid-row:auto;flex-direction:row;justify-content:flex-start;padding-right:72px}
    .steps-grid{grid-template-columns:1fr}.step-photo{height:180px}
    .footer-grid{grid-template-columns:1fr}.footer-brand,.newsletter{grid-column:auto}
    .footer-bottom{flex-direction:column;gap:7px}
    .services-grid{grid-template-columns:1fr}
}


/* ===== V0.6 AUTH / OWNER / ADMIN OPERATIONS UI ===== */
.alert{border-radius:14px;padding:13px 16px;margin-bottom:18px;font-size:13px;line-height:1.7}
.alert-success{background:#e4f1ea;color:#0b5b44;border:1px solid #bddbce}
.alert-error{background:#fae9e6;color:#843c34;border:1px solid #ecc7c0}

.auth-body{min-height:100vh;background:radial-gradient(circle at 50% 0,#fffaf1,var(--cream));display:grid;place-items:center;padding:30px}
.auth-shell{width:min(100%,470px)}
.auth-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;color:var(--emerald)}
.auth-brand .brand-ornament{width:64px;height:64px;font-size:42px}.auth-brand strong{margin-top:5px}.auth-brand small{color:var(--gold);letter-spacing:1.2px}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.auth-card h1{font-size:34px;color:var(--emerald);margin:4px 0 6px}.form-intro{margin:0 0 24px;color:var(--muted)}
.auth-foot{text-align:center;margin-top:20px;color:var(--muted);font-size:13px}.auth-foot a{color:var(--gold);font-weight:800}

.auth-provider-warning{padding:13px 14px;border:1px solid #e6cf9d;border-radius:12px;background:#fff7e6;color:#765c29;font-size:12px;line-height:1.8}
.auth-inline-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:-4px;font-size:12px}.auth-inline-row>a{color:var(--gold);font-weight:800}.auth-inline-row .check-line{display:flex;align-items:center;gap:7px;margin:0}.auth-inline-row .check-line input{width:auto;min-height:0;margin:0}

.pro-form{display:flex;flex-direction:column;gap:14px}
.pro-form--grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pro-form label>span,.cms-setting-row>span{display:block;font-size:12px;font-weight:800;color:#4f6159;margin-bottom:6px}
.pro-form input,.pro-form select,.pro-form textarea,.cms-setting-row input,.inline-actions select{width:100%;border:1px solid #dfd4c2;background:#fff;border-radius:11px;padding:11px 12px;outline:none;color:var(--ink)}
.pro-form input:focus,.pro-form select:focus,.pro-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,134,57,.09)}
.pro-form textarea{min-height:95px;resize:vertical}.pro-form label.full,.pro-form .full{grid-column:1/-1}
.check-line{display:flex!important;align-items:center;gap:9px}.check-line input{width:18px!important;height:18px}.check-line span{margin:0!important}
.form-actions{display:flex;justify-content:flex-start}

.dashboard-body,.admin-body{background:#f5f2eb;min-height:100vh}
.dashboard-shell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.dashboard-sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#073f32,#092f27);color:#fff;padding:24px 18px;display:flex;flex-direction:column;overflow:auto;z-index:20}
.dash-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.dash-logo{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--gold-soft);border-radius:14px;overflow:hidden;flex-shrink:0}
.dash-brand strong,.dash-brand small{display:block}.dash-brand small{color:#b8c9c2;font-size:10px;margin-top:3px;letter-spacing:.5px}
.business-switcher{margin:18px 0;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.045)}
.business-switcher small,.business-switcher strong,.business-switcher a{display:block}.business-switcher small{color:#9fb7ae}.business-switcher strong{margin:5px 0}.business-switcher a{font-size:11px;color:var(--gold-soft)}
.dash-nav{display:flex;flex-direction:column;gap:3px;margin-top:8px}.dash-nav a{padding:11px 12px;border-radius:10px;color:#dbe7e2;font-size:13px;display:flex;gap:10px;align-items:center}.dash-nav a:hover{background:rgba(255,255,255,.08);color:white}
.dash-nav a.is-active{background:rgba(255,255,255,.14);color:#fff;font-weight:700;border-inline-start:3px solid var(--gold);padding-inline-start:9px}
.dash-logout{margin-top:auto;padding-top:20px}.dash-logout button{width:100%;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;border-radius:10px;padding:10px;cursor:pointer}
.dashboard-main{min-width:0}.dashboard-topbar{height:76px;background:#fffdf9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:15}
.dashboard-topbar strong,.dashboard-topbar small{display:block}.dashboard-topbar small{color:var(--muted);font-size:10px;margin-top:3px}
.topbar-user{display:flex;align-items:center;gap:10px;font-size:12px}.topbar-user i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#fff;font-style:normal;font-weight:900}
.dash-menu-btn{display:none;border:0;background:none;font-size:24px;color:var(--emerald)}
.dashboard-content{padding:30px;max-width:1500px;margin:0 auto}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:26px}.page-heading h1{font-size:34px;margin:2px 0 5px;color:var(--emerald)}.page-heading p{margin:0;color:var(--muted)}
.status-chip,.subscription-status{padding:8px 13px;border-radius:999px;background:#e1eee8;color:var(--emerald);font-size:11px;font-weight:900}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:20px}
.panel h2{font-size:18px;color:var(--emerald);margin:0 0 18px}.panel-title{display:flex;align-items:center;justify-content:space-between}.panel-title>a{font-size:12px;color:var(--gold);font-weight:800}
.dashboard-grid{display:grid;gap:18px}.dashboard-grid--2{grid-template-columns:1fr 1fr}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.metric-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 30px rgba(32,47,40,.04)}.metric-card span,.metric-card strong,.metric-card small{display:block}.metric-card span{color:var(--muted);font-size:12px}.metric-card strong{font-size:34px;color:var(--emerald);margin:7px 0 2px}.metric-card small{color:#8b938f;font-size:10px}
.data-list,.stack-list{display:flex;flex-direction:column}.data-row,.stack-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:16px;padding:13px 4px;border-bottom:1px solid rgba(177,133,61,.16)}.data-row:last-child,.stack-row:last-child{border-bottom:0}.data-row small,.stack-row small{display:block;color:var(--muted);margin-top:2px;font-size:11px}
.stack-row{grid-template-columns:1fr auto}.stack-row b{color:var(--gold);font-size:12px}
.status-badge{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:6px 9px;border-radius:999px;background:#ece9e1;color:#58635e;font-size:10px;font-weight:900}.status-confirmed{background:#e1f0e9;color:#176047}.status-waiting_approval{background:#fff1cd;color:#86631c}.status-canceled,.status-rejected{background:#f6e3df;color:#984237}.status-completed{background:#dcece7;color:#0b5944}.status-submitted{background:var(--info-soft);color:var(--info)}.status-no_show{background:var(--danger-soft);color:var(--danger)}
.test-label{display:inline-block;font-size:9px;padding:3px 6px;border-radius:6px;background:#eee4fb;color:#6b4795}

.business-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.business-select-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:16px;transition:.2s}.business-select-card:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(25,45,37,.08)}.business-select-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;overflow:hidden;flex-shrink:0}.business-select-card strong,.business-select-card span,.business-select-card small{display:block}.business-select-card span{color:var(--muted);font-size:12px;margin-top:4px}.business-select-card small{color:#8b938f;margin-top:5px}.business-select-card b{color:var(--gold);font-size:12px}

.wizard-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px}.wizard-progress>div{background:#e8e5dd;border-radius:14px;padding:12px 8px;text-align:center;color:#8b938f}.wizard-progress>div.done{background:#e0eee8;color:var(--emerald)}.wizard-progress span{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:#fff;font-size:11px;font-weight:900}.wizard-progress b{font-size:10px}
.wizard-stack{display:flex;flex-direction:column}.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}.choice-card input{width:18px!important}.choice-card strong,.choice-card small{display:block}.choice-card small{color:var(--muted);font-size:11px;margin-top:3px}
.service-admin-list{margin-bottom:16px}.service-admin-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.service-admin-row small{display:block;color:var(--muted);margin-top:3px}.danger-link{border:0;background:none;color:#a2463b;cursor:pointer}
.hours-form{display:flex;flex-direction:column;gap:8px}.hours-row{display:grid;grid-template-columns:1.2fr 1fr auto 1fr;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;border-radius:12px;background:#fff}.hours-row input[type=time]{border:1px solid #dfd4c2;border-radius:9px;padding:8px}.day-check{display:flex;gap:9px;align-items:center}.day-check input{width:18px;height:18px}
.panel-final{border-color:#d0ae72;background:linear-gradient(135deg,#fffdf8,#fbf0df)}.review-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}.review-summary span{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12px}.review-summary strong{color:var(--emerald);margin-right:7px}.verification-note{padding:12px 14px;border-radius:12px;background:#fff4d8;border:1px solid #e8cf90;color:#73591d;font-size:12px;line-height:1.8}

.calendar-board{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;overflow:auto}.calendar-day{min-width:140px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}.calendar-day header{padding:12px;background:#f1e7d8}.calendar-day header strong,.calendar-day header span{display:block}.calendar-day header span{font-size:10px;color:var(--muted);margin-top:3px}.calendar-day-events{padding:9px;min-height:340px}.calendar-day-events article{background:#e6f0eb;border-right:3px solid var(--emerald);border-radius:8px;padding:9px;margin-bottom:8px}.calendar-day-events time,.calendar-day-events strong,.calendar-day-events small{display:block}.calendar-day-events time{font-weight:900;color:var(--emerald)}.calendar-day-events strong{font-size:11px;margin-top:4px}.calendar-day-events small{font-size:9px;color:var(--muted);margin-top:3px}.calendar-empty{color:#bbb;display:block;text-align:center;padding-top:30px}
.calendar-day.is-today{border-color:var(--emerald);box-shadow:0 0 0 2px rgba(11,68,54,.12)}.calendar-day.is-today header{background:var(--surface-emerald-soft)}

.table-wrap{overflow:auto}.pro-table{width:100%;border-collapse:collapse;min-width:760px}.pro-table th{text-align:right;padding:11px 12px;background:#f0e6d7;color:#765f37;font-size:11px}
/* overflow-wrap:anywhere - a long unbroken token (owner email, payment UUID)
   has no natural break point, so without this the browser widens the whole
   column (and the table beyond its 760px floor) to fit it on one line
   instead of wrapping - confirmed via rendered layout at 1024px, where a
   realistic-length owner email pushed the table wide enough to scroll the
   action column partly off-screen by default. Wrapping keeps every column's
   width driven by normal content, not by its single longest token. */
.pro-table td{padding:12px;border-bottom:1px solid rgba(177,133,61,.16);font-size:12px;vertical-align:top;overflow-wrap:anywhere}
.pro-table td strong,.pro-table td small{display:block}.pro-table td small{color:var(--muted);margin-top:3px}
.inline-actions,.admin-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.mini-action{border:0;border-radius:8px;background:var(--emerald);color:#fff;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.mini-action.muted{background:#ede7dd;color:#665f55}
/* minmax(0,1fr), not a bare 1fr: a bare 1fr track still carries the grid
   default min-width:auto, so a column refuses to shrink below its widest
   child's min-content size. review-card's .panel-title is a non-wrapping
   flex row (stars + status chip), and the longest status chip label
   ("بانتظار المراجعة") is wide enough that its column blew out past its
   1/3 fair share - confirmed via rendered layout at 1024px, where two
   review-card articles sharing that column measured 77px off-screen to the
   left (real horizontal overflow, not assumed: document.body.scrollWidth
   1086 > window.innerWidth 1024). minmax(0,1fr) lets the track shrink to
   its fair share and the chip/text wrap or the row's own overflow-wrap
   handle the rest, instead of the whole grid growing past its container. */
.service-dashboard-grid,.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-edit-card{margin:0}.review-stars{color:#b88638;letter-spacing:2px}.review-card small{display:block;color:var(--muted);margin-top:10px}
.setting-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.setting-summary span{padding:15px;border:1px solid var(--line);border-radius:13px}.setting-summary b,.setting-summary strong{display:block}.setting-summary b{font-size:10px;color:var(--muted)}.setting-summary strong{margin-top:6px;color:var(--emerald)}
.subscription-card{background:linear-gradient(135deg,#0a4436,#082f27);color:#fff;border-radius:24px;padding:30px;box-shadow:var(--shadow)}.subscription-card h2{font-size:28px}.subscription-status{background:rgba(255,255,255,.1);color:#e4d2ae}.price-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.price-options>div{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px}.price-options strong,.price-options span{display:block}.price-options strong{font-size:30px;color:#e0bd7c}.price-options span{font-size:11px;color:#cad8d3;margin-top:5px}.price-options .recommended{border-color:#c89b4d}
.health-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.health-grid>div{padding:14px;background:#f7f1e8;border-radius:12px}.health-grid span,.health-grid strong{display:block}.health-grid span{font-size:10px;color:var(--muted)}.health-grid strong{margin-top:6px;color:var(--emerald)}
.admin-sidebar{background:linear-gradient(180deg,#172c27,#101f1c)}
/* .admin-actions wraps the approve / request-changes forms in
   admin/applications.blade.php - the only place this class is used. It used
   to carry its own pre-.pro-form textarea/form sizing (160px wide, 35px
   tall, 10px font, centered shrink-to-fit) left over from before .pro-form
   existed. At equal selector specificity the later rule was winning the
   cascade over .pro-form's real styling, rendering the required "what to
   fix" textarea too small to hold even its own placeholder text (confirmed
   via rendered scrollHeight > visible height). Let .pro-form govern sizing;
   only give each form a sane responsive width band here. */
.admin-actions form.pro-form{flex:1 1 260px;max-width:360px}
.cms-builder-shell{display:grid;grid-template-columns:220px 1fr 260px;min-height:620px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}.cms-tree,.cms-settings{background:#f6f2ea;padding:16px}.cms-tree h3,.cms-settings h3{color:var(--emerald)}.cms-tree button{width:100%;text-align:right;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 4px;cursor:pointer}.cms-tree strong,.cms-tree small{display:block}.cms-tree small{color:var(--muted);font-size:9px;margin-top:3px}.cms-preview{padding:16px;background:#dedbd4}.cms-device-bar{display:flex;gap:6px;justify-content:center;margin-bottom:14px}.cms-device-bar button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px}.cms-preview-canvas{height:520px;background:#fff;border-radius:12px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:30px}.cms-setting-row{margin-bottom:12px}.cms-actions{display:flex;gap:6px;flex-wrap:wrap}.cms-actions button{border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff}.cms-actions .primary{background:var(--emerald);color:#fff}

@media(max-width:1100px){
.dashboard-shell{grid-template-columns:230px minmax(0,1fr)}
.metric-grid{grid-template-columns:repeat(2,1fr)}
.calendar-board{grid-template-columns:repeat(7,150px)}
.cms-builder-shell{grid-template-columns:180px 1fr}.cms-settings{display:none}
}
@media(max-width:820px){
.dashboard-shell{display:block}.dashboard-sidebar{position:fixed;right:-290px;width:280px;transition:.25s}.dashboard-sidebar.open{right:0}.dash-menu-btn{display:block}.dashboard-topbar{padding:0 16px}.dashboard-content{padding:18px}
.dashboard-grid--2,.business-cards,.service-dashboard-grid,.review-grid,.price-options{grid-template-columns:1fr}.pro-form--grid{grid-template-columns:1fr}.pro-form label.full,.pro-form .full{grid-column:auto}
.wizard-progress{display:flex;overflow:auto}.wizard-progress>div{min-width:95px}
.setting-summary,.health-grid{grid-template-columns:1fr 1fr}.cms-builder-shell{grid-template-columns:1fr}.cms-tree{display:none}
}
@media(max-width:520px){
.auth-card{padding:24px}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:14px}.metric-card strong{font-size:28px}
.page-heading{flex-direction:column}.choice-cards{grid-template-columns:1fr}.hours-row{grid-template-columns:1fr 1fr}.hours-row>span{display:none}.hours-row .day-check{grid-column:1/-1}
.setting-summary,.health-grid{grid-template-columns:1fr}.business-select-card{grid-template-columns:50px 1fr}.business-select-card>b{grid-column:2}
}


/* ===== V0.7 WORKFLOW COMPLETION ===== */
.dash-secondary-links{margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:flex;flex-direction:column;gap:3px}
.dash-secondary-links a{padding:8px 12px;border-radius:8px;color:#bcd0c8;font-size:11px}.dash-secondary-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.verification-status{padding:14px;border:1px solid var(--line);border-radius:13px;background:#f8f3eb;margin-bottom:14px}.verification-status strong,.verification-status span{display:block}.verification-status span{font-size:11px;color:#a34b3f;margin-top:4px}.verification-status.verified{background:#e5f1eb;border-color:#bddbce}.verification-status.verified span{color:#146046}
.verification-code-form{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.verification-provider-note{padding:12px 14px;border:1px solid #e6cf9d;border-radius:11px;background:#fff7e6;color:#765c29;font-size:11px;line-height:1.7}

.notification-list{display:flex;flex-direction:column}.notification-row{display:grid;grid-template-columns:12px 1fr auto;gap:13px;align-items:center;padding:15px 6px;border-bottom:1px solid rgba(177,133,61,.16)}.notification-row.unread{background:#fff8ea}.notification-dot{width:8px;height:8px;border-radius:50%;background:#c6c4bc}.notification-row.unread .notification-dot{background:var(--gold)}.notification-row p{margin:4px 0;color:var(--muted);font-size:12px}.notification-row small{color:#8b938f;font-size:10px}.notification-actions{display:flex;gap:6px;align-items:center}
.mini-action.danger{background:#9d443b}.change-request-row{grid-template-columns:160px 1fr auto}
.admin-review-actions{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}.admin-review-actions form{display:flex;gap:5px}.admin-review-actions input,.inline-actions input{border:1px solid var(--line);border-radius:7px;padding:6px;font-size:10px;max-width:150px}
@media(max-width:600px){.notification-row{grid-template-columns:10px 1fr}.notification-actions{grid-column:2}.change-request-row{grid-template-columns:1fr}.change-request-row .inline-actions{grid-column:1}
/* .data-row (plain, not .change-request-row) never got the same mobile collapse its sibling
   row components (.notification-row / .change-request-row, both in this same block) already
   have. Its base rule is grid-template-columns:150px 1fr auto with no minmax(0,...) guard, so
   a fixed-width first column (a bidi-isolated date/time) plus an unshrinkable last column (a
   status badge/chip whose Arabic label can run 15+ characters, e.g. "بانتظار الموافقة") forces
   the row - and everything up to the page - wider than a 360-390px viewport, confirmed via
   rendered layout at 360px on dashboard/overview.blade.php's upcoming-bookings list and
   admin/overview.blade.php's system-health list (real horizontal overflow measured, not
   assumed). Collapsing to one column mirrors the identical, already-approved fix immediately
   above for .change-request-row, which shares the same 150-ish/1fr/auto desktop shape. */
.data-row{grid-template-columns:1fr}}

.tracking-shell{width:min(100%,560px)}.tracking-card h1{color:var(--emerald);font-size:30px}.tracking-status{display:inline-flex;padding:7px 12px;border-radius:999px;background:#e3eee8;color:var(--emerald);font-size:11px;font-weight:900;margin:8px 0 18px}.tracking-details{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tracking-details span{border:1px solid var(--line);border-radius:12px;padding:13px}.tracking-details b,.tracking-details strong{display:block}.tracking-details b{font-size:10px;color:var(--muted);margin-bottom:5px}.tracking-actions{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tracking-change{display:flex;gap:7px;align-items:end}.tracking-change label{font-size:11px}.tracking-change input{display:block;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:4px}.danger-button{background:#9d443b}.offered-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.slot-choice{border:1px solid var(--line);border-radius:12px;background:#fffaf1;padding:14px;cursor:pointer}.slot-choice strong,.slot-choice span{display:block}.slot-choice strong{font-size:20px;color:var(--emerald)}.slot-choice span{font-size:10px;color:var(--muted);margin-top:4px}[data-api-message]{margin-top:12px;color:var(--emerald);font-size:12px}
@media(max-width:520px){.tracking-details{grid-template-columns:1fr}.offered-slots{grid-template-columns:1fr}.tracking-change{flex-direction:column;align-items:stretch}}


.trust-section{background:var(--paper)}.trust-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.trust-stat-card{padding:26px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fffdf8,#f7efe2);text-align:center}.trust-stat-card strong{display:block;color:var(--emerald);font-size:34px}.trust-stat-card span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.appointment-empty{margin:15px}
@media(max-width:760px){.trust-stats-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   MAWEDNA DESIGN SYSTEM — shared tokens + component library
   Additive only. Nothing above this line (the approved homepage,
   the public booking flow) is restyled here — this section defines
   shared primitives that dashboard/admin/public-secondary screens
   are elevated to use.

   Note on the registration wizard: its .registration-v2/.mv2-* rules
   do NOT live in this file. wizard.blade.php loads a separate,
   later-loading stylesheet (public/assets/mawedna/registration-v2.css,
   pushed via @push('styles')) that always wins the cascade over
   anything with the same selector here - an identical .registration-v2
   block used to also be duplicated in this file, but it had zero
   effect on the rendered wizard page for that reason, so it was
   removed (VNext cleanup) rather than kept as dead weight shipped on
   every page load. Edit registration-v2.css directly for wizard styles.
   ========================================================= */

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/mawedna/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/mawedna/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/mawedna/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/mawedna/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2')}

:root{
    /* Self-hosted Arabic-first type family. Falls back to the previous
       system stack if the webfont fails to load for any reason. */
    --font-arabic:'IBM Plex Sans Arabic',Tahoma,Arial,system-ui,sans-serif;

    /* Semantic surfaces derived from the one approved brand palette above
       (--ivory/--paper/--cream/--emerald/--emerald-2/--gold/--gold-soft/
       --ink/--muted/--line/--shadow) — never a second set of raw colors. */
    --surface-emerald-soft:#e6f0ea;
    --surface-gold-soft:#faf1de;
    --success:#0b5b44; --success-soft:#e4f1ea; --success-border:#bddbce;
    --warning:#86631c; --warning-soft:#fff1cd; --warning-border:#e8cf90;
    --danger:#8f4a43;  --danger-soft:#fae9e6;  --danger-border:#ecc7c0;
    --info:#1d4b7a;    --info-soft:#e6eef7;    --info-border:#c3d6ec;

    /* Spacing scale (4px base) */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px;

    /* Radius scale */
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:26px; --radius-full:999px;

    /* Elevation scale — a graduated replacement for one-off box-shadows */
    --shadow-xs:0 2px 8px rgba(25,52,45,.05);
    --shadow-sm:0 6px 20px rgba(25,52,45,.06);
    --shadow-md:0 14px 40px rgba(25,52,45,.09);
    --shadow-lg:0 26px 70px rgba(25,52,45,.14);

    --focus-ring:0 0 0 3px rgba(11,68,54,.22);
}

body{font-family:var(--font-arabic)}

/* Visible, consistent keyboard focus everywhere — a real accessibility gap
   in the previous system, where most controls had no focus-visible rule
   at all and relied on the browser default (often invisible against these
   backgrounds). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.switch input:focus-visible+.switch__track{
    outline:2px solid var(--emerald);outline-offset:2px;border-radius:4px;
}
.switch input:focus-visible+.switch__track{border-radius:999px;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Buttons: secondary/ghost/danger variants beyond the homepage's
   primary/gold pair, for dashboard/admin/forms use ---- */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important}
.btn-secondary{background:#fff;color:var(--emerald);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--surface-emerald-soft);color:var(--emerald)}
.btn-ghost{background:transparent;color:var(--emerald);border:1px solid transparent}
.btn-ghost:hover{background:var(--surface-emerald-soft)}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#7a3d37}
.btn-block{width:100%}

/* ---- Badges / chips / status pills (unify with the existing
   .status-badge / .status-* modifiers already used across the dashboard) ----
   The bare/neutral variant (no chip-success/warning/danger/info modifier -
   used for states like "draft", "archived", "not a material change") used
   var(--muted) for its text, same as its background is muted. Measured
   contrast of #6d766f on #f0ece2 is 3.98:1 - below WCAG AA's 4.5:1 floor for
   normal-size text (this chip's 11px/800-weight text does not meet the
   large-text exception, which needs ~18.7px+ bold). The four colored
   variants below all clear 4.9:1+ already; only this neutral one was short.
   var(--ink) is the same dark text color already used for ordinary body
   copy everywhere else (11.3:1 here) - reusing it keeps the chip visually
   "neutral" via its muted background, not via hard-to-read text. */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-full);background:#f0ece2;color:var(--ink);font-size:11px;font-weight:800}
.chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-success{background:var(--success-soft);color:var(--success)}
.chip-warning{background:var(--warning-soft);color:var(--warning)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-info{background:var(--info-soft);color:var(--info)}

/* ---- Alerts: add info/warning to the existing success/error pair ---- */
.alert-warning{background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning-border)}
.alert-info{background:var(--info-soft);color:var(--info);border:1px solid var(--info-border)}
/* position:relative + an absolutely-positioned icon (NOT display:flex) is
   deliberate: an .alert's message sometimes contains an inline <a> (e.g.
   dashboard/overview.blade.php's "closed today" notice and
   dashboard/subscription.blade.php's mailto link). display:flex blockifies
   every in-flow child, so Blade's compiled output turned that <a> into a
   flex item SEPARATE from the surrounding text runs. Under the default
   flex-wrap:nowrap all items still fit on one row at wide/desktop
   viewports, so this stayed invisible there, but once the message actually
   needs to wrap (narrow/mobile widths, or just a long enough sentence)
   each flex item wraps in its OWN column instead of the text flowing as
   one paragraph - confirmed via rendered layout at 360px on
   dashboard/subscription.blade.php: the mailto link rendered ABOVE the
   alert's first word, i.e. the sentence's ending painted before its
   beginning. Reserving space for the icon with padding + absolute
   positioning instead keeps the message as one normal inline flow (any
   nested <a> included), so wrapping/bidi behaves like ordinary paragraph
   text regardless of viewport width. */
.alert{position:relative;padding-inline-start:42px}
.alert:before{position:absolute;top:13px;inset-inline-start:16px;font-weight:900;line-height:1}
.alert-success:before{content:"✓"}
.alert-error:before{content:"!"}
.alert-warning:before{content:"!"}
.alert-info:before{content:"i"}

/* ---- Toggle switch (extracted from the wizard's day-switch so any
   settings screen can use a real switch instead of a bare checkbox) ---- */
.switch{position:relative;display:inline-flex;width:42px;height:24px;flex:0 0 auto}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch__track{position:absolute;inset:0;border-radius:999px;background:#d8d8d4;transition:.18s ease;pointer-events:none}
.switch__track:after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:.18s ease}
.switch input:checked+.switch__track{background:var(--emerald)}
.switch input:checked+.switch__track:after{transform:translateX(-18px)}
.switch input:disabled+.switch__track{opacity:.5;cursor:not-allowed}
.switch-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.switch-row strong,.switch-row small{display:block}.switch-row small{color:var(--muted);margin-top:3px;font-weight:400}

/* ---- Empty / loading state: enriched but backward compatible with the
   existing bare .empty-state markup used across the dashboard ---- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:var(--space-8) var(--space-6);text-align:center}
.empty-state__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface-emerald-soft);color:var(--emerald);font-size:24px;margin-bottom:2px}
.empty-state strong{display:block;color:var(--ink);font-size:14px}
.empty-state p{margin:0;max-width:340px;font-size:12px;line-height:1.8;color:var(--muted)}
.empty-state .btn,.empty-state .btn-secondary{margin-top:6px}

/* ---- Skeleton loading state ---- */
.skeleton{position:relative;overflow:hidden;background:#ece7dc;border-radius:var(--radius-md)}
.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:mawedna-shimmer 1.5s infinite}
@keyframes mawedna-shimmer{to{transform:translateX(100%)}}
.skeleton-text{height:11px;margin-bottom:8px;border-radius:6px}
.skeleton-text:last-child{width:65%;margin-bottom:0}
.skeleton-title{height:20px;width:55%;margin-bottom:14px;border-radius:6px}
.skeleton-block{height:110px;border-radius:var(--radius-lg)}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}

/* ---- Toast notifications (formalizes what dashboard/notifications used
   to build as inline styles in JS — see resources/js/app.js) ---- */
.toast-stack{position:fixed;top:16px;left:16px;z-index:999;display:flex;flex-direction:column;gap:10px;max-width:min(320px,calc(100vw - 32px))}
.toast{padding:14px 16px;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-md);animation:mawedna-toast-in .18s ease}
.toast[role="status"]{cursor:default}
.toast.is-clickable{cursor:pointer}
.toast strong{display:block;color:var(--emerald);font-size:14px;margin-bottom:4px}
.toast p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
@keyframes mawedna-toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---- Panels: optional icon/number header for a more considered,
   less "flat list" feel on dashboard/admin panels ---- */
.panel{box-shadow:var(--shadow-sm)}
.panel-icon-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.panel-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-emerald-soft);color:var(--emerald);font-size:18px;flex:0 0 auto}
.panel-icon-head h2{margin:0}
.panel-icon-head small{display:block;color:var(--muted);font-weight:400;margin-top:2px}

/* ---- Metric cards: trend indicator support ----
   Specificity note: the pre-existing ".metric-card span{display:block}"
   rule (it targets ANY descendant span, not just direct children) would
   otherwise win the cascade over a bare ".metric-trend" and force this
   badge onto its own full-width line instead of sitting inline next to
   the number - confirmed by rendering it in the browser, not assumed.
   ".metric-card strong .metric-trend" is deliberately more specific so
   this override always wins regardless of source order. */
.metric-card{transition:.2s}
.metric-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.metric-card strong .metric-trend{display:inline-flex;vertical-align:middle;width:auto;align-items:center;gap:3px;margin-inline-start:6px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.4}
.metric-trend.is-up{background:var(--success-soft);color:var(--success)}
.metric-trend.is-down{background:var(--danger-soft);color:var(--danger)}

/* ---- Metric cards: avoid a lone orphan card on 5-card grids ----
   .metric-grid is a fixed repeat(4,1fr) (desktop) / repeat(2,1fr) (<=1100px)
   track, but several real pages feed it exactly 5 cards (admin/overview.blade.php's
   needs-review grid; dashboard/reports.blade.php's booking-status grid, which
   @foreach's a fixed 5-key array) - 5 does not divide evenly by 4 OR by 2, so
   the 5th card was landing alone at the start of a new row with 3 (desktop) or
   1 (tablet) empty grid tracks beside it - confirmed by rendering
   admin/overview.blade.php at 1440px: the 5th card sat isolated in a
   mostly-empty row. ":last-child:nth-child(4n+1)" is a pure DOM-position
   match (true whenever the total count is 1, 5, 9...) so it stays correct at
   both column counts without a media query, and stays inert for the existing
   4-card grid (dashboard/overview.blade.php's "today" page) since 4 is not
   congruent to 1 mod 4. "span 2" reads as a deliberately wider summary card
   at 4 columns and as a full-width row at 2 columns - both already-used
   metric-card widths, not a new visual size. */
.metric-grid > .metric-card:last-child:nth-child(4n+1){grid-column:span 2}

/* ---- Tables: responsive card-collapse below 640px. Requires a
   data-label attribute per <td> naming its column (Blade templates using
   .pro-table on a screen that must work on mobile should add these). ---- */
@media (max-width:640px){
    .pro-table.is-responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    .pro-table.is-responsive,.pro-table.is-responsive tbody,.pro-table.is-responsive tr,.pro-table.is-responsive td{display:block;width:100%}
    .pro-table.is-responsive{min-width:0}
    .pro-table.is-responsive tr{margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
    .pro-table.is-responsive td{border-bottom:1px solid rgba(177,133,61,.12);padding:10px 14px}
    .pro-table.is-responsive td:last-child{border-bottom:0}
    .pro-table.is-responsive td:before{content:attr(data-label);display:block;font-size:10px;font-weight:800;color:var(--muted);margin-bottom:3px}
}

/* ---- Pagination: Laravel's default paginator view ships Tailwind utility
   classes that resolve to nothing here (no Tailwind build step in this app),
   AND duplicates a mobile-only block that Tailwind's responsive classes
   would normally hide — without Tailwind compiled, both blocks render at
   once. Fixed at the source with a clean custom view registered via
   Paginator::defaultView() (see resources/views/vendor/pagination/mawedna.
   blade.php + AppServiceProvider::boot()) instead of guessing the default
   view's markup — these selectors target that view's real, known DOM. ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}
.pagination a:hover{background:var(--surface-emerald-soft);border-color:var(--emerald);color:var(--emerald)}
.pagination span.is-active{background:var(--emerald);border-color:var(--emerald);color:#fff}
.pagination span.is-disabled{opacity:.4}

/* ---- Skip-to-content link: present in markup by convention, visually
   hidden until focused (keyboard-only, never seen by mouse users) ---- */
.skip-link{position:fixed;top:-100px;right:16px;z-index:1000;background:var(--emerald);color:#fff;padding:10px 16px;border-radius:var(--radius-md);font-weight:800;font-size:13px;transition:top .15s ease}
.skip-link:focus{top:16px}

/* ---- Bidi isolate: wrap a rendered Gregorian date+time string (e.g.
   "12/08/2026 17:00") embedded in RTL text. Two space-separated numeric
   groups inside an RTL paragraph are two independent LTR "islands" to the
   browser's bidi algorithm, and without isolation their VISUAL order follows
   the surrounding RTL paragraph direction, not source order - confirmed by
   rendering tracking/booking.blade.php: the DOM text "12/08/2026 17:00"
   painted on screen as "17:00 12/08/2026". Apply to any single element whose
   entire content is a formatted date/time value next to Arabic text. ---- */
.bidi-isolate{unicode-bidi:isolate;direction:ltr}

/* Phone-number inputs: digits should type/edit left-to-right (natural numeric
   order) even inside an RTL form, while staying right-aligned so the field
   reads consistently with its RTL label above it. */
input[type=tel]{direction:ltr;text-align:right}

/* ===== MAWEDNA PUBLIC BOOKING FLOW ===== */
.booking-heading{margin-top:18px}.booking-services{margin-bottom:24px}.service-select-card{position:relative;cursor:pointer;transition:.2s}.service-select-card>input{position:absolute;opacity:0;pointer-events:none}.service-select-card.selected{border-color:var(--emerald);box-shadow:0 0 0 2px rgba(11,68,54,.08);background:#fff}.service-select-indicator{position:absolute;top:12px;left:12px;width:27px;height:27px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#fff;color:transparent;font-weight:900;transition:.2s}.service-select-card.selected .service-select-indicator{background:var(--emerald);border-color:var(--emerald);color:#fff}.muted-price{color:var(--muted);font-weight:700}.public-booking-flow{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-top:20px}.booking-step-card{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:20px}.booking-customer-card{grid-column:1/-1}.booking-step-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.booking-step-title>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--emerald);color:#fff;font-size:11px;font-weight:900}.booking-step-title strong{color:var(--emerald)}.booking-field{display:flex;flex-direction:column;gap:6px}.booking-field>span{font-size:11px;color:var(--muted);font-weight:800}.booking-field input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:9px 12px;color:var(--ink);outline:none}.booking-field input:focus{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(11,68,54,.08)}.booking-step-card>.btn{margin-top:12px}.slot-grid{display:grid;grid-template-columns:repeat(4,minmax(76px,1fr));gap:9px}.slot-button{border:1px solid var(--line);border-radius:11px;background:#fffaf2;color:var(--emerald);padding:11px 8px;font-weight:900;cursor:pointer;transition:.15s}.slot-button:hover,.slot-button.selected{background:var(--emerald);border-color:var(--emerald);color:#fff}.slot-button--more{background:transparent;border-style:dashed;color:var(--muted);font-weight:700;font-size:12px}.slot-button--more:hover{background:var(--surface-emerald-soft);border-color:var(--gold-soft);color:var(--emerald)}.booking-placeholder{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:12px}.booking-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.booking-selection-summary{margin-top:14px;padding:12px 14px;border-radius:11px;background:#f4eee4;color:var(--emerald);font-size:12px;font-weight:800}.booking-submit-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.booking-submit-row .btn{margin-top:0}.booking-secondary-btn{background:#fff;color:var(--emerald);border:1px solid var(--emerald)}.booking-secondary-btn:hover{background:#e8f0ec}.booking-message{min-height:22px;margin-top:12px;font-size:12px;color:var(--emerald);font-weight:700}.booking-message.is-error{color:#9d443b}.booking-message.is-success{color:var(--success);font-weight:800}.booking-privacy-note{display:block;margin-top:8px;color:var(--muted);line-height:1.7}.public-meta{margin-top:8px;color:var(--muted);font-size:13px}
@media(max-width:760px){.public-booking-flow{grid-template-columns:1fr}.booking-customer-card{grid-column:auto}.booking-form-grid{grid-template-columns:1fr}.slot-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.slot-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   MAWEDNA VNEXT — DESIGN SYSTEM EXTENSIONS
   Additive only, same discipline as the "MAWEDNA DESIGN SYSTEM"
   block above: nothing before this point is restyled or removed.
   This section fills the gaps a full VNext audit found in the
   existing system - no font-size scale (most text was hardcoded
   9-13px), no shared card/field primitive (13 independently
   styled *-card classes, 3 independently styled input rule sets),
   no modal/drawer, no mobile sticky-action pattern, no nav
   icon/badge slot, no autosave-status indicator. New screens
   should build on these; existing screens are untouched here and
   are migrated surface-by-surface as each one is rebuilt.

   Canonical breakpoints for all NEW rules added anywhere in this
   file from this point on (CSS custom properties cannot appear
   inside an @media condition, so this is a documented convention,
   not a token): 390px (small phone), 430px (large phone), 768px
   (tablet), 1024px (small desktop/tablet landscape), 1440px (wide
   desktop). Prefer these five values over inventing new ones.
   ========================================================= */

:root{
    /* Type scale. Raises the previous system's effective floor -
       78% of its ~170 explicit font-size declarations sat in a
       9-14px band with no scale behind them. --fs-2xs is the
       smallest size any NEW component may use (12px, not 9-10px);
       --fs-base matches the plain browser default so inherited
       body copy that never had an explicit size keeps rendering
       the same as before. */
    --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:17px;
    --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:40px;
    --lh-tight:1.25; --lh-normal:1.6; --lh-relaxed:1.85;
}

body{font-size:var(--fs-base);line-height:var(--lh-normal)}
.text-meta{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-normal)}
.text-body{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--ink)}

/* ---- Visually-hidden (a11y-only) utility - generalizes the one
   inline clip-rect trick already used once for .pro-table.is-responsive
   thead, for reuse anywhere (autosave live-region, field labels). ---- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Card: a shared base the 13 pre-existing *-card classes never
   had. Purely additive - none of them are changed to use it, but
   any NEW card-shaped component should compose .card (+ modifiers)
   instead of forking yet another one-off *-card rule. ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6)}
.card-flat{box-shadow:none}
.card-interactive{cursor:pointer;transition:.2s ease}
.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---- Field: a shared form-control base for NEW form work (the
   autosave wizard). The three pre-existing input rule sets
   (.pro-form, .registration-v2, .booking-field) are untouched -
   this does not migrate them, it stops there being a fourth fork. ---- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:var(--fs-xs);font-weight:800;color:var(--ink)}
.field>span em{margin-inline-start:5px;padding:2px 7px;border-radius:999px;background:#f1eee7;color:var(--muted);font-size:var(--fs-2xs);font-style:normal;font-weight:700}
.field>small,.field-hint{font-size:var(--fs-2xs);color:var(--muted);line-height:1.6}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid #dcd6ca;border-radius:var(--radius-md);background:#fff;color:var(--ink);font:inherit;font-size:var(--fs-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:110px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(11,68,54,.09)}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:.55;background:#f4f2ed}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(143,74,67,.08)}
/* Reuses the toast's own entrance keyframe (defined below, "Toast
   notifications") rather than inventing a second "text appears" motion -
   one shared appear/settle animation for both, per the controlled-motion
   system. Fires whenever a .field-error node is inserted (JS validation,
   autosaveForm's showFieldErrors) or freshly rendered (server-side @error) -
   never a page-jarring shake, just a quiet settle-in. */
.field-error{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:var(--fs-2xs);color:var(--danger);font-weight:700;animation:mawedna-toast-in .16s ease}
.field-error:before{content:"!";display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--danger);color:#fff;font-size:9px;flex:0 0 auto}

/* ---- Autosave status indicator (Saved / Saving / Offline / Error) ---- */
.save-indicator{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-2xs);color:var(--muted);font-weight:700}
.save-indicator .dot{width:7px;height:7px;border-radius:50%;background:#c6c4bc;flex:0 0 auto}
.save-indicator.is-saving .dot{background:var(--warning);animation:mawedna-pulse 1s ease-in-out infinite}
.save-indicator.is-saved .dot{background:var(--success)}
.save-indicator.is-offline .dot,.save-indicator.is-error .dot{background:var(--danger)}
@keyframes mawedna-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- Modal (confirmation dialogs - e.g. "cancel this booking?" -
   and any other focused single-task overlay). Uses the native
   [hidden] attribute already guaranteed authoritative by the very
   first rule in this file, so JS only ever toggles one attribute. ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,26,22,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200}
.modal-backdrop[hidden]{display:none!important}
.modal{width:min(100%,480px);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-7)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:var(--space-4)}
.modal-head h2{margin:0;font-size:var(--fs-lg);color:var(--emerald)}
.modal-close{border:0;background:var(--surface-emerald-soft);color:var(--emerald);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.modal-body{color:var(--muted);font-size:var(--fs-sm);line-height:1.75}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--space-6)}
@media(max-width:520px){.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}}

/* ---- Drawer (mobile filters, off-canvas panels). Same open/close
   mechanic as the pre-existing .dashboard-sidebar/.nav-links
   patterns (animate a physical `right` offset - this product is
   RTL-only today, so physical values match existing house style
   rather than mixing in logical properties for this one component). ---- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,26,22,.4);z-index:200}
.drawer-backdrop[hidden]{display:none!important}
.drawer{position:fixed;top:0;bottom:0;right:-100%;width:min(88vw,380px);background:var(--paper);box-shadow:var(--shadow-lg);z-index:201;display:flex;flex-direction:column;transition:right .22s ease}
.drawer.is-open{right:0}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--space-5);border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:var(--fs-md);color:var(--emerald)}
.drawer-body{flex:1;overflow:auto;padding:var(--space-5)}
.drawer-foot{padding:var(--space-4) var(--space-5);border-top:1px solid var(--line);display:flex;gap:10px}
.drawer-foot .btn{flex:1}

/* ---- Mobile sticky bottom action bar - for long forms/booking
   flows so the primary action never scrolls out of reach on a
   phone. Hidden by default; opt-in per screen since not every
   form wants it. ---- */
.mobile-action-bar{display:none}
@media(max-width:680px){
    .mobile-action-bar{position:sticky;bottom:0;inset-inline:0;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(25,45,37,.08);z-index:40;margin:0 -16px -18px}
    .mobile-action-bar .btn{flex:1}
}

/* ---- Nav icon slot + unread badge - lets sidebar nav use the real
   SVG icon partial (resources/views/partials/icon.blade.php) at a
   fixed size instead of ad hoc Unicode glyphs, and gives the
   notifications link somewhere to put an unread count. ---- */
.nav-icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;color:currentColor}
.nav-icon svg{width:100%;height:100%}
/* Pops in once (default animation-iteration-count:1, no infinite loop) each
   time the server renders this badge into the page - it only exists in the
   DOM at all when $unreadNotificationsCount > 0, so a fresh element
   appearing IS the meaningful-change signal; no extra JS state-tracking
   needed to avoid replaying on every unrelated re-render. */
.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:auto;border-radius:999px;background:var(--gold);color:#fff;font-size:10px;font-weight:900;line-height:1;animation:mawedna-badge-in .25s ease}
@keyframes mawedna-badge-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* =========================================================
   MAWEDNA VNEXT — HOMEPAGE (2026-08-11)
   CLAUDE.md §16 homepage layout/UX lock is explicitly superseded for
   this mission (see docs/MAWEDNA_DECISION_REGISTER.md, 2026-08-11
   entry). Old .hero/.category-grid/.featured-row/.appointments-table
   rules above are LEFT IN PLACE (still used by other approved public
   pages' shared classes in a few cases) but no longer used by
   home.blade.php's hero/discovery sections - this block is what
   actually renders there now.
   ========================================================= */

/* ---- Hero: split composition (owner correction 2026-08-13, V2 launch
   pack - supersedes the 2026-08-13 blurred full-bleed attempt below, which
   V2 explicitly forbids: "use blurred full-bleed photography as a
   substitute for the reference composition"). All 3 REFERENCE_IMAGES use a
   two-column Hero - headline+Search on one side, ONE large photography
   panel on the other, never a full-bleed background wash and never a
   thumbnail strip.
   The only real photography this project has (category-*.jpg, ~225x115px)
   is not high resolution, so per the V2 Hero media rule this ships the
   CORRECT container/composition with an honest abstract placeholder inside
   .hero-v2-media-panel (brand-color gradient + the existing approved brand
   mark) instead of a stretched/blurred low-res photo - the real photo is a
   pending owner-approved asset, not invented here.
   grid-template-areas (not DOM order/`order`) puts the media panel
   visually first/rightmost under RTL while it stays second in reading/tab
   order in the markup - it's aria-hidden and decorative, so this only
   affects layout, never navigation.
   NOTE (2026-08-12 visual QA, still true): nothing here may reintroduce
   overflow:hidden on .hero-v2 - it previously clipped the real
   .location-picker search-suggestion dropdown, a position:absolute
   descendant inside .intent-card. ---- */
.hero-v2{position:relative;padding:64px 0}
.hero-v2-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"media text";gap:48px;align-items:center}
.hero-v2-col-text{grid-area:text}
.hero-v2-col-media{grid-area:media}
.hero-v2 .eyebrow{justify-content:flex-start}
.hero-v2 h1{font-size:clamp(32px,3.6vw,50px);line-height:1.2;margin:10px 0 14px;color:var(--emerald);font-weight:800;letter-spacing:-1px}
.hero-v2 p{max-width:480px;margin:0 0 28px;color:#2f463d;font-size:var(--fs-md);line-height:1.8;font-weight:600}

.hero-v2-media-panel{position:relative;border-radius:var(--radius-2xl);overflow:hidden;aspect-ratio:4/5;box-shadow:0 32px 70px rgba(20,40,32,.16);display:grid;place-items:center;background:
    radial-gradient(120% 90% at 12% 8%,rgba(185,134,57,.26),transparent 55%),
    radial-gradient(120% 90% at 92% 100%,rgba(11,68,54,.3),transparent 55%),
    linear-gradient(155deg,#f6efe0 0%,#e9dcc3 48%,#cdbb92 100%)}
.hero-v2-media-watermark{color:var(--emerald);opacity:.16;line-height:0}

/* ---- SUPERSEDED 2026-08-13 (V2 launch pack): blurred full-bleed hero
   background. Kept only as a historical record of what was tried and
   rejected - not applied by any current markup (home.blade.php no longer
   renders .hero-v2-photo/.hero-v2-mesh elements). Do not resurrect. ---- */
.hero-v2-photo{position:absolute;inset:-12%;z-index:-2;display:none}
.hero-v2-mesh{position:absolute;inset:0;z-index:-1;display:none}

.intent-card{background:rgba(255,253,248,.92);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:0 32px 80px rgba(20,40,32,.16),0 2px 0 rgba(255,255,255,.6) inset;padding:30px;text-align:right}
.intent-label{font-size:12px;font-weight:900;color:var(--gold);margin:0 0 12px}
.intent-label:not(:first-child){margin-top:22px}

.sector-chip-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sector-chip{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;cursor:pointer;transition:.18s ease;color:var(--ink);font-size:12px;font-weight:800;text-align:center}
.sector-chip:hover{border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.sector-chip-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface-emerald-soft);color:var(--emerald)}
.sector-chip.is-selected{border-color:var(--emerald);background:var(--surface-emerald-soft);box-shadow:0 0 0 2px rgba(11,68,54,.1)}
.sector-chip.is-selected .sector-chip-icon{background:var(--emerald);color:#fff}

.time-shortcut-row{display:flex;flex-wrap:wrap;gap:8px}
.time-shortcut{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;transition:.15s}
.time-shortcut:hover{border-color:var(--gold-soft)}
.time-shortcut.is-active{background:var(--emerald);border-color:var(--emerald);color:#fff}

.intent-form{display:grid;grid-template-columns:1.3fr auto auto;gap:10px;align-items:end;margin-top:22px}
.intent-area-field{display:flex;flex-direction:column;gap:5px}
.intent-area-field span{font-size:11px;color:var(--muted);font-weight:800}
.intent-area-field select{min-height:50px;border:1px solid var(--line);border-radius:var(--radius-md);padding:0 14px;background:#fff;font-weight:700;color:var(--ink)}
.intent-geo-btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;color:var(--emerald);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.intent-geo-btn:hover{background:var(--surface-emerald-soft)}
.intent-geo-btn:disabled{opacity:.6;cursor:wait}
.intent-submit{min-height:50px;padding-inline:28px}
.intent-geo-status{margin:10px 2px 0;font-size:12px;color:var(--emerald);font-weight:700;text-align:center}

/* ---- Location picker (Master Mission Sec.8): Arabic search-as-you-type +
   region shortcuts, replacing the old flat <select>. Self-contained styling
   (not relying on ambient .pro-form/.intent-area-field field rules) since it
   is reused in both contexts. ---- */
.location-picker{position:relative;display:flex;flex-direction:column;gap:8px}
.location-input-wrap{position:relative;min-height:50px}
.location-search-input{width:100%;height:50px;border:1px solid var(--line);border-radius:var(--radius-md);padding-inline:14px 42px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--ink);outline:none}
.location-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,134,57,.09)}
.location-clear-btn{position:absolute;top:50%;inset-inline-start:10px;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:#f0ece2;color:var(--muted);cursor:pointer;padding:0}
.location-clear-btn:hover{background:#e6e0d2;color:var(--ink)}
.location-region-shortcuts{display:flex;gap:6px;flex-wrap:wrap}
.location-region-shortcuts button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:11px;font-weight:800;color:var(--ink);cursor:pointer;transition:.15s}
.location-region-shortcuts button:hover{background:var(--surface-emerald-soft)}
.location-region-shortcuts button.is-active{background:var(--emerald);border-color:var(--emerald);color:#fff}
.location-listbox{position:absolute;top:calc(100% + 4px);right:0;left:0;z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto}
/* Entrance transition (Master Mission item 4): previously appeared/vanished
   as a hard cut via the bare [hidden] attribute toggle in bindLocationPicker()
   - reuses the same mawedna-toast-in keyframe as .toast/.field-error (one
   shared "panel appears" motion) rather than a bespoke one. Only plays when
   the element goes from [hidden] to shown (opening), never on every
   keystroke - bindLocationPicker() only flips `hidden` at open/close, re-
   rendering .innerHTML in between without touching the attribute. */
.location-listbox:not([hidden]){animation:mawedna-toast-in .16s ease}
.location-listbox li[role="option"]{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.location-listbox li[role="option"]:hover,.location-listbox li[role="option"].is-active{background:var(--surface-emerald-soft)}
.location-listbox-region{font-size:11px;font-weight:700;color:var(--muted)}
.location-listbox-heading{padding:6px 12px 4px;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.location-listbox-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}

@media (max-width:900px){
    /* Split-Hero collapses to a single column on tablet: headline+Search
       first (the primary task), the photography panel second as a wide
       banner rather than a tall side panel - keeps the interactive form in
       the first viewport while still giving the panel real presence. */
    .hero-v2-grid{grid-template-columns:1fr;grid-template-areas:"text" "media";gap:28px}
    .hero-v2-media-panel{aspect-ratio:16/7}
    .sector-chip-row{grid-template-columns:repeat(3,1fr)}
    .intent-form{grid-template-columns:1fr}
    .intent-geo-btn,.intent-submit{width:100%;justify-content:center}
}
@media (max-width:520px){
    .hero-v2{padding:44px 0 40px}
    .hero-v2-grid{gap:20px}
    .hero-v2-media-panel{aspect-ratio:16/9}
    .hero-v2-media-watermark svg{width:120px;height:120px}
    .intent-card{padding:18px;border-radius:var(--radius-xl)}
    .sector-chip-row{grid-template-columns:repeat(2,1fr)}
}

/* ---- Category tiles (secondary "browse by category" section, below
   the hero): the same 6 stock photos as before, but unified with one
   consistent duotone overlay + icon badge so disparate stock crops
   read as one designed system instead of six unrelated photos. ---- */
.category-tile-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.category-tile{position:relative;display:block;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm);transition:.2s}
.category-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.category-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.75);transition:transform .2s ease}
/* Image-scale on hover, desktop/hover-capable only - .category-tile already
   has overflow:hidden + the translateY lift above, this just adds the
   matching subtle zoom on the photo itself, never on touch devices where
   there is no hover state to leave. */
@media (hover:hover){.category-tile:hover img{transform:scale(1.03)}}
.category-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,68,54,.15) 0%,rgba(9,32,26,.82) 100%)}
.category-tile-icon{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff}
.category-tile-label{position:absolute;inset-inline:12px;bottom:12px;color:#fff}
.category-tile-label strong{display:block;font-size:14px}
.category-tile-label small{display:block;margin-top:3px;font-size:10px;color:rgba(255,255,255,.75)}
@media (max-width:780px){.category-tile-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:500px){.category-tile-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Marketplace business card: shared by "featured businesses" here
   and by search results (search.blade.php) so both read as one system. ---- */
.mkt-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mkt-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.mkt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mkt-card-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--surface-emerald-soft),var(--surface-gold-soft))}
.mkt-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
/* Same hover-capable-only image zoom as .category-tile - .mkt-card already
   clips via its own overflow:hidden, so the zoomed image never spills past
   the card's rounded corners. */
@media (hover:hover){.mkt-card:hover .mkt-card-media img{transform:scale(1.02)}}
.mkt-card-media-icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--emerald);opacity:.55;font-size:36px}
.mkt-card-fav{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.88);display:grid;place-items:center;color:var(--emerald);cursor:pointer}
.mkt-card-fav.is-favorite{color:#9c3f35}
.mkt-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.mkt-card-kicker{font-size:11px;font-weight:800;color:var(--gold)}
.mkt-card-body h3{margin:0;font-size:16px;color:var(--ink)}
.mkt-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.mkt-card-meta span{display:inline-flex;align-items:center;gap:4px}
.mkt-card-next{margin-top:auto;padding-top:10px;border-top:1px solid rgba(177,133,61,.16);display:flex;align-items:center;justify-content:space-between;gap:8px}
.mkt-card-next b{font-weight:900;color:var(--emerald);font-size:13px}
@media (max-width:900px){.mkt-card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mkt-card-grid{grid-template-columns:1fr}}

/* ---- Public business page storefront hero (task 36) ---- */
.storefront-hero{display:flex;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);padding:30px;margin-bottom:24px}
.storefront-hero-media{flex:0 0 auto;width:92px;height:92px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--surface-emerald-soft),var(--surface-gold-soft));display:grid;place-items:center;color:var(--emerald)}
.storefront-hero-body{flex:1;min-width:0}
.storefront-hero-body h1{margin:4px 0 10px}
.storefront-hero-body p{color:var(--muted);line-height:1.8;max-width:640px}
.storefront-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.map-links-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.map-links-row .btn-small{gap:6px}
.storefront-trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
@media (max-width:680px){
    .storefront-hero{flex-direction:column;text-align:center;padding:22px}
    .storefront-trust-row{justify-content:center}
}

/* =========================================================
   MAWEDNA VNEXT — ONE CONTROLLED MOTION SYSTEM (2026-08-11)
   Restrained, fast (120-280ms), consistent `ease` timing, additive to the
   ~28 transitions/keyframes already in this file (buttons, cards, drawer/
   sidebar slide, chips, slot buttons, field focus, skeleton shimmer, toast,
   save-indicator, skip-link). Nothing here is load-bearing: every element
   below is fully understandable/usable with the transition/animation
   instantly complete (no meaning is ever gated on motion alone), and the
   global prefers-reduced-motion override (near the top of this file)
   already collapses all of it to ~0 automatically - none of these rules
   need to repeat that query themselves.

   Deliberately placed at the END of the file, not near the reduced-motion
   query it references: several rules below override earlier same-
   specificity component rules (.drawer, .btn:disabled) by property, and per
   normal CSS cascade order that only works with this block appearing after
   them in source order - the same "later wins" convention this file's own
   .metric-card/.metric-trend specificity comments already rely on.
   ========================================================= */

/* ---- Page-shell entrance: one shared, barely-noticeable fade+rise for the
   main content area on load - not per-element, a single rule targeting the
   bare <main> tag covers every page type (home/business/search/dashboard/
   admin/auth/tracking) without touching 12 separate templates. Pure CSS
   (no JS gate, no [hidden]/visibility trick), so it can never delay
   interactivity or cause a flash of unstyled content: this stylesheet is
   render-blocking in <head>, so the browser paints the fully-styled DOM
   straight at the animation's "from" state and the compositor animates
   opacity/transform only - content is real and interactive throughout. */
@keyframes mawedna-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
main{animation:mawedna-page-in .25s ease}

/* ---- Button loading state: any button carrying [data-loading] (set/
   cleared by small JS toggles in app.js - bindRegistrationWizard's
   data-step-next, bindPublicBooking's booking/waitlist submit - mirroring
   the attribute-driven style already used for [hidden]/:disabled rather
   than a new class convention) dims slightly and grows a small spinner,
   without hiding its label text (avoids any contrast risk on the lighter
   .btn-secondary/.btn-ghost/.mv2-btn--ghost variants, even though today
   only the emerald primary variants ever receive this attribute). Placed
   after .btn:disabled (both buttons this attribute is used on are also
   disabled while loading) so its opacity:.75 wins over :disabled's .55 -
   equal specificity, source order decides. The spinner loop is a bounded,
   contextual "operation in progress" indicator - the same already-
   established pattern as .save-indicator.is-saving's dot - not the kind of
   decorative infinite loop the mission asks to avoid. */
.btn[data-loading],.registration-v2 .mv2-btn[data-loading]{opacity:.75;pointer-events:none;position:relative;padding-inline-end:38px}
.btn[data-loading]:after,.registration-v2 .mv2-btn[data-loading]:after{content:"";position:absolute;inset-inline-end:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mawedna-spin .6s linear infinite}
@keyframes mawedna-spin{to{transform:rotate(360deg)}}

/* ---- Mobile bottom sheet: the generic .drawer component (defined earlier
   under "MAWEDNA DESIGN SYSTEM EXTENSIONS" - a right-side slide-in, not yet
   wired into any current template) gets a true bottom-sheet presentation on
   mobile widths only, per the mission's explicit "genuinely mobile-
   appropriate presentation" ask for filter/action panels. Desktop/tablet
   keep the existing side-drawer slide untouched above this breakpoint.
   Must appear after the base .drawer rule (same specificity, later wins)
   to actually override its top/right/transition values instead of losing
   to them. */
@media (max-width:680px){
    .drawer{top:auto;right:0;left:0;bottom:-100%;width:100%;max-height:min(86vh,640px);border-radius:20px 20px 0 0;transition:bottom .22s ease}
    .drawer.is-open{right:0;left:0;bottom:0}
    .drawer-head{position:relative;padding-top:22px}
    .drawer-head:before{content:"";position:absolute;top:9px;right:50%;transform:translateX(50%);width:38px;height:4px;border-radius:999px;background:var(--line)}
}