/* ==========================================================================
   Service Detail page — shared by every *-cleaning.html and *-control.html
   page. Extends css/style.css (Blue Shine design system). Only page-specific
   components live here; colors/type reuse the real design tokens
   (--royal-blue, --gold, --dark-navy, --radius-*, --shadow-*).
   ========================================================================== */
.logo-img{ height:40px; width:auto; }

/* ---------- Service detail layout ---------- */
.sd-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:46px; align-items:start; }
.sd-media .main-img{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lift); }
.sd-media img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.sd-desc{ margin-top:22px; }
.sd-highlights{ margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sd-highlights li{ display:flex; gap:10px; align-items:flex-start; font-family:var(--font-body); font-size:14px; color:var(--text-primary); }
.sd-highlights li svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--gold-deep); }

/* ---------- Do's & Don'ts ---------- */
.dd-wrap{ margin-top:38px; }
.dd-wrap h4{ font-size:19px; margin-top:2px; }
.dd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; }
.dd-col{ border-radius:var(--radius-md); padding:22px; border:1px solid var(--border-soft); }
.dd-col.do{ background:rgba(31,146,84,.06); border-color:rgba(31,146,84,.18); }
.dd-col.dont{ background:rgba(193,59,48,.06); border-color:rgba(193,59,48,.18); }
.dd-col h5{ display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:15px; margin-bottom:14px; }
.dd-col.do h5{ color:#1F9254; }
.dd-col.dont h5{ color:#C13B30; }
.dd-col .dd-icon{ width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.dd-col.do .dd-icon{ background:#1F9254; color:#fff; }
.dd-col.dont .dd-icon{ background:#C13B30; color:#fff; }
.dd-col .dd-icon svg{ width:13px; height:13px; }
.dd-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.dd-col li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-primary); line-height:1.55; }
.dd-col li svg{ width:14px; height:14px; flex:none; margin-top:3px; }
.dd-col.do li svg{ color:#1F9254; }
.dd-col.dont li svg{ color:#C13B30; }

/* ---------- Booking / price card ---------- */
.sd-card{
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-lift); position:sticky; top:calc(var(--header-h) + 24px);
}
.sd-card h3{ font-size:19px; margin-bottom:4px; }
.sd-card .sd-sub{ color:var(--text-muted); font-size:13.5px; margin-bottom:22px; }
.sd-field{ margin-bottom:16px; }
.sd-field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--dark-navy); margin-bottom:7px; }
.sd-field select{
  width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--border-soft);
  font-family:var(--font-body); font-size:14.5px; background:var(--bg-light)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230F3D91" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>')
    no-repeat right 16px center/16px;
  appearance:none; -webkit-appearance:none; cursor:pointer; transition:border-color .3s ease, box-shadow .3s ease;
}
.sd-field select:focus{ outline:none; border-color:var(--royal-blue); box-shadow:0 0 0 4px rgba(15,61,145,.1); }
/* Placeholder ("Select Your Package…") option look — greyed until a real choice is made */
.sd-field select:invalid,
.sd-field select.is-placeholder{ color:var(--text-muted); }
.sd-field select option[value=""]{ color:#8a93a6; }
.sd-price-box{ background:var(--ice-tint); border-radius:var(--radius-md); padding:18px 20px; margin:20px 0; }
.sd-price-box.is-empty{ opacity:.6; }
.sd-price-row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--text-muted); padding:5px 0; }
.sd-price-row.total{ border-top:1px dashed var(--border-soft); margin-top:8px; padding-top:12px; font-family:var(--font-head); font-weight:700; color:var(--dark-navy); }
.sd-price-row.total span:last-child{ color:var(--royal-blue); font-size:24px; font-family:var(--font-head); }
.sd-note{ font-size:12px; color:var(--text-muted); margin-top:14px; text-align:center; }

.selected-service-tag{ background:var(--ice-tint); border:1px dashed var(--border-soft); border-radius:var(--radius-sm); padding:11px 14px; font-family:var(--font-body); font-size:13px; color:var(--dark-navy); margin-bottom:18px; }

/* Disabled "Book This Service" button while a package hasn't been chosen yet */
.btn.is-disabled{ opacity:.5; pointer-events:none; cursor:not-allowed; }

@media(max-width:900px){
  .sd-grid{ grid-template-columns:1fr; }
  .sd-card{ position:relative; top:0; }
}
@media(max-width:640px){
  .sd-highlights{ grid-template-columns:1fr; }
  .dd-grid{ grid-template-columns:1fr; }
}