/* Hide Google reCAPTCHA v3 floating badge */
.grecaptcha-badge {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================================================
   Form fields UI improvements (registration / checkout / address forms)
   ========================================================================== */

/* --- Info icon instead of an always-visible field hint (PC + mobile) --- */

/* The input wrapper becomes the positioning context for the floating icon */
.has-field-info {
    position: relative;
}

.field-info {
    line-height: 0;
}

/* When attached to a real input, float the icon to the input's right edge */
.has-field-info .field-info {
    position: absolute;
    top: 9px;
    right: 20px;
    z-index: 2;
}

/* On phones the paired fields are narrow — sit the icon nearer the edge. */
@media (max-width: 767.98px) {
    .has-field-info .field-info {
        right: 8px;
    }
}

.field-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f5f5f;
    cursor: pointer;
    transition: color .15s ease;
}

.field-info-toggle:hover,
.field-info.open .field-info-toggle {
    color: #4cbb6c; /* theme accent green */
}

.field-info-toggle .material-icons {
    font-size: 19px;
    line-height: 1;
}

/* The hint text — hidden until the icon is clicked, shown as a popover */
.field-info-text {
    display: none;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    background: #3c3c3c;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.field-info-text::before {
    /*content: "";*/
    /*position: absolute;*/
    /*bottom: 100%;*/
    /*right: 8px;*/
    /*border: 6px solid transparent;*/
    /*border-bottom-color: #3c3c3c;*/
}

.field-info.open .field-info-text {
    display: block;
}

/* --- Two inputs per row — phones from 320px up to 767px.
       Below 320px each field stays full width (one per row). --- */
@media (min-width: 320px) and (max-width: 767.98px) {

    /* Scope: the personal-information form (#customer-form) and every address
       form (.js-address-form covers both #delivery-address and #invoice-address). */
    #customer-form section,
    .js-address-form section.form-fields {
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px;
        margin-right: -5px;
    }

    /* Everything spans the full width by default (checkboxes, hook output,
       the "use same address" toggle, etc.). Hidden inputs and display:none
       fields are not flex items, so they leave no empty cells. */
    #customer-form section > *,
    .js-address-form section.form-fields > * {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* ...only the data-entry fields are paired two per row */
    #customer-form section > .field-type-text,
    #customer-form section > .field-type-email,
    #customer-form section > .field-type-tel,
    #customer-form section > .field-type-number,
    #customer-form section > .field-type-password,
    #customer-form section > .field-type-select,
    #customer-form section > .field-type-countrySelect,
    .js-address-form section.form-fields > .field-type-text,
    .js-address-form section.form-fields > .field-type-email,
    .js-address-form section.form-fields > .field-type-tel,
    .js-address-form section.form-fields > .field-type-number,
    .js-address-form section.form-fields > .field-type-password,
    .js-address-form section.form-fields > .field-type-select,
    .js-address-form section.form-fields > .field-type-countrySelect {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Stack label over input inside each half-width field and remove the
       desktop 3/6/3 column grid so the input uses the full half-width. */
    #customer-form .form-group.row,
    .js-address-form .form-group.row {
        margin-left: 0;
        margin-right: 0;
    }

    #customer-form .form-group.row > [class*="col-md-"],
    .js-address-form .form-group.row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 5px;
        padding-left: 5px;
    }

    /* The desktop right-hand "Optional" helper column is noise on phones */
    #customer-form .form-group.row > .col-md-3.form-control-comment,
    .js-address-form .form-group.row > .col-md-3.form-control-comment {
        display: none;
    }

    /* Drop the Bootstrap .row negative gutter on the delivery-message block. */
    body#checkout section.checkout-step .order-options.row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   Shipping step — tidy carrier rows.
   One flex layout (radio / logo / name+delay / price) used identically on
   desktop and mobile. Selectors are scoped under
   body#checkout section.checkout-step .delivery-options-list so they beat the
   compiled theme.css rules for .delivery-option without !important.
   ========================================================================== */

/* Wrapper carries no visuals — the inner label is the clickable card. */
body#checkout section.checkout-step .delivery-options-list .delivery-option {
    background: transparent;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

body#checkout section.checkout-step .delivery-options-list .delivery-option-2 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    margin: 0;
    padding: 0.875rem 1.125rem;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Highlight the selected carrier (matches the rest of the option being checked). */
body#checkout section.checkout-step .delivery-options-list .delivery-option-2:has(input:checked) {
    border-color: #ff98a0;
    background: #f6f6f6;
}

body#checkout section.checkout-step .delivery-options-list .delivery-option-2 .custom-radio {
    flex: 0 0 auto;
    margin: 0;
}

