/**
 * Callout Box Pro - Styles
 *
 * Self-contained styles for the Callout Pro block.
 *
 * @package WebtronDocs
 * @since 2.0.0
 */

/* Base */
.coutb-pro-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1.25rem;
    border-left: 4px solid var(--callout-border, #3b82f6);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.coutb-pro-box:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Icon */
.coutb-pro-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.coutb-pro-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Content */
.coutb-pro-content {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.coutb-pro-content > *:first-child { margin-top: 0; }
.coutb-pro-content > *:last-child  { margin-bottom: 0; }
.coutb-pro-content p               { margin: 0.5rem 0; }

/* Variants */
.coutb-pro-primary {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}
.coutb-pro-primary .coutb-pro-icon { color: #3b82f6; }

.coutb-pro-success {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}
.coutb-pro-success .coutb-pro-icon { color: #22c55e; }

.coutb-pro-warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}
.coutb-pro-warning .coutb-pro-icon { color: #f59e0b; }

.coutb-pro-danger {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}
.coutb-pro-danger .coutb-pro-icon { color: #ef4444; }

/* Dark mode */
body.dark-mode .coutb-pro-primary { background: rgba(59, 130, 246, 0.1); color: #93c5fd; }
body.dark-mode .coutb-pro-success { background: rgba(34, 197, 94, 0.1);  color: #86efac; }
body.dark-mode .coutb-pro-warning { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
body.dark-mode .coutb-pro-danger  { background: rgba(239, 68, 68, 0.1);  color: #fca5a5; }

/* Editor */
.coutb-pro-content .block-editor-rich-text__editable:empty::before {
    color: inherit;
    opacity: 0.6;
}

.wp-block[data-type="webtron/callout-pro"] {
    margin-bottom: 1em;
}

.editor-styles-wrapper .coutb-pro-box {
    margin-bottom: 1rem;
}