/**
 * AlloDentiste Notice Box Widget – Stylesheet
 *
 * Two types:
 *   .type-notice  — amber/yellow — informational
 *   .type-warning — red          — urgent / medical warning
 */

/* ============================================================
   Outer wrapper — matches gutter convention of other widgets
   ============================================================ */
.allo-notice-box-widget {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px var(--allo-gutter);
    box-sizing: border-box;
}

/* ============================================================
   Card
   ============================================================ */
.notice-box-card {
    position: relative;
    border-radius: 10px;
    padding: 28px 32px;
    border-left: 5px solid transparent;
    box-sizing: border-box;
}

/* ── Notice (amber / informational) ─────────────────────────── */
.notice-box-card.type-notice {
    background-color: #FFFBEB;
    border-left-color: #F59E0B;
}

.notice-box-card.type-notice .notice-box-icon {
    color: #D97706;
}

.notice-box-card.type-notice .notice-box-heading {
    color: #92400E;
}

.notice-box-card.type-notice .notice-box-body,
.notice-box-card.type-notice .notice-box-body p,
.notice-box-card.type-notice .notice-box-body li {
    color: #78350F;
}

/* ── Tip (blue / helpful) ────────────────────────────────────── */
.notice-box-card.type-tip {
    background-color: #EFF6FF;
    border-left-color: #3B82F6;
}

.notice-box-card.type-tip .notice-box-icon {
    color: #2563EB;
}

.notice-box-card.type-tip .notice-box-heading {
    color: #1E3A8A;
}

.notice-box-card.type-tip .notice-box-body,
.notice-box-card.type-tip .notice-box-body p,
.notice-box-card.type-tip .notice-box-body li {
    color: #1E3A8A;
}

/* ── Warning (red / urgent) ──────────────────────────────────── */
.notice-box-card.type-warning {
    background-color: #FFF1F0;
    border-left-color: #EF4444;
}

.notice-box-card.type-warning .notice-box-icon {
    color: #DC2626;
}

.notice-box-card.type-warning .notice-box-heading {
    color: #7F1D1D;
}

.notice-box-card.type-warning .notice-box-body,
.notice-box-card.type-warning .notice-box-body p,
.notice-box-card.type-warning .notice-box-body li {
    color: #7F1D1D;
}

/* ============================================================
   Icon + Heading row
   ============================================================ */
.notice-box-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* When there's no heading, collapse margin */
.notice-box-icon-row:empty,
.notice-box-icon-row:not(:has(*)) {
    display: none;
}

.notice-box-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.notice-box-icon svg {
    display: block;
}

/* ============================================================
   Heading
   ============================================================ */
.notice-box-heading {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* When heading tag is <p> add bold */
p.notice-box-heading {
    font-weight: 700;
}

/* ============================================================
   Body
   ============================================================ */
.notice-box-body {
    font-size: 0.95rem;
    line-height: 1.7;
}

.notice-box-body p {
    margin: 0 0 0.6em;
}

.notice-box-body p:last-child {
    margin-bottom: 0;
}

.notice-box-body ul,
.notice-box-body ol {
    margin: 0 0 0.6em;
    padding-left: 1.4em;
}

.notice-box-body ul:last-child,
.notice-box-body ol:last-child {
    margin-bottom: 0;
}

.notice-box-body li {
    margin-bottom: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .notice-box-card {
        padding: 22px 20px;
    }

    .notice-box-heading {
        font-size: 1rem;
    }
}