/*
 * BM.Market — checkout accept-terms checkboxes, disabled CTA, and the terms
 * modal. Loaded globally (mini-cart is in the header on every page). Plain CSS
 * on design tokens, so it survives the Tailwind purge.
 */

/* ---- Checkbox rows (cart page + mini-cart) ---- */
.bm-agree-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.bm-agree-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; }
.bm-agree-cb {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--color-primary, #0F2C52);
    cursor: pointer;
    border-radius: 4px;
}
.bm-agree-text { color: var(--color-fg-secondary, #6B7280); cursor: pointer; }
.bm-agree-text a { color: var(--color-link, #1d4ed8); text-decoration: underline; }
.bm-agree-text a:hover { color: var(--color-primary, #0F2C52); }
.bm-agree-help {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #d1d5db);
    background: #fff;
    color: var(--color-fg-secondary, #6B7280);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s;
}
.bm-agree-help:hover { border-color: var(--color-primary, #0F2C52); color: var(--color-primary, #0F2C52); }

/* ---- Disabled CTA — same button, less bright ---- */
.bm-btn-cta.bm-btn-disabled,
.bm-btn-cta.bm-btn-disabled:hover {
    background: #FBE7A6;      /* pale yellow — clearly inactive vs #FFC107 */
    color: #9C8A56;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Terms modal ----
   A native <dialog> shown with showModal() so it stacks in the top layer ABOVE
   the mini-cart drawer (itself a modal <dialog>). Reset the UA dialog box
   (margin:auto, border, white bg, max-width) into a full-viewport flex overlay;
   the dim layer is our own .bm-agree-modal-backdrop, so the UA ::backdrop is
   turned off. display MUST stay scoped to [open] — an unconditional
   display:flex would defeat the UA's dialog:not([open]){display:none}. */
html.bm-agree-lock { overflow: hidden; }
dialog.bm-agree-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    z-index: 100000;
}
dialog.bm-agree-modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
dialog.bm-agree-modal::backdrop { background: transparent; }
.bm-agree-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.bm-agree-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.bm-agree-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--color-fg-secondary, #6B7280);
    cursor: pointer;
    z-index: 1;
}
.bm-agree-modal-close:hover { color: var(--color-primary, #0F2C52); }
.bm-agree-modal-content {
    overflow-y: auto;
    padding: 30px 26px 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-fg, #111827);
}
.bm-agree-modal-content p { margin: 0 0 .85em; }
.bm-agree-modal-content p:last-child { margin-bottom: 0; }
.bm-agree-modal-content strong { font-weight: 700; }