/*!
 * assets/cod-section.css — static CSS for the Cash On Delivery product-page form.
 *
 * Phase 3.0.C.8 perf: extracted from the inline <style> block previously
 * emitted by cod_section_shortcode() in COD_plugin.php. Moving ~190 lines
 * of static rules into this cacheable file saves ~16 KB per product-page
 * render on first visit, and the full payload on every subsequent visit
 * (HTTP cache hit) so customers pay the cost once per release.
 *
 * Dynamic admin-customizable values that vary per request stay in PHP:
 *   - 10 CSS custom properties (--cod-*) — injected via wp_add_inline_style
 *     so admin color changes take effect immediately.
 *   - Animation on/off — toggled via the class `.cod-animations-on` on the
 *     #custom-cod-checkout wrapper. Lets the CSS stay pure (no PHP
 *     interpolation in CSS rules) while still honoring admin settings.
 *
 * DO NOT add PHP-interpolated values here. Anything that varies per
 * request must go through wp_add_inline_style or a class hook.
 */

/* V3.32.9 — Field label rendered above each storefront input/select when
   block.label_visible !== false (Form Designer per-block toggle). The
   required asterisk uses the existing .cod-req hook (shared with the
   custom-field renderer, no new class — §1.5 reuse-first). */
.cod-section .cod-form-label {
    display: block;
    margin: 12px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2235;
    line-height: 1.3;
}
.cod-section .cod-form-label .cod-req {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
}

.cod-options-container {
    margin-bottom: 15px;
}

.cod-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #cbe3da;
    margin: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    min-height: 70px;
}

.cod-option.active {
    background: var(--cod-tier-active-bg);
    border: 2px solid;
    border-color: var(--cod-primary);
}

.cod-option.active .cod-badge {
    background: var(--cod-primary) !important;
}

.cod-option-left {
    display: flex;
    flex-direction: row;
}

.cod-label {
    color: black;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
}

.cod-badge {
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
    width: fit-content;
    color: var(--cod-primary-text) !important;
    font-size: 14px !important;
    font-style: normal !important;
    background: var(--cod-primary) !important;
    font-weight: 700 !important;
}

.cod-option-right {
    text-align: right;
}

.cod-original-price {
    color: #353A3EE6;
    text-decoration: line-through;
    font-size: 15px;
}

.cod-discounted-price {
    color: #000;
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
}

.cod-order-btn {
    width: 100%;
    color: var(--cod-primary-text) !important;
    font-size: 16px;
    padding: 5px;
    background: var(--cod-primary) !important;
    border-color: #ffffff !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: 13px !important;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.61) !important;
    font-weight: 400 !important;
    cursor: pointer;
}

/* Phase 3.0.C.8 — animation gated by .cod-animations-on class on the wrapper
   (was previously `<?php if ($form_cfg['enable_animations']) ?>` in PHP). */
#custom-cod-checkout.cod-animations-on .cod-order-btn {
    animation: shake-with-brake 2s ease-in-out infinite;
}

