/* Frontend visual matching to the legacy Wombat live layout. Display only — no pricing logic. */

/* v0.6.17.2 — per-product takeover: hide legacy Wombat / APF option UI + duplicate totals on GD-enabled
   products ONLY. This stylesheet is enqueued only on GD-enabled single-product pages, and every rule is
   additionally scoped to body.gdgpe-enabled-product, so catalogue / WPGB / non-GD products are never affected.
   The server-side WAPF field-groups filter already stops Wombat rendering/validating; this is the visual
   fallback (and covers any old custom snippet output that uses these classes). */
body.gdgpe-enabled-product .wapf-wrapper,
body.gdgpe-enabled-product .wapf-field-group,
body.gdgpe-enabled-product .wapf-field-groups,
body.gdgpe-enabled-product .wapf-field-container,
body.gdgpe-enabled-product .wapf-product-totals,
body.gdgpe-enabled-product .wapf-totals,
body.gdgpe-enabled-product .wapf-total,
body.gdgpe-enabled-product .wapf-options-total,
body.gdgpe-enabled-product .wapf-product-total,
body.gdgpe-enabled-product .wapf-grand-total{display:none !important;}

/* v0.6.17.4.7 — the brand blue + spacing variables now come from the admin Frontend Style controls, emitted on
   body.gdgpe-enabled-product (see GDGPE_Frontend::style_inline_css). Every rule below uses var(--…, <default>) so
   the layout is identical with no settings saved. The "hide as-low-as divider" CSS is also emitted from settings
   (default ON), so it is no longer hardcoded here. */
