/* ==========================================================================
   Qemmah — Guest advertising flow (request, review/status, payment).
   Builds on checkout-premium (forms), content-premium (head band),
   account-premium (cards, modals, tracker).
   ========================================================================== */

.qm-ad .qm-ad-steps { margin-bottom: 20px; }
.qm-ad-form { display: grid; gap: 18px; }
.qm-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qm-field--wide { grid-column: span 2; }
.qm-ad-num { display: grid; place-items: center; width: 28px; height: 28px; font-size: 13px; font-weight: 800; color: #3a2219; background: var(--qm-gloss-gold); border-radius: 50%; }
.qm-ad .qm-acc-card__title { margin-bottom: 20px; }
.qm-ad .qm-auth.qm-acc-embed .collection input#phone { height: 50px; min-height: 50px; }

/* file picker (the label opens the native dialog) */
.qm-drop { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; margin: 0; cursor: pointer; background: #fffdfb; border: 1px dashed rgba(161, 120, 92, .45); border-radius: 13px; transition: border-color .2s, background-color .2s; }
.qm-drop:hover { background: #fdf8f3; border-color: var(--qm-gold-3); }
.qm-drop i { font-size: 16px; color: var(--qm-gold-4); }
.qm-drop .text_file { overflow: hidden; font-size: 13.5px; color: #8a7466; white-space: nowrap; text-overflow: ellipsis; }
.qm-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.qm-ad-rules { margin-bottom: 20px; padding: 16px 18px; background: #f2f8f4; border: 1px solid rgba(46, 125, 79, .18); border-radius: 16px; }
.qm-ad-rules h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: #2e6b47; }
.qm-ad-rules ul { margin: 0; padding-inline-start: 1.2em; font-size: 13.5px; line-height: 1.9; color: #3a4a40; }
.qm-ad-tip { margin-inline-start: 4px; font-size: 12px; color: var(--qm-gold-4); cursor: help; }

.qm-ad-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 22px; background: #fff; border-radius: 20px; box-shadow: var(--qc-card); }
.qm-ad-submit--flush { margin-top: 18px; padding: 0; background: none; box-shadow: none; }
.qm-ad-submit p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #8a7466; }
.qm-ad-submit p i { color: var(--qm-gold-4); }
.qm-ad-submit .qm-btn-gold { width: auto; min-width: 220px; margin-top: 0; }

/* review / status / payment */
.qm-ad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 22px; }
.qm-ad-main { display: grid; gap: 18px; }
.qm-ad-side { position: sticky; top: 190px; display: grid; gap: 14px; }
.qm-ad-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.qm-ad-dl .is-wide { grid-column: 1 / -1; }
.qm-ad-dl dt { margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: #8a7466; }
.qm-ad-dl dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--qm-ink); overflow-wrap: anywhere; }
.qm-ad-dl a { color: var(--qm-brown); }
.qm-ad-pre { font-weight: 500 !important; line-height: 1.85; white-space: pre-line; }
.qm-ad-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; background: #faf3ec; border-radius: 999px; }
.qm-ad-banner { margin: 0 0 18px; overflow: hidden; aspect-ratio: 1720 / 600; background: #f3ece5; border-radius: 14px; }
.qm-ad-banner img { width: 100%; height: 100%; object-fit: cover; }
.qm-ad-banner--side { margin: 0; }

.qm-ad-price { position: relative; overflow: hidden; isolation: isolate; padding: 22px; color: #fff; background: radial-gradient(260px 160px at 100% 0, rgba(226, 193, 156, .32), transparent 65%), linear-gradient(140deg, #1a1210 0%, #2b1a14 55%, #4a2c20 100%); border-radius: 22px; box-shadow: 0 30px 56px -34px rgba(26, 18, 16, .85); }
.qm-ad-price__label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--qm-gold-2); }
.qm-ad-price__value { display: inline-flex; align-items: baseline; gap: 6px; font-size: 40px; font-weight: 800; line-height: 1.1; background: var(--qm-gloss-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qm-ad-price__value svg { width: .45em; height: .45em; color: var(--qm-gold-2); }
.qm-ad-price dl { display: grid; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(226, 193, 156, .18); }
.qm-ad-price dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.qm-ad-price dt { font-weight: 500; color: rgba(255, 255, 255, .6); }
.qm-ad-price dd { margin: 0; font-weight: 700; text-align: end; }
.qm-ad-price dd svg { width: .8em; height: .8em; }

.qm-ad-actions { display: grid; gap: 10px; padding: 18px; background: #fff; border-radius: 20px; box-shadow: var(--qc-card); }
.qm-ad-actions form { margin: 0; }
.qm-ad-actions .qm-btn-gold { margin-top: 0; }
.qm-ad-actions__note { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.7; color: #6b5a50; }
.qm-ad-actions__note i { margin-top: 4px; color: var(--qm-gold-4); }
.qm-ad-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 13.5px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; background: #fff; border: 1px solid rgba(161, 120, 92, .3); border-radius: 14px; }
.qm-ad-back:hover { background: #fffaf5; border-color: var(--qm-gold-3); }
.qm-ad-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; }
.qm-ad-state i { margin-top: 3px; font-size: 18px; }
.qm-ad-state div { display: grid; gap: 2px; }
.qm-ad-state b { font-size: 14px; }
.qm-ad-state small { font-size: 12.5px; opacity: .85; }
.qm-ad-state--wait { color: #8a5a12; background: #fff6e6; }
.qm-ad-state--ready { color: #2f4f73; background: #eef4fb; }
.qm-ad-state--done { color: #2e6b47; background: #eef8f1; }
.qm-ad-pay__note { margin: -8px 0 16px; font-size: 13px; color: #8a7466; }

@media (max-width: 991px) {
    .qm-form__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qm-ad-grid { grid-template-columns: 1fr; }
    .qm-ad-side { position: static; }
}

@media (max-width: 575px) {
    .qm-form__grid--3, .qm-ad-dl { grid-template-columns: 1fr; }
    .qm-field--wide { grid-column: auto; }
    .qm-ad-submit .qm-btn-gold { width: 100%; }
}
.qm-ad-hint { display: flex; gap: 6px; margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #8a7466; } .qm-ad-hint i { margin-top: 3px; font-size: 11px; color: var(--qm-gold-4); }