body#checkout section.checkout-step .delivery-options-list .carrier-logo {
    flex: 0 0 auto;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body#checkout section.checkout-step .delivery-options-list .carrier-logo img {
    max-width: 100%;
    height: auto;
}

/* Name on top, delay underneath; takes the remaining space. */
body#checkout section.checkout-step .delivery-options-list .carrier-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

body#checkout section.checkout-step .delivery-options-list .carrier-info .carrier-name {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    word-break: break-word;
}

body#checkout section.checkout-step .delivery-options-list .carrier-info .carrier-delay {
    margin-top: 0.125rem;
    font-size: 0.875rem;
}

/* Price / "free" label pinned to the right edge. */
body#checkout section.checkout-step .delivery-options-list .carrier-price {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

/* Center the carrier extra content (pickup-point selector for Omniva/Venipak). */
body#checkout section.checkout-step .delivery-options-list .carrier-extra-content {
    justify-content: center;
    text-align: center;
    /* Kill the Bootstrap .row negative gutter — its child (.mjvp-pp-container)
       has no compensating col padding, so the alert/box overflows the card. */
    margin-left: 0;
    margin-right: 0;
}

/* Keep the Venipak pickup container and its alert inside the card edges. */
body#checkout section.checkout-step .delivery-options-list .carrier-extra-content .mjvp-pp-container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

body#checkout section.checkout-step .delivery-options-list .carrier-extra-content .mjvp-pp-container .alert {
    margin-left: 0;
    margin-right: 0;
}

/* Center the whole Omniva terminal block (the rendered .omniva-terminals-list
   widget, the select and the map button) regardless of their own width. */
body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details > select,
body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details .omniva-terminals-list {
    margin-left: auto;
    margin-right: auto;
}

/* On phones, narrow the Omniva terminal block to 80% and keep it centred. */
@media (max-width: 767.98px) {
    body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Let the inner widget / select fill that 80% width. */
    body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details > select,
    body#checkout section.checkout-step .delivery-options-list #omnivalt_parcel_terminal_carrier_details .omniva-terminals-list {
        width: 100%;
    }

    /* Venipak selected-terminal label — centred, with side breathing room, and
       let the name / address / comment spans wrap freely inside the box. */
    body#checkout section.checkout-step .delivery-options-list .tmjs-selected-terminal {
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        white-space: normal;
        word-break: break-word;
    }

    body#checkout section.checkout-step .delivery-options-list .tmjs-selected-terminal span {
        display: block;
        width: 100%;
    }
}

/* ==========================================================================
   CHECKOUT UI/UX REFINEMENTS  —  PAGE-LOCAL ONLY
   --------------------------------------------------------------------------
   Every rule below is scoped under `body#checkout` so NOTHING outside the
   checkout page is affected. No colors, fonts or brand elements are changed
   — only hierarchy, spacing, focus/validation states and the order summary.
   Palette reused as-is:
     --theme-main-color #ff98a0 (coral) · #4cbb6c (green) · #5f5f5f / #3c3c3c
     #e6e6e6 / #ebebeb (borders) · #f6f6f6 (tint) · #fff
   ========================================================================== */

/* --- 1. Step cards: clearer separation + emphasise the ACTIVE step --------- */

