/* WASHUP bill calculator v3 — uses the site's own palette (#00355c / #094e7f / #1873b5 / #e6f7ff)
   and fonts (El Messiri headings, Nunito Sans text). Everything is scoped under #wc-calc. */
#wc-calc { --wc-ink:#00355c; --wc-blue:#1873b5; --wc-deep:#094e7f; --wc-pale:#e6f7ff; --wc-line:#dbe7f3; --wc-grey:#6b7785;
  max-width:1180px; margin:0 auto; padding:24px 16px 96px; font-family:'Nunito Sans',sans-serif; color:#1d2b3a; box-sizing:border-box; }
#wc-calc *, #wc-calc *::before, #wc-calc *::after { box-sizing:border-box; }
#wc-calc h2 { font-family:'El Messiri',serif; color:var(--wc-ink); font-size:34px; margin:0 0 6px; text-align:center; }
#wc-calc .wc-intro { text-align:center; color:var(--wc-grey); font-size:16px; max-width:640px; margin:0 auto 22px; }
#wc-calc .wc-step { font-family:'El Messiri',serif; color:var(--wc-ink); font-size:20px; margin:22px 0 10px; }

#wc-calc .wc-tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
#wc-calc .wc-tier { position:relative; border:2px solid var(--wc-line); background:#fff; border-radius:14px; padding:22px 10px 12px;
  text-align:center; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; }
#wc-calc .wc-tier.is-on { border-color:var(--wc-blue); background:var(--wc-pale); }
#wc-calc .wc-tier-name { display:block; font-size:13px; color:var(--wc-grey); }
#wc-calc .wc-tier-name b { display:block; font-size:21px; color:var(--wc-ink); }
#wc-calc .wc-tier-sub { display:block; font-size:12.5px; color:var(--wc-deep); margin-top:4px; line-height:1.3; }
#wc-calc .wc-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:#ffc83d; color:var(--wc-ink);
  font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; white-space:nowrap; }

#wc-calc .wc-services { display:flex; gap:10px; flex-wrap:wrap; }
#wc-calc .wc-svc { flex:1 1 150px; border:2px solid var(--wc-line); background:#fff; border-radius:12px; padding:10px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--wc-ink); text-align:center; }
#wc-calc .wc-svc small { display:block; font-weight:600; color:var(--wc-blue); font-size:13px; margin-top:2px; }
#wc-calc .wc-svc.is-on { border-color:var(--wc-blue); background:var(--wc-pale); }

#wc-calc .wc-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:start; }
#wc-calc .wc-items > .wc-group:first-child { margin-top:0; }
/* line the estimate box up with the first item row (below the 'Clothes' heading) */
#wc-calc .wc-summary { margin-top:var(--wc-first-row, 30px); }
#wc-calc .wc-group { font-family:'El Messiri',serif; color:var(--wc-deep); font-size:17px; margin:16px 0 6px; }
#wc-calc .wc-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--wc-line);
  border-radius:12px; margin-bottom:8px; background:#fff; }
#wc-calc .wc-item.has-qty { border-color:var(--wc-blue); background:#f5fbff; }
#wc-calc .wc-item-main { min-width:0; flex:1; }
#wc-calc .wc-item-img { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
#wc-calc .wc-item-name { display:block; font-weight:700; color:var(--wc-ink); font-size:15.5px; }
#wc-calc .wc-item-info { display:block; font-size:13px; color:var(--wc-grey); }
#wc-calc .wc-hang { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--wc-deep); margin-top:4px; cursor:pointer; }
#wc-calc .wc-qty { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#wc-calc .wc-qty button { width:36px; height:36px; border-radius:50%; border:1px solid var(--wc-line); background:#fff; color:var(--wc-ink);
  font-size:20px; line-height:1; cursor:pointer; }
#wc-calc .wc-qty .wc-plus { background:var(--wc-blue); border-color:var(--wc-blue); color:#fff; }
#wc-calc .wc-q { min-width:22px; text-align:center; font-weight:800; font-size:16px; }

#wc-calc .wc-summary { position:sticky; top:90px; border:2px solid var(--wc-line); border-radius:16px; padding:18px; background:#fff; }
#wc-calc .wc-summary h3 { font-family:'El Messiri',serif; color:var(--wc-ink); font-size:22px; margin:0 0 8px; }
#wc-calc .wc-sum-tier { font-weight:700; color:var(--wc-deep); margin:0 0 8px; }
#wc-calc .wc-lines { list-style:none; padding:0; margin:0 0 10px; max-height:260px; overflow:auto; }
#wc-calc .wc-lines li { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:4px 0; border-bottom:1px dashed var(--wc-line); }
#wc-calc .wc-lines em { color:var(--wc-grey); font-style:normal; font-size:12.5px; }
#wc-calc .wc-rows div { display:flex; justify-content:space-between; gap:10px; font-size:15px; padding:4px 0; }
#wc-calc .wc-rows small { color:var(--wc-grey); }
#wc-calc .wc-total { border-top:2px solid var(--wc-line); margin-top:6px; padding-top:10px !important; font-size:19px !important; color:var(--wc-ink); }
#wc-calc .wc-empty { color:var(--wc-grey); }
#wc-calc .wc-warn { color:#a15c00; background:#fff6e5; border-radius:8px; padding:8px 10px; font-size:13.5px; }
#wc-calc .wc-guide { display:flex; gap:10px; align-items:flex-start; background:var(--wc-pale); border-radius:12px; padding:10px 12px; margin:12px 0; font-size:13px; color:var(--wc-deep); }
#wc-calc .wc-guide b { display:block; color:var(--wc-ink); font-size:14px; }
#wc-calc .wc-book { display:block; width:100%; text-align:center; background:var(--wc-blue); color:#fff !important; border:0; border-radius:12px;
  padding:14px; font-size:17px; font-weight:800; cursor:pointer; text-decoration:none; font-family:inherit; }
#wc-calc .wc-book.is-off { opacity:.45; pointer-events:none; }
#wc-calc .wc-reset { background:none; border:0; color:var(--wc-grey); text-decoration:underline; margin-top:8px; cursor:pointer; font-family:inherit; font-size:13px; }
#wc-calc .wc-fine { font-size:12px; color:var(--wc-grey); margin:10px 0 0; }
#wc-calc .wc-mobile-bar { display:none; }
#wc-calc.is-loading .wc-items { min-height:200px; opacity:.5; }

@media (max-width: 860px) {
  #wc-calc h2 { font-size:28px; }
  #wc-calc .wc-tiers { grid-template-columns:repeat(2,1fr); row-gap:16px; }
  #wc-calc .wc-layout { grid-template-columns:1fr; }
  #wc-calc .wc-summary { position:static; margin-top:16px; }
  #wc-calc .wc-mobile-bar { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:50; justify-content:space-between; align-items:center;
    background:var(--wc-ink); color:#fff; border:0; border-radius:14px; padding:14px 16px; font-family:inherit; font-size:16px; font-weight:700;
    box-shadow:0 6px 20px rgba(0,0,0,.2); cursor:pointer; }
}