/* Qeridoo Retourenmanagement — portal styles.
   All colors come from Bootstrap/Smartstore CSS variables so the page respects the theme.
   Bootstrap handles cards, alerts, buttons, forms — only minimal additions here. */

/* ── Hero ──────────────────────────────────────────────────── */
.qrm-hero {
    background: transparent;
    color: var(--bs-body-color, #212529);
}

.qrm-hero-title {
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.qrm-hero-sub {
    max-width: 640px;
    margin: 0 auto;
}

/* ── Stepper ───────────────────────────────────────────────── */
.qrm-stepper {
    list-style: none;
    padding: 0;
    margin: 1.5rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    max-width: 720px;
}

.qrm-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
}

.qrm-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #495057);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.qrm-step.is-active {
    color: var(--bs-body-color, #212529);
    font-weight: 600;
}

/* Active step uses the Smartstore theme's $secondary color. The Qeridoo theme exposes it under
   `--secondary-rgb` (Bootstrap also emits `--bs-secondary-rgb` in vanilla builds); we fall back
   to Bootstrap's default secondary as a last resort. */
.qrm-step.is-active .qrm-step-circle {
    background: rgb(var(--secondary-rgb, var(--bs-secondary-rgb, 108, 117, 125)));
    color: var(--bs-body-bg, #fff);
}

.qrm-step.is-done {
    opacity: .75;
}

.qrm-step.is-done .qrm-step-circle {
    background: var(--bs-secondary-bg, #adb5bd);
    color: var(--bs-body-color, #495057);
}

.qrm-step-line {
    flex-grow: 0;
    width: 48px;
    height: 2px;
    background: var(--bs-border-color, #dee2e6);
}

@media (max-width: 575.98px) {
    .qrm-step-label { display: none; }
    .qrm-step-line  { width: 24px; }
}

/* ── Narrow, centered layout ───────────────────────────────── */
.qrm-portal-narrow {
    max-width: 720px;
}

/* ── Legal hint (Widerruf / §9) ────────────────────────────── */
.qrm-legal-hint {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0.25rem;
    line-height: 1.5;
}
.qrm-legal-hint a { text-decoration: underline; }

/* ── Kulanz item list (§3.4) ───────────────────────────────── */
.qrm-kulanz-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.qrm-kulanz-item input[type=checkbox] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--bs-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.qrm-kulanz-item label {
    cursor: pointer;
    margin: 0;
    line-height: 1.5;
}

/* ── DSGVO consent (§9) ────────────────────────────────────── */
.qrm-dsgvo-consent {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: start;
    gap: 0.4rem 0.6rem;
    padding: 0.85rem 1rem;
    background: rgb(255 243 205);
    border-radius: 0.25rem;
    border: 1px solid rgb(255 230 156);
    font-size: 0.9rem;
    line-height: 1.5;
}
.qrm-dsgvo-consent input[type=checkbox] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--bs-primary);
    cursor: pointer;
}
.qrm-dsgvo-consent .qrm-dsgvo-required {
    font-weight: 600;
    margin-top: 0.1rem;
}
.qrm-dsgvo-consent label {
    cursor: pointer;
    margin: 0;
}
.qrm-dsgvo-consent a { text-decoration: underline; }

/* ── Article cards (Step 2) ────────────────────────────────── */
.qrm-article .card-body {
    padding: 1.25rem;
}

.qrm-article-header {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.qrm-article-header .qrm-article-toggle {
    margin-top: .35rem;
    flex-shrink: 0;
}

.qrm-article-info {
    flex: 1;
}

.qrm-article-name {
    cursor: pointer;
    margin-bottom: .25rem;
    display: inline-block;
}

.qrm-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

/* Process selection (Rückgabe / Reklamation big buttons) */
.qrm-process-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.qrm-process-option {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: 1rem .75rem;
    text-align: center;
    cursor: pointer;
    background: var(--bs-body-bg, #fff);
    transition: border-color .15s, background-color .15s, transform .05s;
    margin: 0;
}

.qrm-process-option:hover {
    border-color: var(--bs-emphasis-color, #000);
}

.qrm-process-option:active {
    transform: translateY(1px);
}

.qrm-process-option.is-active[data-process="return"] {
    border-color: var(--bs-warning, #ffc107);
    background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, .08));
}

.qrm-process-option.is-active[data-process="complaint"] {
    border-color: var(--bs-info, #0dcaf0);
    background: var(--bs-info-bg-subtle, rgba(13, 202, 240, .08));
}

.qrm-process-icon {
    font-size: 1.5rem;
    margin-bottom: .35rem;
}

.qrm-process-option.is-active .qrm-process-icon {
    color: var(--bs-emphasis-color, #000);
}

.qrm-process-title {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .25rem;
}

.qrm-process-desc {
    font-size: .8rem;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .qrm-process-options { grid-template-columns: 1fr; }
}

/* Bundle hint above the process choice */
.qrm-bundle-hint ul li {
    line-height: 1.4;
}

/* Already-returned items appear faded and uninteractable. */
.qrm-article-disabled {
    opacity: .6;
    pointer-events: none;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.qrm-existing-return {
    border-left: 3px solid var(--bs-warning, #ffc107);
}

/* ── Done / Confirmation page ──────────────────────────────── */
.qrm-check-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bs-success-bg-subtle, rgba(25, 135, 84, .12));
    color: var(--bs-success, #198754);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: .5rem;
}

.qrm-return-number {
    display: inline-block;
    padding: .65rem 1.5rem;
    border: 2px dashed var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgb(var(--secondary-rgb, var(--bs-secondary-rgb, 108, 117, 125)));
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* ── Outage / Wartungsseite ────────────────────────────────── */
.qrm-outage-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, .12));
    color: var(--bs-warning, #ffc107);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.qrm-summary-table th {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .03em;
    font-weight: 600;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Smartstore-Theme rendert .close mit Hintergrund-SVG (X) PLUS box-shadow
   (schwarzer + weißer Inset-Outline) — sieht wie ein "X in einem Kasten" aus.
   Im Widerruf-Modal wollen wir einen schlichten X-Close ohne Rahmen. */
#qrm-widerruf-confirm .modal-header .close {
    box-shadow: none !important;
    padding: .5rem;
    opacity: .6;
    transition: opacity .15s ease-in-out;
}

#qrm-widerruf-confirm .modal-header .close:hover,
#qrm-widerruf-confirm .modal-header .close:focus {
    opacity: 1;
    outline: none;
}

#qrm-widerruf-confirm .modal-header .close i {
    display: none;
}