/* Placeholder cards shown in place of a third-party embed (YouTube video, Google Map)
   when the OneTrust category that embed depends on has not been consented to.
   Loaded from _Header.cshtml only when a OneTrust domain-script id is configured. */

.consent-blocked-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 24px 20px;
    border-radius: 6px;
}

/* video-off.svg / map-off.svg each draw their own circular badge and white glyph, so the
   card only needs to space the icon — no background, radius or colour applied here. */
.consent-blocked-card-icon {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    flex: 0 0 auto;
}

.consent-blocked-card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.consent-blocked-card-message {
    font-size: 12px;
    line-height: 1.5;
    max-width: 340px;
    margin-bottom: 16px;
}

/* Colour, radius, height and shadow come from the brand's .btn-blue; only the card's own
   layout is set here. text-transform is reset because .btn-blue uppercases (capitalises on SA)
   and the design calls for sentence case on this control. */
.consent-blocked-card-button {
    display: block;
    width: 100%;
    max-width: 340px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

/* Dark variant: sits inside the training-video player frame. */
.consent-blocked-card-video {
    background-color: #34495e;
    color: #fff;
    min-height: 200px;
}

.consent-blocked-card-video .consent-blocked-card-message {
    color: #d5dde4;
}

/* Light variant: sits inside a map canvas, which is on a white card. The height override
   matters because it replaces containers sized by fixed inline heights (as low as 95px for
   the single-store map) — let the card grow rather than clip its content. */
.consent-blocked-card-map {
    background-color: #fff;
    color: #23384c;
    border: 1px solid #e3e8ec;
    height: auto !important;
    min-height: 0;
}

.consent-blocked-card-map .consent-blocked-card-message {
    color: #6b7b89;
}