/* ==================================================================
   Back in stock  --  the "Notify me when available" button, its
   "we'll email you" state, and the guest modal.
   Used by includes/back.in.stock.link.cfm + back.in.stock.modal.cfm.
   ================================================================== */

/* ---------- the trigger ---------- */

.bis-wrap { display: inline; }
.bis-line { margin: 8px 0 0; }

.bis-trigger {
    display: inline-block;
    margin: 6px 8px 0 0;
    padding: 7px 14px;
    border: 2px solid #003366;
    border-radius: 4px;
    background: #fff;
    color: #003366;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}
.bis-trigger:hover,
.bis-trigger:focus { background: #003366; color: #fff; }
.bis-trigger .bis-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.bis-trigger--card .bis-icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.bis-trigger.bis-busy { opacity: .6; cursor: wait; }

/* Smaller version for product cards (kit components, available-in-kit,
   related parts), which sit inside a link. */
.bis-trigger--card {
    display: inline-block;
    margin: 6px 0 0;
    padding: 4px 9px;
    font-size: 12px;
    border-width: 1px;
}

/* The "asked" state. Not a button: nothing left to click but cancel. */
.bis-done {
    display: block;
    margin: 6px 0 0;
    color: #003366;
    font-size: 16px;
    font-weight: bold;
}
.bis-done .bis-tick { color: #3C8500; margin-right: 4px; font-weight: bold; }
.bis-done small { display: block; margin-top: 2px; color: #666; font-size: 13px; font-weight: normal; }
.bis-done small a { color: #666; text-decoration: underline; }
.bis-done--card { font-size: 13px; margin-top: 6px; }
.bis-done--card small { font-size: 11px; }
.bis-cancelled { display: block; margin: 6px 0 0; color: #666; font-size: 14px; }

/* ---------- the modal ---------- */

.bis-modal[hidden] { display: none; }

.bis-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 16px;
}
.bis-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 0; padding: 0; margin: 0; cursor: pointer;
}
.bis-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    margin: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 28px;
    text-align: left;
}
.bis-modal-panel h2 { margin: 0 0 6px; font-size: 24px; color: #003366; }
.bis-modal-intro { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #555; }
.bis-modal-close {
    position: absolute; top: 10px; right: 12px;
    border: 0; background: none;
    font-size: 30px; line-height: 1; color: #999; cursor: pointer; padding: 4px 8px;
}
.bis-modal-close:hover { color: #003366; }
.bis-modal-part {
    margin: 0 0 16px; padding: 10px 14px;
    background: #f2f4f7; border-left: 4px solid #003366; border-radius: 3px;
}
.bis-modal-part strong { display: block; font-size: 17px; color: #003366; }
.bis-modal-part span { display: block; font-size: 14px; color: #555; margin-top: 2px; }
.bis-modal-error {
    margin: 0 0 14px; padding: 10px 14px;
    background: #fdecea; border: 1px solid #f5c2bd; border-radius: 4px;
    color: #a4201a; font-size: 14px;
}
.bis-modal-row { display: flex; gap: 12px; }
.bis-modal-row .field { flex: 1 1 0; min-width: 0; }
.bis-modal .field { margin: 0 0 14px; }
.bis-modal .field label { display: block; margin: 0 0 4px; font-size: 14px; font-weight: bold; color: #003366; }
.bis-modal .field .req { color: #003366; }
.bis-modal .field .bis-optional { font-weight: normal; color: #888; }
.bis-modal .field input[type="text"],
.bis-modal .field input[type="email"] {
    display: block; width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 16px; font-family: inherit;
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
.bis-modal .field input:focus { outline: 2px solid #003366; outline-offset: 1px; border-color: #003366; }
.bis-modal .field-hint { margin: 4px 0 0; font-size: 12px; color: #777; }
.bis-modal-actions { margin: 6px 0 0; }
.bis-modal-actions .primaryButton { width: 100%; }
.bis-modal-small { margin: 12px 0 0; font-size: 12px; color: #888; text-align: center; }
.bis-modal-busy { opacity: .6; pointer-events: none; }

@media (max-width: 480px) {
    .bis-modal { padding: 12px; }
    .bis-modal-panel { padding: 20px 16px; }
    .bis-modal-row { display: block; }
}