.gdgpe-fields{margin:0;font-size:14px;line-height:1.5;color:#333;}

/* "as low as RMx/pcs" price label — brand blue */
.gdgpe-aslowas{color:var(--gdgpe-primary-blue,#0069ff) !important;font-weight:600;}

/* v0.5.5 — Logo Printing details info box: compact, shown only for a position-based logo option */
.gdgpe-logo-printing-details{margin-top:8px;padding:8px 10px;background:#f6f7f7;border:1px solid #dcdcde;border-radius:6px;font-size:13px;color:#50575e;line-height:1.4;}
.gdgpe-logo-printing-details-title{font-weight:600;color:#1d2327;margin-bottom:3px;}
.gdgpe-logo-printing-details p{margin:2px 0;}

/* one divider BELOW the Quantity Discount table — uses Blocksy's own divider line + element spacing
   variables so the line style and the gap (line↔table, line↔Step 1) match the live theme exactly */
/* v0.6.17.4.7 — divider colour/thickness + the table→line gap + the line→Step 1 gap are all admin-controllable. */
.gdgpe-divider{border-top:var(--gdgpe-qty-divider-width,1px) solid var(--gdgpe-qty-divider-color,#e5e7eb);margin-top:var(--gdgpe-qty-divider-margin-top,var(--product-element-spacing,10px));margin-bottom:var(--gdgpe-step1-margin-top,14px);height:0;}
/* cancel the next step's own top margin so the line→Step 1 gap is purely the divider's bottom margin (the control) */
.gdgpe-divider + .gdgpe-step{margin-top:0;}

/* Quantity Discount — compact bordered table, bounded to the product summary column */
.gdgpe-qty-discount{width:100%;max-width:100%;box-sizing:border-box;margin:0;}
.gdgpe-qd-title{font-weight:600;font-size:14px;color:#333;margin:0 0 8px;}
.gdgpe-qd-wrap{width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;}
/* higher specificity + !important so the theme's table styles can't strip our borders / re-inflate padding */
.gdgpe-fields .gdgpe-qd-table{width:100%;max-width:100%;box-sizing:border-box;border-collapse:collapse !important;table-layout:fixed;margin:0;background:transparent;}
.gdgpe-fields .gdgpe-qd-table tr,
.gdgpe-fields .gdgpe-qd-table thead,
.gdgpe-fields .gdgpe-qd-table tbody{background:transparent;border:0;}
.gdgpe-fields .gdgpe-qd-table th,
.gdgpe-fields .gdgpe-qd-table td{border:1px solid #e5e5e5 !important;text-align:center;vertical-align:middle;padding:9px 8px !important;font-size:13px;line-height:1.25;color:#333;background:transparent;white-space:nowrap;}
.gdgpe-fields .gdgpe-qd-table th{font-weight:600;}
.gdgpe-fields .gdgpe-qd-table td{font-weight:400;}

/* Step titles — not heavy bold; grey subtitle */
.gdgpe-step{margin-top:18px;}
/* v0.6.17.4.7 — admin-controllable top spacing for Step 2 (Logo Printing) and the Totals section. */
.gdgpe-step-printing{margin-top:var(--gdgpe-step2-margin-top,18px);}
.gdgpe-step-title{font-size:15px;font-weight:400;color:#333;margin:0 0 10px;}
.gdgpe-step-title strong{font-weight:400;}
.gdgpe-step-sub{font-size:14px;font-weight:400;color:#555;}
/* v0.6.16 — Step 3 Custom Company Pages subtitle block (legacy; kept for back-compat) */
.gdgpe-step-company-pages .gdgpe-step-title{margin-bottom:4px;}
.gdgpe-step-sub-block{font-size:13px;font-weight:400;color:#666;line-height:1.4;margin:0 0 10px;}
/* v0.6.16.2 — Step 3 explanation box (shown only after an Add pages option is selected) + production lead line */
.gdgpe-company-pages-explain{font-size:13px;line-height:1.45;color:#555;background:#f6f7f7;border:1px solid #e2e4e7;border-radius:4px;padding:8px 10px;margin:8px 0 0;}
.gdgpe-company-pages-explain strong{display:block;color:#333;margin-bottom:2px;}
/* v0.6.16.4 — production lead time shown inside the Step 3 explanation box */
.gdgpe-company-pages-explain-lead{display:block;margin-top:6px;color:#996800;}
/* v0.6.16.6.2 — Printing Included-only Step 2: fixed (non-selectable) badge instead of a dropdown */
.gdgpe-included-fixed{margin:2px 0;}
.gdgpe-included-badge{display:inline-block;padding:6px 12px;border:1px solid #c3c4c7;border-radius:4px;background:#f6f7f7;color:#2c3338;font-weight:500;}
.gdgpe-production-lead{font-size:13px;color:#555;margin:10px 0 0;}

/* Step 1 — circular swatches only (no boxes, no names) */
.gdgpe-color-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.gdgpe-color-swatch-option{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;margin:0;padding:0;cursor:pointer;}
/* v0.6.17.4.6 — custom dark tooltip (Wombat-like) above each swatch on hover/focus; replaces the native title. */
.gdgpe-color-swatch-option::before{content:attr(data-colour-label);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--gdgpe-tooltip-bg,#2f3542);color:#fff;font-size:var(--gdgpe-tooltip-font,12px);font-weight:500;line-height:1.2;padding:5px 8px;border-radius:4px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:60;transition:opacity .12s ease;}
.gdgpe-color-swatch-option::after{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--gdgpe-tooltip-bg,#2f3542);opacity:0;visibility:hidden;pointer-events:none;z-index:60;transition:opacity .12s ease;}
/* v0.6.17.4.7 — show the tooltip ONLY for the hovered swatch (and keyboard focus). Using :focus-within made the
   clicked/selected swatch keep its tooltip (mouse click focuses the hidden radio) → two tooltips at once; we now
   gate keyboard display on :has(input:focus-visible) so a normal mouse click never leaves a tooltip stuck. */
.gdgpe-color-swatch-option:hover::before,
.gdgpe-color-swatch-option:hover::after,
.gdgpe-color-swatch-option:has(input:focus-visible)::before,
.gdgpe-color-swatch-option:has(input:focus-visible)::after{opacity:1;visibility:visible;}
.gdgpe-color-swatch-option input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.gdgpe-color-swatch{position:relative;width:44px;height:44px;border-radius:50%;display:block;border:1px solid #c9ccd1;background:var(--gdgpe-color);cursor:pointer;box-sizing:border-box;transition:box-shadow .12s ease,border-color .12s ease;}
/* v0.6.17.4.4 — selected state uses the SAME brand blue as the "as low as RM…" price (--gdgpe-primary-blue,
   #0069ff): white gap + blue ring + a small check badge, obvious on ANY colour (black / white / red / transparent
   / mixed). No reliance on a dark border. */
.gdgpe-color-swatch-option input:checked + .gdgpe-color-swatch{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gdgpe-primary-blue,#0069ff);border-color:var(--gdgpe-primary-blue,#0069ff);}
.gdgpe-color-swatch-option input:checked + .gdgpe-color-swatch::after{content:"";position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-sizing:content-box;background:var(--gdgpe-primary-blue,#0069ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px 11px no-repeat;}
.gdgpe-color-swatch-option input:focus-visible + .gdgpe-color-swatch{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gdgpe-primary-blue,#0069ff);}
.gdgpe-color-transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;background-color:#fff;}
/* v1.0.7 — Mixed swatch intentionally matches the approved v1.0.4 appearance: Wombat-style diagonal rainbow,
   normal selected outer ring and check badge. Do not remove the generic swatch selection ring. */
.gdgpe-color-swatch.gdgpe-color-mixed{background:linear-gradient(135deg,red,orange,yellow,green,cyan,blue,violet);border:2px solid #000;}
.gdgpe-color-swatch-option input:checked + .gdgpe-color-swatch.gdgpe-color-mixed,
.gdgpe-color-swatch-option input:focus-visible + .gdgpe-color-swatch.gdgpe-color-mixed{border-color:var(--gdgpe-primary-blue,#0069ff);}
/* v0.6.17.4.5 — Mixed colour details field: compact typography to match the product form (not an oversized input). */
.gdgpe-mixed-details{margin:14px 0 4px;}
.gdgpe-mixed-details-label{display:block;font-family:inherit;font-size:14px;font-weight:500;color:#333;margin-bottom:4px;}
.gdgpe-mixed-details input{width:100%;max-width:none;box-sizing:border-box;border:1px solid #d9dfe7;border-radius:4px;padding:9px 12px;font-family:inherit;font-size:14px;line-height:1.4;color:#333;background-color:transparent;transition:border-color .12s ease,box-shadow .12s ease;}
.gdgpe-mixed-details input::placeholder{font-size:14px;color:#8a8f98;opacity:1;}
/* v1.0.7 — Blocksy's later input:focus rule uses #fccbaf at the same old specificity. Scope through the GD-enabled
   body so the details input keeps one #0069ff border, and remove the extra GD box-shadow line. */
body.gdgpe-enabled-product .gdgpe-mixed-details input:focus{outline:none;border-color:var(--gdgpe-primary-blue,#0069ff);box-shadow:none;}
.gdgpe-mixed-details-help{margin:6px 0 0;font-family:inherit;font-size:13px;color:#666;}

/* Step 2 — full width select, clean border */
.gdgpe-printing-select,
.gdgpe-fields select[name="gdgpe_printing"]{width:100%;max-width:none;height:44px;box-sizing:border-box;border:1px solid #d9dfe7;border-radius:4px;padding:0 14px;font-size:15px;background-color:transparent;}
.gdgpe-printing-select:focus,
.gdgpe-fields select[name="gdgpe_printing"]:focus{outline:none;border-color:var(--gdgpe-primary-blue,#0069ff);box-shadow:0 0 0 1px var(--gdgpe-primary-blue,#0069ff);}
.gdgpe-lead-time{margin-top:10px;font-size:14px;color:#555;font-weight:400;}

/* Totals — bold labels + bold values; small grey per-pcs */
.gdgpe-totals{margin-top:var(--gdgpe-totals-margin-top,18px);}
.gdgpe-total-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;}
.gdgpe-total-row.gdgpe-grand{padding-top:9px;}
.gdgpe-total-label{font-weight:700;color:#333;font-size:15px;}
.gdgpe-amt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;text-align:right;}
.gdgpe-total-value{font-weight:700;color:#333;font-size:15px;}
.gdgpe-perpcs{display:block;font-size:12px;color:#72777c;font-weight:400;margin-top:2px;line-height:1.25;}
/* validation alert box (after Grand total, before qty / Add to Quotation) */
.gdgpe-message,.gdgpe-validation-message{display:none;width:100%;box-sizing:border-box;margin:14px 0 16px;padding:12px 14px;border:1px solid #f3b4b4;background:#fff5f5;color:#b42318;border-radius:6px;font-size:14px;line-height:1.4;font-weight:500;}
.gdgpe-message.is-visible,.gdgpe-validation-message.is-visible{display:block;}

/* soft-disabled look (clickable, so the warning box can still pop) */
.single_add_to_cart_button.gdgpe-soft-disabled{opacity:.55;}

/* accessibility helper (in case theme lacks it) */
.gdgpe-fields .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;}

/* v0.3.0 — compact printing breakdown under Printing total */
.gdgpe-printing-breakdown{display:block;font-size:11px;color:#8a8a8a;font-weight:400;text-align:right;line-height:1.3;margin-top:2px;}
.gdgpe-step-insertion{margin-top:18px;}

/* v1.1.2 — Contact-Us WhatsApp CTA: the SAME Add-to-Quotation button becomes a green "WhatsApp Us" button in place
   (stays on the qty row; mobile untouched). BOLD label + an inline white WhatsApp glyph injected by JS (.gdgpe-wa-ico,
   not a ::before — themes were eating the pseudo icon). Default + hover box-shadow + a slight lift give it depth
   instead of looking flat. !important beats the theme button; opacity:1 cancels the soft-disabled fade. */
.single_add_to_cart_button.gdgpe-as-whatsapp{background:#25d366 !important;border-color:#25d366 !important;color:#fff !important;opacity:1 !important;font-weight:700 !important;box-shadow:0 2px 5px rgba(18,140,70,.28);transition:background .15s ease,box-shadow .15s ease,transform .15s ease;}
.single_add_to_cart_button.gdgpe-as-whatsapp:hover,.single_add_to_cart_button.gdgpe-as-whatsapp:focus{background:#1ebe5d !important;border-color:#1ebe5d !important;color:#fff !important;box-shadow:0 6px 14px rgba(18,140,70,.42);transform:translateY(-1px);}
.single_add_to_cart_button.gdgpe-as-whatsapp:active{transform:translateY(0);box-shadow:0 2px 5px rgba(18,140,70,.32);}
.single_add_to_cart_button.gdgpe-as-whatsapp .gdgpe-wa-ico{width:18px;height:18px;vertical-align:-4px;margin-right:9px;fill:#fff;}