/**
 * Copyright © 2026 HaanDigital. All rights reserved.
 *
 * Delivery / vacation notice — a Bootstrap-style "warning" box.
 * Radius (4px) and 1px border mirror the HaanDigital FAQ box so both
 * components sit consistently on the product page.
 *
 * Colours can be overridden per theme with the --dn-* custom properties.
 */

.delivery-notice {
    --dn-bg:      #fff3cd; /* bootstrap warning background */
    --dn-border:  #ffe69c; /* bootstrap warning border     */
    --dn-text:    #664d03; /* bootstrap warning text        */
    --dn-accent:  #997404; /* darker yellow: icon + accent bar */
    --dn-radius:  4px;     /* matches the FAQ box            */

    position: relative;
    margin: 16px 0;
    padding: 14px 16px 14px 20px;
    background: var(--dn-bg);
    color: var(--dn-text);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius);
    overflow: hidden;
}

.delivery-notice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dn-accent);
}

.delivery-notice__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.delivery-notice__icon {
    flex: none;
    margin-top: 1px;
    color: var(--dn-accent);
}

.delivery-notice__body {
    min-width: 0;
}

.delivery-notice__title {
    margin: 0 0 3px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.delivery-notice__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.delivery-notice__confirm {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--dn-border);
    cursor: pointer;
}

.delivery-notice__checkbox {
    flex: none;
    width: 18px;
    height: 18px;
    accent-color: var(--dn-accent);
    cursor: pointer;
}

.delivery-notice__confirm-text {
    font-size: 14px;
    line-height: 1.4;
}

.delivery-notice__req {
    color: #c0392b;
    font-weight: 700;
}

/* Validation state supplied by mage/validation on the add-to-cart form. */
.delivery-notice__checkbox.mage-error ~ .delivery-notice__confirm-text,
.delivery-notice__checkbox.validation-failed ~ .delivery-notice__confirm-text {
    color: #c0392b;
}

.delivery-notice .mage-error {
    /* Keep the generated inline error message readable on the yellow box. */
    color: #c0392b;
    font-size: 13px;
    margin-top: 6px;
}

/* Checkout: same vertical centring as the product page, but with higher
   specificity + explicit resets so the theme's own checkbox/label styles
   can't push the box off-centre in the checkout column. */
.delivery-notice.delivery-notice--checkout .delivery-notice__confirm {
    display: flex;
    align-items: center;
}

.delivery-notice.delivery-notice--checkout .delivery-notice__checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    align-self: center;
}

.delivery-notice.delivery-notice--checkout .delivery-notice__confirm-text {
    line-height: 1.25;
}