/**
 * Betformatics Notice/Alert Shortcode Styles
 *
 * Styled alert boxes for important callouts.
 *
 * Dependencies: betformatics-variables (loaded via PHP)
 *
 * @package Betformatics
 */

/* =============================================================================
   RESET - Prevent theme interference
   ============================================================================= */
.bf-notice,
.bf-notice * {
    box-sizing: border-box;
}

/* =============================================================================
   BASE NOTICE
   ============================================================================= */
.bf-notice {
    display: block;
    padding: 16px 20px;
    margin: 1.5em 0;
    border-radius: var(--bf-radius-base, 8px);
    font-family: var(--bf-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    line-height: 1.5;
    position: relative;
}

/* =============================================================================
   NOTICE TYPES
   ============================================================================= */

/* Info (default) - Blue */
.bf-notice--info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-left: 4px solid #3b82f6;
}

.bf-notice--info .bf-notice__icon {
    color: #3b82f6;
}

.bf-notice--info .bf-notice__title {
    color: #1e40af;
}

/* Warning - Yellow/Orange */
.bf-notice--warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid var(--bf-warning, #f59e0b);
}

.bf-notice--warning .bf-notice__icon {
    color: var(--bf-warning, #f59e0b);
}

.bf-notice--warning .bf-notice__title {
    color: #92400e;
}

/* Success - Green */
.bf-notice--success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-left: 4px solid var(--bf-success, #10b981);
}

.bf-notice--success .bf-notice__icon {
    color: var(--bf-success, #10b981);
}

.bf-notice--success .bf-notice__title {
    color: #065f46;
}

/* Error - Red */
.bf-notice--error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid var(--bf-error, #ef4444);
}

.bf-notice--error .bf-notice__icon {
    color: var(--bf-error, #ef4444);
}

.bf-notice--error .bf-notice__title {
    color: #991b1b;
}

/* =============================================================================
   CONTENT STRUCTURE
   ============================================================================= */
.bf-notice__content {
    display: block;
}

/* Header with icon and title on same line */
.bf-notice__header {
    display: block;
    line-height: 1.4;
}

/* Icon - inline with title */
.bf-notice__icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 8px;
}

.bf-notice__icon svg {
    width: 22px;
    height: 22px;
}

/* Title */
.bf-notice__title {
    display: inline;
    vertical-align: middle;
    font-weight: var(--bf-font-weight-semibold, 600);
    font-size: 0.95rem;
}

/* Text content */
.bf-notice__text {
    display: block;
    margin-top: 8px;
    color: var(--bf-text-primary, #333333);
    font-size: 0.95rem;
}

.bf-notice__text p {
    margin: 0 0 0.5em 0;
}

.bf-notice__text p:last-child {
    margin-bottom: 0;
}

/* When no header, remove top margin from text */
.bf-notice__content > .bf-notice__text:first-child {
    margin-top: 0;
}

/* =============================================================================
   DISMISS BUTTON
   ============================================================================= */
.bf-notice__dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--bf-radius-sm, 4px);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--bf-transition-fast, 0.15s ease), background var(--bf-transition-fast, 0.15s ease);
    color: inherit;
}

.bf-notice__dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.bf-notice__dismiss:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    opacity: 1;
}

/* Dismissible notice needs padding for button */
.bf-notice--dismissible {
    padding-right: 50px;
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 640px) {
    .bf-notice {
        padding: 14px 16px;
    }

    .bf-notice--dismissible {
        padding-right: 44px;
    }

    .bf-notice__icon svg {
        width: 20px;
        height: 20px;
    }

    .bf-notice__title {
        font-size: 0.9rem;
    }

    .bf-notice__text {
        font-size: 0.9rem;
    }

    .bf-notice__dismiss {
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
    }
}

/* =============================================================================
   PAGE BUILDER COMPATIBILITY
   ============================================================================= */
.elementor-widget-container .bf-notice,
.elementor-element .bf-notice,
.wp-block .bf-notice {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .bf-notice,
    .bf-notice * {
        transition: none !important;
    }
}