/* =============================================================
 * Order-form skins
 * -------------------------------------------------------------
 * Loaded only on a product whose skin is not the default.
 *
 * Two layers:
 *   1. the repaint layer — reads --sk-* tokens, never sets a colour itself
 *   2. one token block per skin
 *
 * Nothing here changes a field, a label, a total or the submit button's
 * behaviour. If a rule below would move or hide a control, it does not
 * belong in this file.
 *
 * Specificity: the base stylesheet reaches (0,4,0) and (0,3,1) on these
 * surfaces, so every selector here carries the body class on top of the
 * base selector — one class more, state for state.
 * ============================================================= */

/* ---------- 1. repaint layer ---------- */

body.waslli-order-skinned .waslli-inline-order {
	/* Rebinding the theme tokens inside the form is what makes the dozens of
	   var(--waslli-*) usages in the base stylesheet follow the skin for free.
	   Scoped to the form, so nothing else on the page moves. */
	--waslli-primary: var(--sk-primary);
	--waslli-accent: var(--sk-accent);
	--waslli-dark: var(--sk-dark);
	--waslli-ink: var(--sk-ink);
	--waslli-muted: var(--sk-muted);
	--waslli-line: var(--sk-line);

	background: var(--sk-card-bg);
	border: 1px solid var(--sk-card-bd);
	border-top: 6px solid var(--sk-card-top);
	border-radius: var(--sk-card-radius);
	box-shadow: var(--sk-card-shadow);
}

/* Two panels inside the card carry their own light background at (0,3,1) in
   the base stylesheet — the urgency strip and the heading block. On a dark
   skin they are the whole difference between a dark card and a light one. */
body.waslli-order-skinned.single-product .waslli-inline-order > .waslli-urgency--form {
	background: var(--sk-cd-bg);
	border: 2px solid var(--sk-cd-bd);
	border-radius: var(--sk-radius);
	box-shadow: none;
}

body.waslli-order-skinned.single-product .waslli-inline-order-head {
	background: var(--sk-surface);
	border: 1px solid var(--sk-surface-bd);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-surface-shadow);
}

body.waslli-order-skinned .waslli-inline-order-head span {
	background: var(--sk-head-pill-bg);
	color: var(--sk-head-pill-ink);
}

body.waslli-order-skinned .waslli-inline-order-head h2 { color: var(--sk-dark); }
body.waslli-order-skinned .waslli-inline-order-head p { color: var(--sk-muted); }

/* Sections ------------------------------------------------- */

body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section {
	background: var(--sk-surface);
	border: 1px solid var(--sk-surface-bd);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-surface-shadow);
}

body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 [data-waslli-inline-summary] {
	background: var(--sk-surface);
	border-inline-start: 5px solid var(--sk-accent);
}

/* The "fill your details here" zone. */
body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section:not([data-waslli-inline-summary]) {
	background: var(--sk-zone-bg);
	border: 2px var(--sk-zone-style) var(--sk-zone-bd);
	box-shadow: var(--sk-surface-shadow);
}

body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section:not([data-waslli-inline-summary])::before {
	background: var(--sk-num-bg);
	color: var(--sk-num-ink);
	box-shadow: var(--sk-num-shadow);
}

body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section:not([data-waslli-inline-summary]):focus-within {
	border-style: solid;
	border-color: var(--sk-primary);
	background: var(--sk-zone-bg);
	box-shadow: 0 6px 22px var(--sk-glow);
}

body.waslli-order-skinned .waslli-form-section__num {
	background: var(--sk-num-bg);
	color: var(--sk-num-ink);
	box-shadow: var(--sk-num-shadow);
}

body.waslli-order-skinned .waslli-form-section__head h3 { color: var(--sk-dark); }
body.waslli-order-skinned .waslli-form-section__head small { color: var(--sk-muted); }

/* Summary --------------------------------------------------- */

body.waslli-order-skinned .waslli-form-summary {
	background: var(--sk-surface-2);
	border-radius: var(--sk-radius-sm);
}

body.waslli-order-skinned .waslli-form-summary__body strong { color: var(--sk-dark); }

body.waslli-order-skinned .waslli-form-summary__list li {
	background: var(--sk-chip-bg);
	color: var(--sk-chip-ink);
}

body.waslli-order-skinned .waslli-form-summary__list li svg { color: var(--sk-primary); }

/* Totals ---------------------------------------------------- */

