/* THIKAA SETTINGS AREA - ULTIMATE MODERN FIX */

/* Main Settings Container */
.tk-area-settings {
    background: #f8fafc !important;
    padding: 0 !important;
    margin: 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.tk-area-settings > .tk-tab {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Settings Navigation Sidebar */
.tk-area-settings .tk-nav {
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 20px 0 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 150px) !important;
}

/* Navigation Items */
.tk-area-settings .tk-nav li {
    margin: 2px 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.tk-area-settings .tk-nav li a {
    padding: 14px 20px !important;
    display: block !important;
    color: #64748b !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
}

.tk-area-settings .tk-nav li:hover {
    background: rgba(var(--brand-primary-rgb, 102, 126, 234), 0.08) !important;
}

.tk-area-settings .tk-nav li.tk-active {
    background: linear-gradient(135deg, var(--brand-primary, #667eea), var(--brand-secondary, #764ba2)) !important;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb, 102, 126, 234), 0.3) !important;
}

.tk-area-settings .tk-nav li.tk-active a {
    color: white !important;
    font-weight: 600 !important;
}

/* Settings Content Area */
.tk-area-settings > .tk-tab > .tk-content {
    flex: 1 !important;
    padding: 30px !important;
    background: white !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 150px) !important;
}

/* Individual Settings */
.tk-setting,
.tk-input-setting {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.tk-setting:hover,
.tk-input-setting:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Settings Headers */
.tk-setting h2,
.tk-input-setting h2 {
    color: #1e293b !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
}

.tk-setting p,
.tk-input-setting p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

/* REPEATER ELEMENTS - MAJOR IMPROVEMENT */
.tk-repeater {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 16px !important;
}

.repeater-item {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    gap: 16px !important;
    align-items: end !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.repeater-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Repeater Item Fields */
.repeater-item > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.repeater-item label {
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.repeater-item input[type="text"]:not([readonly]) {
    padding: 10px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.repeater-item input[type="text"]:focus {
    border-color: var(--brand-primary, #667eea) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 102, 126, 234), 0.1) !important;
    outline: none !important;
}

.repeater-item input[readonly] {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* Color Palette */
.tk-color-palette {
    position: relative !important;
}

.tk-color-palette > span {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tk-color-palette > span:hover {
    border-color: #cbd5e1 !important;
    transform: scale(1.05) !important;
}

.tk-color-palette ul {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: none !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 100 !important;
}

.tk-color-palette:hover ul,
.tk-color-palette ul:hover {
    display: grid !important;
}

.tk-color-palette li {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important;
}

.tk-color-palette li:hover {
    transform: scale(1.1) !important;
}

/* Color values */
.tk-color-palette li[data-value=""] { background: #f1f5f9 !important; }
.tk-color-palette li[data-value="red"] { background: #ef4444 !important; }
.tk-color-palette li[data-value="yellow"] { background: #eab308 !important; }
.tk-color-palette li[data-value="green"] { background: #22c55e !important; }
.tk-color-palette li[data-value="pink"] { background: #ec4899 !important; }
.tk-color-palette li[data-value="gray"] { background: #6b7280 !important; }
.tk-color-palette li[data-value="blue"] { background: #3b82f6 !important; }

/* Image Upload */
.repeater-item [data-type="upload-image"] .image {
    width: 60px !important;
    height: 60px !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: #f8fafc !important;
}

.repeater-item [data-type="upload-image"] .image:hover {
    border-color: #667eea !important;
    background: #f0f4ff !important;
}

/* Delete Button */
.repeater-item > .tk-icon-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #dc2626 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    border: 1px solid #fecaca !important;
}

.repeater-item > .tk-icon-close:hover {
    background: #dc2626 !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* Add New Button */
.tk-repeater-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    margin-top: 16px !important;
}

.tk-repeater-add:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}

.tk-repeater-add::before {
    content: '+' !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Regular Input Fields */
.tk-input-setting input[type="text"],
.tk-input-setting input[type="email"],
.tk-input-setting input[type="password"],
.tk-input-setting input[type="number"],
.tk-input-setting textarea,
.tk-input-setting select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: white !important;
    box-sizing: border-box !important;
}

.tk-input-setting input:focus,
.tk-input-setting textarea:focus,
.tk-input-setting select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Toggle Switches */
.tk-switch {
    position: relative !important;
    width: 50px !important;
    height: 24px !important;
    background: #d1d5db !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tk-switch.tk-active {
    background: #667eea !important;
}

.tk-switch::before {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: white !important;
    top: 2px !important;
    left: 2px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.tk-switch.tk-active::before {
    transform: translateX(26px) !important;
}

/* RTL Support */
[dir="rtl"] .tk-area-settings .tk-nav {
    border-right: none !important;
    border-left: 1px solid #e2e8f0 !important;
}

[dir="rtl"] .repeater-item {
    grid-template-columns: auto 1fr 1fr 1fr !important;
}

[dir="rtl"] .repeater-item > .tk-icon-close {
    right: auto !important;
    left: 12px !important;
}

[dir="rtl"] .tk-color-palette ul {
    left: auto !important;
    right: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tk-area-settings > .tk-tab {
        flex-direction: column !important;
    }
    
    .tk-area-settings .tk-nav {
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 10px 0 !important;
    }
    
    .tk-area-settings .tk-nav ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 12px !important;
    }
    
    .tk-area-settings .tk-nav li {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    .tk-area-settings .tk-nav li a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .repeater-item {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .tk-area-settings > .tk-tab > .tk-content {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .tk-setting,
    .tk-input-setting {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .tk-repeater {
        padding: 12px !important;
    }
    
    .repeater-item {
        padding: 16px !important;
    }
}

/* Loading States */
.tk-setting.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.tk-setting.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-top: 2px solid #667eea !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* MISCELLANEOUS SECTION SPECIAL IMPROVEMENTS */
.tk-setting[data-setting="miscellaneous"],
.tk-input-setting[data-setting="miscellaneous"] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border: 1px solid #cbd5e1 !important;
    position: relative !important;
    overflow: hidden !important;
}

.tk-setting[data-setting="miscellaneous"]::before,
.tk-input-setting[data-setting="miscellaneous"]::before {
    content: '⚙️' !important;
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    font-size: 24px !important;
    opacity: 0.7 !important;
}

/* Miscellaneous Settings Grid Layout */
.tk-setting[data-setting="miscellaneous"] .input,
.tk-input-setting[data-setting="miscellaneous"] .input {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

/* Individual Miscellaneous Items */
.tk-setting[data-setting="miscellaneous"] .tk-setting-row,
.tk-input-setting[data-setting="miscellaneous"] .tk-setting-row {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e2e8f0 !important;
    position: relative !important;
}

.tk-setting[data-setting="miscellaneous"] .tk-setting-row:hover,
.tk-input-setting[data-setting="miscellaneous"] .tk-setting-row:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: #cbd5e1 !important;
}

/* Miscellaneous Labels */
.tk-setting[data-setting="miscellaneous"] label,
.tk-input-setting[data-setting="miscellaneous"] label {
    display: block !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.3px !important;
}

/* Miscellaneous Inputs */
.tk-setting[data-setting="miscellaneous"] input[type="text"],
.tk-setting[data-setting="miscellaneous"] input[type="email"],
.tk-setting[data-setting="miscellaneous"] input[type="url"],
.tk-setting[data-setting="miscellaneous"] input[type="number"],
.tk-setting[data-setting="miscellaneous"] textarea,
.tk-setting[data-setting="miscellaneous"] select,
.tk-input-setting[data-setting="miscellaneous"] input[type="text"],
.tk-input-setting[data-setting="miscellaneous"] input[type="email"],
.tk-input-setting[data-setting="miscellaneous"] input[type="url"],
.tk-input-setting[data-setting="miscellaneous"] input[type="number"],
.tk-input-setting[data-setting="miscellaneous"] textarea,
.tk-input-setting[data-setting="miscellaneous"] select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #fafafa !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tk-setting[data-setting="miscellaneous"] input:focus,
.tk-setting[data-setting="miscellaneous"] textarea:focus,
.tk-setting[data-setting="miscellaneous"] select:focus,
.tk-input-setting[data-setting="miscellaneous"] input:focus,
.tk-input-setting[data-setting="miscellaneous"] textarea:focus,
.tk-input-setting[data-setting="miscellaneous"] select:focus {
    border-color: #667eea !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* Checkboxes and Radio Buttons in Miscellaneous */
.tk-setting[data-setting="miscellaneous"] input[type="checkbox"],
.tk-setting[data-setting="miscellaneous"] input[type="radio"],
.tk-input-setting[data-setting="miscellaneous"] input[type="checkbox"],
.tk-input-setting[data-setting="miscellaneous"] input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    accent-color: #667eea !important;
    cursor: pointer !important;
}

/* Toggle Switches in Miscellaneous */
.tk-setting[data-setting="miscellaneous"] .tk-switch,
.tk-input-setting[data-setting="miscellaneous"] .tk-switch {
    width: 54px !important;
    height: 28px !important;
    background: #cbd5e1 !important;
    border-radius: 14px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.tk-setting[data-setting="miscellaneous"] .tk-switch.tk-active,
.tk-input-setting[data-setting="miscellaneous"] .tk-switch.tk-active {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.tk-setting[data-setting="miscellaneous"] .tk-switch::before,
.tk-input-setting[data-setting="miscellaneous"] .tk-switch::before {
    content: '' !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: white !important;
    top: 1px !important;
    left: 1px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.tk-setting[data-setting="miscellaneous"] .tk-switch.tk-active::before,
.tk-input-setting[data-setting="miscellaneous"] .tk-switch.tk-active::before {
    transform: translateX(26px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Miscellaneous Buttons */
.tk-setting[data-setting="miscellaneous"] .tk-btn,
.tk-input-setting[data-setting="miscellaneous"] .tk-btn {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.tk-setting[data-setting="miscellaneous"] .tk-btn:hover,
.tk-input-setting[data-setting="miscellaneous"] .tk-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Miscellaneous Help Text */
.tk-setting[data-setting="miscellaneous"] .tk-help,
.tk-input-setting[data-setting="miscellaneous"] .tk-help {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

/* File Upload in Miscellaneous */
.tk-setting[data-setting="miscellaneous"] input[type="file"],
.tk-input-setting[data-setting="miscellaneous"] input[type="file"] {
    padding: 10px !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tk-setting[data-setting="miscellaneous"] input[type="file"]:hover,
.tk-input-setting[data-setting="miscellaneous"] input[type="file"]:hover {
    border-color: #667eea !important;
    background: #f0f4ff !important;
}

/* Miscellaneous Color Picker */
.tk-setting[data-setting="miscellaneous"] input[type="color"],
.tk-input-setting[data-setting="miscellaneous"] input[type="color"] {
    width: 60px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tk-setting[data-setting="miscellaneous"] input[type="color"]:hover,
.tk-input-setting[data-setting="miscellaneous"] input[type="color"]:hover {
    border-color: #cbd5e1 !important;
    transform: scale(1.05) !important;
}

/* Miscellaneous Section Headers */
.tk-setting[data-setting="miscellaneous"] h3,
.tk-input-setting[data-setting="miscellaneous"] h3 {
    color: #1e293b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    position: relative !important;
}

.tk-setting[data-setting="miscellaneous"] h3::after,
.tk-input-setting[data-setting="miscellaneous"] h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

/* RTL Support for Miscellaneous */
[dir="rtl"] .tk-setting[data-setting="miscellaneous"]::before,
[dir="rtl"] .tk-input-setting[data-setting="miscellaneous"]::before {
    right: auto !important;
    left: 24px !important;
}

[dir="rtl"] .tk-setting[data-setting="miscellaneous"] input[type="checkbox"],
[dir="rtl"] .tk-setting[data-setting="miscellaneous"] input[type="radio"],
[dir="rtl"] .tk-input-setting[data-setting="miscellaneous"] input[type="checkbox"],
[dir="rtl"] .tk-input-setting[data-setting="miscellaneous"] input[type="radio"] {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .tk-setting[data-setting="miscellaneous"] h3::after,
[dir="rtl"] .tk-input-setting[data-setting="miscellaneous"] h3::after {
    left: auto !important;
    right: 0 !important;
}

/* Mobile Responsive for Miscellaneous */
@media (max-width: 768px) {
    .tk-setting[data-setting="miscellaneous"] .input,
    .tk-input-setting[data-setting="miscellaneous"] .input {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .tk-setting[data-setting="miscellaneous"] .tk-setting-row,
    .tk-input-setting[data-setting="miscellaneous"] .tk-setting-row {
        padding: 16px !important;
    }
}