/* Neelam Costume Store – components. Uses theme tokens when available. */
:root {
	--nfd-ink: var(--wp--preset--color--contrast, #1e1433);
	--nfd-pink: var(--wp--preset--color--primary, #d6246e);
	--nfd-gold: var(--wp--preset--color--secondary, #ffb627);
	--nfd-teal: var(--wp--preset--color--accent, #0f8f8b);
	--nfd-surface: var(--wp--preset--color--surface, #fff);
	--nfd-base: var(--wp--preset--color--base, #fff8f0);
	--nfd-muted: var(--wp--preset--color--muted, #6b6280);
	--nfd-border: var(--wp--preset--color--border, #eadfd3);
	--nfd-radius: 16px;
}

/* Buttons */
.nfd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	border: 0; border-radius: 999px; padding: .85rem 1.5rem; cursor: pointer;
	background: var(--nfd-pink); color: #fff; font-weight: 700; font-size: .95rem;
}
.nfd-btn--teal { background: var(--nfd-teal); }
.nfd-btn:hover { filter: brightness(.94); }

/* Size chart */
.nfd-size { margin: .25rem 0 .75rem; }
.nfd-size__btn {
	display: inline-flex; align-items: center; gap: .45rem;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--nfd-pink); font: inherit; font-weight: 700; font-size: .9rem;
	text-decoration: underline; text-underline-offset: 3px;
}
.nfd-size__btn--button {
	text-decoration: none; border: 2px solid var(--nfd-ink); border-radius: 999px;
	padding: .5rem 1rem; color: var(--nfd-ink);
}
.nfd-dialog {
	border: 0; border-radius: 22px; padding: 0; width: min(680px, 94vw); max-height: 86vh;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3); background: var(--nfd-surface); color: var(--nfd-ink);
}
.nfd-dialog::backdrop { background: rgba(20, 12, 36, .55); backdrop-filter: blur(3px); }
.nfd-dialog__head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.25rem; border-bottom: 1px solid var(--nfd-border);
	position: sticky; top: 0; background: var(--nfd-surface);
}
.nfd-dialog__head h2 { margin: 0; font-size: 1.25rem; }
.nfd-dialog__close {
	border: 0; background: var(--nfd-base); width: 2.4rem; height: 2.4rem; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer; color: inherit;
}
.nfd-dialog .nfd-table-wrap, .nfd-dialog .nfd-note { margin: 1rem 1.25rem; }
.nfd-table-wrap { overflow-x: auto; }
.nfd-size-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nfd-size-table th, .nfd-size-table td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--nfd-border); white-space: nowrap; }
.nfd-size-table thead th { background: var(--nfd-ink); color: var(--nfd-base); font-weight: 700; }
.nfd-size-table thead th:first-child { border-top-left-radius: 10px; }
.nfd-size-table thead th:last-child { border-top-right-radius: 10px; }
.nfd-size-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--nfd-gold) 10%, transparent); }
.nfd-note { color: var(--nfd-muted); font-size: .85rem; }

