/* Reusable components */
h1 { font-size: 22px; margin: 2px 0 10px; }
h2 { font-size: 17px; margin: 14px 0 8px; }
h3 { font-size: 15px; margin: 10px 0 6px; }
p { margin: 6px 0; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: 13px; }
.price { font-weight: 800; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.full { width: 100%; }
.right { justify-content: flex-end; }

/* Card */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
  font-size: 14px; font-weight: 700; transition: transform .06s ease, opacity .15s;
  min-height: 42px; background: var(--surface2); color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-accent { background: var(--accent2); color: #171207; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: none; border-color: var(--border); }
.btn-sm { min-height: 34px; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn-link { background: none; color: var(--accent); padding: 2px 0; min-height: auto; font-weight: 600; }

/* Status badge */
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status.gray { background: var(--surface2); color: var(--muted); }
.status.amber { background: rgba(217,119,6,.15); color: var(--amber); }
.status.blue { background: rgba(59,130,246,.14); color: #3b82f6; }
.status.indigo { background: rgba(99,102,241,.14); color: #818cf8; }
.status.violet { background: rgba(139,92,246,.14); color: #a78bfa; }
.status.teal { background: rgba(20,184,166,.14); color: #14b8a6; }
.status.green { background: rgba(22,163,74,.14); color: var(--ok); }
.status.red { background: rgba(220,38,38,.13); color: var(--danger); }

/* Service card (grid) */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.svc-card .emoji { font-size: 32px; }
.svc-card h3 { margin: 4px 0 0; font-size: 15px; }
.svc-card .price { color: var(--accent2); }
.svc-card .btn { margin-top: 8px; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: 11px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); width: 100%;
}
.field textarea { min-height: 76px; resize: vertical; }
.field .err { color: var(--danger); font-size: 12px; }
.input-danger { border-color: var(--danger) !important; }

/* list rows */
.li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.li:last-child { border-bottom: 0; }
.li .grow { flex: 1; min-width: 0; }
.li .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* segments */
.segwrap { display: flex; background: var(--surface2); border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.seg { flex: 1; border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.seg.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 4px 0 10px; }
.chip { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); }
.chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* search */
.search { width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); margin-bottom: 10px; }

/* stepper / timeline */
.stepper { display: flex; gap: 4px; margin: 8px 0 12px; flex-wrap: wrap; }
.step { flex: 1; min-width: 46px; text-align: center; font-size: 10px; color: var(--muted); position: relative; }
.step::before { content: ''; position: absolute; top: 9px; left: 8px; right: 8px; height: 2px; background: var(--border); z-index: 0; }
.step:first-child::before { display: none; }
.step .dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--border); margin: 0 auto 3px; display: grid; place-items: center; font-size: 9px; }
.step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.cur .dot { background: var(--accent2); border-color: var(--accent2); color: #171207; }
.step.cur .lbl { color: var(--accent); font-weight: 700; }
.timeline { border-left: 2px solid var(--border); padding-left: 14px; margin: 6px 0; }
.timeline .ev { position: relative; margin-bottom: 10px; }
.timeline .ev::before { content: ''; position: absolute; left: -19px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }

/* order card */
.order-card { display: flex; flex-direction: column; gap: 5px; }
.order-num { font-weight: 800; letter-spacing: .3px; }

/* uploader */
.uploader { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 14px; text-align: center; color: var(--muted); }
.upload-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.upload-row .prg { flex: 1; height: 5px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.upload-row .prg i { display: block; height: 100%; background: var(--accent2); }

/* topline rows in detail */
.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.attr { background: var(--surface2); border-radius: 11px; padding: 9px 11px; }
.attr .k { font-size: 11px; color: var(--muted); }
.attr .v { font-weight: 700; font-size: 14px; }

/* empty/error states */
.state { text-align: center; padding: 46px 12px; color: var(--muted); }
.state .big { font-size: 40px; }
.state .btn { margin-top: 12px; }

/* progress bar for payments */
.bar { height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent2); }

/* ================= Form & clarity polish (dark-friendly, not tacky) ================= */
/* Buttons always visibly delineated */
.btn { border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary { border-color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.btn-accent { border-color: var(--accent2); }
.btn-danger { border-color: var(--danger); }
.btn-ghost { background: rgba(127,127,127,.04); }
.btn-ghost:hover { border-color: var(--muted); }

/* Inputs / textarea / selects — consistent, refined */
input, textarea, select { transition: border-color .15s ease, box-shadow .15s ease; caret-color: var(--accent2); }
input:not([type=checkbox]):not([type=radio]) { border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
textarea, .field textarea { min-height: 84px; resize: vertical; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px var(--brand-soft); }
select, input[type=file] { cursor: pointer; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b2' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
/* Uploader dropzone — clearer & interactive */
.uploader {
  border: 1.5px dashed color-mix(in srgb, var(--accent2) 50%, var(--border));
  border-radius: var(--radius); padding: 18px 14px; text-align: center; color: var(--text);
  background: var(--brand-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.uploader:hover { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 12%, transparent); }
.uploader .up-ic { font-size: 26px; display: block; margin-bottom: 4px; }
.tabsrc { display: flex; gap: 8px; margin: 4px 0 8px; }
.srcopt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-weight: 700; }
.srcopt.on { background: var(--accent2); color: #171207; border-color: var(--accent2); }

/* Modern uploader: dropzone + file list + live progress */
.dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--accent2) 55%, var(--border));
  border-radius: 16px; padding: 22px 14px; text-align: center; cursor: pointer;
  background: var(--brand-soft); transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 10%, transparent); }
.dropzone .up-ic { font-size: 30px; display: block; }
.dropzone b { display: block; margin-top: 6px; font-size: 15px; }
.dropzone .muted { display: block; margin-top: 2px; }
.dz-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dz-item { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 8px 10px; font-size: 13px; }
.dz-item .dz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.uprog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.uprog-bar { flex: 1; height: 9px; border-radius: 6px; background: var(--surface2); overflow: hidden; border: 1px solid var(--border); }
.uprog-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent2), color-mix(in srgb, var(--accent2) 55%, #fff)); transition: width .15s ease; }
.uprog-txt { min-width: 40px; text-align: right; font-size: 12px; font-weight: 800; color: var(--accent2); }

/* ================= Home (distinct from Services grid) ================= */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000));
  border-radius: 20px; padding: 22px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.hero h1 { margin: 0 0 6px; color: #fff; }
.hero p { margin: 0 0 14px; color: rgba(255,255,255,.85); }
.hero .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); }
.hero .btn-primary { background: var(--accent2); color: #171207; border-color: var(--accent2); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.tile {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  min-height: 122px; padding: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); transition: transform .06s ease, border-color .15s ease;
}
.tile:active { transform: scale(.98); }
.tile:hover { border-color: var(--accent2); }
.tile .t-emoji { font-size: 30px; line-height: 1; }
.tile b { font-size: 15px; }
.tile .t-price { margin-top: auto; font-weight: 800; color: var(--accent2); }
.tile .t-cta { font-size: 12px; font-weight: 700; color: var(--accent); }
.tile.featured {
  grid-column: 1 / -1; min-height: 158px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 14%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent2) 45%, var(--border));
}
.tile.featured .t-emoji { font-size: 40px; }
.tile.featured b { font-size: 17px; }
.tile.wide { grid-column: 1 / -1; min-height: 96px; flex-direction: row; align-items: center; gap: 12px; }
.tile.wide .t-price { margin-top: 0; }
@media (min-width: 600px) { .quickrow { grid-template-columns: repeat(4, 1fr); } }
.quickrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 14px; font-weight: 700; color: var(--text);
}
.quick:active { transform: scale(.98); }
.qbadge { background: var(--accent2); color: #171207; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; }

/* Dark-theme clarity: lighter accent + gold active states so nothing vanishes on dark */
:root[data-theme="dark"] {
  --accent: #3f5996;
  --muted: #a6aebe;
  --border: #2e3a55;
}
:root[data-theme="dark"] .bottom-nav button.active,
:root[data-theme="dark"] .bottom-nav button.active .ic,
:root[data-theme="dark"] .step.cur .lbl,
:root[data-theme="dark"] .seg.on { color: var(--accent2); }
:root[data-theme="dark"] .chip.on { background: var(--accent2); color: #171207; border-color: var(--accent2); }
:root[data-theme="light"] .bottom-nav button.active { color: var(--accent); }
:root[data-theme="light"] .bottom-nav button.active .ic { color: var(--accent2); }