@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body, html {
    font-family: 'Tajawal', system-ui, sans-serif !important;
}

/* Onyx Black Background */
#box-designer-app, #box-designer-app.is-night, #box-designer-app.is-day, .viewport-container, body {
    background: linear-gradient(135deg, #0a0a0a 0%, #171717 100%) !important;
    background-color: #0a0a0a !important;
}

/* Glassmorphism sidebar with gold tint */
.sidebar {
    background: rgba(10, 10, 10, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(251, 191, 36, 0.15) !important;
    box-shadow: 5px 0 30px rgba(0,0,0,0.6) !important;
}

.app-header {
    border-bottom: 1px solid rgba(251, 191, 36, 0.15) !important;
    padding-bottom: 15px !important;
}

.app-header .logo {
    background: transparent !important;
    background-color: transparent !important;
}

/* Luxury Gold Text Gradient */
.app-header .logo h1 {
    font-weight: 800 !important;
    color: #fbbf24 !important; /* Fallback for browsers that don't support text gradient */
    background: linear-gradient(to right, #fbbf24, #f59e0b, #d97706) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.2) !important;
}

.app-header .logo-icon {
    color: #fbbf24 !important;
    font-size: 1.5rem !important;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4)) !important;
}

/* Control groups with subtle gold borders */
.control-group {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(251, 191, 36, 0.1) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: inset 0 0 20px rgba(251, 191, 36, 0.02), 0 4px 10px rgba(0,0,0,0.3) !important;
}

.control-group h2 {
    color: #f3f4f6 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-bottom: 1px dashed rgba(251, 191, 36, 0.2) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.control-group h2 i {
    color: #fbbf24 !important;
}

/* Segmented Buttons */
.segmented-control {
    background: rgba(0,0,0,0.4) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

.segment-btn {
    border-radius: 6px !important;
    color: #9ca3af !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.segment-btn.active {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Gold Sliders */
.slider {
    accent-color: #fbbf24 !important;
    height: 6px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 3px !important;
}

.slider::-webkit-slider-thumb {
    background: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
}

/* Number inputs */
#box-designer-app input[type="number"], 
#box-designer-app input[type="text"], 
.input-with-unit input,
.cell-editor-field input {
    background: rgba(10, 10, 10, 0.8) !important;
    background-color: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
}

#box-designer-app input:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
    outline: none !important;
}

.input-with-unit .unit-label {
    color: #9ca3af !important;
}

/* All other buttons */
#box-designer-app button:not(.segment-btn):not(#btn-svg):not(#btn-dxf):not(.viewport-tool-button):not(.lid-mode-button) {
    background-color: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

/* Action Buttons (Download) */
#btn-svg {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: white !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2) !important;
    border-radius: 8px !important;
}
#btn-svg:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important; }

#btn-dxf {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: white !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2) !important;
    border-radius: 8px !important;
}
#btn-dxf:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important; }

#btn-about {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}
#btn-about:hover { background: rgba(255,255,255,0.08) !important; }

/* Viewport tool buttons (Lid buttons) */
.viewport-tool-button {
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 50% !important;
    color: #fbbf24 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.viewport-tool-button:hover, .viewport-tool-button[aria-expanded="true"] {
    background: #fbbf24 !important;
    color: #000 !important;
    border-color: #fbbf24 !important;
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5) !important;
}

.viewport-tool-button svg {
    fill: currentColor !important;
}

/* Custom Tabs Count Box */
#custom-tabs-count-row {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(217, 119, 6, 0.05)) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-radius: 8px !important;
}
#custom-tabs-display {
    background: rgba(251, 191, 36, 0.15) !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    color: #fbbf24 !important;
}

/* Lid Popovers & Summary Cards */
.divider-popover, .removable-lid-popover, .slide-lid-popover, .two-door-lid-popover, .door-lid-popover, .box-summary-card, .model-hover-editor {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.7) !important;
    border-radius: 16px !important;
    color: #f3f4f6 !important;
}

/* Mobile summary toggle (top right on mobile) */
.mobile-summary-toggle, .floating-instructions {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

/* Text overrides */
.subtitle, .sum-label, .sum-val, p {
    color: #d1d5db !important; /* light gray instead of navy/blue */
}

/* Checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
    accent-color: #fbbf24 !important;
}

.check {
    color: #d1d5db !important;
}


/* Download Dialog Overrides */
.vp-box-download-overlay {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(10px) !important;
}

.vp-box-download-dialog {
    background: linear-gradient(145deg, #171717, #0a0a0a) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.9) !important;
    color: #f3f4f6 !important;
}

.vp-box-download-icon {
    background: rgba(251, 191, 36, 0.1) !important;
    color: #fbbf24 !important;
}

.vp-box-download-dialog h2 {
    color: #fbbf24 !important;
}

.vp-box-download-dialog p {
    color: #d1d5db !important;
}

.vp-box-download-primary {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: #fff !important;
}
.vp-box-download-primary:hover {
    background: #fbbf24 !important;
    color: #000 !important;
}

.vp-box-download-secondary, .vp-box-download-close {
    color: #9ca3af !important;
}
.vp-box-download-close {
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(0,0,0,0.5) !important;
}
.vp-box-download-close:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Info Popup */
.info-popup-window {
    background: linear-gradient(135deg, #171717, #0a0a0a) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.9) !important;
    color: #d1d5db !important;
}
.info-popup-header {
    border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
}
.info-popup-header h2 {
    color: #fbbf24 !important;
}

.lid-mode-button {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    color: #9ca3af !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}
.lid-mode-button.active {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

.feature-remove-button, .info-popup-close-btn {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 6px !important;
}
.feature-remove-button:hover, .info-popup-close-btn:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Floating Language Button */
#lang-toggle-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px) !important;
    background: linear-gradient(135deg, rgba(23, 23, 23, 0.9), rgba(38, 38, 38, 0.9)) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}
#lang-toggle-btn:hover {
    background: #fbbf24 !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4) !important;
}