/* Soften the existing card (keeps white bg + border, adds radius + depth). */
body#checkout section.checkout-step {
    border-color: #ebebeb;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(60, 60, 60, .04);
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* The step the customer is on gets a coral accent rail + a touch more depth,
   so the eye lands on the section that needs action. */
body#checkout section.checkout-step.-current {
    border-color: #ff98a0;
    box-shadow: 0 2px 10px rgba(255, 152, 160, .18);
}

/* Step number badge → circular chip in the brand coral (was square-ish). */
body#checkout section.checkout-step .step-title .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin-right: .25rem;
    border-radius: 50%;
    background: var(--theme-main-color, #ff98a0);
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
}

/* Stepping back into a completed step re-adds -current, and theme.css then forces
   the number badge to display:inline-block (higher specificity), which kills the
   flex centering and drops the digit to the badge's top-left. Re-assert flex with
   a more specific selector (scoped to this exact state, so the non-current "done"
   state keeps its hidden number + green check). */
body#checkout section.checkout-step.-current.-reachable.-complete .step-title .step-number {
    display: inline-flex;
}

/* Completed-step check stays green (reinforces "done"). */
body#checkout section.checkout-step .step-title .done {
    color: #4cbb6c;
}

/* --- 2. Form fields: readable focus + obvious validation -------------------- */

/* Brand-coloured focus ring (keyboard + click) on every checkout input. */
body#checkout .checkout-step .form-control:focus,
body#checkout .checkout-step textarea:focus,
body#checkout .checkout-step select:focus {
    border-color: #ff98a0;
    box-shadow: 0 0 0 .2rem rgba(255, 152, 160, .25);
    outline: 0;
}

/* Error fields: red edge + clearer helper text (uses Bootstrap's has-error). */
body#checkout .checkout-step .form-group.has-error .form-control,
body#checkout .checkout-step .has-error .form-control,
body#checkout .checkout-step .form-control.is-invalid {
    border-color: #e74c3c;
}

body#checkout .checkout-step .form-group.has-error .form-control:focus,
body#checkout .checkout-step .has-error .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(231, 76, 60, .22);
}

body#checkout .checkout-step .help-block,
body#checkout .checkout-step .form-control-comment.text-danger,
body#checkout .checkout-step li.alert-danger,
body#checkout .checkout-step .has-error .form-control-label {
    color: #e74c3c;
}

/* Required-field asterisk: subtle but unmistakable. */
body#checkout .checkout-step .form-control-label .required,
body#checkout .checkout-step label .required {
    color: #e74c3c;
    font-weight: 700;
}

/* --- 3. Primary CTA: make the main action unmissable ----------------------- */

/* Consistent, tactile primary buttons across all steps (continue / pay). */
body#checkout .checkout-step .btn-primary {
    border: 0;
    transition: filter .15s ease, box-shadow .15s ease, transform .02s ease;
}

body#checkout .checkout-step .btn-primary:hover,
body#checkout .checkout-step .btn-primary:focus {
    filter: brightness(.95);
    box-shadow: 0 3px 10px rgba(255, 152, 160, .35);
}

body#checkout .checkout-step .btn-primary:active {
    transform: translateY(1px);
}

/* The final "Order with an obligation to pay" button — largest target,
   full width, centred: the single clear end-of-flow action. */
body#checkout #payment-confirmation .btn-primary {
    display: block;
    width: 100%;
    max-width: 24rem;
    margin: .5rem auto 0;
    padding: .875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 8px;
}

/* Disabled CTA reads as "not yet" rather than broken. */
body#checkout #payment-confirmation .btn-primary[disabled] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

/* --- 4. Payment options: same card language as the carrier rows ------------ */

body#checkout section.checkout-step .payment-options .payment-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .625rem;
    padding: .875rem 1.125rem;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout section.checkout-step .payment-options .payment-option:has(input:checked) {
    border-color: #ff98a0;
    background: #f6f6f6;
}

body#checkout section.checkout-step .payment-options .payment-option label {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    cursor: pointer;
}

