/* ===================== Base / Tokens ===================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body, 'Inter', sans-serif);
  background:var(--color-bg,#F7F5F0);
  color:var(--color-text,#1C1C1C);
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading,'Poppins',sans-serif); margin:0 0 .5em; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container-wide{max-width:1200px; margin:0 auto; padding:0 20px;}
.container-boxed{max-width:960px; margin:0 auto; padding:0 20px;}

button, .btn{
  font-family:var(--font-body);
  cursor:pointer;
  border:none;
  border-radius:var(--radius,16px);
  padding:.7em 1.4em;
  font-weight:600;
  font-size:.95rem;
  transition:.15s ease;
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
}
.btn-primary{background:var(--color-primary,#0F5C56); color:#fff;}
.btn-primary:hover{background:var(--color-primary-dark,#0A3F3B);}
.btn-accent{background:var(--color-accent,#E8724C); color:#fff;}
.btn-accent:hover{filter:brightness(0.92);}
.btn-outline{background:transparent; border:1.5px solid var(--color-primary,#0F5C56); color:var(--color-primary,#0F5C56);}
.btn-outline:hover{background:var(--color-primary,#0F5C56); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:.4em 1em; font-size:.8rem;}
.btn-danger{background:#C0392B;color:#fff;}
.btn:disabled{opacity:.55; cursor:not-allowed;}

input,select,textarea{
  font-family:var(--font-body);
  padding:.7em .9em;
  border:1.5px solid #DDD8CC;
  border-radius:calc(var(--radius,16px) / 2);
  font-size:.95rem;
  width:100%;
  background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--color-primary,#0F5C56); outline-offset:1px;}
label{font-weight:600; font-size:.85rem; display:block; margin-bottom:.35em;}
.form-group{margin-bottom:1.1rem;}
.form-row{display:flex; gap:1rem; flex-wrap:wrap;}
.form-row .form-group{flex:1; min-width:200px;}

.card{background:#fff; border-radius:var(--radius,16px); box-shadow:0 2px 14px rgba(0,0,0,.06); padding:1.5rem;}
.badge{display:inline-block; padding:.25em .7em; border-radius:99px; font-size:.72rem; font-weight:700; letter-spacing:.02em;}
.badge-success{background:#DEF7E5; color:#1C7C3C;}
.badge-warning{background:#FFF3D6; color:#9A6B00;}
.badge-danger{background:#FBE1DE; color:#B23A2C;}
.badge-info{background:#E1EEFB; color:#1B5FA6;}
.alert{padding:1em 1.2em; border-radius:calc(var(--radius,16px)/2); margin-bottom:1rem; font-size:.9rem;}
.alert-success{background:#DEF7E5; color:#1C7C3C;}
.alert-error{background:#FBE1DE; color:#B23A2C;}

/* ===================== Header ===================== */
.site-header{background:#fff; border-bottom:1px solid #ECE7DA; position:sticky; top:0; z-index:100;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
.brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-heading); font-weight:800; font-size:1.3rem; color:var(--color-primary);}
.brand-logo{height:34px; width:auto; border-radius:8px;}
.main-nav{display:flex; align-items:center; gap:1.4rem; font-weight:600; font-size:.92rem;}
.main-nav a{opacity:.85;}
.main-nav a:hover{opacity:1; color:var(--color-primary);}
.nav-provider-link{background:#F1EFE6; padding:.5em 1em; border-radius:99px;}
.nav-user-menu{position:relative;}
.nav-user-btn{background:none; border:none; font-weight:600; font-size:.92rem; color:inherit; padding:0;}
.nav-user-dropdown{display:none; position:absolute; right:0; top:130%; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.12); border-radius:12px; min-width:170px; overflow:hidden; z-index:50;}
.nav-user-dropdown a{display:block; padding:.7em 1em; font-weight:500;}
.nav-user-dropdown a:hover{background:#F5F3EC;}
.nav-user-menu:hover .nav-user-dropdown{display:block;}
.mobile-menu-toggle{display:none; background:none; border:none; font-size:1.3rem;}

/* ===================== Hero / Categories ===================== */
.hero{padding:3rem 0 2rem; text-align:left;}
.hero h1{font-size:2.3rem; max-width:640px;}
.hero p{color:#555; max-width:560px; font-size:1.05rem;}
.search-bar{display:flex; max-width:560px; margin-top:1.3rem; background:#fff; border-radius:99px; box-shadow:0 4px 20px rgba(0,0,0,.07); padding:.4rem;}
.search-bar input{border:none; box-shadow:none; border-radius:99px;}
.search-bar input:focus{outline:none;}
.search-bar button{border-radius:99px;}

.category-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.1rem; margin:2rem 0;}
.category-card{background:#fff; border-radius:var(--radius); padding:1.4rem 1rem; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:.15s;}
.category-card:hover{transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.09);}
.category-card i{font-size:1.8rem; color:var(--color-primary); margin-bottom:.6rem;}
.category-card span{display:block; font-weight:700; font-size:.92rem;}

.section-title{display:flex; align-items:center; justify-content:space-between; margin:2.2rem 0 1rem;}
.section-title h2{font-size:1.4rem; margin:0;}

/* ===================== Service / Provider cards ===================== */
.service-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.3rem;}
.service-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; flex-direction:column;}
.service-card img{height:150px; object-fit:cover; width:100%; background:#eee;}
.service-card-body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1;}
.service-card-body h3{font-size:1.02rem;}
.service-price{font-weight:800; color:var(--color-primary); font-size:1.05rem;}
.service-meta{color:#777; font-size:.82rem;}

.provider-list{display:flex; flex-direction:column; gap:1rem;}
.provider-card{display:flex; gap:1.1rem; background:#fff; border-radius:var(--radius); padding:1.1rem; box-shadow:0 2px 10px rgba(0,0,0,.05); align-items:center; flex-wrap:wrap;}
.provider-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; background:#eee; flex-shrink:0;}
.provider-info{flex:1; min-width:180px;}
.provider-info h3{font-size:1rem; margin-bottom:.2rem;}
.provider-rating{color:#E0A200; font-size:.85rem; font-weight:700;}
.provider-price{text-align:right; min-width:120px;}
.provider-price .amount{font-size:1.15rem; font-weight:800; color:var(--color-primary);}

/* ===================== Booking / Schedule / Checkout ===================== */
.booking-steps{display:flex; gap:.5rem; margin-bottom:1.6rem; flex-wrap:wrap;}
.booking-steps span{padding:.4em 1em; border-radius:99px; background:#EFEAE0; font-size:.8rem; font-weight:700; color:#888;}
.booking-steps span.active{background:var(--color-primary); color:#fff;}

.date-picker-strip{display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.5rem;}
.date-chip{flex:0 0 auto; text-align:center; padding:.7em .9em; border-radius:14px; background:#fff; border:1.5px solid #E7E2D6; cursor:pointer; min-width:64px;}
.date-chip.selected{background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.date-chip .dow{font-size:.7rem; text-transform:uppercase; opacity:.7;}
.date-chip .dnum{font-size:1.15rem; font-weight:800;}

.time-slot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.6rem; margin-top:1rem;}
.time-slot{text-align:center; padding:.6em .4em; border-radius:10px; border:1.5px solid #E7E2D6; background:#fff; cursor:pointer; font-size:.85rem; font-weight:600;}
.time-slot.selected{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.time-slot.disabled{opacity:.35; cursor:not-allowed; text-decoration:line-through;}

.summary-box{background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.summary-row{display:flex; justify-content:space-between; padding:.4rem 0; font-size:.92rem;}
.summary-row.total{border-top:1px solid #EEE; margin-top:.5rem; padding-top:.8rem; font-weight:800; font-size:1.05rem;}

.two-col{display:grid; grid-template-columns:1.6fr 1fr; gap:2rem;}
@media(max-width:860px){.two-col{grid-template-columns:1fr;}}

/* ===================== Tracking / Timeline ===================== */
.timeline{list-style:none; padding:0; margin:0;}
.timeline li{position:relative; padding-left:2rem; padding-bottom:1.5rem; border-left:2px solid #E7E2D6; margin-left:.6rem;}
.timeline li:last-child{border-color:transparent;}
.timeline li::before{content:''; position:absolute; left:-8px; top:0; width:14px; height:14px; border-radius:50%; background:#E7E2D6;}
.timeline li.done::before{background:var(--color-primary);}
.timeline li .t-title{font-weight:700;}
.timeline li .t-time{font-size:.78rem; color:#888;}

/* ===================== Dashboard shells (provider/admin) ===================== */
.dash-wrapper{display:flex; min-height:100vh;}
.dash-sidebar{width:230px; background:var(--color-primary-dark,#0A3F3B); color:#fff; padding:1.4rem 1rem; flex-shrink:0;}
.dash-sidebar .brand{color:#fff; margin-bottom:1.8rem;}
.dash-sidebar a{display:flex; align-items:center; gap:.7em; padding:.7em .9em; border-radius:10px; color:#DCE9E6; font-weight:600; font-size:.9rem; margin-bottom:.3rem;}
.dash-sidebar a:hover, .dash-sidebar a.active{background:rgba(255,255,255,.12); color:#fff;}
.dash-main{flex:1; padding:1.8rem 2rem; max-width:calc(100% - 230px);}
.dash-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.6rem;}
.stat-card{background:#fff; border-radius:var(--radius); padding:1.2rem; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.stat-card .num{font-size:1.7rem; font-weight:800; color:var(--color-primary);}
.stat-card .label{font-size:.8rem; color:#888;}

table.data-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden;}
table.data-table th, table.data-table td{padding:.8em 1em; text-align:left; font-size:.88rem; border-bottom:1px solid #F0EDE3;}
table.data-table th{background:#F7F5EF; font-weight:700; color:#555;}
table.data-table tr:last-child td{border-bottom:none;}

.modal-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff; border-radius:var(--radius); padding:1.6rem; width:100%; max-width:480px; max-height:90vh; overflow-y:auto;}
.modal-box h3{margin-bottom:1rem;}
.modal-close{float:right; background:none; border:none; font-size:1.2rem; padding:0;}

.color-swatch-input{display:flex; align-items:center; gap:.6rem;}
.color-swatch-input input[type=color]{width:46px; height:40px; padding:2px;}

/* ===================== Footer ===================== */
.site-footer{background:var(--color-primary-dark,#0A3F3B); color:#DCE9E6; margin-top:3rem; padding-top:2.5rem;}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.5rem; padding-bottom:2rem;}
.footer-col h4,.footer-col h5{color:#fff;}
.footer-col a{display:block; padding:.25em 0; opacity:.8; font-size:.88rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:1rem; font-size:.8rem; opacity:.7;}

@media(max-width:760px){
  .main-nav{display:none;}
  .mobile-menu-toggle{display:block;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .dash-sidebar{position:fixed; left:-230px; top:0; bottom:0; transition:.2s; z-index:150;}
  .dash-sidebar.open{left:0;}
  .dash-main{max-width:100%;}
}