/* =========================================================
   QuickDesk Design System
   Palette : Ink Navy #12233D | Amber #E8A33D | Off-White #F7F5F0
             Slate #5B6B7C | Success #2F9E68 | Alert #C4483B
   Type    : Poppins (display) + Inter (body/utility)
   Signature: "Directory signage" strip — pegboard-style
              location chips used across hero + section dividers
   ========================================================= */

:root{
  --navy:#12233D;
  --navy-2:#1B3358;
  --amber:#E8A33D;
  --amber-dark:#C9821F;
  --cream:#F7F5F0;
  --white:#FFFFFF;
  --slate:#5B6B7C;
  --slate-light:#94A3B4;
  --success:#2F9E68;
  --alert:#C4483B;
  --border:#E4E1D8;
  --radius:14px;
  --shadow-sm:0 2px 8px rgba(18,35,61,.08);
  --shadow-md:0 10px 30px rgba(18,35,61,.14);
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--cream);
  margin:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.font-display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container-xl{max-width:1240px;margin:0 auto;padding:0 18px;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

/* ---------- Buttons ---------- */
.btn-qd{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  padding:13px 26px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-amber{background:var(--amber);color:var(--navy);}
.btn-amber:hover{background:var(--amber-dark);transform:translateY(-2px);color:var(--navy);}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px);color:var(--white);}
.btn-outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:var(--white);}
.btn-outline-light{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px;font-size:.82rem;}

/* ---------- Top bar / Navbar ---------- */
.qd-topbar{background:var(--navy);color:#C9D3E0;font-size:.78rem;padding:6px 0;}
.qd-topbar .container-xl{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.qd-topbar a{color:#C9D3E0;}
.qd-topbar a:hover{color:var(--amber);}

.qd-navbar{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
}
.qd-navbar .container-xl{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;}
.qd-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--navy);}
.qd-logo .mark{
  width:38px;height:38px;border-radius:10px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--amber);font-weight:800;
}
.qd-nav-links{display:none;gap:28px;align-items:center;font-weight:500;font-size:.92rem;}
.qd-nav-links a{color:var(--navy);position:relative;padding:6px 0;}
.qd-nav-links a:hover{color:var(--amber-dark);}
.qd-nav-actions{display:flex;align-items:center;gap:10px;}
.qd-burger{display:flex;background:none;border:none;font-size:1.5rem;color:var(--navy);cursor:pointer;}
.qd-mobile-menu{display:none;flex-direction:column;background:var(--white);border-top:1px solid var(--border);padding:10px 18px 18px;}
.qd-mobile-menu.open{display:flex;}
.qd-mobile-menu a{padding:11px 0;border-bottom:1px solid var(--border);color:var(--navy);font-weight:500;}

@media(min-width:992px){
  .qd-nav-links{display:flex;}
  .qd-burger{display:none;}
  .qd-mobile-menu{display:none!important;}
}

/* ---------- Hero ---------- */
.qd-hero{
  position:relative;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,#24406b 100%);
  color:var(--white);
  padding:56px 0 130px;
  overflow:hidden;
}
.qd-hero::after{
  content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(232,163,61,.25) 0%,transparent 70%);
}
.qd-hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;position:relative;z-index:2;}
@media(min-width:992px){.qd-hero-grid{grid-template-columns:1.1fr .9fr;}}
.qd-eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:rgba(232,163,61,.15);
  border:1px solid rgba(232,163,61,.4);color:var(--amber);
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.qd-hero h1{font-size:2.1rem;line-height:1.18;margin:0 0 16px;}
.qd-hero h1 span{color:var(--amber);}
@media(min-width:768px){.qd-hero h1{font-size:2.9rem;}}
.qd-hero p.lead{color:#C9D3E0;font-size:1.02rem;max-width:520px;margin-bottom:26px;}
.qd-hero-stats{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap;}
.qd-hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--amber);}
.qd-hero-stats div span{font-size:.78rem;color:#B7C2D4;}
.qd-hero-visual{position:relative;}
.qd-hero-visual img{border-radius:20px;box-shadow:var(--shadow-md);}
.qd-hero-floatcard{
  position:absolute;bottom:-22px;left:-18px;background:var(--white);color:var(--navy);
  border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-md);display:flex;gap:10px;align-items:center;max-width:230px;
}
.qd-hero-floatcard .dot{width:10px;height:10px;border-radius:50%;background:var(--success);flex-shrink:0;}
.qd-hero-floatcard strong{display:block;font-size:.86rem;}
.qd-hero-floatcard span{font-size:.74rem;color:var(--slate);}