body#checkout section.checkout-step .payment-options .payment-option label img {
    max-height: 32px;
    width: auto;
}

/* --- 5. Saved-address cards: softer selected state (keeps coral identity) --- */

body#checkout section.checkout-step .address-item {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout section.checkout-step .address-item.selected {
    border: 2px solid var(--theme-main-color, #ff98a0);
    background: #f6f6f6;
}

/* --- 5b. "Issue an invoice to the company" — tappable option card ----------
   Same visual language as the carrier / payment cards. The whole row is the
   hit target; checked state adopts the brand coral. footer.tpl keeps working
   (it targets input[name="invoice_to_company"], unchanged). ----------------- */
body#checkout section.checkout-step .company-invoice-toggle {
    margin-bottom: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout section.checkout-step .company-invoice-toggle:has(input:checked) {
    border-color: #ff98a0;
    background: #f6f6f6;
}

/* Lay the indicator + label out as one centred, full-width clickable row. */
body#checkout section.checkout-step .company-invoice-toggle .custom-checkbox {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0;
    padding: .875rem 1.125rem;
}

/* Keep the 20x20 indicator box from shrinking in the flex row. */
body#checkout section.checkout-step .company-invoice-toggle .custom-checkbox input[type="checkbox"] + span {
    flex: 0 0 auto;
    margin-right: 0;
}

body#checkout section.checkout-step .company-invoice-toggle .custom-checkbox label {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

/* Tie the checked indicator to the brand coral (theme default is grey). */
body#checkout section.checkout-step .company-invoice-toggle .custom-checkbox input[type="checkbox"]:checked + span {
    border-color: #ff98a0;
}

body#checkout section.checkout-step .company-invoice-toggle .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #ff98a0;
}

/* --- 5c. "Use this address for invoice too" — light inline toggle ----------
   Deliberately NOT a bordered card (that treatment is reserved for the company
   option). A thin divider groups it under the address fields; the whole label
   is clickable and the check adopts the brand coral. ------------------------ */
body#checkout section.checkout-step .use-same-address-toggle {
    margin-top: .5rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
    border-top: 1px solid #ebebeb;
}

body#checkout section.checkout-step .use-same-address-toggle .custom-checkbox {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
}

body#checkout section.checkout-step .use-same-address-toggle .custom-checkbox input[type="checkbox"] + span {
    flex: 0 0 auto;
    margin-right: 0;
}

body#checkout section.checkout-step .use-same-address-toggle .custom-checkbox label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
    color: #5f5f5f;
}

body#checkout section.checkout-step .use-same-address-toggle .custom-checkbox input[type="checkbox"]:checked + span {
    border-color: #ff98a0;
}

body#checkout section.checkout-step .use-same-address-toggle .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #ff98a0;
}

/* --- 6. Order summary: more visible + sticky on desktop -------------------- */

body#checkout #js-checkout-summary.card {
    border: 1px solid #ebebeb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(60, 60, 60, .06);
}

/* Follow the customer down the page on desktop so the total + CTA context
   is always in view (pure CSS, no JS). Disabled on tablet/phone. */
@media (min-width: 992px) {
    body#checkout #js-checkout-summary.card {
        position: sticky;
        top: 1rem;
    }
}

/* Tidy summary rows. */
body#checkout #js-checkout-summary .cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .25rem 0;
}

/* The grand total is the anchor figure — make it stand out. */
body#checkout #js-checkout-summary .cart-total .label,
body#checkout #js-checkout-summary .cart-total .value {
    font-size: 1.125rem;
    font-weight: 700;
}

body#checkout #js-checkout-summary .cart-total .value {
    color: var(--theme-main-color, #ff98a0);
}

/* "show details" / "have a promo code" links read as actions. */
body#checkout #js-checkout-summary .cart-summary-products > p > a,
body#checkout #js-checkout-summary .promo-code-button {
    font-weight: 500;
}

/* Promo code field + button on one neat line. */
body#checkout #js-checkout-summary .promo-code form {
    display: flex;
    gap: .5rem;
}

