/* ========================================== */
/* 🔥 ULTRA PRO SAAS VARIABLES                */
/* ========================================== */
:root {
    --dw-bg: #f8fafc;
    --dw-card: #ffffff;
    --dw-text: #0f172a;
    --dw-text-mut: #64748b;
    --dw-border: #e2e8f0;
    --dw-primary: #2563eb;
    --dw-primary-hover: #1d4ed8;
    --dw-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --dw-shadow-lg: 0 20px 40px -15px rgba(0,0,0,0.1);
    --dw-radius: 16px;
    --dw-font: 'Inter', sans-serif;
}

.dw-qr-wrapper { max-width: 1200px; margin: 60px auto; padding: 0 20px; font-family: var(--dw-font); }

/* ========================================== */
/* 🔥 1. FLOATING CARD EFFECT ADDED HERE 🔥   */
/* ========================================== */
.dw-qr-container { 
    background: var(--dw-card); 
    border-radius: 24px; 
    padding: 40px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 40px 90px rgba(0,0,0,0.12);
    border: 1px solid var(--dw-border); 
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Float hover */
.dw-qr-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 60px 120px rgba(0,0,0,0.16);
}

/* Header */
.dw-qr-header { text-align: center; margin-bottom: 40px; }
.dw-qr-badge { display: inline-block; background: #eff6ff; color: var(--dw-primary); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; }
.dw-qr-header h1 { font-size: 36px; font-weight: 800; color: var(--dw-text); margin: 0 0 10px 0; letter-spacing: -1px; }
.dw-qr-header p { font-size: 16px; color: var(--dw-text-mut); margin: 0; }

/* Layout Grid */
.dw-qr-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start; }

/* Sections */
.dw-qr-section { background: var(--dw-bg); padding: 25px; border-radius: var(--dw-radius); margin-bottom: 20px; border: 1px solid var(--dw-border); }
.dw-section-title { font-size: 14px; font-weight: 700; color: var(--dw-text-mut); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 1px solid var(--dw-border); }

/* Inputs & Form */
.dw-input-group { margin-bottom: 20px; }
.dw-input-group:last-child { margin-bottom: 0; }
.dw-input-group label { display: block; font-size: 14px; font-weight: 600; color: var(--dw-text); margin-bottom: 8px; }


/* ========================================== */
/* 🚨 2. TEXT CUT FIX (PADDING ADJUSTED) 🚨   */
/* ========================================== */
.dw-input-group input[type="text"], 
.dw-input-group input[type="file"], 
.dw-select-wrapper select {
    width: 100%; 
    /* Padding change ki hai taaki height set rahe aur text kate nahi */
    padding: 12px 14px; 
    height: 48px; /* Fixed height daal di hai */
    border: 2px solid var(--dw-border); 
    border-radius: 12px;
    font-size: 15px; 
    font-family: var(--dw-font); 
    color: var(--dw-text); 
    background: var(--dw-card);
    transition: all 0.2s; 
    box-sizing: border-box; 
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}

.dw-input-group input[type="text"]:focus, 
.dw-select-wrapper select:focus { 
    outline: none; 
    border-color: var(--dw-primary); 
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1); 
}

/* Custom Select Arrow */
.dw-select-wrapper { position: relative; }
.dw-select-wrapper::after { 
    content: '▾'; 
    position: absolute; 
    right: 16px; 
    top: 50%; 
    transform: translateY(-50%); 
    pointer-events: none; 
    color: var(--dw-text-mut); 
    font-size: 16px; 
    font-weight: bold; 
}


/* Color Pickers */
.dw-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.dw-color-picker-wrap { display: flex; align-items: center; gap: 12px; background: var(--dw-card); padding: 8px 12px; border: 2px solid var(--dw-border); border-radius: 12px; height: 48px; box-sizing: border-box; }
.dw-color-picker-wrap input[type="color"] { -webkit-appearance: none; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0; background: none; }
.dw-color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dw-color-picker-wrap input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; box-shadow: var(--dw-shadow-sm); }
.dw-color-hex { font-size: 14px; font-family: monospace; color: var(--dw-text-mut); font-weight: 600; text-transform: uppercase; }

/* Preview Panel */
.dw-preview-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.dw-preview-box { background: var(--dw-bg); padding: 30px; border-radius: var(--dw-radius); border: 1px solid var(--dw-border); display: flex; flex-direction: column; align-items: center; }
.dw-preview-title { font-size: 13px; font-weight: 700; color: var(--dw-text-mut); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; }

/* The Canvas Box */
.dw-canvas-area { background: white; padding: 20px; border-radius: 20px; box-shadow: var(--dw-shadow-lg); transition: transform 0.3s ease; }
.dw-canvas-area:hover { transform: scale(1.02); }

/* Buttons */
.dw-download-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.dw-btn-primary, .dw-btn-secondary { width: 100%; padding: 16px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: var(--dw-font); border: none; }
.dw-btn-primary { background: var(--dw-primary); color: white; box-shadow: 0 4px 14px rgba(37,99,235,0.3); }
.dw-btn-primary:hover { background: var(--dw-primary-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); }
.dw-btn-secondary { background: var(--dw-card); color: var(--dw-text); border: 2px solid var(--dw-border); }
.dw-btn-secondary:hover { border-color: var(--dw-text); background: var(--dw-bg); }

/* Responsive */
@media(max-width: 900px) { .dw-qr-layout { grid-template-columns: 1fr; } .dw-preview-sticky { position: static; } }
@media(max-width: 500px) { .dw-download-actions { grid-template-columns: 1fr; } .dw-qr-container { padding: 25px; } }