/* auction.chaddi.lk — mobile-first, no build step */

:root {
  --ink: #16181d;
  --ink-soft: #4b5160;
  --paper: #faf8f4;
  --card: #ffffff;
  --line: #e7e2d8;
  --navy: #12213f;
  --navy-dark: #0a1526;
  --gold: #c8912a;
  --gold-light: #f4c968;
  --green: #1a7a4c;
  --red: #b3392c;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(18, 33, 63, 0.08), 0 6px 16px rgba(18, 33, 63, 0.06);
  --shadow-lift: 0 4px 10px rgba(18, 33, 63, 0.10), 0 14px 28px rgba(18, 33, 63, 0.10);
  --max: 1180px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Sora", var(--font-body);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Safety net: no single element's width miscalculation should ever let the whole page
   scroll sideways. Nested overflow-x:auto regions (subnav pills, tables, thumb strips)
   still scroll independently — this only blocks the outer document from doing it too. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; }

/* Accessible, branded focus ring — replaces the inconsistent browser default so it stays
   visible on both the light page and the dark navy header (WCAG 2.4.7). */
:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.topbar :focus-visible, .subnav :focus-visible { outline-color: var(--gold-light); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.3em; height: 1.3em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--gold); color: var(--navy-dark);
  padding: .7rem 1.1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.star-rating { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold); font-weight: 700; }