body.waslli-order-skinned .waslli-form-totals {
	background: var(--sk-surface-2);
	border: 1.5px solid var(--sk-line);
	border-radius: var(--sk-radius-sm);
}

body.waslli-order-skinned .waslli-form-totals__row { color: var(--sk-ink); }
body.waslli-order-skinned .waslli-form-totals__row b { color: var(--sk-dark); }

body.waslli-order-skinned .waslli-form-totals__row--total {
	background: var(--sk-total-bg);
	border-radius: var(--sk-radius-sm);
}

body.waslli-order-skinned .waslli-form-totals__row--total span { color: var(--sk-dark); }
body.waslli-order-skinned .waslli-form-totals__row--total b { color: var(--sk-total-ink); }

/* Fields ---------------------------------------------------- */

body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section .waslli-field input,
body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section .waslli-field select,
body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-section .waslli-field textarea {
	background: var(--sk-field-bg);
	border: 1.5px solid var(--sk-field-bd);
	border-radius: var(--sk-field-radius);
	color: var(--sk-field-ink);
}

body.waslli-order-skinned .waslli-field input:focus,
body.waslli-order-skinned .waslli-field select:focus,
body.waslli-order-skinned .waslli-field textarea:focus {
	border-color: var(--sk-primary);
	box-shadow: 0 0 0 4px var(--sk-glow);
}

body.waslli-order-skinned .waslli-field label { color: var(--sk-muted); }
body.waslli-order-skinned .waslli-field__hint { color: var(--sk-muted); }

/* CTA ------------------------------------------------------- */

/* The button sits on its own panel, which the base stylesheet paints white
   at (0,3,1). Left alone it reads as a white card floating on a dark one. */
body.waslli-order-skinned.single-product .waslli-inline-order-form--v2 .waslli-form-cta {
	background: var(--sk-surface);
	border: 1px solid var(--sk-surface-bd);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-surface-shadow);
}

body.waslli-order-skinned .waslli-inline-order-submit--v2 {
	background: var(--sk-cta-bg);
	color: var(--sk-cta-ink);
	border-radius: var(--sk-cta-radius);
	box-shadow: var(--sk-cta-shadow);
}

body.waslli-order-skinned .waslli-inline-order-submit--v2:hover {
	box-shadow: var(--sk-cta-shadow);
	filter: brightness(1.05);
}

body.waslli-order-skinned .waslli-form-trust span { color: var(--sk-muted); }

/* The urgency strip that sits at the top of the form ----------
 *
 * Scoped to .waslli-inline-order on purpose. A skin repaints the order form,
 * not the page: since «عدّاد ومشاهدين» became a block a marketer can place in
 * the middle of a landing, a body-wide selector here repainted that copy too
 * and gave it the form's card colours on a white page. */

body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown {
	background: var(--sk-cd-bg);
	border: 2px solid var(--sk-cd-bd);
	border-radius: var(--sk-radius);
	box-shadow: none;
}

body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown::before { content: none; }

body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown [data-part] {
	background: var(--sk-cd-digit-bg);
	border: 1px solid var(--sk-cd-bd);
	border-radius: var(--sk-radius-sm);
	color: var(--sk-cd-digit-ink);
	box-shadow: var(--sk-cd-digit-shadow);
}

/* The clock badge blends its own orange into the gradient, so it has to be
   repainted outright rather than left to follow the accent token. */
body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown .waslli-urgency-icon {
	background: var(--sk-icon-bg);
	color: var(--sk-icon-ink);
	box-shadow: none;
}

body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown .sep { color: var(--sk-cd-bd); }
body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-countdown .waslli-urgency-label { color: var(--sk-muted); }
body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-visitors,
body.waslli-order-skinned .waslli-inline-order .waslli-urgency-widget .waslli-urgency-stock {
	background: var(--sk-chip-bg);
	border-color: var(--sk-cd-bd);
	color: var(--sk-chip-ink);
}

/* ---------- 2. the skins ---------- */

