/**
 * ========================================
 *    Legacy Callout Boxes - Backward Compatibility
 *    ========================================
 *
 * Provides styling for legacy callout blocks:
 * - WP Callout Box plugin (roelmagdaleno/wp-callout-box)
 * - Callout Boxes Pro plugin (callout-boxes-pro/callout-box)
 *
 * Includes full dark mode support for both formats.
 *
 * @package WebtronDocs
 * @since 1.2.0
 */

/* ========================================
   Callout Boxes Pro Styles
   ======================================== */

.coutb-pro-box {
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 20px;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Light Mode Colors - Pro */
.coutb-pro-box.coutb-pro-primary {
    background-color: #dbeafe;
    border-left: 15px solid #1e40af;
    color: #1e40af;
}

.coutb-pro-box.coutb-pro-success {
    background-color: #dcfce7;
    border-left: 15px solid #15803d;
    color: #15803d;
}

.coutb-pro-box.coutb-pro-danger {
    background-color: #fee2e2;
    border-left: 15px solid #b91c1c;
    color: #b91c1c;
}

.coutb-pro-box.coutb-pro-warning {
    background-color: #fef3c7;
    border-left: 15px solid #78350f;
    color: #78350f;
}

/* Dark Mode Colors - Pro */
body.dark-mode .coutb-pro-box.coutb-pro-primary,
body.body_dark .coutb-pro-box.coutb-pro-primary,
[data-theme="dark"] .coutb-pro-box.coutb-pro-primary {
    background-color: rgba(30, 64, 175, 0.15);
    border-left-color: #60a5fa;
    color: #93c5fd;
}

body.dark-mode .coutb-pro-box.coutb-pro-success,
body.body_dark .coutb-pro-box.coutb-pro-success,
[data-theme="dark"] .coutb-pro-box.coutb-pro-success {
    background-color: rgba(21, 128, 61, 0.15);
    border-left-color: #4ade80;
    color: #86efac;
}

body.dark-mode .coutb-pro-box.coutb-pro-danger,
body.body_dark .coutb-pro-box.coutb-pro-danger,
[data-theme="dark"] .coutb-pro-box.coutb-pro-danger {
    background-color: rgba(185, 28, 28, 0.15);
    border-left-color: #f87171;
    color: #fca5a5;
}

body.dark-mode .coutb-pro-box.coutb-pro-warning,
body.body_dark .coutb-pro-box.coutb-pro-warning,
[data-theme="dark"] .coutb-pro-box.coutb-pro-warning {
    background-color: rgba(120, 53, 15, 0.15);
    border-left-color: #fbbf24;
    color: #fcd34d;
}

/* Icon Container - Pro */
.coutb-pro-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.coutb-pro-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Content - Pro */
.coutb-pro-content {
    flex: 1;
    line-height: 1.6;
}

.coutb-pro-content p {
    margin: 0 !important;
}

.coutb-pro-content strong {
    font-weight: 600;
}

/* Strong Text Colors - Pro */
.coutb-pro-box.coutb-pro-primary strong {
    color: #1e40af;
}

body.dark-mode .coutb-pro-box.coutb-pro-primary strong,
body.body_dark .coutb-pro-box.coutb-pro-primary strong,
[data-theme="dark"] .coutb-pro-box.coutb-pro-primary strong {
    color: #93c5fd;
}

.coutb-pro-box.coutb-pro-success strong {
    color: #15803d;
}

body.dark-mode .coutb-pro-box.coutb-pro-success strong,
body.body_dark .coutb-pro-box.coutb-pro-success strong,
[data-theme="dark"] .coutb-pro-box.coutb-pro-success strong {
    color: #86efac;
}

.coutb-pro-box.coutb-pro-danger strong {
    color: #b91c1c;
}

body.dark-mode .coutb-pro-box.coutb-pro-danger strong,
body.body_dark .coutb-pro-box.coutb-pro-danger strong,
[data-theme="dark"] .coutb-pro-box.coutb-pro-danger strong {
    color: #fca5a5;
}

.coutb-pro-box.coutb-pro-warning strong {
    color: #78350f;
}

body.dark-mode .coutb-pro-box.coutb-pro-warning strong,
body.body_dark .coutb-pro-box.coutb-pro-warning strong,
[data-theme="dark"] .coutb-pro-box.coutb-pro-warning strong {
    color: #fcd34d;
}

/* Links - Pro */
.coutb-pro-content a {
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.coutb-pro-content a:hover {
    opacity: 0.8;
}

/* ========================================
   Original WP Callout Box Plugin Styles
   (Backward Compatibility)
   ======================================== */

.wp-coutb-callout-box {
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 20px;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Fix gigantic SVG icons from old Callout Boxes plugin */
.wp-coutb-callout-box__icon {
    flex-shrink: 0;
    height: 30px;
    margin-right: 10px;
    width: 30px;
}

.wp-coutb-callout-box__icon svg {
    width: 30px !important;
    height: 30px !important;
}

.wp-coutb-callout-box p {
    margin: 0 !important;
    flex: 1;
    line-height: 1.6;
}

/* Light Mode - Legacy */
.wp-coutb-callout-box.primary {
    background-color: #dbeafe;
    border-left: 15px solid #1e40af !important;
    border-radius: 0px;
    color: #1e40af !important;
}

.wp-coutb-callout-box.success {
    background-color: #dcfce7;
    border-left: 15px solid #15803d !important;
    border-radius: 0px;
    color: #15803d !important;
}

.wp-coutb-callout-box.danger {
    background-color: #fee2e2;
    border-left: 15px solid #b91c1c !important;
    border-radius: 0px;
    color: #b91c1c !important;
}

.wp-coutb-callout-box.warning {
    background-color: #fef3c7;
    border-left: 15px solid #78350f !important;
    border-radius: 0px;
    color: #78350f !important;
}

/* Icon colors - Legacy */
.wp-coutb-callout-box.primary .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.primary .wp-coutb-callout-box__icon.outline {
    color: #1e40af;
}

.wp-coutb-callout-box.success .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.success .wp-coutb-callout-box__icon.outline {
    color: #15803d;
}

.wp-coutb-callout-box.danger .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.danger .wp-coutb-callout-box__icon.outline {
    color: #b91c1c;
}

.wp-coutb-callout-box.warning .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.warning .wp-coutb-callout-box__icon.outline {
    color: #78350f;
}

/* Dark Mode - Legacy */
body.dark-mode .wp-coutb-callout-box.primary,
body.body_dark .wp-coutb-callout-box.primary,
[data-theme="dark"] .wp-coutb-callout-box.primary {
    background-color: rgba(30, 64, 175, 0.15) !important;
    border-left-color: #60a5fa !important;
    color: #93c5fd !important;
}

body.dark-mode .wp-coutb-callout-box.success,
body.body_dark .wp-coutb-callout-box.success,
[data-theme="dark"] .wp-coutb-callout-box.success {
    background-color: rgba(21, 128, 61, 0.15) !important;
    border-left-color: #4ade80 !important;
    color: #86efac !important;
}

body.dark-mode .wp-coutb-callout-box.danger,
body.body_dark .wp-coutb-callout-box.danger,
[data-theme="dark"] .wp-coutb-callout-box.danger {
    background-color: rgba(185, 28, 28, 0.15) !important;
    border-left-color: #f87171 !important;
    color: #fca5a5 !important;
}

body.dark-mode .wp-coutb-callout-box.warning,
body.body_dark .wp-coutb-callout-box.warning,
[data-theme="dark"] .wp-coutb-callout-box.warning {
    background-color: rgba(120, 53, 15, 0.15) !important;
    border-left-color: #fbbf24 !important;
    color: #fcd34d !important;
}

/* Dark Mode Icon Colors - Legacy */
body.dark-mode .wp-coutb-callout-box.primary .wp-coutb-callout-box__icon,
body.body_dark .wp-coutb-callout-box.primary .wp-coutb-callout-box__icon,
[data-theme="dark"] .wp-coutb-callout-box.primary .wp-coutb-callout-box__icon {
    color: #93c5fd;
}

body.dark-mode .wp-coutb-callout-box.success .wp-coutb-callout-box__icon,
body.body_dark .wp-coutb-callout-box.success .wp-coutb-callout-box__icon,
[data-theme="dark"] .wp-coutb-callout-box.success .wp-coutb-callout-box__icon {
    color: #86efac;
}

body.dark-mode .wp-coutb-callout-box.danger .wp-coutb-callout-box__icon,
body.body_dark .wp-coutb-callout-box.danger .wp-coutb-callout-box__icon,
[data-theme="dark"] .wp-coutb-callout-box.danger .wp-coutb-callout-box__icon {
    color: #fca5a5;
}

body.dark-mode .wp-coutb-callout-box.warning .wp-coutb-callout-box__icon,
body.body_dark .wp-coutb-callout-box.warning .wp-coutb-callout-box__icon,
[data-theme="dark"] .wp-coutb-callout-box.warning .wp-coutb-callout-box__icon {
    color: #fcd34d;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .coutb-pro-box,
    .wp-coutb-callout-box {
        padding: 15px;
    }

    .coutb-pro-icon,
    .wp-coutb-callout-box__icon {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px;
    }

    .wp-coutb-callout-box__icon svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ========================================
   Editor Specific Styles
   ======================================== */

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

/* Ensure proper spacing in editor */
.wp-block[data-type="roelmagdaleno/wp-callout-box"],
.wp-block[data-type="callout-boxes-pro/callout-box"] {
    margin-bottom: 1em;
}