/* =============================================================
   COMPONENTS.CSS — Reusable UI components
   ============================================================= */

/* ---------------- ICON DEFAULTS ----------------
   Inline SVG icons inherit ~1em unless a component sets a size.
   Prevents unsized icons from ballooning to fill their container. */
svg { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -0.16em; }
.ic svg { width: 20px; height: 20px; }
.breadcrumb svg { width: 14px; height: 14px; }
.offer-item .tag svg { width: 16px; height: 16px; }

/* ---------------- BUTTONS ---------------- */
.btn {
  --btn-bg: var(--c-primary);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-base);
  padding: 12px 22px; border-radius: var(--r-sm); background: var(--btn-bg); color: var(--btn-fg);
  position: relative; overflow: hidden; line-height: 1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base), filter var(--t-base);
  user-select: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-primary); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn.is-disabled { background: var(--c-disabled); color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 28px; font-size: var(--fs-md); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-sm); }
.btn-xs { padding: 6px 10px; font-size: var(--fs-xs); }

.btn-primary { --btn-bg: var(--c-primary); --btn-fg:#fff; }
.btn-gradient { background: var(--g-primary); }
.btn-gradient:hover { filter: brightness(1.05); }
.btn-dark { --btn-bg: var(--c-charcoal); }
.btn-dark:hover { box-shadow: var(--sh-lg); }
.btn-grape { --btn-bg: var(--c-grape); }
.btn-grape:hover { box-shadow: var(--sh-grape); }
.btn-success { --btn-bg: var(--c-success); }

.btn-outline { background: transparent; color: var(--c-primary); box-shadow: inset 0 0 0 1.5px var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-tint); box-shadow: inset 0 0 0 1.5px var(--c-primary); }
.btn-ghost { background: transparent; color: var(--c-text); }
.btn-ghost:hover { background: var(--c-bg-soft); transform: none; box-shadow: none; }
.btn-light { background: #fff; color: var(--c-charcoal); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.btn-light:hover { box-shadow: var(--sh-md); }

/* ripple holder */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.55); animation: ripple .6s var(--ease-out); pointer-events: none; }
.btn-ghost .ripple, .btn-light .ripple, .btn-outline .ripple { background: rgba(255,63,108,.25); }

