/* ============================================================
   Jagprerna Text Editor — style.css
   ============================================================ */

/* ============================================================
   INLINE COLOR GUIDE PANEL
   ============================================================ */

.jte-guide-box {
    padding: 8px 12px 12px;
    background: #f0f6fc;
    border-left: 3px solid #0073aa;
    border-radius: 4px;
    margin: 4px 0 8px;
}
.jte-guide-title {
    font-weight: 600;
    font-size: 12px;
    color: #0073aa;
    margin: 0 0 10px;
}
.jte-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #333;
}
.jte-guide-num {
    background: #0073aa;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.jte-toolbar-preview {
    display: flex;
    gap: 10px;
    margin: 8px 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.jte-toolbar-btn-demo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f6f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    cursor: default;
}
.jte-guide-note {
    font-size: 11px;
    color: #2e7d32;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* Color swatches (round buttons) */
.jte-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 6px 0 4px;
}
.jte-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    padding: 0;
    outline: none;
}
.jte-swatch:hover {
    transform: scale(1.25);
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    border-color: rgba(0,0,0,0.3);
}
.jte-swatch:active { transform: scale(1.1); }

/* Error tip when no selection found */
.jte-tip-error {
    background: #fff3cd;
    border-left: 3px solid #e6a817;
    color: #856404;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 0 0 8px;
}



/* ============================================================
   1. SIDEBAR PANEL UI
   ============================================================ */

.jte-panel {
    padding: 0 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Block type badge at the top */
.jte-badge {
    background: #1d2327;
    color: #a7aaad;
    font-size: 11px;
    padding: 5px 16px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.jte-badge strong { color: #fff; }

/* Empty state */
.jte-empty {
    padding: 32px 18px;
    text-align: center;
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}
.jte-empty-icon {
    display: block;
    font-size: 42px;
    margin-bottom: 14px;
}

/* Tip / Note box */
.jte-note,
.jte-tip-box {
    font-size: 11.5px;
    background: #fff8e1;
    border-left: 3px solid #f1c40f;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    color: #555;
    line-height: 1.65;
    margin: 0 0 10px;
}
.jte-tip-box p { margin: 0 0 4px; font-weight: 600; }
.jte-tip-box ol { margin: 0; }

/* Divider */
.jte-hr {
    border: none;
    border-top: 1px solid #e2e4e7;
    margin: 14px 0;
}

/* Custom px input */
.jte-custom-box {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px dashed #c3c4c7;
    border-radius: 4px;
}
.jte-label {
    font-size: 11px;
    font-weight: 600;
    color: #1d2327;
    display: block;
    margin-bottom: 4px;
}
.jte-number-input {
    width: 80px;
    padding: 5px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}
.jte-number-input:focus { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,.15); }
.jte-px-label { font-size: 12px; color: #666; }


/* ============================================================
   2. TOOLBAR DROPDOWN (for inline color format types)
   ============================================================ */

.jte-color-popup {
    padding: 14px 16px;
    min-width: 200px;
    max-width: 240px;
}
.jte-color-popup-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #1d2327;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e4e7;
}

/* Toolbar toggle buttons */
.jte-toolbar-toggle {
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ============================================================
   3. NEWS PRESET BUTTONS (sidebar)
   ============================================================ */

.jte-preset {
    display: block;
    width: 100%;
    margin-bottom: 7px;
    padding: 10px 14px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid #dcdcde;
    border-left-width: 4px;
    border-radius: 4px;
    background: #f6f7f7;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
}
.jte-preset:hover          { background: #ececec; }
.jte-reset                 { border-left-color: #888; }
.jte-breaking              { border-left-color: #c0392b; color: #c0392b; font-weight: 700; }
.jte-important             { border-left-color: #f1c40f; }
.jte-quote                 { border-left-color: #2980b9; color: #1a5276; font-style: italic; }
.jte-positive              { border-left-color: #27ae60; color: #1e8449; font-weight: 700; }
.jte-negative              { border-left-color: #e74c3c; color: #c0392b; font-weight: 700; }


/* ============================================================
   4. PRESET STYLES (applied on the block — editor + frontend)
   ============================================================ */

.jte-preset-breaking-news {
    font-weight: bold !important;
    /* color set via style.color.text */
}

.jte-preset-important-line {
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    /* bg color set via style.color.background */
}

.jte-preset-quote-style {
    font-style: italic !important;
    border-left: 4px solid #2980b9 !important;
    padding: 10px 10px 10px 16px !important;
    border-radius: 0 4px 4px 0 !important;
    margin: 10px 0 !important;
}

.jte-preset-stock-positive {
    font-weight: bold !important;
}

.jte-preset-stock-negative {
    font-weight: bold !important;
}


/* ============================================================
   5. BOLD & ITALIC CLASSES
   ============================================================ */

.jte-bold   { font-weight: bold !important; }
.jte-italic { font-style: italic !important; }


/* ============================================================
   6. FONT FAMILY CLASSES
   ============================================================ */

.jte-font-roboto             { font-family: 'Roboto', sans-serif !important; }
.jte-font-poppins            { font-family: 'Poppins', sans-serif !important; }
.jte-font-notosans           { font-family: 'Noto Sans', sans-serif !important; }
.jte-font-mukta              { font-family: 'Mukta', sans-serif !important; }
.jte-font-hind               { font-family: 'Hind', sans-serif !important; }
.jte-font-karma              { font-family: 'Karma', serif !important; }
.jte-font-notosansdevanagari { font-family: 'Noto Sans Devanagari', sans-serif !important; }


/* ============================================================
   7. BLOCK DIMENSIONS
   ============================================================ */

/* Width presets */
.jte-bw-fit  { width: fit-content !important; display: inline-block !important; }
.jte-bw-p25  { width: 25%  !important; }
.jte-bw-p50  { width: 50%  !important; }
.jte-bw-p75  { width: 75%  !important; }

/* Height presets */
.jte-bh-h60  { min-height:  60px !important; }
.jte-bh-h100 { min-height: 100px !important; }
.jte-bh-h150 { min-height: 150px !important; }
.jte-bh-h200 { min-height: 200px !important; }
.jte-bh-h300 { min-height: 300px !important; }

/* Custom dimensions — set via style.dimensions in block attributes */
/* (No CSS class needed — WP applies them as inline styles) */


/* ============================================================
   8. INLINE FORMAT SPANS (in saved post HTML)
   ============================================================ */

/* Color applied via style="color: ..." inline attribute */
.jte-inline-text {
    /* styles come from the inline style attribute */
}

/* Background applied via style="background-color: ..." inline attribute */
.jte-inline-bg {
    border-radius: 3px;
    /* styles come from the inline style attribute */
}