/* ==========================================================================
   ⚙️ GURUJI ADMIN - SYSTEM SETTINGS PORTAL CSS (v1.0)
   ========================================================================== */

.settings-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 24px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    width: 100%;
}

.settings-card h3 {
    color: var(--text-main); 
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    font-size: 1.2rem; 
    letter-spacing: 1px; 
    flex-wrap: wrap;
    text-align: left;
}

/* 🟢 STATUS INDICATORS */
.status-indicator {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    border-radius: 12px; font-weight: 700; font-family: 'Inter'; font-size: 0.95rem; margin-bottom: 20px;
    word-break: break-word;
    text-align: left;
}
.status-indicator.active { background: rgba(16, 185, 129, 0.08); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.status-indicator.inactive { background: rgba(239, 68, 68, 0.08); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-indicator.active .status-dot { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); animation: pulse 2s infinite; }
.status-indicator.inactive .status-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 🔘 MODERN TOGGLES */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px; background: rgba(0,0,0,0.15); border-radius: 16px;
    border: 1px solid var(--glass-border); margin-bottom: 16px; gap: 15px;
    text-align: left;
}
.toggle-info { flex: 1; min-width: 0; }
.toggle-info h4 { color: var(--text-main); margin: 0 0 5px 0; font-size: 1rem; font-family: 'Inter'; word-break: break-word; font-weight:700; }
.toggle-info p { color: var(--text-muted); font-size: 0.85rem; margin: 0; line-height: 1.4; word-break: break-word; font-weight:600; }

.settings-card input,
.settings-card textarea,
.settings-card select {
    background: rgba(0,0,0,0.2) !important;
    border-color: var(--glass-border) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.toggle-switch { position: relative; width: 54px; height: 28px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: rgba(255,255,255,0.08); transition: 0.4s; border-radius: 34px; border: 1px solid var(--glass-border); }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 3px; background-color: #94a3b8; transition: 0.4s; border-radius: 50%; }
.toggle-switch input:checked + .toggle-slider { background-color: #10b981; border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.25); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); background-color: #fff; }

/* 📱 RESPONSIVE FORM GRIDS */
.coupon-inputs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.upi-inputs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.publish-update-box {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding: 20px;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    text-align: left;
}

.publish-input-group { flex: 1; min-width: 0; }
.publish-input-group h4 { color: var(--text-main); margin: 0 0 5px 0; font-size: 1rem; font-family: 'Inter'; font-weight:700; }
.publish-input-group p { color: var(--text-muted); font-size: 0.85rem; margin: 0; line-height: 1.4; font-weight:600; }
.publish-input-group textarea {
    width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--glass-border); background: rgba(0,0,0,0.18);
    color: var(--text-main); resize: vertical; font-family: 'Inter', sans-serif;
}

.btn-publish-update {
    border: none; border-radius: 14px; padding: 0 24px; min-height: 48px; height: 48px;
    background: linear-gradient(135deg,#10b981,#059669); color: #fff; font-weight: 800;
    cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; flex-shrink: 0; font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    transition: all 0.25s ease;
}
.btn-publish-update:hover { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); }

.deployed-coupon-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(0,0,0,0.15); border: 1px solid var(--glass-border);
    border-radius: 14px; margin-bottom: 6px; gap: 12px;
    text-align: left;
}

.info-box {
    background: rgba(99, 102, 241, 0.05); border: 1px solid rgba(99, 102, 241, 0.25);
    color: #818cf8; padding: 16px; border-radius: 12px; margin-top: 16px;
    font-size: 0.85rem; line-height: 1.5; text-align: left;
    font-weight: 600;
}

@media (max-width: 768px) {
    .main-content { padding-left: 12px !important; padding-right: 12px !important; }
    .settings-card { padding: 18px 14px; border-radius: 16px; }
    .coupon-inputs-grid,
    .upi-inputs-grid {
        grid-template-columns: 1fr !important;
    }
    .publish-update-box {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .btn-publish-update {
        width: 100%;
        margin-top: 12px;
    }
    .deployed-coupon-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .deployed-coupon-item > div:last-child {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .settings-card h3 {
        font-size: 1.1rem;
    }
}