/* icon button */
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-circle); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text); transition: background var(--t-base), color var(--t-base), transform var(--t-fast); position: relative; }
.icon-btn:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------------- BADGES & PILLS ---------------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 3px 8px; border-radius: var(--r-xs); text-transform: uppercase; letter-spacing: .04em; }
.badge-primary { background: var(--c-primary-lighter); color: var(--c-primary-darker); }
.badge-success { background: var(--c-success-bg); color: var(--c-success); }
.badge-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-dark { background: var(--c-charcoal); color: #fff; }
.badge-gold { background: var(--g-gold); color: #5b4a07; }
.badge-grape { background: #efeafe; color: var(--c-grape); }
.badge-flash { background: var(--g-flash); color: #fff; }

.count-bubble { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font-size: 10px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

/* ---------------- CHIPS ---------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-bg-soft); color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: all var(--t-base); white-space: nowrap; border: 1px solid transparent; }
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip.active { background: var(--c-primary); color: #fff; }
.chip .x { font-size: 14px; opacity: .8; }
.chip-outline { background: #fff; border: 1px solid var(--c-border-strong); }

/* ---------------- CARDS ---------------- */
.card { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.card-pad { padding: var(--s-5); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.glass { background: var(--g-glass); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.4); }

/* ---------------- PRODUCT CARD ---------------- */
.product-card { background: var(--c-surface); border-radius: var(--r-md); overflow: hidden; position: relative; cursor: pointer; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.product-card .pc-media { position: relative; aspect-ratio: 3/4; background: var(--c-bg-soft); overflow: hidden; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity var(--t-base); }
.product-card:hover .pc-media img { transform: scale(1.07); }
.product-card .pc-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.product-card .pc-wish { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: var(--sh-sm); transition: transform var(--t-fast), background var(--t-base); }
.product-card .pc-wish:hover { transform: scale(1.12); }
.product-card .pc-wish svg { width: 18px; height: 18px; stroke: var(--c-charcoal); fill: none; transition: all var(--t-base); }
.product-card .pc-wish.active { background: var(--c-primary); }
.product-card .pc-wish.active svg { stroke: #fff; fill: #fff; }
.product-card .pc-quick { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(101%); background: #fff; padding: 10px; transition: transform var(--t-base) var(--ease-out); z-index: 2; }
.product-card:hover .pc-quick { transform: translateY(0); }
.product-card .pc-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.product-card .pc-brand { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--c-text-strong); }
.product-card .pc-title { font-size: var(--fs-sm); color: var(--c-text-soft); }
.product-card .pc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.product-card .pc-price .now { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--c-text-strong); }
.product-card .pc-price .mrp { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; }
.product-card .pc-price .off { font-size: var(--fs-sm); color: var(--c-warning); font-weight: var(--fw-semibold); }
.product-card .pc-rating { display: inline-flex; align-items: center; gap: 4px; background: #fff; box-shadow: var(--sh-xs); border: 1px solid var(--c-border); padding: 3px 7px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-bold); position: absolute; bottom: 10px; left: 10px; z-index: 2; }
.product-card .pc-rating svg { width: 12px; height: 12px; fill: var(--c-success); }
.product-card .pc-rating .cnt { color: var(--c-muted); font-weight: var(--fw-regular); }

/* list view variation */
.product-card.list { flex-direction: row; }
.product-card.list .pc-media { width: 200px; flex-shrink: 0; aspect-ratio: 3/4; }
.product-card.list .pc-body { flex: 1; padding: 18px; }

/* ---------------- RATING STARS ---------------- */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; }
.stars .on { fill: var(--c-amber); } .stars .off { fill: var(--c-border-strong); }

/* ---------------- INPUTS ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.input, .textarea, .select {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--c-text); font-size: var(--fs-base); transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-lighter); }
.input.error { border-color: var(--c-danger); }
.field .hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field .err { font-size: var(--fs-xs); color: var(--c-danger); }
.textarea { resize: vertical; min-height: 96px; }

.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--c-muted); }
.input-icon .input { padding-left: 42px; }

/* checkbox / radio */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-base); user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; }

/* ---------------- SKELETON / SHIMMER ---------------- */
.skeleton { position: relative; overflow: hidden; background: var(--c-skeleton); border-radius: var(--r-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--c-skeleton-hl), transparent); animation: shimmer 1.3s infinite; }
.sk-card { border-radius: var(--r-md); overflow: hidden; }
.sk-img { aspect-ratio: 3/4; }
.sk-line { height: 12px; border-radius: var(--r-pill); margin-top: 8px; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }

/* ---------------- TOAST ---------------- */
#toast-stack { position: fixed; bottom: calc(var(--bottomnav-h) + 16px); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
@media (min-width:768px){ #toast-stack{ bottom: 24px; left: auto; right: 24px; transform:none; align-items:flex-end; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--c-ink); color: #fff; padding: 14px 18px; border-radius: var(--r-md); box-shadow: var(--sh-xl); font-size: var(--fs-base); font-weight: var(--fw-medium); animation: toastIn .35s var(--ease-spring); min-width: 240px; }
.toast.out { animation: toastOut .3s var(--ease) forwards; }
.toast .ti { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.toast.success .ti { background: var(--c-success); } .toast.error .ti { background: var(--c-danger); }
.toast.info .ti { background: var(--c-info); } .toast.cart .ti { background: var(--c-primary); }
.toast .ti svg { width: 14px; height: 14px; stroke: #fff; }

/* ---------------- MODAL ---------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,16,26,.55); backdrop-filter: blur(3px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--s-5); opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { background: #fff; border-radius: var(--r-xl); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; transform: translateY(24px) scale(.97); transition: transform var(--t-slow) var(--ease-spring); box-shadow: var(--sh-xl); }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-head h3 { font-size: var(--fs-lg); }
.modal-body { padding: var(--s-6); }

/* ---------------- DRAWER ---------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(20,16,26,.5); z-index: var(--z-drawer); opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(420px, 92vw); background: #fff; z-index: var(--z-drawer); transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--sh-xl); }
.drawer.left { right: auto; left: 0; transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); border-bottom: 1px solid var(--c-border); }
.drawer-body { flex: 1; overflow: auto; padding: var(--s-5); }
.drawer-foot { padding: var(--s-5); border-top: 1px solid var(--c-border); }

/* ---------------- ACCORDION ---------------- */
.accordion { border-bottom: 1px solid var(--c-border); }
.accordion-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; cursor: pointer; font-weight: var(--fw-semibold); }
.accordion-head .chev { transition: transform var(--t-base); }
.accordion.open .accordion-head .chev { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
.accordion.open .accordion-body { max-height: 600px; }
.accordion-body-inner { padding: 0 2px 16px; color: var(--c-text-soft); }

/* ---------------- BREADCRUMB ---------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .cur { color: var(--c-text); font-weight: var(--fw-semibold); }

/* ---------------- EMPTY STATE ---------------- */
.empty { text-align: center; padding: var(--s-10) var(--s-5); max-width: 420px; margin-inline: auto; }
.empty .emoji { font-size: 64px; margin-bottom: var(--s-4); }
.empty h3 { margin-bottom: var(--s-2); }
.empty p { margin-bottom: var(--s-5); }

/* ---------------- TABS ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); overflow-x: auto; }
.tab { padding: 14px 18px; font-weight: var(--fw-semibold); color: var(--c-text-soft); position: relative; white-space: nowrap; cursor: pointer; }
.tab.active { color: var(--c-primary); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-primary); border-radius: var(--r-pill); }

/* ---------------- AVATAR ---------------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--g-grape); color: #fff; display: grid; place-items: center; font-weight: var(--fw-bold); overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 72px; height: 72px; font-size: var(--fs-xl); }

/* ---------------- PROGRESS ---------------- */
.progress { height: 8px; background: var(--c-bg-soft); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--g-primary); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }

/* ---------------- TOOLTIP ---------------- */
.tip { position: relative; }
.tip::after { content: attr(data-tip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%) translateY(4px); background: var(--c-ink); color: #fff; font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: all var(--t-base); }
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* swatch */
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform var(--t-fast); position: relative; }
.swatch:hover { transform: scale(1.12); }
.swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-primary); }

/* size pill */
.size-pill { min-width: 46px; height: 46px; padding: 0 10px; border-radius: var(--r-sm); border: 1.5px solid var(--c-border-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--t-base); }
.size-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.size-pill.active { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.size-pill.disabled { color: var(--c-muted); border-color: var(--c-border); background: var(--c-bg-soft); cursor: not-allowed; text-decoration: line-through; }

/* stepper */
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden; }
.stepper button { width: 38px; height: 38px; font-size: var(--fs-lg); color: var(--c-text); display: grid; place-items: center; transition: background var(--t-base); }
.stepper button:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.stepper span { min-width: 40px; text-align: center; font-weight: var(--fw-semibold); }