/*
 * Customer notices. One card, three shapes: a banner above the widget, a panel
 * that stops the customer before they hunt for a date, and an inline block that
 * reads beside the catalogue.
 *
 * Every literal below is the value build_css_vars() computes for that token on
 * the default palette, so a page served without the inline block renders what
 * the token would have given rather than a colour nobody chose.
 */

.oubkw-notice {
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 16px;
    border: 1px solid currentColor;
    font-family: var(--oubkw-font-body, inherit);
}

.oubkw-notice-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 12px;
}

.oubkw-notice-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.oubkw-notice-square {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
}

.oubkw-notice-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.oubkw-notice-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
}

.oubkw-notice-text p { margin: 0 0 8px; text-align: justify; }
.oubkw-notice-text p:last-child { margin-bottom: 0; }
.oubkw-notice-text ul,
.oubkw-notice-text ol { margin: 0 0 8px 18px; padding: 0; }

.oubkw-notice-title {
    display: block;
    font-family: var(--oubkw-font-display, inherit);
    font-size: 16px;
    margin-bottom: 4px;
}

.oubkw-notice-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px 4px;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

.oubkw-notice-close:hover { opacity: 1; }

/*
 * A pale fill takes the tone of its own family as text, never the on-colour:
 * the on-colour is the label of the SOLID fill, and writing it here gives 1.14
 * to 1. The tone is bounded to 4.5 against this exact background.
 */
.oubkw-notice--info {
    background: var(--oubkw-notice-info-bg, #E8EDFB);
    color: var(--oubkw-notice-info, #1d4ed8);
}
.oubkw-notice--alert {
    background: var(--oubkw-notice-alert-bg, #F8EEE6);
    color: var(--oubkw-notice-alert, #974608);
}
.oubkw-notice--closure {
    background: var(--oubkw-notice-closure-bg, #F2EBFD);
    color: var(--oubkw-notice-closure, #7c3aed);
}
.oubkw-notice--promo {
    background: var(--oubkw-notice-promo-bg, #F9E8EF);
    color: var(--oubkw-notice-promo, #be185d);
}
.oubkw-notice--news {
    background: var(--oubkw-notice-news-bg, #E7F1F1);
    color: var(--oubkw-notice-news, #0f766e);
}

/* The chip is a solid fill, so it carries the on-colour of its family. */
.oubkw-notice--info .oubkw-notice-icon {
    background: var(--oubkw-notice-info, #1d4ed8);
    color: var(--oubkw-on-notice-info, #ffffff);
}
.oubkw-notice--alert .oubkw-notice-icon {
    background: var(--oubkw-notice-alert, #974608);
    color: var(--oubkw-on-notice-alert, #ffffff);
}
.oubkw-notice--closure .oubkw-notice-icon {
    background: var(--oubkw-notice-closure, #7c3aed);
    color: var(--oubkw-on-notice-closure, #ffffff);
}
.oubkw-notice--promo .oubkw-notice-icon {
    background: var(--oubkw-notice-promo, #be185d);
    color: var(--oubkw-on-notice-promo, #ffffff);
}
.oubkw-notice--news .oubkw-notice-icon {
    background: var(--oubkw-notice-news, #0f766e);
    color: var(--oubkw-on-notice-news, #ffffff);
}

/*
 * The button. A solid fill of the family, so it carries the on-colour, the
 * pair already measured on the chip above. The label of a solid fill is chosen
 * rather than assumed, and the same pair serves the browser side and the one
 * the server writes for the customer area.
 */
.oubkw-notice-cta {
    display: inline-block;
    margin: 12px 0 0;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 20px;
    font-family: var(--oubkw-font-body, inherit);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.oubkw-notice-cta:hover,
.oubkw-notice-cta:focus {
    text-decoration: none;
    opacity: .9;
}

.oubkw-notice--info .oubkw-notice-cta {
    background: var(--oubkw-notice-info, #1d4ed8);
    color: var(--oubkw-on-notice-info, #ffffff);
}
.oubkw-notice--alert .oubkw-notice-cta {
    background: var(--oubkw-notice-alert, #974608);
    color: var(--oubkw-on-notice-alert, #ffffff);
}
.oubkw-notice--closure .oubkw-notice-cta {
    background: var(--oubkw-notice-closure, #7c3aed);
    color: var(--oubkw-on-notice-closure, #ffffff);
}
.oubkw-notice--promo .oubkw-notice-cta {
    background: var(--oubkw-notice-promo, #be185d);
    color: var(--oubkw-on-notice-promo, #ffffff);
}
.oubkw-notice--news .oubkw-notice-cta {
    background: var(--oubkw-notice-news, #0f766e);
    color: var(--oubkw-on-notice-news, #ffffff);
}

/*
 * The host the shortcode and the block leave on the page. It holds no space of
 * its own: a page that has nothing to say that day must not open a gap where
 * the card would have been.
 */
.oubkw-notice-host:empty {
    display: none;
}

/* Banner, above whatever it was mounted on. */
.oubkw-notice--form-banner { margin-bottom: 18px; }

/* Inline, reads in the flow rather than above it. */
.oubkw-notice--form-inline { margin: 18px 0; }

/*
 * Panel. The overlay is a plugin root of its own because it is appended to the
 * body, outside the widget, so it would otherwise resolve the tokens of the
 * page rather than those of the widget theme.
 */
.oubkw-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(var(--oubkw-text-rgb, 44, 31, 20), .55);
}

@media (max-width: 767.98px) {
    .oubkw-notice-overlay { padding: 0; align-items: stretch; }
    .oubkw-notice-overlay .oubkw-notice { max-width: none; max-height: none; height: 100%; border-radius: 0; }
}

.oubkw-notice-overlay .oubkw-notice {
    max-width: 520px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    margin: 0;
    box-shadow: 0 18px 48px rgba(var(--oubkw-text-rgb, 44, 31, 20), .28);
}

.oubkw-notice-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.oubkw-notice-ok {
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    border-radius: 999px;
    padding: 7px 20px;
    font-size: 14px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .oubkw-notice-row { gap: 10px; }
    .oubkw-notice-square { width: 56px; height: 56px; }
    .oubkw-notice-text { text-align: left; }
    .oubkw-notice-text p { text-align: left; }
}