/* File: public/css/door-designer.css */

:root {
    --wall-color: #f4f6f8;
    --door-color: #8b5a2b; /* لون خشبي افتراضي */
}


.container {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    width: 90%;
    max-width: 1000px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* --- قسم العرض المرئي (Visualizer) --- */
.visualizer-section {
    flex: 1;
    min-height: 750px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Keeps the door grounded at the bottom */
    padding: 40px;
    border-radius: 15px;

    /* THIS IS THE MAGIC LINE FOR THE WALL COLOR: */
    background-color: var(--wall-color, #f4f6f8);

    /* Adds a smooth fade effect when changing wall colors */
    transition: background-color 0.4s ease;
}

/* الإطار (الحلق) */
.door-frame {
    width: 360px;
    height: 680px;
    border: 20px solid #5c3a21; /* Default frame color, overridden by JS */
    background-color: #2c1e16;  /* Default inner gap color, overridden by JS */
    border-bottom: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Keeps the door touching the floor */
    transition: border-color 0.4s ease, background-color 0.4s ease;
}

/* الباب نفسه */
.door {
    width: 90%; /* Leaves a small gap inside the frame */
    height: 98%;
    position: relative;

    /* THIS IS THE MAGIC LINE FOR THE DOOR COLOR: */
    background-color: var(--door-color, #8b5a2b);

    /* Adds a smooth fade effect when changing door materials */
    transition: background-color 0.4s ease, border-radius 0.4s ease;

    /* Base styling for the door */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3); /* Adds some depth */
}

/* اتجاه الفتح */
.door.hinge-left { transform-origin: left; box-shadow: inset 5px 0 10px rgba(0,0,0,0.2); }
.door.hinge-right { transform-origin: right; }

/* أشكال الأبواب */
.shape-flat { /* مسطح بدون حليات */ }

.shape-classic .panel { /* كلاسيك (مربعات) */
    width: 70%;
    height: 35%;
    border: 3px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.2), inset -2px -2px 5px rgba(0,0,0,0.2);
}

.shape-modern { /* مودرن (خطوط عرضية) */
    background-image: repeating-linear-gradient(
        transparent, transparent 48px, rgba(0,0,0,0.1) 48px, rgba(0,0,0,0.1) 50px
    );
}

.shape-glass .panel-top { /* نصف زجاج */
    width: 70%; height: 45%;
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    border: 4px solid rgba(0,0,0,0.2);
    opacity: 0.8;
}
.shape-glass .panel-bottom { width: 70%; height: 35%; border: 3px solid rgba(0,0,0,0.2); }

/* المقبض (العتلة) */
.handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ccc;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    transition: all 0.3s;
}

/* موضع المقبض بناء على اتجاه الفتح */
.door.hinge-right .handle { left: 15px; }
.door.hinge-left .handle { right: 15px; }

/* أشكال المقابض */
.handle-knob { width: 16px; height: 16px; border-radius: 50%; background: #d4af37; /* كروي ذهبي */ }
.handle-lever { width: 30px; height: 8px; border-radius: 4px; background: #silver; /* ذراع فضي */ }
.handle-long { width: 6px; height: 100px; border-radius: 3px; background: #333; /* طولي أسود */ }
.handle-square { width: 14px; height: 25px; border-radius: 2px; background: #b87333; /* مربع نحاسي */ }

/* --- قسم لوحة التحكم (Controls) --- */
.controls-section {
    flex: 1;
    padding: 30px;
    min-width: 300px;
}

.controls-section h2 { margin-top: 0; color: #1a237e; border-bottom: 2px solid #eee; padding-bottom: 10px;}
.control-group { margin-bottom: 20px; }
.control-group h3 { font-size: 14px; margin-bottom: 10px; color: #555; }

.options-grid { display: flex; gap: 10px; }

/* أزرار الألوان والخيارات */
.btn-option {
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: 0.2s;
}
.btn-option:hover, .btn-option.active { border-color: #1a237e; transform: scale(1.1); }

.btn-text {
    padding: 8px 15px; border: 1px solid #ccc;
    background: #f9f9f9; cursor: pointer; border-radius: 5px;
    font-weight: bold; font-family: inherit; transition: 0.2s;
}
.btn-text:hover, .btn-text.active { background: #1a237e; color: white; border-color: #1a237e; }