/*
 * FILE: public/assets/css/inquiry.css
 * Elegant Encasements — Inquiry Form & Confirmation Styles
 */

.inquiry-page { padding-top: calc(80px + var(--space-16)); padding-bottom: var(--space-24); }

.inquiry-layout { display: grid; grid-template-columns: 1fr 480px; gap: var(--space-20); align-items: start; }

.inquiry-intro { padding-top: var(--space-4); }
.inquiry-intro__heading { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 300; line-height: 1.1; margin-bottom: var(--space-6); }
.inquiry-intro__heading .script { font-family: var(--font-script); font-size: 1.15em; color: var(--color-gold); display: block; line-height: 1.2; }
.inquiry-intro__desc { font-size: var(--text-lg); font-weight: 300; color: var(--color-parchment); line-height: 1.8; margin-bottom: var(--space-10); }
.inquiry-intro__rule { width: 60px; height: 1px; background: var(--color-gold); margin-bottom: var(--space-10); }

.inquiry-journeys { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-12); }
.inquiry-journey { display: flex; gap: var(--space-5); align-items: flex-start; }
.inquiry-journey__num { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-gold-dim); line-height: 1; flex-shrink: 0; width: 40px; transition: color var(--transition-base); }
.inquiry-journey:hover .inquiry-journey__num { color: var(--color-gold); }
.inquiry-journey__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-parchment); margin-bottom: var(--space-2); }
.inquiry-journey__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: 0; }

.inquiry-promise { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-black-soft); border: 1px solid var(--color-border); border-left: 2px solid var(--color-gold); }
.inquiry-promise__text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0; line-height: 1.6; }
.inquiry-promise__text strong { color: var(--color-gold); font-weight: 500; }

.inquiry-form-wrapper { background: var(--color-black-soft); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-10); position: sticky; top: calc(80px + var(--space-8)); }
.inquiry-form-wrapper::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, var(--color-gold), var(--color-gold-pale), transparent); margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-10)) var(--space-8); border-radius: var(--card-radius) var(--card-radius) 0 0; }

.inquiry-form-title    { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; margin-bottom: var(--space-2); }
.inquiry-form-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); }

.inquiry-type-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-8); }
.inquiry-type-option { position: relative; }
.inquiry-type-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.inquiry-type-label { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-black-mid); border: 1px solid var(--color-border); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); border-radius: var(--card-radius); }
.inquiry-type-option input:checked + .inquiry-type-label { border-color: var(--color-gold); background: var(--color-gold-glow); }
.inquiry-type-label:hover { border-color: var(--color-border-gold); }

.inquiry-type-name { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-parchment); }
.inquiry-type-desc { font-size: 0.625rem; color: var(--color-text-muted); letter-spacing: 0.02em; line-height: 1.4; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.inquiry-items-list { margin-bottom: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; }
.inquiry-items-list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: var(--color-black-mid); border-bottom: 1px solid var(--color-border); }
.inquiry-items-list-title { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold); }

.inquiry-item-entry { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.inquiry-item-entry:last-child { border-bottom: none; }
.inquiry-item-thumb { width: 44px; height: 44px; background: var(--color-black-mid); flex-shrink: 0; overflow: hidden; }
.inquiry-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.inquiry-item-info { flex: 1; }
.inquiry-item-code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-gold); margin-bottom: 2px; }
.inquiry-item-name { font-size: var(--text-sm); color: var(--color-parchment); }
.inquiry-item-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 16px; padding: var(--space-2); transition: color var(--transition-fast); }
.inquiry-item-remove:hover { color: var(--color-error); }

.inquiry-submit-area { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.inquiry-submit-btn { width: 100%; justify-content: center; padding-block: var(--space-4); font-size: var(--text-sm); }
.inquiry-submit-note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--space-4); margin-bottom: 0; }

.inquiry-submit-btn.is-loading { pointer-events: none; opacity: 0.7; }
.inquiry-submit-btn.is-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--color-black); border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: var(--space-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Confirmation */
.confirmation-page { padding-top: calc(80px + var(--space-24)); padding-bottom: var(--space-24); min-height: 80vh; display: flex; align-items: center; }

.confirmation-card { max-width: 640px; margin-inline: auto; text-align: center; padding: var(--space-16) var(--space-12); background: var(--color-black-soft); border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.confirmation-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }

.confirmation-icon { width: 72px; height: 72px; margin: 0 auto var(--space-8); border: 1px solid var(--color-border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.confirmation-icon-check { width: 32px; height: 32px; position: relative; }
.confirmation-icon-check::after { content: ''; position: absolute; top: 4px; left: 9px; width: 12px; height: 20px; border: 2px solid var(--color-gold); border-top: none; border-left: none; transform: rotate(40deg); }

.confirmation-title   { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 300; margin-bottom: var(--space-5); }
.confirmation-rule    { width: 60px; height: 1px; background: var(--color-gold); margin: 0 auto var(--space-6); }
.confirmation-message { font-size: var(--text-base); font-weight: 300; color: var(--color-parchment); line-height: 1.8; margin-bottom: var(--space-10); }
.confirmation-ref     { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-gold); background: var(--color-black-mid); padding: var(--space-3) var(--space-6); display: inline-block; margin-bottom: var(--space-10); letter-spacing: var(--tracking-wide); }
.confirmation-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

@media (max-width: 1000px) { .inquiry-layout { grid-template-columns: 1fr; } .inquiry-form-wrapper { position: static; } }
@media (max-width: 600px) { .inquiry-form-wrapper { padding: var(--space-8) var(--space-6); } .form-row-2 { grid-template-columns: 1fr; } .confirmation-card { padding: var(--space-10) var(--space-6); } }