/* Pincode */
.nfd-pin {
	margin: 1rem 0; padding: 1rem; border-radius: var(--nfd-radius);
	border: 1.5px dashed var(--nfd-border); background: var(--nfd-surface);
}
.nfd-pin__label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; margin-bottom: .55rem; }
.nfd-pin__row { display: flex; gap: .5rem; }
.nfd-pin__input {
	flex: 1; min-width: 0; border-radius: 999px; border: 2px solid var(--nfd-border);
	padding: .6rem 1rem; font: inherit; letter-spacing: .12em; background: var(--nfd-base); color: inherit;
}
.nfd-pin__btn {
	border-radius: 999px; border: 2px solid var(--nfd-ink); background: var(--nfd-ink); color: var(--nfd-base);
	font-weight: 700; padding: .55rem 1.2rem; cursor: pointer;
}
.nfd-pin__result { margin: .6rem 0 0; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.nfd-pin__result:empty { display: none; }
.nfd-pin__result.is-ok strong { color: var(--nfd-teal); }
.nfd-pin__result.is-error { color: #b42318; }
.nfd-pin__result.is-loading { color: var(--nfd-muted); }
.nfd-pin__cod::before { content: "✓ "; color: var(--nfd-teal); font-weight: 800; }
.nfd-pin__cod.is-no::before { content: "• "; color: var(--nfd-muted); }
.nfd-pin__intl { margin: .45rem 0 0; font-size: .78rem; color: var(--nfd-muted); }

/* WhatsApp */
.nfd-wa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .75rem 1.25rem; border-radius: 999px; margin: .5rem 0;
	background: #25d366; color: #073b1c !important; font-weight: 700; text-decoration: none !important;
	transition: transform .15s ease;
}
.nfd-wa-btn:hover { transform: translateY(-1px); }
.nfd-wa-btn--product { width: 100%; background: transparent; border: 2px solid #25d366; color: #0b7a3b !important; }
.nfd-wa-cart { margin-top: .75rem; }
.nfd-wa-cart .nfd-wa-btn { width: 100%; }
.nfd-wa-float {
	position: fixed; right: 18px; bottom: 18px; z-index: 70;
	width: 58px; height: 58px; border-radius: 50%;
	display: grid; place-items: center; background: #25d366; color: #fff;
	box-shadow: 0 10px 25px rgba(37, 211, 102, .45);
	animation: nfd-pulse 2.6s ease-out infinite;
}
.nfd-wa-float svg { width: 30px; height: 30px; }
@keyframes nfd-pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .nfd-wa-float { animation: none; } }

/* Rentals */
.nfd-rent {
	margin: 1rem 0; border-radius: var(--nfd-radius); border: 2px solid var(--nfd-teal);
	background: color-mix(in srgb, var(--nfd-teal) 7%, var(--nfd-surface));
}
.nfd-rent__summary {
	cursor: pointer; list-style: none; padding: .9rem 1rem; display: flex; align-items: center; gap: .5rem;
	font-weight: 700; color: var(--nfd-teal);
}
.nfd-rent__summary::-webkit-details-marker { display: none; }
.nfd-rent__summary::after { content: "▾"; margin-left: auto; transition: transform .2s; }
.nfd-rent[open] .nfd-rent__summary::after { transform: rotate(180deg); }
.nfd-rent__form { padding: 0 1rem 1rem; }
.nfd-rent__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.nfd-field { margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .3rem; }
.nfd-field label { font-weight: 600; font-size: .85rem; }
.nfd-field input, .nfd-field select, .nfd-field textarea {
	border: 2px solid var(--nfd-border); border-radius: 12px; padding: .65rem .8rem; font: inherit;
	background: var(--nfd-surface); color: inherit; width: 100%; box-sizing: border-box;
}
.nfd-field input:focus, .nfd-field select:focus, .nfd-field textarea:focus { outline: none; border-color: var(--nfd-teal); }
.nfd-rent__calc { display: grid; gap: .25rem; margin: .25rem 0 .75rem; font-size: .9rem; }
.nfd-rent__calc span { display: flex; justify-content: space-between; }
.nfd-rent__calc em { font-style: normal; color: var(--nfd-muted); }
.nfd-rent__calc .is-total { border-top: 1px dashed var(--nfd-border); padding-top: .35rem; font-size: 1rem; }
.nfd-rent__calc.is-error { color: #b42318; }
.nfd-rent__terms { font-size: .78rem; color: var(--nfd-muted); }
.nfd-rent .nfd-btn { width: 100%; }

/* Bulk + contact forms */
.nfd-hp { position: absolute !important; left: -9999px; }
.nfd-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 1rem; }
.nfd-field--textarea { grid-column: 1 / -1; }
.nfd-form .nfd-field :focus-visible { outline: 3px solid color-mix(in srgb, var(--nfd-teal) 45%, transparent); outline-offset: 2px; }
.nfd-req { color: #b42318; }
.nfd-field.is-invalid input, .nfd-field.is-invalid textarea { border-color: #b42318; }
.nfd-field__error { color: #b42318; font-size: .85rem; font-weight: 600; margin: 0; }
.nfd-turnstile { margin: .25rem 0 1rem; min-height: 65px; }
.nfd-form button[disabled] { opacity: .65; cursor: progress; }
.nfd-contact { max-width: 760px; }
.nfd-alert { padding: 1rem 1.25rem; border-radius: 14px; margin-bottom: 1rem; font-weight: 600; }
.nfd-alert:focus { outline: 3px solid currentColor; outline-offset: 2px; }
.nfd-alert--ok { background: #e2f5f4; color: #0b5f5c; }
.nfd-alert--err { background: #fde7e7; color: #8f1d1d; }
.nfd-tiers { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.nfd-tiers li {
	border: 2px solid var(--nfd-ink); border-radius: 16px; padding: .9rem 1rem; background: var(--nfd-surface);
	box-shadow: 4px 4px 0 var(--nfd-ink); display: flex; flex-direction: column;
}
.nfd-tiers strong { font-size: 1.5rem; color: var(--nfd-pink); }
.nfd-tiers span { font-size: .85rem; color: var(--nfd-muted); }

/* Quick filters */
.nfd-qf { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.nfd-qf__group { display: flex; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; }
.nfd-qf__label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--nfd-muted); }
.nfd-qf__chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.nfd-qf__chips::-webkit-scrollbar { display: none; }
.nfd-chip {
	white-space: nowrap; border: 1.5px solid var(--nfd-border); border-radius: 999px; padding: .4rem .85rem;
	font-size: .85rem; font-weight: 600; text-decoration: none !important; color: var(--nfd-ink) !important;
	background: var(--nfd-surface);
}
.nfd-chip:hover { border-color: var(--nfd-ink); }
.nfd-chip.is-active { background: var(--nfd-ink); color: var(--nfd-base) !important; border-color: var(--nfd-ink); }
.nfd-qf__clear { font-size: .85rem; font-weight: 700; color: var(--nfd-pink); }

/* Occasions */
.nfd-occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.nfd-occ {
	position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem;
	border-radius: 20px; background: var(--nfd-occ); color: #1e1433 !important; text-decoration: none !important;
	min-height: 130px; transition: transform .2s ease, box-shadow .2s ease;
}
.nfd-occ:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 30px rgba(30, 20, 51, .15); }
.nfd-occ__emoji { font-size: 2rem; line-height: 1; }
.nfd-occ__name { font-weight: 800; margin-top: auto; }
.nfd-occ__when {
	position: absolute; top: .75rem; right: .75rem; font-size: .7rem; font-weight: 800;
	background: #1e1433; color: #fff; border-radius: 999px; padding: .2rem .55rem;
}
.nfd-countdown {
	display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem;
	padding: 1rem 1.25rem; border-radius: 20px; text-decoration: none !important;
	background: var(--nfd-ink); color: var(--nfd-base) !important;
}
.nfd-countdown__emoji { font-size: 2rem; }
.nfd-countdown__text { flex: 1 1 220px; }
.nfd-countdown__days b { font-size: 1.8rem; color: var(--nfd-gold); margin-right: .25rem; }
.nfd-countdown__cta { background: var(--nfd-gold); color: #1e1433; border-radius: 999px; padding: .55rem 1rem; font-weight: 800; }

/* Approximate prices */
.nfd-fx { display: block; font-size: .72em; font-weight: 500; color: var(--nfd-muted); margin-top: .1rem; }
.nfd-ccy {
	position: fixed; left: 14px; bottom: 14px; z-index: 65;
	background: var(--nfd-surface); color: var(--nfd-ink); border: 1px solid var(--nfd-border);
	border-radius: 999px; padding: .35rem .5rem .35rem .85rem; font-size: .78rem; font-weight: 600;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.nfd-ccy select { border: 0; background: transparent; font: inherit; font-weight: 800; color: inherit; }
@media (max-width: 781px) {
	.nfd-ccy { bottom: 96px; }
	.nfd-wa-float { bottom: 96px; }
}

.nfd-editor-placeholder { padding: 1rem; border: 1px dashed #c3c4c7; border-radius: 8px; font-size: 13px; color: #50575e; }
