/* ==========================================================================
   Puchh ke Lo — guided buying flow
   Prefix: .pkl-  |  Mobile-first; tuned to the Discover navy + amber palette.
   ========================================================================== */
:root {
	--pkl-ink: #0B1F3A;        /* Discover navy */
	--pkl-ink-2: #14294a;
	--pkl-accent: #F4A62A;     /* warm amber (logo / progress) */
	--pkl-cta: #EE7A1B;        /* orange CTA */
	--pkl-cta-dark: #d76a12;
	--pkl-green: #16a34a;
	--pkl-muted: #6b7280;
	--pkl-line: #e6e8ec;
	--pkl-soft: #f5f6f8;
}
/* ---- Entry banner (in results) — subtle, light ---------------------------- */
.pkl-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 2px 14px;                 /* 2px breathing room left & right */
	padding: 12px 14px;
	background: #fdf8ef;                 /* soft warm cream */
	border: 1px solid #f0e7d6;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(24,20,10,.03);
	color: var(--pkl-ink);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .28s, transform .28s;
	flex-wrap: wrap;
	grid-column: 1 / -1;                 /* span full width if dropped inside a grid */
}
.pkl-banner.pkl-in { opacity: 1; transform: translateY(0); }
.pkl-banner-ico {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
	background: #fbeed3;                 /* light amber tint */
	color: var(--pkl-accent);            /* amber line icon */
	display: grid; place-items: center;
}
.pkl-banner-ico svg { width: 22px; height: 22px; }
.pkl-banner-body { flex: 1 1 200px; min-width: 0; }
.pkl-banner-title { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--pkl-ink); }
.pkl-banner-sub { font-size: 12px; color: var(--pkl-muted); margin-top: 2px; line-height: 1.35; }
.pkl-banner-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pkl-banner-go {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	background: var(--pkl-accent); color: #3b2a06; border: none; cursor: pointer;
	padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 800; line-height: 1;
}
.pkl-banner-go:hover { background: #eb9a1c; }
.pkl-banner-go svg { display: block; width: 14px; height: 14px; }
.pkl-banner-skip {
	white-space: nowrap;
	background: #fff; border: 1px solid #e7ddcb; color: var(--pkl-ink); cursor: pointer;
	padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; line-height: 1;
}
.pkl-banner-skip:hover { background: #f7f2e9; }
@media (max-width: 560px) {
	.pkl-banner { gap: 10px; }
	.pkl-banner-title { font-size: 14.5px; }
	.pkl-banner-cta { margin-left: 0; width: 100%; }   /* full-width row under the text */
	.pkl-banner-go { flex: 1; justify-content: center; }
}
/* ---- Overlay shell -------------------------------------------------------- */
.pkl-overlay {
	position: fixed; inset: 0; z-index: 2147483000;   /* above sticky headers/nav, below nothing */
	background: rgba(11,31,58,.55); backdrop-filter: blur(4px);
	display: flex; align-items: flex-end; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity .25s;
	padding-top: env(safe-area-inset-top, 0px);        /* never slide under the notch / status bar */
	box-sizing: border-box;
}
.pkl-overlay.pkl-open { opacity: 1; pointer-events: auto; }
.pkl-sheet {
	background: #fff; width: 100%; max-width: 520px;
	max-height: 88vh;
	max-height: 88dvh;                                 /* dynamic viewport → excludes the browser chrome */
	border-radius: 22px 22px 0 0; overflow: hidden; display: flex; flex-direction: column;
	transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.3,1.05);
	box-shadow: 0 -8px 40px rgba(0,0,0,.25);
}
.pkl-overlay.pkl-open .pkl-sheet { transform: translateY(0); }
@media (min-width: 560px) {
	.pkl-overlay { align-items: center; padding: 24px; }
	.pkl-sheet { border-radius: 20px; max-height: 90vh; max-height: 90dvh; }
}
/* ---- Header (Back  /  Seedha products dekho) ----------------------------- */
.pkl-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px 4px; flex-shrink: 0;            /* pinned — never clipped */
}
.pkl-back, .pkl-exit {
	background: none; border: none; cursor: pointer; font-size: 14.5px; font-weight: 600;
	padding: 4px 2px;
}
.pkl-back { color: var(--pkl-ink); }
.pkl-exit { color: var(--pkl-muted); }
.pkl-exit:hover, .pkl-back:hover { color: var(--pkl-cta); }
/* ---- Segmented progress --------------------------------------------------- */
.pkl-progress { display: flex; gap: 6px; padding: 10px 18px 0; flex-shrink: 0; }
.pkl-seg { flex: 1; height: 4px; border-radius: 4px; background: var(--pkl-line); transition: background .25s; }
.pkl-seg.pkl-active { background: var(--pkl-accent); }
.pkl-seg.pkl-done { background: var(--pkl-accent); }
/* ---- Body / question ------------------------------------------------------ */
.pkl-body { padding: 18px 18px 24px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.pkl-qnum { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; color: var(--pkl-muted); text-transform: uppercase; }
.pkl-q-prompt { font-size: 21px; font-weight: 800; color: var(--pkl-ink); line-height: 1.28; margin-top: 8px; }
.pkl-q-help { font-size: 13.5px; color: var(--pkl-muted); margin-top: 8px; line-height: 1.45; }
.pkl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; align-items: stretch; }
.pkl-opt {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 16px 16px; min-height: 118px; height: 100%; box-sizing: border-box;   /* fill the row → equal-height tiles */
	border: 1.5px solid var(--pkl-line); border-radius: 16px; background: #fff;
	cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .08s, box-shadow .15s;
}
.pkl-opt:hover { border-color: #cfd4da; }
.pkl-opt:active { transform: scale(.98); }
.pkl-opt.pkl-sel { border-color: var(--pkl-ink); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,31,58,.06); }
.pkl-opt.pkl-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 0; height: auto; }
.pkl-opt-ico {
	width: 46px; height: 46px; border-radius: 12px; background: var(--pkl-soft);
	display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; flex-shrink: 0;
}
.pkl-opt.pkl-wide .pkl-opt-ico { margin-bottom: 0; }
.pkl-opt-label { font-size: 14.5px; font-weight: 800; color: var(--pkl-ink); line-height: 1.25; }
.pkl-opt-sub { font-size: 12px; color: var(--pkl-muted); font-weight: 500; }
.pkl-opt.pkl-wide .pkl-opt-label,
.pkl-opt.pkl-wide .pkl-opt-sub { display: block; }
.pkl-opt.pkl-wide > span:not(.pkl-opt-ico) { }
.pkl-opt.pkl-wide .pkl-opt-label { margin-bottom: 2px; }
.pkl-actions { margin-top: 20px; }
.pkl-btn { width: 100%; padding: 15px; border-radius: 12px; border: none; cursor: pointer; font-size: 15.5px; font-weight: 700; }
.pkl-btn-primary { background: var(--pkl-cta); color: #fff; }
.pkl-btn-primary:hover { background: var(--pkl-cta-dark); }
.pkl-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.pkl-textlink { display: block; margin: 14px auto 0; background: none; border: none; color: var(--pkl-muted); font-size: 13.5px; text-decoration: underline; cursor: pointer; }
/* ---- Loading -------------------------------------------------------------- */
.pkl-loading { text-align: center; padding: 46px 10px; }
.pkl-spinner { width: 44px; height: 44px; margin: 0 auto 16px; border: 4px solid var(--pkl-soft); border-top-color: var(--pkl-accent); border-radius: 50%; animation: pkl-spin .8s linear infinite; }
@keyframes pkl-spin { to { transform: rotate(360deg); } }
.pkl-loading p { color: var(--pkl-muted); font-size: 14px; }
/* ---- Recommendation ------------------------------------------------------- */
.pkl-rec-badge { display: inline-flex; align-items: center; gap: 6px; background: #eef7f0; color: var(--pkl-green); font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.pkl-rec-badge svg { display: block; }
.pkl-rec-card { border: 1px solid var(--pkl-line); border-radius: 16px; overflow: hidden; }
/* Image FITS (contain) so nothing is cropped; neutral pad + centered. */
.pkl-rec-imgwrap { width: 100%; aspect-ratio: 16/10; background: #fafbfc; border-bottom: 1px solid var(--pkl-line); display: grid; place-items: center; }
.pkl-rec-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; padding: 12px; box-sizing: border-box; }
.pkl-rec-info { padding: 14px 16px; }
.pkl-rec-name { font-size: 17px; font-weight: 800; color: var(--pkl-ink); line-height: 1.3; }
.pkl-rec-price { font-size: 20px; font-weight: 900; color: var(--pkl-ink); margin-top: 6px; }
.pkl-rec-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pkl-chip { font-size: 11.5px; font-weight: 600; color: #374151; background: var(--pkl-soft); padding: 4px 10px; border-radius: 999px; text-transform: capitalize; }
/* Headline + reason/tradeoff cards */
.pkl-headline { margin: 16px 0 12px; font-size: 15.5px; font-weight: 700; color: var(--pkl-ink); line-height: 1.45; }
.pkl-why, .pkl-tradeoff { border: 1px solid var(--pkl-line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.pkl-tradeoff { border-color: #f0dcc2; background: #fffaf2; }
.pkl-why-h { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pkl-muted); margin-bottom: 8px; }
.pkl-why ul, .pkl-tradeoff ul { list-style: none; margin: 0; padding: 0; }
.pkl-why li, .pkl-tradeoff li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #374151; line-height: 1.4; padding: 4px 0; }
.pkl-li-ic { flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.pkl-li-ok { color: var(--pkl-green); }
.pkl-li-warn { color: #c67611; }
/* Waiting for seller (reserve) */
.pkl-wait { text-align: center; padding: 30px 10px; }
.pkl-wait h3 { font-size: 18px; color: var(--pkl-ink); margin: 14px 0 6px; }
.pkl-wait p { font-size: 13.5px; color: var(--pkl-muted); line-height: 1.5; }
.pkl-wait-timer { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--pkl-ink); }
.pkl-warnbig { color: #c67611; display: flex; justify-content: center; margin-bottom: 10px; }
.pkl-seller { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pkl-line); border-radius: 12px; margin-top: 12px; }
.pkl-seller-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--pkl-ink); color: #fff; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.pkl-seller-name { font-size: 14.5px; font-weight: 800; color: var(--pkl-ink); }
.pkl-seller-meta { font-size: 12px; color: var(--pkl-muted); margin-top: 2px; }
/* ---- Reserve form + success ---------------------------------------------- */
.pkl-field { margin-top: 12px; }
.pkl-field label { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 5px; }
.pkl-field input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--pkl-line); border-radius: 11px; font-size: 15px; box-sizing: border-box; }
.pkl-field input:focus { outline: none; border-color: var(--pkl-cta); }
.pkl-err { color: #dc2626; font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.pkl-success { text-align: center; padding: 20px 6px; }
.pkl-success-check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #eef7f0; color: var(--pkl-green); display: grid; place-items: center; font-size: 34px; }
.pkl-success h3 { font-size: 19px; color: var(--pkl-ink); margin: 0 0 6px; }
.pkl-success p { font-size: 14px; color: var(--pkl-muted); line-height: 1.5; }
.pkl-hold { margin: 14px 0; padding: 12px; background: var(--pkl-soft); border-radius: 12px; font-size: 13.5px; color: #374151; }
.pkl-hold b { color: var(--pkl-ink); }
.pkl-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 13px; border-radius: 12px; background: #25D366; color: #fff; font-weight: 700; text-decoration: none; font-size: 15px; }