/* ============================================================
   CampMatic — Bestellseiten (shop.php und shop_accessories.php)
   ============================================================
   Stand bis hierher als <style>-Block in shop.php. Mit der zweiten Bestellseite waere
   daraus eine zweite, abgetippte Fassung geworden — deshalb hier.

   WIRD NACH style.css EINGEBUNDEN und gewinnt damit bei gleicher Spezifitaet, genau wie
   der Inline-Block vorher. Wer eine Regel aus style.css hier ueberschreibt, sollte das
   trotzdem mit erhoehter Spezifitaet tun und sich nicht auf die Reihenfolge verlassen. */

.shop { padding: 120px 24px 60px; max-width: 900px; margin: 0 auto; }
.shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.shop__product { position: sticky; top: 100px; }
.shop__img { width: 100%; border-radius: 12px; box-shadow: var(--shadow-md); margin-bottom: 20px; }
.shop__name { font-family: var(--font-heading); font-size: 1.5rem; color: var(--navy); margin-bottom: 2px; }
.shop__sku { display: inline-block; font-family: var(--font-mono, Menlo, monospace); font-size: 0.72rem; font-weight: 500; color: var(--slate); background: #f4f5f7; border: 1px solid #e3e6ea; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; margin-bottom: 10px; }
.shop__sub { color: var(--slate); font-size: 0.9rem; margin-bottom: 16px; }
.shop__price-big { font-family: var(--font-heading); font-size: 2rem; color: var(--orange); font-weight: 700; }
.shop__price-note { font-size: 0.8rem; color: var(--slate); }
.shop__avail { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.85rem; color: var(--green); font-weight: 600; }
.shop__avail::before { content: ''; width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.shop__ships { font-size: 0.82rem; color: var(--slate); margin-top: 4px; }
.shop__summary { margin-top: 24px; background: #f8f9fa; border-radius: 10px; padding: 16px; }
.shop__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; }
.shop__row--total { border-top: 2px solid var(--navy); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; }
.shop__form h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--navy); margin: 24px 0 12px; }
.shop__form h3:first-child { margin-top: 0; }
.shop__form .form-group { margin-bottom: 12px; }
.shop__form .form-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.shop__form select { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-family: var(--font-body); font-size: 0.95rem; color: var(--navy); background: #fafbfc; }
.shop__form select:focus { outline: none; border-color: var(--orange); }
.payment-tabs { display: flex; gap: 12px; margin-bottom: 16px; }
.payment-tab { flex: 1; padding: 14px; border: 2px solid #ddd; border-radius: 10px; text-align: center; cursor: pointer; transition: all var(--transition); background: #fafbfc; }
.payment-tab.active { border-color: var(--orange); background: #fff8f4; }
.payment-tab strong { display: block; font-size: 0.9rem; color: var(--navy); }
.payment-tab span { font-size: 0.78rem; color: var(--slate); }
#paypalContainer { min-height: 50px; margin: 16px 0; }
.shop__legal { margin: 16px 0; }
.shop__legal label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--slate); margin-bottom: 8px; line-height: 1.5; }
.shop__legal a { color: var(--orange); }
.shop__legal input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
/* Voluntary opt-in — visually separated so it does not read as a required box */
/* ---- Express Checkout: hebt sich vom Formular ab, ohne es zu verdraengen ---- */
.cmx-block {
    border: 1.5px solid var(--orange);
    border-radius: 12px;
    padding: 20px 18px 16px;
    margin-bottom: 4px;
    background: #fffaf7;
}
.cmx-block__title { margin: 0 0 4px !important; font-size: 1.05rem !important; }
.cmx-block__sub { font-size: 0.86rem; color: var(--slate); line-height: 1.5; margin: 0 0 14px; }
.cmx-block__zone-label { display: block; font-size: 0.82rem; color: var(--slate); margin-bottom: 5px; }
.cmx-block__zone {
    width: 100%; padding: 9px 12px; border: 1px solid #dfe3e6; border-radius: 8px;
    background: #fff; font-size: 0.9rem; font-family: var(--font-body); color: var(--navy);
}
.cmx-block__total {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    color: var(--navy); text-align: center; margin: 14px 0 12px;
    font-variant-numeric: tabular-nums;
}
.cmx-block__legal { margin-bottom: 10px; }
.cmx-block__note { font-size: 0.75rem; color: var(--slate-light); line-height: 1.5; margin: 12px 0 0; }
/* Trenner zum klassischen Formular */
.cmx-or {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0 18px; color: var(--slate-light); font-size: 0.82rem;
}
.cmx-or::before, .cmx-or::after {
    content: ''; flex: 1 1 auto; height: 1px; background: #e2e5e8;
}
@media (max-width: 520px) {
    .cmx-block { padding: 16px 14px 14px; }
    .cmx-block__sub { font-size: 0.82rem; }
}
.shop__legal--optional { margin: 4px 0 16px; padding-top: 12px; border-top: 1px solid #eee; }
.shop__legal--optional label { margin-bottom: 0; }
.shop__delivery { margin-top: 18px; font-size: 0.85rem; text-align: left; }
.shop__delivery h4 { margin: 0 0 8px; font-size: 0.9rem; }
.shop__delivery ul { margin: 0; padding-left: 18px; color: var(--slate); line-height: 1.7; }
.shop__delivery-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--slate); }
.shop__footer-links { margin-bottom: 10px; }
.shop__footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; margin: 0 8px; white-space: nowrap; }
.shop__footer-links a:hover { color: #fff; }
.shop__success { display: none; text-align: center; padding: 40px 20px; }
.shop__success h2 { font-family: var(--font-heading); color: var(--navy); margin-bottom: 8px; }
.shop__success .order-nr { font-size: 1.2rem; color: var(--orange); font-weight: 700; margin: 12px 0; }
.shop__bank { background: #fff8e1; border-left: 3px solid #FFD93D; border-radius: 8px; padding: 16px; margin: 16px auto; max-width: 400px; text-align: left; font-size: 0.9rem; }
.shop__bank strong { display: block; margin-bottom: 8px; }
@media (max-width: 768px) {
    .shop__grid { grid-template-columns: 1fr; }
    .shop__product { position: static; }
    .shop__form .form-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .shop__form .form-row { grid-template-columns: 1fr; }
    .payment-tabs { flex-direction: column; }
}

/* ============================================================
   Zubehoer-Bestellung — shop_accessories.php
   ============================================================ */

.accsel { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; }
/* Die Artikelliste braucht mehr Breite als der Box-Checkout: Bild, Beschreibung und
   Mengenwahl stehen nebeneinander. Bei 900px blieb fuer den Text eine Spalte von rund
   180px — die Beschreibung brach dann nach jedem zweiten Wort um. */
.shop--acc { max-width: 1060px; }

.accsel__item {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 16px;
    align-items: center;
    background: var(--white);
    border: 1.5px solid #e8e2dc;
    border-radius: 12px;
    padding: 12px 14px;
}
.accsel__item:focus-within { border-color: var(--orange); }
.accsel__img {
    width: 76px; height: 76px;
    object-fit: contain;
    background: #f7f8fa;
    border-radius: 8px;
    display: block;
}
.accsel__info { min-width: 0; }
.accsel__name { font-family: var(--font-heading); font-size: 0.98rem; color: var(--navy); margin: 0 0 3px; }
.accsel__desc { font-size: 0.8rem; line-height: 1.45; color: var(--slate-light); margin: 0 0 5px; }
.accsel__price { font-size: 0.92rem; font-weight: 700; color: var(--orange); white-space: nowrap; }
.accsel__unit { font-weight: 400; font-size: 0.78rem; color: var(--slate-light); }

.accsel__qty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.accsel__qty-label { font-size: 0.7rem; color: var(--slate-light); text-transform: uppercase; letter-spacing: 0.04em; }
.accsel__stepper { display: flex; align-items: center; border: 1.5px solid #e0dcd6; border-radius: 10px; overflow: hidden; }
/* 44px: Daumenziel auf dem Telefon — darunter trifft man die Plus-Taste nicht zuverlaessig. */
.accsel__step {
    width: 44px; height: 44px;
    border: 0;
    background: #f7f8fa;
    color: var(--navy);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.accsel__step:hover { background: var(--orange); color: #fff; }
.accsel__step:disabled { opacity: 0.4; cursor: default; }
.accsel__input {
    width: 48px; height: 44px;
    border: 0;
    border-left: 1.5px solid #e0dcd6;
    border-right: 1.5px solid #e0dcd6;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--white);
    -moz-appearance: textfield;
}
.accsel__input::-webkit-outer-spin-button,
.accsel__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.accsel__input:disabled { background: #f2f3f5; color: var(--slate-light); }

/* Der Hinweis ist das eigentliche Verkaufsargument der Seite: er sagt, wie weit es noch
   bis zum kostenlosen Versand ist. Standardmaessig eingeklappt, damit er nicht leer Platz
   belegt, solange kein Land gewaehlt ist. */
.shop__freehint { display: none; font-size: 0.82rem; margin: 10px 0 0; color: var(--orange); font-weight: 600; }
.shop__freehint.show { display: block; }
.shop__freehint.ok { color: var(--green); }

.shop__acc-note { font-size: 0.82rem; color: var(--slate-light); line-height: 1.55; margin: 12px 0 0; }
.shop__acc-note a { color: var(--orange); }

@media (max-width: 560px) {
    .accsel__item { grid-template-columns: 60px 1fr; grid-template-areas: "img info" "qty qty"; row-gap: 10px; }
    .accsel__img  { grid-area: img; width: 60px; height: 60px; }
    .accsel__info { grid-area: info; }
    /* Auf dem Telefon rutscht die Mengenwahl unter den Artikel und wird breit genug,
       um sie mit dem Daumen sicher zu treffen. */
    .accsel__qty  { grid-area: qty; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
}