@keyframes shake-with-brake {
    0%   { transform: translateY(0); }
    5%   { transform: translateY(-5px); }
    10%  { transform: translateY(5px); }
    15%  { transform: translateY(-5px); }
    20%  { transform: translateY(5px); }
    25%  { transform: translateY(0); }
    30%  { transform: translateY(0); }
    40%  { transform: translateY(0); }
    50%  { transform: translateY(0); }
    60%  { transform: translateY(0); }
    70%  { transform: translateY(0); }
    80%  { transform: translateY(-3px); }
    85%  { transform: translateY(3px); }
    90%  { transform: translateY(-3px); }
    95%  { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

.cod-order-place-btn {
    width: 100%;
    color: var(--cod-primary-text) !important;
    font-size: 16px;
    padding: 5px;
    background: var(--cod-primary) !important;
    border-color: #ffffff !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: 13px !important;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.61) !important;
    font-weight: 400 !important;
    cursor: pointer;
}

#custom-cod-checkout.cod-animations-on .cod-order-place-btn {
    animation: up-down-animation 2s ease-in-out infinite;
}

@keyframes up-down-animation {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Phase 2.5 — modal/summary CSS removed (now-dead code). */
/* Phase 2.5.1 — flat inline form (no shadow), matches bundle visual treatment. */
.cod-inline-form {
    padding: 0;
    margin-top: 16px;
}

.cod-inline-form input,
.cod-inline-form button,
.cod-inline-form select {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

/* 3.12.3 / 3.12.4 / 3.12.5 — chevron positioning on the COD form selects.
   3.12.3 added padding-right: 32px → operator still saw chevron collé.
   3.12.4 bumped to 44px + !important → same complaint.
   ROOT CAUSE (caught in 3.12.5) : padding-right pushes only the TEXT,
   not the chevron. On native <select>, the browser draws the chevron
   over the right edge in absolute position — operator-visible padding
   doesn't move it.
   3.12.5 fix : disable native chevron (`appearance: none`), draw our
   own SVG chevron via background-image, position it with
   `background-position: right Npx center` so it has real breathing room.
   Selector widened to all known COD form select wrappers + IDs so we
   never miss a select rendered in a different wrapper. */
.cod-inline-form select,
#stateSelect,
#citySelect,
#custom-cod-checkout select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 40px !important;   /* room for the chevron + 16px right margin */
}

/* Hide IE/Edge legacy native dropdown arrow */
.cod-inline-form select::-ms-expand,
#stateSelect::-ms-expand,
#citySelect::-ms-expand,
#custom-cod-checkout select::-ms-expand {
    display: none !important;
}

/* Phase 2.5.1 — subtle hover animation on action buttons. Pure, light, professional:
   1px lift + a hint of brightness on hover, settles back on press. Short transition. */
#custom-cod-checkout .cod-order-place-btn,
#custom-cod-checkout .cod-pay-online-btn,
#custom-cod-checkout .cod-order-btn {
    transition: transform 0.15s ease-out, filter 0.15s ease-out, box-shadow 0.15s ease-out;
}

#custom-cod-checkout .cod-order-place-btn:hover,
#custom-cod-checkout .cod-pay-online-btn:hover,
#custom-cod-checkout .cod-order-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

#custom-cod-checkout .cod-order-place-btn:active,
#custom-cod-checkout .cod-pay-online-btn:active,
#custom-cod-checkout .cod-order-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.cod-option-inner {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-left: 10px;
}

.cod-image {
    margin: auto;
}

.cod-image img {
    width: 55px;
    height: 55px;
    border-radius: 5px;
}

#stateSelect,
#citySelect {
    margin: 10px auto;
    color: black;
    width: 100% !important;
    height: 48px !important;
    border-radius: 5px;
}

.form-row input {
    width: auto;
    height: auto;
}

/* ============================================================
   PHASE 3.5 — FORCE ONLINE FOR RISKY CUSTOMERS
   ============================================================ */

.cod-force-online-banner {
    background: #ffffff;
    color: #000000;
    border: 1px solid #e5e5e5;
    border-left: 4px solid var(--cod-primary, #1976D2);
    padding: 12px 16px;
    margin: 12px 0 16px 0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.cod-force-online-banner.cod-visible {
    opacity: 1;
}

#codOrderBtn.cod-force-online-hidden,
#codPayCodBtn.cod-force-online-hidden {
    /* V3.115.0 — was `opacity: 0` only, which hid the COD button but kept its
       box in the layout → an empty white gap remained below the Pay Online
       button (operator screenshot). Collapse it out of flow entirely so the
       Pay Online button sits flush above the next field. !important overrides
       the button's inline padding/height. */
    display: none !important;
}

/* 2-second attention pulse on Pay Online button when server rejects a COD submit */
@keyframes cod-force-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.0); }
}
#codPayOnlineBtn.cod-pulse-attention {
    animation: cod-force-online-pulse 1s ease-in-out 2;
}

/* ============================================================
   PHASE 3.6 — ONLINE PAYMENT INCENTIVE (OPI)
   ============================================================ */

/* Discount badge subtitle on Pay Online button */
#codPayOnlineBtn .cod-discount-badge {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    opacity: 0.95;
}

/* Popup z-index override in the checkout context (no thank-you wrapper for stacking) */
#rr-upsell-popup.cod-checkout-context {
    z-index: 99999;
}

/* ============================================================
   PHASE 3.6.3 — ORDER RECAP IN PAYMENT POPUPS
   ============================================================ */

