/* Gift Orders — storefront widget. Self-contained: no theme classes reused.
   Every colour is read from the store palette the theme publishes (--sf-*), so
   the section and the modal follow whatever theme the merchant is running. */

.dsg-promo,
.dsg-overlay {
    --dsg-primary: var(--sf-primary, #7c3aed);
    --dsg-primary-hover: var(--sf-primary-hover, var(--sf-primary, #6d28d9));
    --dsg-surface: var(--sf-surface, #ffffff);
    --dsg-bg: var(--sf-bg, #ffffff);
    --dsg-text: var(--sf-text, #1f2937);
    --dsg-muted: var(--sf-text-muted, #6b7280);
    --dsg-border: var(--sf-border, rgba(127, 127, 127, .28));
    --dsg-on-primary: var(--sf-cta-text, #ffffff);
}

/* ---- Section above the details/reviews block --------------------------- */

.dsg-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--dsg-border);
    border-radius: 1rem;
    background: var(--dsg-surface);
    color: var(--dsg-text);
}

.dsg-promo__text { flex: 1 1 16rem; }
.dsg-promo__text h2 { margin: 0; color: var(--dsg-primary); font-size: 1.0625rem; font-weight: 800; }
.dsg-promo__text p { margin: .35rem 0 0; color: var(--dsg-muted); font-size: .8125rem; line-height: 1.6; }

.dsg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: .75rem;
    background: var(--dsg-primary);
    color: var(--dsg-on-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.dsg-btn:hover { background: var(--dsg-primary-hover); }
.dsg-btn svg { width: 1.15em; height: 1.15em; }

/* ---- Modal ------------------------------------------------------------- */

.dsg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(6, 8, 15, .68);
    backdrop-filter: blur(3px);
}

.dsg-overlay.is-open { display: flex; }

.dsg-modal {
    position: relative;
    width: 100%;
    max-width: 32rem;
    margin: auto;
    border: 1px solid var(--dsg-border);
    border-radius: 1.25rem;
    background: var(--dsg-surface);
    color: var(--dsg-text);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    font-family: inherit;
}

.dsg-head { padding: 1.5rem 1.5rem 0; text-align: center; }

.dsg-badge {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dsg-primary) 22%, transparent);
    color: var(--dsg-primary);
}

.dsg-badge svg { width: 2rem; height: 2rem; }

.dsg-step-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    margin-top: 1rem;
}

.dsg-step-title::before,
.dsg-step-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dsg-border);
}

.dsg-step-title h2 { margin: 0; font-size: 1rem; font-weight: 800; }

.dsg-step-count {
    padding: .15rem .55rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--dsg-text) 12%, transparent);
    font-size: .75rem;
    font-weight: 700;
}

.dsg-close {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .6rem;
    background: #ef4444;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.dsg-body { padding: 1.25rem 1.5rem; display: grid; gap: 1.125rem; }
.dsg-step { display: grid; gap: 1.125rem; }
.dsg-section { display: grid; gap: .625rem; }

.dsg-section > h3 {
    margin: 0;
    color: var(--dsg-muted);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.dsg-grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.dsg-grid--full { grid-template-columns: 1fr; }

.dsg-field { display: grid; gap: .35rem; }
.dsg-field--full { grid-column: 1 / -1; }
.dsg-field > span { font-size: .78rem; font-weight: 600; }

.dsg-field input,
.dsg-field select,
.dsg-field textarea {
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--dsg-border);
    border-radius: .75rem;
    background: var(--dsg-bg);
    color: var(--dsg-text);
    font: inherit;
    font-size: .875rem;
}

.dsg-field textarea { min-height: 5rem; resize: vertical; }
.dsg-field input:focus,
.dsg-field select:focus,
.dsg-field textarea:focus { outline: 2px solid var(--dsg-primary); outline-offset: 1px; }

/* ---- Gift card picker -------------------------------------------------- */

.dsg-cards { display: grid; gap: .625rem; grid-template-columns: repeat(3, 1fr); }

.dsg-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 6rem;
    padding: .5rem;
    border: 2px dashed var(--dsg-border);
    border-radius: .85rem;
    background-color: color-mix(in srgb, var(--dsg-primary) 12%, transparent);
    background-position: center;
    background-size: cover;
    color: var(--dsg-muted);
    font: inherit;
    font-size: .7rem;
    text-align: center;
    cursor: pointer;
}

.dsg-card.is-active { border-style: solid; border-color: var(--dsg-primary); }
.dsg-card--upload input { display: none; }

.dsg-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Payment ----------------------------------------------------------- */

.dsg-pay { display: grid; gap: .5rem; }

.dsg-pay label {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--dsg-border);
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.dsg-pay label:has(input:checked) { border-color: var(--dsg-primary); }
.dsg-pay img { width: 1.75rem; height: 1.75rem; object-fit: contain; }

.dsg-totals {
    display: grid;
    gap: .35rem;
    padding: .875rem 1rem;
    border-radius: .85rem;
    background: color-mix(in srgb, var(--dsg-text) 8%, transparent);
    font-size: .8125rem;
}

.dsg-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.dsg-totals .dsg-total { font-size: .9375rem; font-weight: 800; }

.dsg-note {
    padding: .75rem .875rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--dsg-text) 8%, transparent);
    color: var(--dsg-muted);
    font-size: .78rem;
    line-height: 1.6;
}

.dsg-alert {
    padding: .75rem .875rem;
    border-radius: .75rem;
    background: rgba(239, 68, 68, .14);
    color: #ef4444;
    font-size: .8125rem;
    font-weight: 600;
}

/* ---- Footer ------------------------------------------------------------ */

.dsg-foot { display: flex; gap: .625rem; padding: 0 1.5rem 1.5rem; }

.dsg-submit {
    flex: 1;
    padding: .875rem 1.25rem;
    border: 0;
    border-radius: .75rem;
    background: var(--dsg-primary);
    color: var(--dsg-on-primary);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.dsg-submit[disabled] { opacity: .55; cursor: not-allowed; }

.dsg-back {
    flex: none;
    width: 3.25rem;
    border: 1px solid var(--dsg-primary);
    border-radius: .75rem;
    background: transparent;
    color: var(--dsg-primary);
    font-size: 1.125rem;
    cursor: pointer;
}

.dsg-hidden { display: none !important; }

@media (max-width: 30rem) {
    .dsg-grid { grid-template-columns: 1fr; }
    .dsg-cards { grid-template-columns: repeat(2, 1fr); }
}