body#checkout #js-checkout-summary .promo-code .promo-input {
    flex: 1 1 auto;
    min-width: 0;
}

body#checkout #js-checkout-summary .promo-code .btn {
    flex: 0 0 auto;
}

/* --- 7. Reduce visual noise / cognitive load ------------------------------- */

/* Calmer dividers and consistent vertical rhythm between summary blocks. */
body#checkout #js-checkout-summary hr.separator {
    margin: .75rem 0;
    border-color: #ebebeb;
}

/* Group the post-carrier order options (message, gift, recyclable) so they
   read as a secondary block rather than competing with the carrier list. */
body#checkout section.checkout-step .order-options {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #ebebeb;
}

/* --- 8. Accessibility: visible keyboard focus on custom controls ----------- */

body#checkout .checkout-step .custom-radio input:focus-visible + span,
body#checkout .checkout-step .custom-checkbox input:focus-visible + span,
body#checkout #js-checkout-summary a:focus-visible,
body#checkout .checkout-step a:focus-visible {
    outline: 2px solid #ff98a0;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- 9. Mobile: tighter, full-width, thumb-friendly ------------------------ */

@media (max-width: 767.98px) {

    /* The theme indents step content by ~37px; reclaim that space on phones so
       the inputs reach toward both card edges. */
    body#checkout section.checkout-step .content {
        padding-left: 0;
        padding-right: 0;
    }

    body#checkout section.checkout-step {
        padding: .75rem .5rem;
    }

    /* CTAs span the full width — bigger, easier tap targets. */
    body#checkout .checkout-step .btn-primary,
    body#checkout #payment-confirmation .btn-primary {
        width: 100%;
        max-width: 100%;
    }

    /* Carrier & payment price/logo stay aligned even on narrow screens. */
    body#checkout section.checkout-step .payment-options .payment-option {
        flex-wrap: wrap;
    }
}

/* --- 10. Mobile two-column form: tighter gutters + non-wrapping labels ------
   Checkout-only refinement of the paired-fields layout. Narrower gutters give
   each input more width (bigger), and labels are forced onto a single line so
   longer labels no longer break into two rows on small phones (~378px).
   Overrides the shared mobile block above via the extra `body#checkout`. ----- */
@media (min-width: 320px) and (max-width: 767.98px) {

    /* The theme indents these forms by 5px on the LEFT only, which makes the
       left gap bigger than the right. Zero it so both sides match and the
       fields use the full width. */
    body#checkout section.checkout-step #customer-form,
    body#checkout section.checkout-step #delivery-address,
    body#checkout section.checkout-step #invoice-address,
    body#checkout section.checkout-step #login-form,
    body#checkout section.checkout-step .js-address-form {
        margin-left: 0;
        margin-right: 0;
    }

    /* Gutter 10px -> 4px: each field gains even more width on both sides. */
    body#checkout #customer-form section,
    body#checkout .js-address-form section.form-fields {
        margin-left: -2px;
        margin-right: -2px;
    }

    body#checkout #customer-form section > *,
    body#checkout .js-address-form section.form-fields > * {
        padding-left: 2px;
        padding-right: 2px;
    }

    /* Tighter vertical rhythm between paired rows. */
    body#checkout #customer-form .form-group.row,
    body#checkout .js-address-form .form-group.row {
        margin-bottom: .35rem;
    }

    /* Labels: smaller type + no wrapping -> always one line, even at ~378px.
       The reduced font keeps the full text visible within the field width. */
    body#checkout #customer-form .form-control-label,
    body#checkout .js-address-form .form-control-label {
        margin-bottom: .15rem;
        padding-bottom: 0;
        font-size: .8125rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    /* address1 has Google Places autocomplete — give it the full row width so
       neither the field nor the suggestions dropdown is cramped. Overrides the
       50% paired-field rule above. */
    body#checkout .js-address-form section.form-fields > .field-name-address1,
    body#checkout #customer-form section > .field-name-address1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}