/* Recap block inside the MoMo provider popup (and the deposit popup) */
.cod-fid-recap,
.cod-deposit-recap {
    background: #f6f6f7;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    text-align: left;
    font-size: 14px;
    color: #1f2235;
    line-height: 1.4;
}
.cod-fid-recap-line,
.cod-deposit-recap-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.cod-fid-recap-line span:first-child,
.cod-deposit-recap-line span:first-child {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.cod-fid-recap-line span:last-child,
.cod-deposit-recap-line span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cod-fid-recap-total,
.cod-deposit-recap-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #d6d6dc;
    font-weight: 700;
    font-size: 15px;
}
.cod-deposit-recap-payment {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--cod-primary, #1f2235);
    font-weight: 700;
    font-size: 16px;
    color: var(--cod-primary, #1f2235);
}

/* ============================================================================
 * Phase 3.11.2 — Coupon module styles (collapsible field + applied badge)
 * Discreet by default so the 95% of visitors who don't have a code don't see
 * any visual clutter. Inherits the form's primary color where useful.
 * ============================================================================ */

/* ============================================================================
 * Coupon module — 3.12.2 hardening : CSS Grid layout + !important targeting
 * to defend against theme overrides (OceanWP and similar themes were forcing
 * input width to ~0 via their own flex/width rules, making the input field
 * untypable). Grid with explicit columns is more deterministic than flex.
 * ============================================================================ */

/* Reset any theme list-marker that might leak in. */
#cod-coupon-collapsible,
#cod-coupon-collapsible * {
    box-sizing: border-box !important;
}

/* 3.12.8 — NO `display: ... !important` here. The JS toggles display via
   inline style (collapsibleWrap.style.display = 'none'|'') when a coupon is
   applied/removed. An `!important` rule would override the inline style and
   leave the collapsible permanently visible — exactly the bug introduced
   by the 3.12.2 defensive `display: block !important` and caught in 3.12.7
   testing (B21). Default div display:block is sufficient. */
#cod-coupon-collapsible {
    margin: 12px 0 6px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cod-coupon-details {
    border: 1px dashed #d1d5db !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: #fafafa !important;
    transition: background 160ms ease, border-color 160ms ease !important;
    width: 100% !important;
    display: block !important;
}