/* برتقالي ناري ---------------------------------------------- */
body.waslli-order-skin-orange {
	--sk-head-pill-bg: rgba(254, 97, 2, .14);
	--sk-head-pill-ink: #C2410C;
	--sk-icon-bg: linear-gradient(135deg, #FE6102, #FF8A3D);
	--sk-icon-ink: #fff;
	--sk-primary: #FE6102;
	--sk-accent: #F04E23;
	--sk-dark: #7A2E06;
	--sk-ink: #4A3225;
	--sk-muted: #9A7B69;
	--sk-line: #F6DCC9;
	--sk-glow: rgba(254, 97, 2, .16);

	--sk-card-bg: linear-gradient(180deg, #fff 0%, #FFF4EA 100%);
	--sk-card-bd: #F6DCC9;
	--sk-card-top: #FE6102;
	--sk-card-radius: 18px;
	--sk-card-shadow: 0 22px 60px rgba(240, 78, 35, .12);

	--sk-surface: #fff;
	--sk-surface-bd: #F6DCC9;
	--sk-surface-shadow: 0 2px 10px rgba(122, 46, 6, .05);
	--sk-surface-2: linear-gradient(135deg, #FFF8F2 0%, #FFF1E6 100%);
	--sk-radius: 18px;
	--sk-radius-sm: 12px;

	--sk-zone-bg: linear-gradient(180deg, #FFFDFB 0%, #FFF4EA 100%);
	--sk-zone-bd: rgba(254, 97, 2, .38);
	--sk-zone-style: dashed;

	--sk-chip-bg: rgba(254, 97, 2, .1);
	--sk-chip-ink: #7A2E06;

	--sk-field-bg: #fff;
	--sk-field-bd: #F0D6C2;
	--sk-field-ink: #3C2A1E;
	--sk-field-radius: 12px;

	--sk-cta-bg: linear-gradient(135deg, #F04E23 0%, #FE8A2B 100%);
	--sk-cta-ink: #fff;
	--sk-cta-radius: 14px;
	--sk-cta-shadow: 0 10px 26px rgba(240, 78, 35, .36), inset 0 -3px 0 rgba(0, 0, 0, .12);

	--sk-total-bg: linear-gradient(135deg, #FFE9D8 0%, #FFD8BC 100%);
	--sk-total-ink: #D63E12;

	--sk-num-bg: linear-gradient(135deg, #FE6102 0%, #C23B08 100%);
	--sk-num-ink: #fff;
	--sk-num-shadow: 0 4px 10px rgba(254, 97, 2, .3);

	--sk-cd-bg: linear-gradient(135deg, #FFF1E6 0%, #FFF8F2 100%);
	--sk-cd-bd: rgba(254, 97, 2, .3);
	--sk-cd-digit-bg: #fff;
	--sk-cd-digit-ink: #F04E23;
	--sk-cd-digit-shadow: 0 4px 14px rgba(254, 97, 2, .2);
}

/* ليلي غامق --------------------------------------------------- */
body.waslli-order-skin-midnight {
	--sk-head-pill-bg: rgba(46, 230, 168, .18);
	--sk-head-pill-ink: #9FF0D3;
	--sk-icon-bg: linear-gradient(135deg, #FF7A2F, #FFA44F);
	--sk-icon-ink: #1B0E05;
	--sk-primary: #2EE6A8;
	--sk-accent: #FF7A2F;
	--sk-dark: #F2FBF7;
	--sk-ink: #D4E4DD;
	--sk-muted: #8FA79D;
	--sk-line: rgba(255, 255, 255, .14);
	--sk-glow: rgba(46, 230, 168, .18);

	--sk-card-bg: linear-gradient(180deg, #14241F 0%, #0B1714 100%);
	--sk-card-bd: rgba(255, 255, 255, .1);
	--sk-card-top: #2EE6A8;
	--sk-card-radius: 20px;
	--sk-card-shadow: 0 26px 70px rgba(0, 0, 0, .45);

	--sk-surface: #162925;
	--sk-surface-bd: rgba(255, 255, 255, .1);
	--sk-surface-shadow: none;
	--sk-surface-2: #10201C;
	--sk-radius: 16px;
	--sk-radius-sm: 12px;

	--sk-zone-bg: #13241F;
	--sk-zone-bd: rgba(46, 230, 168, .35);
	--sk-zone-style: dashed;

	--sk-chip-bg: rgba(46, 230, 168, .12);
	--sk-chip-ink: #9FF0D3;

	--sk-field-bg: #0D1B18;
	--sk-field-bd: rgba(255, 255, 255, .16);
	--sk-field-ink: #F2FBF7;
	--sk-field-radius: 12px;

	--sk-cta-bg: linear-gradient(135deg, #FF7A2F 0%, #FFA44F 100%);
	--sk-cta-ink: #1B0E05;
	--sk-cta-radius: 14px;
	--sk-cta-shadow: 0 10px 26px rgba(255, 122, 47, .35);

	--sk-total-bg: rgba(46, 230, 168, .14);
	--sk-total-ink: #2EE6A8;

	--sk-num-bg: linear-gradient(135deg, #2EE6A8 0%, #0E9C6E 100%);
	--sk-num-ink: #072019;
	--sk-num-shadow: 0 4px 12px rgba(46, 230, 168, .3);

	--sk-cd-bg: #10201C;
	--sk-cd-bd: rgba(255, 122, 47, .4);
	--sk-cd-digit-bg: #1A2F29;
	--sk-cd-digit-ink: #FFB57A;
	--sk-cd-digit-shadow: none;
}

/* A dark card needs the images and the WooCommerce price HTML pulled back. */
body.waslli-order-skin-midnight .waslli-form-summary__image img { border-radius: 10px; }
body.waslli-order-skin-midnight .waslli-form-summary__price del { color: #7D948B; }
body.waslli-order-skin-midnight .waslli-form-summary__price ins,
body.waslli-order-skin-midnight .waslli-form-summary__price .amount { color: #2EE6A8; }
body.waslli-order-skin-midnight .waslli-form-totals__note { color: #C9B892; }
body.waslli-order-skin-midnight .waslli-form-totals__note strong { color: #FFC978; }

/* أبيض ناعم --------------------------------------------------- */
body.waslli-order-skin-clean {
	--sk-head-pill-bg: #F3F4F6;
	--sk-head-pill-ink: #374151;
	--sk-icon-bg: #111827;
	--sk-icon-ink: #fff;
	--sk-primary: #111827;
	--sk-accent: #111827;
	--sk-dark: #111827;
	--sk-ink: #374151;
	--sk-muted: #6B7280;
	--sk-line: #E5E7EB;
	--sk-glow: rgba(17, 24, 39, .08);

	--sk-card-bg: #fff;
	--sk-card-bd: #E5E7EB;
	--sk-card-top: #111827;
	--sk-card-radius: 10px;
	--sk-card-shadow: none;

	--sk-surface: #fff;
	--sk-surface-bd: #E5E7EB;
	--sk-surface-shadow: none;
	--sk-surface-2: #F9FAFB;
	--sk-radius: 10px;
	--sk-radius-sm: 8px;

	--sk-zone-bg: #fff;
	--sk-zone-bd: #E5E7EB;
	--sk-zone-style: solid;

	--sk-chip-bg: #F3F4F6;
	--sk-chip-ink: #374151;

	--sk-field-bg: #fff;
	--sk-field-bd: #D1D5DB;
	--sk-field-ink: #111827;
	--sk-field-radius: 8px;

	--sk-cta-bg: #111827;
	--sk-cta-ink: #fff;
	--sk-cta-radius: 8px;
	--sk-cta-shadow: none;

	--sk-total-bg: #F3F4F6;
	--sk-total-ink: #111827;

	--sk-num-bg: #111827;
	--sk-num-ink: #fff;
	--sk-num-shadow: none;

	--sk-cd-bg: #F9FAFB;
	--sk-cd-bd: #E5E7EB;
	--sk-cd-digit-bg: #fff;
	--sk-cd-digit-ink: #111827;
	--sk-cd-digit-shadow: none;
}

/* بنفسجي ملكي ------------------------------------------------- */
body.waslli-order-skin-royal {
	--sk-head-pill-bg: rgba(109, 74, 255, .12);
	--sk-head-pill-ink: #5B33E0;
	--sk-icon-bg: linear-gradient(135deg, #6D4AFF, #A855F7);
	--sk-icon-ink: #fff;
	--sk-primary: #6D4AFF;
	--sk-accent: #8B5CF6;
	--sk-dark: #2C1B66;
	--sk-ink: #453A6B;
	--sk-muted: #8A82AD;
	--sk-line: #E4DEFF;
	--sk-glow: rgba(109, 74, 255, .16);

	--sk-card-bg: linear-gradient(180deg, #fff 0%, #F6F4FF 100%);
	--sk-card-bd: #E4DEFF;
	--sk-card-top: #6D4AFF;
	--sk-card-radius: 26px;
	--sk-card-shadow: 0 26px 70px rgba(109, 74, 255, .16);

	--sk-surface: #fff;
	--sk-surface-bd: #EBE6FF;
	--sk-surface-shadow: 0 6px 20px rgba(109, 74, 255, .07);
	--sk-surface-2: linear-gradient(135deg, #F8F6FF 0%, #F1EDFF 100%);
	--sk-radius: 22px;
	--sk-radius-sm: 16px;

	--sk-zone-bg: linear-gradient(180deg, #FDFCFF 0%, #F6F4FF 100%);
	--sk-zone-bd: rgba(109, 74, 255, .3);
	--sk-zone-style: solid;

	--sk-chip-bg: rgba(109, 74, 255, .1);
	--sk-chip-ink: #3E2C8F;

	--sk-field-bg: #fff;
	--sk-field-bd: #E0D9FF;
	--sk-field-ink: #2C1B66;
	--sk-field-radius: 14px;

	--sk-cta-bg: linear-gradient(135deg, #6D4AFF 0%, #A855F7 100%);
	--sk-cta-ink: #fff;
	--sk-cta-radius: 18px;
	--sk-cta-shadow: 0 12px 30px rgba(109, 74, 255, .38);

	--sk-total-bg: linear-gradient(135deg, #EDE7FF 0%, #E0D6FF 100%);
	--sk-total-ink: #5B33E0;

	--sk-num-bg: linear-gradient(135deg, #8B5CF6 0%, #5B33E0 100%);
	--sk-num-ink: #fff;
	--sk-num-shadow: 0 4px 12px rgba(109, 74, 255, .3);

	--sk-cd-bg: linear-gradient(135deg, #F1EDFF 0%, #F8F6FF 100%);
	--sk-cd-bd: rgba(109, 74, 255, .28);
	--sk-cd-digit-bg: #fff;
	--sk-cd-digit-ink: #5B33E0;
	--sk-cd-digit-shadow: 0 4px 14px rgba(109, 74, 255, .18);
}

/* عريض وحاد --------------------------------------------------- */
body.waslli-order-skin-bold {
	--sk-head-pill-bg: #FFD400;
	--sk-head-pill-ink: #111111;
	--sk-icon-bg: #111111;
	--sk-icon-ink: #FFD400;
	--sk-primary: #111111;
	--sk-accent: #111111;
	--sk-dark: #111111;
	--sk-ink: #2B2B2B;
	--sk-muted: #6B6B6B;
	--sk-line: #111111;
	--sk-glow: rgba(255, 212, 0, .45);

	--sk-card-bg: #FFFDF5;
	--sk-card-bd: #111111;
	--sk-card-top: #111111;
	--sk-card-radius: 4px;
	--sk-card-shadow: 8px 8px 0 #111111;

	--sk-surface: #fff;
	--sk-surface-bd: #111111;
	--sk-surface-shadow: 4px 4px 0 #111111;
	--sk-surface-2: #FFF8DC;
	--sk-radius: 4px;
	--sk-radius-sm: 4px;

	--sk-zone-bg: #FFFDF5;
	--sk-zone-bd: #111111;
	--sk-zone-style: solid;

	--sk-chip-bg: #FFD400;
	--sk-chip-ink: #111111;

	--sk-field-bg: #fff;
	--sk-field-bd: #111111;
	--sk-field-ink: #111111;
	--sk-field-radius: 4px;

	--sk-cta-bg: #FFD400;
	--sk-cta-ink: #111111;
	--sk-cta-radius: 4px;
	--sk-cta-shadow: 5px 5px 0 #111111;

	--sk-total-bg: #FFD400;
	--sk-total-ink: #111111;

	--sk-num-bg: #111111;
	--sk-num-ink: #FFD400;
	--sk-num-shadow: none;

	--sk-cd-bg: #fff;
	--sk-cd-bd: #111111;
	--sk-cd-digit-bg: #FFD400;
	--sk-cd-digit-ink: #111111;
	--sk-cd-digit-shadow: 3px 3px 0 #111111;
}

/* Hard edges want square corners on the number badge too. */
body.waslli-order-skin-bold .waslli-form-section__num { border-radius: 4px; }
body.waslli-order-skin-bold .waslli-form-summary__list li { border-radius: 4px; }
body.waslli-order-skin-bold .waslli-inline-order-head span { border-radius: 4px; }

/* The offset shadow is a desktop flourish; on a phone it only steals width. */
@media (max-width: 600px) {
	body.waslli-order-skin-bold { --sk-card-shadow: 4px 4px 0 #111111; --sk-surface-shadow: 3px 3px 0 #111111; }
}

/* Reduced motion: the CTA sheen is decoration, and a skin should not be the
   thing that reintroduces it. */
@media (prefers-reduced-motion: reduce) {
	body.waslli-order-skinned .waslli-inline-order-submit--v2::before { display: none; }
}