/**
 * QNB Finansbank - Custom Styles
 * Bu dosya tüm inline CSS'leri içerir ve dinamik olarak güncellenebilir
 */

/* =====================================================
   CSS VARIABLES (Dinamik olarak değiştirilebilir)
   ===================================================== */
:root {
    /* Ana Renk Paleti */
    --qnb-purple: #7c2e8e;
    --qnb-blue: #1e3a8a;
    --qnb-dark: #1a1a2e;

    /* Gradient Tanımları */
    --qnb-gradient-main: linear-gradient(135deg, #7c2e8e 0%, #1e3a8a 100%);
    --qnb-gradient-reverse: linear-gradient(135deg, #1e3a8a 0%, #7c2e8e 100%);

    /* Slider Renkleri */
    --slider-thumb-color: #7c2e8e;
    --slider-track-color: #e5e7eb;
}

/* =====================================================
   GRADIENT BACKGROUNDS
   ===================================================== */
.bg-qnb-gradient {
    background: var(--qnb-gradient-main) !important;
    background-image: var(--qnb-gradient-main) !important;
}

.bg-qnb-gradient-reverse {
    background: var(--qnb-gradient-reverse) !important;
    background-image: var(--qnb-gradient-reverse) !important;
}

/* Header gradient background */
.header-gradient {
    background: var(--qnb-gradient-main) !important;
    background-image: var(--qnb-gradient-main) !important;
}

/* =====================================================
   TEXT COLORS
   ===================================================== */
.text-qnb-purple {
    color: var(--qnb-purple) !important;
}

.text-qnb-blue {
    color: var(--qnb-blue) !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-qnb-primary {
    background: var(--qnb-gradient-main) !important;
    background-image: var(--qnb-gradient-main) !important;
    color: white !important;
    font-weight: 600 !important;
    transition: opacity 0.3s !important;
}

.btn-qnb-primary:hover {
    opacity: 0.9 !important;
}

.btn-qnb-primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* =====================================================
   LOAN SLIDER STYLES
   ===================================================== */
.slider-qnb {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 8px;
    outline: none;
}

.slider-qnb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--slider-thumb-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-qnb::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--slider-thumb-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* =====================================================
   CARDS
   ===================================================== */
.card-qnb-info {
    background: var(--qnb-gradient-main);
    border-radius: 0.75rem;
    padding: 1.25rem;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-qnb-summary {
    background: var(--qnb-gradient-main);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(124, 46, 142, 0.5);
}

/* =====================================================
   VIDEO ROOM STYLES
   ===================================================== */
.video-camera-preview {
    z-index: 10;
}

.video-camera-container {
    width: 480px;
    height: 300px;
}

.video-overlay-gradient {
    background: linear-gradient(135deg, rgba(124, 46, 142, 0.2) 0%, rgba(30, 58, 138, 0.2) 100%);
}

/* =====================================================
   MODAL STYLES
   ===================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Progress bar shine effect */
.progress-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    opacity: 0.3;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.accent-qnb {
    accent-color: var(--qnb-purple);
}

.border-qnb-purple {
    border-color: var(--qnb-purple);
}

.bg-qnb-purple {
    background-color: var(--qnb-purple);
}

.bg-qnb-blue {
    background-color: var(--qnb-blue);
}

/* =====================================================
   DYNAMIC PRIMARY COLORS (Tailwind Override)
   ===================================================== */
.bg-primary-100 {
    background-color: color-mix(in srgb, var(--qnb-purple) 10%, white) !important;
}

.bg-primary-600 {
    background-color: var(--qnb-purple) !important;
}

.bg-primary-700 {
    background-color: color-mix(in srgb, var(--qnb-purple) 90%, black) !important;
}

.text-primary-600 {
    color: var(--qnb-purple) !important;
}

.border-primary-500,
.ring-primary-500 {
    border-color: var(--qnb-purple) !important;
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--qnb-purple) !important;
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.hover\:bg-primary-700:hover {
    background-color: color-mix(in srgb, var(--qnb-purple) 90%, black) !important;
}

/* Gradient classes with dynamic colors */
.bg-gradient-to-br.from-blue-500.to-purple-600 {
    background: linear-gradient(to bottom right, var(--qnb-blue), var(--qnb-purple)) !important;
}

.bg-gradient-to-r.from-blue-500.via-purple-500.to-blue-600 {
    background: linear-gradient(to right, var(--qnb-blue), var(--qnb-purple), var(--qnb-blue)) !important;
}

.bg-gradient-to-br.from-blue-50.to-blue-100 {
    background: linear-gradient(to bottom right,
        color-mix(in srgb, var(--qnb-blue) 5%, white),
        color-mix(in srgb, var(--qnb-blue) 10%, white)
    ) !important;
}

.border-blue-200 {
    border-color: color-mix(in srgb, var(--qnb-blue) 20%, white) !important;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) {
    .video-camera-container {
        width: 100%;
        height: auto;
        aspect-ratio: 16/10;
    }
}

/* Mobile overflow prevention */
body {
    overflow-x: hidden;
}

/* Ensure proper box sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Grid items should not overflow */
.min-w-0 {
    min-width: 0 !important;
}

/* Ensure range inputs don't overflow */
input[type="range"] {
    max-width: 100%;
    width: 100%;
}

/* =====================================================
   PiP (Picture-in-Picture) CUSTOMIZATION
   ===================================================== */
.pip-canvas-gradient-start {
    stop-color: var(--qnb-purple);
}

.pip-canvas-gradient-end {
    stop-color: var(--qnb-blue);
}

/* =====================================================
   CUSTOM SCROLLBAR
   ===================================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--qnb-purple);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--qnb-blue);
}

/* =====================================================
   LOGO CUSTOMIZATION
   ===================================================== */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    color: var(--qnb-purple);
    font-size: 1.25rem;
    font-weight: bold;
}