/* ---------- Signature: directory / pegboard search panel ---------- */
.qd-search-panel{
  position:relative;z-index:5;
  background:var(--white);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  margin-top:-84px;
  padding:22px 18px;
}
.qd-search-panel .panel-label{
  font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--slate);
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.qd-search-panel .panel-label .peg{width:8px;height:8px;border-radius:2px;background:var(--amber);display:inline-block;}
.qd-search-form{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:768px){.qd-search-form{grid-template-columns:1.3fr 1fr 1fr auto;align-items:end;}}
.qd-search-form label{font-size:.72rem;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px;}
.qd-search-form select,.qd-search-form input{
  width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);
  font-family:var(--font-body);font-size:.92rem;background:var(--cream);color:var(--navy);
}
.qd-search-form select:focus,.qd-search-form input:focus{border-color:var(--amber);background:var(--white);}

.qd-chip-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--border);}
.qd-chip{
  font-size:.76rem;font-weight:600;padding:6px 13px;border-radius:999px;
  background:var(--cream);border:1px solid var(--border);color:var(--slate);
}
.qd-chip:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}

/* ---------- Section framework — alternating visual rhythm ---------- */
.section{padding:64px 0;}
.section-cream{background:var(--cream);}
.section-white{background:var(--white);}
.section-navy{background:var(--navy);color:var(--white);}
.section-amber{background:linear-gradient(135deg,#F6D9A8 0%,var(--amber) 100%);color:var(--navy);}
.section-header{max-width:620px;margin-bottom:40px;}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-eyebrow{
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-dark);margin-bottom:10px;
}
.section-navy .section-eyebrow{color:var(--amber);}
.section-header h2{font-size:1.7rem;margin:0 0 12px;}
@media(min-width:768px){.section-header h2{font-size:2.2rem;}}
.section-header p{color:var(--slate);font-size:1rem;}
.section-navy .section-header p{color:#C9D3E0;}

/* ---------- Category / space-type cards ---------- */
.qd-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:768px){.qd-cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:992px){.qd-cat-grid{grid-template-columns:repeat(6,1fr);}}
.qd-cat-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 14px;text-align:center;transition:transform .2s, box-shadow .2s, border-color .2s;
}
.qd-cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--amber);}
.qd-cat-card .icon{font-size:1.7rem;margin-bottom:10px;}
.qd-cat-card strong{display:block;font-family:var(--font-display);font-size:.88rem;}

/* ---------- Listing cards ---------- */
.qd-listing-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:640px){.qd-listing-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:992px){.qd-listing-grid{grid-template-columns:repeat(3,1fr);}}

