/* --- Global Wrapper --- */
.notification-wrapper {
    font-family: var(--font-family);
    color: var(--text-color);
}
.notification-wrapper h1,
.notification-wrapper h2,
.notification-wrapper h3,
.notification-wrapper h4,
.notification-wrapper h5,
.notification-wrapper h6 {
    color: var(--heading-color);
}


/* --- Page Title Section --- */
.page-title-container {
    padding: 2.5rem 1rem;
}
.page-title-container[data-alignment="left"] { text-align: left; }
.page-title-container[data-alignment="center"] { text-align: center; }
.page-title-container[data-alignment="right"] { text-align: right; }

.page-main-title {
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.page-subtitle {
    color: var(--text-color);
    max-width: 650px;
    opacity: 0.9;
}
.page-title-container[data-alignment="center"] .page-subtitle { margin-left: auto; margin-right: auto; }
.page-title-container[data-alignment="right"] .page-subtitle { margin-left: auto; }

/* Tailwind Font Size Classes */
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }


/* --- Info Card Section --- */
.info-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.info-card {
    position: relative;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.04);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.info-card-header:hover { background-color: #f9fafb; }

.info-card-summary-content { flex-grow: 1; }
.info-card-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem 0; }
.info-card-date { font-size: 0.75rem; color: #6b7280; margin: 0 0 0.5rem 0; }
.info-card-summary { font-size: 0.875rem; opacity: 0.9; margin: 0; }
.info-card-icon { transition: transform 0.4s ease; }
.info-card.expanded .info-card-icon { transform: rotate(180deg); }

/* Batch Styles */
.info-card-batch { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem 0.6rem; font-size: 0.7rem; font-weight: bold; color: white; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; }
.batch-new { background-color: #3b82f6; }
.batch-hot { background-color: #ef4444; }
.batch-premium { background-color: #a855f7; }
.batch-live { background-color: #22c55e; }
.batch-latest { background-color: #f97316; }

/* Image Positions */
.info-card[data-image-position="right"] .info-card-header { flex-direction: row-reverse; }
.info-card[data-image-position="top"] .info-card-header { flex-direction: column; align-items: flex-start; }
.info-card[data-image-position="top"] .info-card-image { width: 100%; height: auto; margin-bottom: 0.75rem; }
.info-card[data-image-position="top"] .info-card-icon { align-self: flex-end; margin-top: -2.5rem; padding-right: 0.5rem; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.info-card-image { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.375rem; flex-shrink: 0; }

/* Body Animation */
.info-card-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; padding: 0 1rem; }
.info-card.expanded .info-card-body { max-height: 1500px; padding: 1rem 1rem; border-top: 1px solid #e5e7eb; }
.info-card-body-content { line-height: 1.6; }

/* CTA Button */
.info-card-cta { display: inline-block; margin-top: 1.25rem; padding: 0.6rem 1.5rem; background-color: #ede9fe; color: #5b21b6; text-decoration: none; border-radius: 9999px; font-weight: 600; transition: background-color 0.2s; }
.info-card-cta:hover { background-color: #ddd6fe; }

/* CKEditor Content Styles */
.info-card-body-content h1, .info-card-body-content h2, .info-card-body-content h3 { margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 600; }
.info-card-body-content p { margin-bottom: 1rem; }
.info-card-body-content ul, .info-card-body-content ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.info-card-body-content ul { list-style-type: disc; }
.info-card-body-content ol { list-style-type: decimal; }
.info-card-body-content a:not(.info-card-cta) { text-decoration: underline; color: var(--primary-color); }
.info-card-body-content blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; margin: 1rem 0; font-style: italic; }

/* Mobile View Toggle */
.info-card-view-toggle { display: none; justify-content: center; margin-bottom: 1rem; background-color: #e5e7eb; padding: 0.25rem; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; }
.info-card-view-toggle button { border: none; background-color: transparent; border-radius: 999px; cursor: pointer; color: #4b5563; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 1rem; }
.info-card-view-toggle button.active { background-color: white; color: var(--primary-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Responsive adjustments */
@media (max-width: 640px) {
    .info-card-view-toggle { display: flex; }
    .info-card-cta { width: 100%; text-align: center; }
    .info-card[data-image-position="right"] .info-card-header, .info-card[data-image-position="left"] .info-card-header, .info-card-header { flex-direction: column; align-items: flex-start; }
    .info-card-image { width: 100%; height: auto; margin-bottom: 0.75rem; }
    .info-card-icon { align-self: flex-end; margin-top: -2.5rem; padding-right: 0.5rem; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .info-cards-container.list-view-active .info-card-header { flex-direction: row; align-items: center; }
    .info-cards-container.list-view-active .info-card-image { width: 64px; height: 64px; aspect-ratio: 1/1; margin-bottom: 0; }
    .info-cards-container.list-view-active .info-card-icon { align-self: center; margin-top: 0; padding-right: 0; color: var(--text-color); text-shadow: none; }
    .info-cards-container.list-view-active .info-card-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --- Custom HTML Section --- */
.custom-html-section { padding: 1rem 0; }