/* FILE: assets/css/bk-text-editor.css (UPDATED BY BASANTI) */

/* Main layout for the text editor */
.bk-text-editor-wrapper {
    display: flex;
    gap: 30px;
}

.bk-text-inputs, .bk-text-preview-area {
    flex: 1;
}

/* Form elements styling */
.bk-text-editor-wrapper .bk-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.bk-text-editor-wrapper label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.bk-text-editor-wrapper .bk-required {
    color: #d9534f;
}

.bk-text-editor-wrapper .bk-text-input,
.bk-text-editor-wrapper .bk-select,
.bk-text-editor-wrapper .bk-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bk-text-editor-wrapper .bk-text-input:focus,
.bk-text-editor-wrapper .bk-select:focus,
.bk-text-editor-wrapper .bk-textarea:focus {
    outline: none;
    border-color: #ff9900; /* Orange color on focus */
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2);
}

.bk-text-editor-wrapper .bk-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Font and Color selection area */
.bk-font-color-selector {
    display: flex;
    gap: 20px;
    align-items: flex-end; /* BASANTI KA JAADU: Align items to the bottom for better look */
}
.bk-font-color-selector .bk-form-group {
    flex: 1;
}

/* Color swatches in the popup */
.bk-color-swatches-popup {
    display: flex;
    gap: 10px;
    padding-top: 5px; /* Align with select box */
    align-items: center; /* BASANTI KA JAADU: Center align color boxes */
}
.bk-color-swatch-popup {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ddd;
    transition: transform 0.2s;
}
.bk-color-swatch-popup:hover {
    transform: scale(1.1);
}
.bk-color-swatch-popup.active {
    border-color: #ff9900; /* Orange border for active */
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}

/* Text Preview Area */
.bk-text-preview-area .bk-text-preview {
    margin-bottom: 20px;
}
.bk-preview-box {
    border: 1px solid #ddd;
    background-color: #333333; /* Default dark background */
    color: #ffffff; /* Default white text */
    padding: 20px;
    min-height: 120px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}
.bk-preview-box span {
    display: block;
    font-size: 24px;
    line-height: 1.3;
    font-weight: bold;
}


/* --- BASANTI'S JAADU: Custom Color Input Style --- */
#bk_custom_color_input {
    width: 60px;
    height: 34px;
    padding: 0 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    box-sizing: border-box;
}
#bk_custom_color_input:focus {
    border-color: #ff9900;
}


/*
 * ================================================================
 * == BASANTI KA JAADU: Gabbar ke saare masle yahan solve kiye hain ==
 * ================================================================
*/

/* --- FIX FOR MASLA #1: Font Dropdown aur Color Input ko bada karna --- */
.bk-font-color-selector .bk-select {
    height: 50px; /* Thodi height badha di */
    font-size: 16px; /* Font size theek kar diya */
}

#bk_custom_color_input {
    width: 70px; /* Thodi width badha di */
    height: 50px; /* Height barabar kar di */
    font-size: 16px; /* Font size bada kar diya */
    padding: 12px;
}


/* --- FIX FOR MASLA #2: Popup ke Preview Box ka text WHITE karna --- */
/* Yeh rule sunishchit karega (will ensure) ki preview box ke andar har cheez safed ho */
.bk-preview-box,
.bk-preview-box * {
    color: #ffffff !important;
}