.cod-coupon-details[open] {
    background: #fff !important;
    border-style: solid !important;
    border-color: var(--cod-primary, #1f2235) !important;
    padding-bottom: 16px !important;
}

/* === Summary (clickable label) === */

.cod-coupon-summary {
    cursor: pointer !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    user-select: none !important;
    list-style: none !important;
    padding: 6px 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 120ms ease !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.cod-coupon-summary:hover {
    color: var(--cod-primary, #1f2235) !important;
}

.cod-coupon-details[open] .cod-coupon-summary {
    color: var(--cod-primary, #1f2235) !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

/* Hide native marker, replace with our own bigger chevron */
.cod-coupon-summary::-webkit-details-marker { display: none !important; }
.cod-coupon-summary::marker { display: none !important; content: '' !important; }

.cod-coupon-summary::after {
    content: "▾" !important;
    margin-left: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--cod-primary, #1f2235) !important;
    transition: transform 200ms ease !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border-radius: 6px !important;
    flex: 0 0 28px !important;
}

.cod-coupon-details[open] .cod-coupon-summary::after {
    transform: rotate(180deg) !important;
    background: var(--cod-primary, #1f2235) !important;
    color: #fff !important;
}

/* === Input row : Grid layout (1fr for input, 110px fixed for button) ===
   Grid is more reliable than flex against theme overrides because the column
   widths are set on the parent, not on the children — themes can't shrink
   .cod-coupon-input below the 1fr column. */

.cod-coupon-input-row {
    display: grid !important;
    grid-template-columns: 1fr 110px !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cod-coupon-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 16px !important;            /* 16px = no iOS zoom on focus */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace !important;
    background: #fff !important;
    color: #1f2235 !important;
    line-height: 46px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
}

.cod-coupon-input::placeholder {
    color: #9ca3af !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
}

.cod-coupon-input:focus {
    outline: none !important;
    border-color: var(--cod-primary, #1f2235) !important;
    box-shadow: 0 0 0 3px rgba(31, 34, 53, 0.12) !important;
}

.cod-coupon-apply-btn {
    width: 110px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--cod-primary, #1f2235) !important;
    color: var(--cod-primary-text, #fff) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: opacity 120ms ease, transform 80ms ease !important;
    letter-spacing: 0.3px !important;
    line-height: 46px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.cod-coupon-apply-btn:hover:not(:disabled) {
    opacity: 0.92 !important;
}

.cod-coupon-apply-btn:active:not(:disabled) {
    transform: translateY(1px) !important;
}

.cod-coupon-apply-btn:disabled {
    opacity: 0.5 !important;
    cursor: wait !important;
}

.cod-coupon-error {
    color: #9b1c1c !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
}

/* === Mobile : 90px button instead of 110px to leave more room for the input === */
@media (max-width: 480px) {
    .cod-coupon-input-row {
        grid-template-columns: 1fr 90px !important;
        gap: 8px !important;
    }
    .cod-coupon-input {
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 12px !important;
        font-size: 16px !important;        /* MUST stay 16px on mobile (iOS zoom prevention) */
    }
    .cod-coupon-apply-btn {
        width: 90px !important;
        height: 44px !important;
        font-size: 14px !important;
        line-height: 44px !important;
    }
}

/* ============================================================================
 * Applied badge — 3.12.7 redesign
 * Compact 1-line layout that REPLACES the collapsible in the same DOM slot
 * (sibling of the Order Now button). CSS Grid + !important everywhere to
 * defend against OceanWP and similar themes that were:
 *   • forcing flex children to wrap onto 5 lines
 *   • restyling <button class="cod-coupon-remove-link"> as a big dark button
 *     taking the full width
 *   • overriding the green text color into something unreadable
 * The Remove element is an <a> (not a <button>) to escape `button { ... }`
 * theme rules entirely. We still apply defensive resets in case the theme
 * targets anchors inside the form.
 * ============================================================================ */

#cod-coupon-badge-wrap,
#cod-coupon-badge-wrap * {
    box-sizing: border-box !important;
}

/* Same rationale as #cod-coupon-collapsible — JS toggles display via inline
   style. Default = hidden (badgeWrap.style.cssText sets display:none on
   creation). renderSuccess() flips it to display:'' on apply. */
#cod-coupon-badge-wrap {
    margin: 12px 0 6px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cod-coupon-applied-badge {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    background: #d1fadf !important;
    border: 1px solid #6cdc9b !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: #076d36 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

.cod-coupon-applied-text {
    display: block !important;
    color: #076d36 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cod-coupon-savings {
    font-weight: 700 !important;
    margin-left: 4px !important;
    color: #076d36 !important;
    white-space: nowrap !important;
}

/* Remove link — must escape OceanWP `button { ... }` AND `a.button { ... }`
   rules. We use <a> (no class="button"), strip every visual property a theme
   might apply, then re-style as a small underlined link. */
.cod-coupon-remove-link,
.cod-coupon-remove-link:link,
.cod-coupon-remove-link:visited {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #076d36 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: underline !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
    text-shadow: none !important;
    transition: color 120ms ease !important;
}

.cod-coupon-remove-link:hover,
.cod-coupon-remove-link:focus,
.cod-coupon-remove-link:active {
    color: #045023 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: underline !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Transient error state in badgeWrap (auto-apply path). */
#cod-coupon-badge-wrap .cod-coupon-error {
    display: block !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: 100% !important;
}

/* ============================================================================
 * V3.30.0 — layout properties moved from inline style="" attributes in
 * custom_cod_checkout_section() to keep the markup readable.
 *
 * Important caveat : the .cod-order-place-btn rule at the TOP of this file
 * (L129) already declares background, color, border-* and border-radius
 * with !important — those win over any declaration we put here regardless
 * of specificity. The inline style="" attributes for those four properties
 * were therefore already no-ops in V3.29.0 — the buttons rendered with the
 * primary colour + 13px radius set by the upstream rule. Removing the
 * inline style for those properties produces a byte-identical visual.
 *
 * This block only declares the properties that aren't pinned with
 * !important upstream — primarily padding + margin — so it preserves the
 * inline behaviour for the layout dimensions that actually mattered.
 *
 * Reconciling the !important conflict on background/border-radius (so the
 * Pay Online button can render in --cod-secondary as originally intended)
 * is a separate visual-design call and is deferred.
 * ============================================================================ */

/* Bug 7 fix — layout for the Pay Online and COD submit buttons. */
#custom-cod-checkout .cod-pay-online-btn {
    padding: 15px;
    margin-bottom: 10px;
}
#custom-cod-checkout #codPayCodBtn {
    padding: 15px;
}

/* V3.31.1 — Pay Online colour fix.
   The .cod-order-place-btn rule near the top of this file pins
   `background: var(--cod-primary) !important;` for storefront button
   styling, which used to win over the inline `var(--cod-secondary)`
   that the Pay Online button carried until V3.30.0. The button has
   therefore been rendering in the primary (dark slate) colour in
   production despite the operator's `_color_secondary` configured to a
   distinct value (e.g. green #0a7d4d). This rule restores the original
   design intent : the Pay Online button uses the configured secondary
   palette. Specificity #id + class beats the plain .cod-order-place-btn
   class so `!important` is needed only to overcome the legacy
   `!important` declarations. */
#custom-cod-checkout .cod-pay-online-btn,
#custom-cod-checkout #codPayOnlineBtn.cod-order-place-btn {
    background:    var(--cod-secondary)      !important;
    background-color: var(--cod-secondary)   !important;
    color:         var(--cod-secondary-text) !important;
}

/* Bug 8 fix — disclaimer paragraph below the buttons. Selector specificity
   (id + class + element = 1,1,1) wins over generic theme `p` rules
   (typically 0,0,1) without needing !important on any declaration. */
#custom-cod-checkout p.cod-disclaimer-text {
    font-size: 16px;
    text-align: center;
    margin-top: 5px;
    color: var(--cod-disclaimer);
    font-weight: 600;
}

/* ============================================================
   V3.33.14 — UX polish on the storefront order form.
   ============================================================ */

/* Bug #3 extension — when the customer clicks an Order Now / Pay Online
   button that's still in its 'invalid' state (some required field empty),
   handleInvalidOrderClick() in cod-section.js paints every empty required
   field with this class. The customer sees IMMEDIATELY which fields are
   missing rather than tapping a greyed-out button with no feedback (25
   rage-clicks on form#codOrderForm and 13 on #only-digits captured in 24h
   on gh.proliana.com before V3.33.14).
   The !important flags are intentional : they have to win over any theme
   border colour AND over the COD form's own focus rules so the highlight
   stays visible even when the customer tabs onto the field. */
#custom-cod-checkout .cod-field-error,
#custom-cod-checkout .cod-field-error:focus,
#custom-cod-checkout .cod-field-error:focus-visible {
    border: 2px solid #cc0000 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.18) !important;
    outline: none !important;
}

/* Bug #5 fix — phone prefix as a visual span inside the input frame.
   The .cod-phone-wrap div is injected by cod-section.js wrapping the
   existing #only-digits input ; the .cod-phone-prefix span renders the
   country code (e.g. '+233') flush-left over the input's left padding.
   No pipe, no slash, no separator character — just the prefix rendered
   as if it were part of the input itself. The input value carries digits
   only (the prefix is re-injected briefly at FormData construction time
   for the server, see cod-section.js submit handler). */
#custom-cod-checkout .cod-phone-wrap {
    position: relative;
    display: block;
}
#custom-cod-checkout .cod-phone-prefix {
    /* V3.33.15 — subtle "chip" treatment so the prefix reads as a fixed
       label rather than typed text. Background colour comes from the
       admin-configurable --cod-phone-prefix-bg CSS variable (Branding &
       Colours card → "Phone prefix background"). No vertical line, no
       slash, no separator character — just a soft tint behind the
       country code. */
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #444;
    font-size: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    background-color: var(--cod-phone-prefix-bg, #f1f5f9);
    padding: 6px 10px;
    border-radius: 4px;
}
#custom-cod-checkout .cod-phone-wrap > input#only-digits {
    /* paddingLeft is set dynamically in JS based on the actual rendered
       prefix span width including its background padding (see
       setupPhonePrefixOverlay()). The 70px static fallback below covers
       the brief moment between first paint and the first
       requestAnimationFrame measurement so digits never start under the
       prefix chip even on the very first frame. */
    padding-left: 70px;
}