/* =====================================================================
   ACCRA GRID — widgets.css
   Styles for shared bento widgets rendered by assets/js/widgets.js:
   susu tile, live tile, dumsor tile, category tile.
   ===================================================================== */

/* ---------- Susu squad tile ---------- */
.ag-susu { gap: var(--s-4); }
.ag-susu__top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ag-susu__img { display: block; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--paper-2); }
.ag-susu__img img { width: 100%; height: 100%; object-fit: cover; }
.ag-susu__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-susu__title .ag-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-susu__title .ag-h3 { font-size: 18px; }
.ag-susu__title a:hover { text-decoration: underline; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; }
.ag-susu__mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-susu__left { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ag-susu__left b { color: var(--coral-ink); font-family: var(--font-num); }
.ag-susu__prices { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); }
.ag-susu__prices .ag-eyebrow { display: block; margin-bottom: 6px; }
.ag-susu__solo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ag-susu__solo .ag-eyebrow { margin-bottom: 2px; }
.ag-susu__save { font: 700 11px/1 var(--font-num); color: var(--volta); background: var(--lime); padding: 4px 6px; border-radius: 5px; }
.ag-susu__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ag-susu__time { display: inline-flex; align-items: center; gap: 6px; }
.ag-susu__time svg { width: 16px; height: 16px; color: var(--coral-ink); }
.ag-susu__wa { color: #1FAF5A; }
.ag-susu--featured .ag-susu__prices { background: var(--volta-2); box-shadow: var(--sh-inset); }
.ag-susu--featured .ag-susu__title a, .ag-susu--featured .ag-susu__title .ag-h3 { color: #fff; }
.ag-susu--featured .ag-susu__left { color: var(--volta-mute); }
.ag-susu--featured .ag-susu__left b { color: var(--coral); }
.ag-susu--featured .ag-old { color: var(--volta-mute); }
.ag-susu--featured .ag-timer--inline, .ag-susu--featured .ag-susu__time svg { color: var(--lime); }

/* ---------- Live selling tile ---------- */
.ag-live-tile { min-height: 360px; padding: var(--s-4); gap: var(--s-3); }
.ag-live-tile__top { position: absolute; top: var(--s-4); left: var(--s-4); right: var(--s-4); display: flex; align-items: center; gap: 8px; }
.ag-live-tile__views { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: rgba(11, 15, 12, .6); color: #fff; font: 700 11px/1 var(--font-num); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ag-live-tile__views svg { width: 13px; height: 13px; }
.ag-live-tile__chat { align-self: flex-start; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; color: #fff; line-height: 1.35; }
.ag-live-tile__chat b { color: var(--lime); }
.ag-live-tile__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ag-live-tile__host { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #E7ECE8; }
.ag-live-tile__host .ag-avatar { --av-ring: transparent; font-size: 10px; }
.ag-live-tile__title { font-size: 20px; color: #fff; }
.ag-live-tile__shelf { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-live-tile__prod { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--ink); min-height: 44px; }
.ag-live-tile__prod img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.ag-live-tile__prod .ag-num { font-size: 12px; font-weight: 700; }
.ag-live-tile__prod i { position: absolute; top: -7px; right: -4px; font: 800 8.5px/1 var(--font-num); font-style: normal; padding: 3px 4px; border-radius: 4px; background: var(--coral); color: var(--ink); letter-spacing: .06em; }

/* ---------- Dumsor tile ---------- */
.ag-dumsor { gap: var(--s-3); }
.ag-dumsor__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.08; color: #fff; }
.ag-dumsor__title span { color: var(--gh-gold); }
.ag-dumsor__bar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 26px; }
.ag-dumsor__bar i { border-radius: 3px; background: #26302A; }
.ag-dumsor__bar i.is-off { background: repeating-linear-gradient(135deg, var(--gh-gold) 0 3px, #B89400 3px 6px); }
.ag-dumsor__bar i.is-now { box-shadow: 0 0 0 1.5px var(--lime); }
.ag-dumsor__scale { display: flex; justify-content: space-between; font-size: 10px; color: #7D877F; margin-top: -6px; }
.ag-dumsor__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-dumsor__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.ag-dumsor__list img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.ag-dumsor__list a { font-size: 13px; font-weight: 600; color: #fff; }
.ag-dumsor__list .ag-price { color: #fff; }
.ag-dumsor__list .ag-price__cur { color: #96A098; }
.ag-dumsor__add { background: var(--lime); color: var(--ink); border-radius: 12px; }
.ag-dumsor__add:hover { background: #fff; }

/* ---------- Category tile ---------- */
.ag-cat {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; min-height: 108px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--sh-1); color: var(--ink); overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.ag-cat:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.ag-cat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--cat); background: color-mix(in srgb, var(--cat) 13%, white); }
.ag-cat__icon svg { width: 22px; height: 22px; }
.ag-cat__name { font-size: 13.5px; font-weight: 650; line-height: 1.2; margin-top: auto; }
.ag-cat__count { font-size: 10.5px; color: var(--ink-3); }
.ag-cat::after { content: ""; position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; border-radius: 12px; background: var(--cat); opacity: .08; transform: rotate(18deg); transition: transform var(--t-slow) var(--ease-out); }
.ag-cat:hover::after { transform: rotate(40deg) scale(1.3); }

/* Live tile needs a deeper scrim: chat + shelf sit on the photo */
.ag-live-tile::before { background: linear-gradient(180deg, rgba(11, 15, 12, .45) 0%, rgba(11, 15, 12, .05) 22%, rgba(11, 15, 12, .55) 48%, rgba(11, 15, 12, .9) 100%); }
.ag-live-tile__chat { background: rgba(11, 15, 12, .62); }