/* ============================================================================
   assets/css/cart-promo.css

   The promo code area of the cart's order summary. Loaded after cart-reco.css
   on the cart page only.

   The [hidden] overrides at the bottom matter: .order-summary-row gets
   display: flex from site.css, and any author rule beats the browser's own
   [hidden] { display: none }. Without them a hidden discount row would still
   show. Same lesson as .field-error on the add-to-cart dialog.
   ========================================================================= */

.promo-form {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

/* The same field the rest of the site draws: the 1px #666 border, the 4px
   radius and the 32px control height every input and select on the cart
   already uses. site.css's focus-visible rule for text inputs picks this one
   up by itself.

   150px, the width the New Recipient field uses, rather than stretching
   across the box - the codes are short, and a field sized to its content
   says so. */
.promo-form input[type="text"] {
    flex: 0 0 auto;
    width: 150px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid #666666;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #666666;
    text-transform: uppercase;
}

.promo-form input[type="text"]::placeholder {
    text-transform: none;
    color: #999999;
}

/* Same box as .btn-add-recipient so the button matches the field beside it,
   but in the nav brown - the page's other buttons are grey (#767676) and red
   (#910d10), so the promo button reads as its own control. */
.btn-promo {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 16px;
    border: 0;
    border-radius: 4px;
    background-color: #4b301d;
    font-family: inherit;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

.btn-promo:hover,
.btn-promo:focus {
    background-color: #3a2416;
}

.promo-message {
    margin: 4px 0 8px;
    font-size: 13px;
    color: #910d10;
}

.promo-row span {
    font-weight: 600;
}

.promo-row strong {
    color: #2f8a00;
}

.promo-note {
    margin: 4px 0 8px;
    font-size: 13px;
    color: #666;
}

.promo-descr {
    margin: 4px 0 8px;
    font-size: 13px;
    color: #2f8a00;
}

.promo-remove-form {
    margin: 0 0 10px;
}

.promo-remove {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}

.promo-remove:hover,
.promo-remove:focus {
    color: #910d10;
}

.promo-row[hidden],
.promo-note[hidden],
.promo-descr[hidden] {
    display: none !important;
}