.star-rating .icon { width: 1.05em; height: 1.05em; fill: currentColor; stroke: none; }
.star-rating .count { color: var(--ink-soft); font-weight: 500; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
/* h3 is used as an in-page section header (Description, Items, Evidence, etc.) — give it
   breathing room from whatever precedes it by default instead of relying on every template
   to remember an inline margin-top. Adjacent margins collapse to the larger value, so this
   only widens gaps that were too tight; it never doubles up with an existing larger margin. */
h3 { margin-top: 1.5rem; }
p { margin: 0 0 .75rem; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }

/* ---- top nav ---- */
.topbar { background: var(--navy); color: #fff; }
.topbar .wrap { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.02em; }
.brand span { color: var(--gold-light); }
.searchbar { flex: 1 1 220px; display: flex; }
.searchbar input { flex: 1; border: none; border-radius: 6px 0 0 6px; padding: .6rem .75rem; font-size: .95rem; min-height: 44px; }
.searchbar button {
  display: inline-flex; align-items: center; gap: .4rem; border: none; background: var(--gold); color: var(--navy-dark);
  font-weight: 700; padding: .55rem 1rem; min-height: 44px; border-radius: 0 6px 6px 0; cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.searchbar button:hover { background: var(--gold-light); }
@media (max-width: 560px) { .searchbar button .btn-label { display: none; } }
.navlinks { display: flex; gap: 1.1rem; align-items: center; font-size: .9rem; flex-wrap: wrap; }
.navlinks a { color: #dfe4ee; padding: .4rem 0; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; position: relative; }
.navlinks a:hover { color: #fff; }
.btn-pill { background: var(--gold); color: var(--navy-dark) !important; padding: .5rem 1rem; border-radius: 999px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; transition: background 150ms var(--ease-out), transform 150ms var(--ease-out); }
.btn-pill:hover { background: var(--gold-light); transform: translateY(-1px); }

.cart-count {
  background: var(--gold); color: var(--navy-dark); font-size: .68rem; font-weight: 800;
  min-width: 1.2em; height: 1.2em; padding: 0 .3em; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---- mobile nav toggle ---- */
.nav-toggle {
  display: none; order: 3; margin-left: auto; background: transparent; border: none; color: #fff;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,.1); }

@media (max-width: 768px) {
  .topbar .wrap { position: relative; }
  .brand { order: 1; }
  .nav-toggle { display: inline-flex; order: 2; }
  .searchbar { order: 4; flex-basis: 100%; }
  .navlinks {
    order: 5; display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; background: var(--navy-dark); border-radius: 10px; margin-top: .4rem;
    padding: .3rem .5rem; box-shadow: var(--shadow-lift);
  }
  .navlinks.open { display: flex; animation: nav-drop 160ms var(--ease-out); }
  .navlinks a { width: 100%; padding: .7rem .3rem; border-bottom: 1px solid rgba(255,255,255,.08); gap: .6rem; }
  .navlinks a:last-child { border-bottom: none; }
  .btn-pill { margin: .4rem 0; justify-content: center; }
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.subnav { background: var(--navy-dark); }
.subnav .wrap { display: flex; gap: 1.4rem; padding: .5rem 1rem; overflow-x: auto; white-space: nowrap; overscroll-behavior-x: contain; }
.subnav a { color: #b9c2d6; font-size: .85rem; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.subnav a:hover { color: #fff; }

/* ---- buttons/forms ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: none; border-radius: 8px; padding: .7rem 1.15rem; min-height: 44px;
  font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center;
  transition: background 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-light); text-decoration: none; }
.btn-outline { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; text-decoration: none; }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: .45rem .8rem; font-size: .82rem; min-height: 38px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

form.stack label { display: block; font-weight: 600; font-size: .85rem; margin: .8rem 0 .3rem; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=password],
form.stack input[type=number], form.stack input[type=tel], form.stack input[type=datetime-local],
form.stack select, form.stack textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; background: #fff;
}
form.stack .checkbox-row { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
form.stack .checkbox-row input { width: auto; }
.helptext { color: var(--ink-soft); font-size: .8rem; }
.errorlist { color: var(--red); list-style: none; padding: 0; margin: .2rem 0; font-size: .85rem; }

/* ---- messages ---- */
.messages { list-style: none; margin: .75rem 0; padding: 0; }
.messages li { padding: .6rem .9rem; border-radius: 8px; margin-bottom: .5rem; font-size: .9rem; }
.messages .success { background: #e4f5ec; color: var(--green); }
.messages .error { background: #fbe8e5; color: var(--red); }
.messages .info, .messages .warning { background: #fff3da; color: #8a5b12; }

/* ---- layout helpers ---- */
.section { padding: 1.5rem 0; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.section-title h2 { font-size: 1.15rem; }
.grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-bottom: 2.2rem;
}
/* Grid tracks default to minmax(auto, 1fr) — a card whose title has one long unbroken
   word (a model number, SKU) would otherwise refuse to shrink below that word's width
   and force the whole grid, and the page, wider than the viewport. */
.grid > * { min-width: 0; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1160px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.layout-2col { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 860px) { .layout-2col { grid-template-columns: 230px 1fr; } }

/* ---- filters disclosure: collapsed by default on phones so results aren't buried below
   a full-length filter form; always expanded on desktop where there's room beside results ---- */
.filters-details summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1rem; font-weight: 700; font-family: var(--font-head); min-height: 44px;
}
.filters-details summary::-webkit-details-marker { display: none; }
.filters-details summary::after {
  content: ""; width: .55em; height: .55em; margin-left: auto; border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform 150ms var(--ease-out);
}
.filters-details[open] summary::after { transform: rotate(-135deg); }
.filters-details summary .icon { color: var(--gold); }
@media (min-width: 860px) {
  .filters-details summary { display: none; }
  .filters-details > form { display: block !important; padding-top: 1rem !important; }
}
/* align-items: start (not the grid default stretch) — otherwise a short right column gets
   force-stretched to match a tall left column and leaves a dead gap of blank page below it. */
.layout-2col-r { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 860px) { .layout-2col-r { grid-template-columns: 1fr 320px; } }
/* On phones, the price/bid box would otherwise land below the full description, specs and
   reviews — put the buy decision (price + CTA) right under the gallery instead. */
@media (max-width: 859px) { .layout-2col-r > aside { order: -1; } }
.layout-2col { align-items: start; }
.layout-2col > *, .layout-2col-r > * { min-width: 0; }

/* ---- cards ---- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card-body { padding: 1rem; }

.listing-card { display: flex; flex-direction: column; height: 100%; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #d8d0bd; text-decoration: none; }
.listing-card .thumb { aspect-ratio: 1/1; background: linear-gradient(145deg, #f1ede4, #e7e0d1); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.listing-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.listing-card:hover .thumb img { transform: scale(1.04); }
.thumb .ph { color: #a89d84; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; }
.thumb .ph .icon { width: 28px; height: 28px; stroke-width: 1.5; opacity: .8; }
.thumb { background: linear-gradient(145deg, #f1ede4, #e7e0d1); display: flex; align-items: center; justify-content: center; }
.listing-card .info { padding: .65rem .75rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.listing-card .title { font-size: .88rem; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.listing-card .price { font-weight: 800; color: var(--navy); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.listing-card .meta { font-size: .75rem; color: var(--ink-soft); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .15rem; }
.listing-card .meta .icon { width: .95em; height: .95em; flex-shrink: 0; }

.badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge-auction { background: #fdeed0; color: #8a5b12; }
.badge-fixed { background: #dce8ff; color: #1b3a80; }
.badge-new { background: #e4f5ec; color: var(--green); }
.badge-used { background: #f0eee9; color: var(--ink-soft); }
.badge-featured { background: var(--gold); color: var(--navy-dark); }
.badge-status { background: #eee; color: #555; }

/* ---- listing detail ---- */
/* Fixed-aspect frame regardless of the source photo's dimensions — a tall/square upload no
   longer dictates the whole page's rhythm (was leaving a huge blank gap on sparse listings). */
.pdp-main-image {
  aspect-ratio: 4/3; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(145deg, #f1ede4, #e7e0d1); display: flex; align-items: center; justify-content: center;
}
.pdp-main-image img { width: 100%; height: 100%; object-fit: contain; }
.pdp-main-image .ph { color: #a89d84; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; }
.pdp-main-image .ph .icon { width: 32px; height: 32px; stroke-width: 1.5; opacity: .8; }
.pdp-thumbs { display: flex; gap: .4rem; margin-top: .5rem; overflow-x: auto; }
.pdp-thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.price-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.price-box .amount { font-size: 1.9rem; font-weight: 800; color: var(--navy); }
.auction-timer { background: var(--navy-dark); color: #fff; border-radius: 8px; padding: .6rem .8rem; font-size: .85rem; margin: .6rem 0; }

/* ---- breadcrumb + PDP stats ---- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; margin-bottom: .9rem; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb .sep { color: #c9c2b0; }
.pdp-stats { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.pdp-stats span { display: inline-flex; align-items: center; gap: .35rem; }
.pdp-stats .icon { flex-shrink: 0; }

/* ---- live countdown ---- */
.countdown { background: var(--navy-dark); border-radius: 8px; padding: .7rem .8rem; margin: .6rem 0; }
.countdown-digits { display: flex; align-items: baseline; gap: .2rem; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.countdown-digits .cd-d, .countdown-digits .cd-h, .countdown-digits .cd-m, .countdown-digits .cd-s { color: #fff; font-size: 1.3rem; font-weight: 800; }
.countdown-digits .cd-u { color: #b9c2d6; font-size: .72rem; font-weight: 600; margin-right: .45rem; }
.countdown-abs { color: #b9c2d6 !important; margin-top: .2rem; }
.countdown-urgent { background: var(--red); }
.countdown-urgent .cd-u, .countdown-urgent .countdown-abs { color: #ffe3df !important; }

/* ---- seller trust card ---- */
.seller-card { display: flex; align-items: center; gap: .7rem; }
.seller-avatar {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--navy);
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.verified-tick { display: inline-flex; align-items: center; gap: .2rem; color: var(--green); font-size: .78rem; font-weight: 700; }
.verified-tick .icon { width: 1.1em; height: 1.1em; }
.bid-list { list-style: none; padding: 0; margin: .5rem 0; font-size: .85rem; }
.bid-list li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--line); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; overscroll-behavior-x: contain; }
table.plain { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .88rem; }
table.plain th, table.plain td { text-align: left; padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.plain td:first-child, table.plain th:first-child { white-space: normal; }

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1rem 0; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; }
.stat-tile .n { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.stat-tile .l { font-size: .78rem; color: var(--ink-soft); }

.dash-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-tabs a { padding: .55rem 1rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; background: #eee; font-size: .82rem; font-weight: 600; color: var(--ink-soft); transition: background 150ms var(--ease-out), color 150ms var(--ease-out); }
.dash-tabs a:hover { background: #e2ded4; text-decoration: none; }
.dash-tabs a.active { background: var(--navy); color: #fff; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }

footer { background: var(--navy-dark); color: #b9c2d6; margin-top: 2.5rem; padding: 2rem 0; font-size: .85rem; }
footer a { color: #dfe4ee; }
footer .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { footer .cols { grid-template-columns: repeat(4, 1fr); } }

.cart-row { padding: .75rem; margin-bottom: .75rem; display: flex; gap: .9rem; align-items: center; }
.cart-row-thumb {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(145deg, #f1ede4, #e7e0d1); display: flex; align-items: center; justify-content: center;
}
.cart-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-thumb .ph .icon { width: 22px; height: 22px; color: #a89d84; }
.cart-row-body { flex: 1 1 200px; min-width: 0; }
.cart-row-price { text-align: right; flex-shrink: 0; }
@media (max-width: 480px) {
  .cart-row { flex-wrap: wrap; }
  .cart-row-body { flex-basis: 100%; order: 2; }
  .cart-row-price { order: 3; flex-basis: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
}

.msg-bubble { max-width: 80%; padding: .5rem .7rem; border-radius: 10px; margin-bottom: .5rem; font-size: .9rem; }
.msg-mine { background: var(--navy); color: #fff; margin-left: auto; }
.msg-theirs { background: #eee; }

.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; padding: 2.2rem 0; }
.hero h1 { font-size: 1.85rem; margin-bottom: .4rem; }
.hero p { color: #cfd6e6; }
.cat-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.cat-pills a { background: rgba(255,255,255,.12); color: #fff; padding: .5rem 1rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; font-size: .82rem; font-weight: 600; transition: background 150ms var(--ease-out), transform 150ms var(--ease-out); }
.cat-pills a:hover { background: var(--gold); color: var(--navy-dark); text-decoration: none; transform: translateY(-1px); }

.auction-timer { display: flex; align-items: center; gap: .5rem; }
.auction-timer .icon { flex-shrink: 0; opacity: .85; }
.section-title h2 { display: flex; align-items: center; gap: .45rem; }
.section-title h2 .icon { color: var(--gold); }