.drawer-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    z-index: 2000;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-backdrop.show { opacity: 1; visibility: visible; }

.drawer-panel {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 440px; height: 100vh;
    background: #ffffff;
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; justify-content: space-between;
}

.drawer-backdrop.show .drawer-panel { transform: translateX(0); }

.drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: space-between;
    background: #f8fafc;
}

.drawer-title { font-size: 1.0625rem; font-weight: 600; color: #0f172a; }

.drawer-close-btn {
    width: 2rem; height: 2rem;
    border-radius: 50%; border: 1px solid #cbd5e1;
    background: #ffffff; color: #64748b;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.drawer-body { padding: 1.5rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }

.drawer-product-summary {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 0.875rem;
    display: flex; align-items: center; gap: 0.875rem;
}

.drawer-summary-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 8px;
    background: #ffffff; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--primary-color, #2563eb);
}

.drawer-summary-title { font-size: 0.8438rem; font-weight: 500; color: #0f172a; }
.drawer-summary-price { font-size: 0.9375rem; font-weight: 500 !important; color: var(--primary-color, #2563eb); margin-top: 0.125rem; }

.drawer-field-group { display: flex; flex-direction: column; gap: 0.375rem; }
.drawer-field-label { font-size: 0.8125rem; font-weight: 500; color: #334155; }
.drawer-input, .drawer-textarea {
    width: 100%; height: 44px; padding: 0 0.875rem;
    border-radius: 8px; border: 1px solid #cbd5e1;
    font-size: 0.875rem; outline: none;
}

.drawer-textarea { height: 80px; padding: 0.625rem; resize: none; }

.drawer-footer { padding: 1.25rem 1.5rem; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.drawer-submit-btn {
    width: 100%; height: 48px; border-radius: 8px;
    background: var(--primary-color, #2563eb); color: #ffffff;
    font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}