.qd-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;height:100%;border:1px solid var(--border);
}
.qd-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.qd-card .thumb{position:relative;height:190px;background:linear-gradient(135deg,#dfe6ef,#f3f0e8);overflow:hidden;}
.qd-card .thumb img{width:100%;height:100%;object-fit:cover;}
.qd-card .thumb .tag{
  position:absolute;top:12px;left:12px;background:var(--navy);color:var(--white);
  font-size:.7rem;font-weight:600;padding:5px 11px;border-radius:999px;
}
.qd-card .thumb .price-tag{
  position:absolute;bottom:12px;right:12px;background:var(--amber);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:.86rem;padding:6px 12px;border-radius:8px;
}
.qd-card .body{padding:18px;flex:1;display:flex;flex-direction:column;}
.qd-card .body h3{font-size:1.02rem;margin:0 0 6px;}
.qd-card .body .loc{font-size:.82rem;color:var(--slate);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.qd-card .meta{display:flex;gap:14px;font-size:.78rem;color:var(--slate);margin-bottom:14px;flex-wrap:wrap;}
.qd-card .meta span{display:flex;align-items:center;gap:5px;}
.qd-card .actions{margin-top:auto;display:flex;gap:8px;}

/* ---------- About / split section ---------- */
.qd-about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media(min-width:992px){.qd-about-grid{grid-template-columns:1fr 1fr;}}
.qd-about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qd-about-imgs img{border-radius:16px;height:100%;object-fit:cover;}
.qd-about-imgs .tall{grid-row:span 2;height:100%;}
.qd-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;}
.qd-stat-strip div{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.qd-stat-strip strong{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--navy);}
.qd-stat-strip span{font-size:.72rem;color:var(--slate);}

/* ---------- How it works (process — order genuinely matters) ---------- */
.qd-steps{display:grid;grid-template-columns:1fr;gap:22px;counter-reset:step;}
@media(min-width:768px){.qd-steps{grid-template-columns:repeat(4,1fr);}}
.qd-step{position:relative;padding-top:10px;}
.qd-step .num{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;color:var(--amber);
  border:1.5px solid var(--amber);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.qd-step h4{font-size:1rem;margin:0 0 8px;}
.qd-step p{font-size:.86rem;color:#C9D3E0;margin:0;}

/* ---------- Testimonials ---------- */
.qd-testi-card{background:var(--white);border-radius:var(--radius);padding:26px;border:1px solid var(--border);height:100%;}
.qd-testi-card .stars{color:var(--amber);margin-bottom:12px;font-size:.9rem;}
.qd-testi-card p{font-size:.92rem;color:var(--navy);font-style:italic;}
.qd-testi-person{display:flex;align-items:center;gap:12px;margin-top:16px;}
.qd-testi-person .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);}
.qd-testi-person strong{display:block;font-size:.86rem;}
.qd-testi-person span{font-size:.74rem;color:var(--slate);}

/* ---------- CTA band ---------- */
.qd-cta-band{
  background:var(--navy);border-radius:20px;padding:44px 26px;color:var(--white);text-align:center;
  position:relative;overflow:hidden;
}
.qd-cta-band::before{content:"";position:absolute;left:-80px;bottom:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(232,163,61,.25),transparent 70%);}
.qd-cta-band h2{font-size:1.5rem;margin-bottom:10px;position:relative;}
@media(min-width:768px){.qd-cta-band h2{font-size:2rem;}}
.qd-cta-band p{color:#C9D3E0;margin-bottom:24px;position:relative;}
.qd-cta-band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;}

/* ---------- Footer ---------- */
.qd-footer{background:#0C1830;color:#AEB9CB;padding:56px 0 0;}
.qd-footer h5{color:var(--white);font-family:var(--font-display);font-size:.96rem;margin-bottom:16px;}
.qd-footer a{color:#AEB9CB;font-size:.86rem;display:block;margin-bottom:10px;}
.qd-footer a:hover{color:var(--amber);}
.qd-footer .grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media(min-width:768px){.qd-footer .grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}}
.qd-footer .bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding:18px 0;font-size:.78rem;text-align:center;}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:1200;
  background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:var(--shadow-md);
}
.wa-float:hover{transform:scale(1.06);color:#fff;}

/* ---------- Badges (status) shared with admin) ---------- */
.qd-badge{display:inline-block;font-size:.72rem;font-weight:600;padding:4px 11px;border-radius:999px;}
.badge-pending{background:#FFF1DA;color:#A9670C;}
.badge-approved{background:#DFF4E8;color:var(--success);}
.badge-rejected{background:#FBE2DF;color:var(--alert);}
.badge-inactive{background:#EAEAEA;color:#666;}
.badge-new{background:#DDEBFB;color:#1D5BAA;}
.badge-process{background:#FFF1DA;color:#A9670C;}
.badge-completed{background:#DFF4E8;color:var(--success);}
.badge-cancelled{background:#FBE2DF;color:var(--alert);}

/* ---------- Forms (provider/admin panels) ---------- */
.qd-auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:50px 16px;background:var(--cream);}
.qd-auth-card{background:var(--white);border-radius:18px;box-shadow:var(--shadow-md);padding:34px 26px;max-width:440px;width:100%;}
.qd-auth-card h2{margin-top:0;}
.qd-form-group{margin-bottom:16px;}
.qd-form-group label{font-size:.8rem;font-weight:600;color:var(--slate);display:block;margin-bottom:6px;}
.qd-form-group input,.qd-form-group select,.qd-form-group textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);font-size:.92rem;background:var(--cream);
}
.qd-form-group input:focus,.qd-form-group select:focus,.qd-form-group textarea:focus{border-color:var(--amber);background:var(--white);outline:none;}
.qd-alert{padding:12px 16px;border-radius:10px;font-size:.86rem;margin-bottom:16px;}
.qd-alert-success{background:#DFF4E8;color:#1B6B41;}
.qd-alert-error{background:#FBE2DF;color:#8B2E23;}

/* ---------- Dashboard shell (provider + admin) ---------- */
.qd-dash{display:flex;min-height:100vh;background:var(--cream);}
.qd-sidebar{
  width:230px;background:var(--navy);color:#C9D3E0;flex-shrink:0;position:fixed;top:0;left:0;bottom:0;
  transform:translateX(-100%);transition:transform .2s ease;z-index:1100;overflow-y:auto;
}
.qd-sidebar.open{transform:translateX(0);}
@media(min-width:992px){.qd-sidebar{position:sticky;transform:none;}}
.qd-sidebar .brand{padding:22px 20px;font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.15rem;border-bottom:1px solid rgba(255,255,255,.08);}
.qd-sidebar .brand span{color:var(--amber);}
.qd-sidebar nav{padding:14px 10px;}
.qd-sidebar nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-size:.88rem;margin-bottom:4px;color:#C9D3E0;}
.qd-sidebar nav a:hover,.qd-sidebar nav a.active{background:rgba(255,255,255,.08);color:var(--white);}
.qd-sidebar nav a.active{background:var(--amber);color:var(--navy);font-weight:600;}
.qd-main{flex:1;min-width:0;}
.qd-topnav{
  background:var(--white);border-bottom:1px solid var(--border);padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:900;
}
.qd-topnav .burger{background:none;border:none;font-size:1.4rem;color:var(--navy);cursor:pointer;}
@media(min-width:992px){.qd-topnav .burger{display:none;}}
.qd-content{padding:22px;}
.qd-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px;}
@media(min-width:768px){.qd-kpi-grid{grid-template-columns:repeat(4,1fr);}}
.qd-kpi{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;}
.qd-kpi strong{display:block;font-family:var(--font-display);font-size:1.5rem;}
.qd-kpi span{font-size:.78rem;color:var(--slate);}
.qd-table-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.qd-table-card table{width:100%;border-collapse:collapse;font-size:.86rem;}
.qd-table-card th{background:var(--cream);text-align:left;padding:12px 16px;font-family:var(--font-display);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);}
.qd-table-card td{padding:12px 16px;border-top:1px solid var(--border);vertical-align:middle;}
.qd-table-card .table-wrap{overflow-x:auto;}
.qd-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1050;}
.qd-sidebar-overlay.open{display:block;}

/* ---------- utility ---------- */
.text-amber{color:var(--amber);}
.mb-0{margin-bottom:0;}