/* =========================================================================
   Accountpagina's en afrekenen: gedeelde opmaak voor alle vier de winkels
   -------------------------------------------------------------------------
   Dit bestand hoort bij het moederthema gsh2026 en wordt geladen door
   golfstoreholland, shopformen, fietsbrillen en wintersportbrillen. De
   sjablonen staan ook in gsh2026 (Magento_Customer/layout en
   Magento_Sales/templates/order/gsh-bestellingen.phtml), dus met deze CSS
   erbij ziet het klantgedeelte er in alle vier de winkels hetzelfde uit,
   alleen in hun eigen kleuren.

   Een winkel zet zijn kleuren in zijn eigen styles.css:

       :root {
           --gsh-ink:         hoofdtekst
           --gsh-muted:       bijtekst
           --gsh-line:        randen
           --gsh-soft:        zachte vlakken
           --gsh-accent:      accentkleur (actieve menuregel, links)
           --gsh-accent-deep: donkere variant daarvan
           --gsh-accent-soft: lichte variant daarvan
           --gsh-schaduw:     kleur van de kaartschaduw
       }

   Zet een winkel niets, dan gelden de blauwtinten van golfstoreholland als
   terugval. Wijzig de opmaak dus hier en niet per winkel.
   ========================================================================= */

/* ==== accountpagina's: opmaak =============================================
   Het overzicht was een opsomming van regels: het menu stond als kale lijst
   boven de inhoud, de bestellingen waren een tabel met alleen een bedrag, en
   er zat geen kaartindeling in. Hieronder staat de opmaak voor:

     .gsh-acc-nav        het menu als kaart, links naast de inhoud
     .gsh-acc-welkom     de begroeting met twee snelle knoppen
     .gsh-acc-blok       een kop met een "alles bekijken"-link ernaast
     .gsh-bestelling     een bestelling als uitklapbare kaart
     .gsh-regel          een product binnen zo'n bestelling

   Op een telefoon wordt het menu een rij pillen die je opzij schuift, en
   klappen de bestelregels onder elkaar.
   ======================================================================== */

/* --- twee kolommen: menu links, inhoud rechts --- */
body[class*="customer-"] .columns,
body[class*="sales-order"] .columns,
body.newsletter-manage-index .columns {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

body[class*="customer-"] .columns > .column.main,
body[class*="sales-order"] .columns > .column.main,
body.newsletter-manage-index .columns > .column.main {
    order: 2;
    min-width: 0;
}

body[class*="customer-"] .columns > .sidebar-main,
body[class*="sales-order"] .columns > .sidebar-main,
body.newsletter-manage-index .columns > .sidebar-main {
    order: 1;
    position: sticky;
    top: 24px;
}

/* De tweede zijbalk is hier leeg (het rijtje "onlangs besteld" is eruit). Zou er
   ooit iets in komen, dan zet deze regel het onder de inhoud in plaats van in de
   kolom van het menu, want anders duwt het de hoofdkolom naar de tweede rij. */
body[class*="customer-"] .columns > .sidebar-additional,
body[class*="sales-order"] .columns > .sidebar-additional,
body.newsletter-manage-index .columns > .sidebar-additional {
    order: 3;
    grid-column: 1 / -1;
}

/* --- het menu --- */
.gsh-acc-nav {
    padding: 18px;
    border: 1px solid var(--gsh-line, #e5e9f2);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px -34px var(--gsh-schaduw, rgb(10 31 140 / .35));
}

.gsh-acc-nav__kop {
    margin: 0 0 12px;
    padding: 0 10px;
    color: var(--gsh-muted, #65708b);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gsh-acc-nav__lijst { margin: 0; padding: 0; list-style: none; }
.gsh-acc-nav__lijst li { margin: 0; }

.gsh-acc-nav__lijst li a,
.gsh-acc-nav__lijst li strong {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--gsh-ink, #0a0e1a);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.gsh-acc-nav__lijst li a:hover { background: var(--gsh-soft, #f3f6fb); }

.gsh-acc-nav__lijst li strong {
    background: var(--gsh-accent-soft, #eef3ff);
    color: var(--gsh-accent, #1e4dff);
    font-weight: 700;
}

/* de scheidingsstreepjes uit Magento */
.gsh-acc-nav__lijst li.delimiter {
    height: 1px;
    margin: 10px 4px;
    background: var(--gsh-line, #e5e9f2);
}

/* --- begroeting --- */
.gsh-acc-welkom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    padding: 22px 26px;
    border-radius: 18px;
    background: var(--gsh-soft, #f3f6fb);
}

.gsh-acc-welkom__hallo { margin: 0; font-size: 22px; font-weight: 800; }
.gsh-acc-welkom__tekst { margin: 4px 0 0; color: var(--gsh-muted, #65708b); }
.gsh-acc-welkom__acties { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- kop van een blok --- */
.gsh-acc-blok { margin-bottom: 36px; }

.gsh-acc-blok__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.gsh-acc-blok__kop h2 { margin: 0; font-size: 22px; font-weight: 800; }
.gsh-acc-blok__meer { color: var(--gsh-accent, #1e4dff); font-weight: 600; text-decoration: underline; }

.gsh-acc-leeg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 26px;
    border: 1px dashed var(--gsh-line, #e5e9f2);
    border-radius: 18px;
    background: #fff;
}

.gsh-acc-leeg p { margin: 0; color: var(--gsh-muted, #65708b); }

/* --- een bestelling --- */
.gsh-bestelling {
    margin-bottom: 14px;
    border: 1px solid var(--gsh-line, #e5e9f2);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.gsh-bestelling__toggle {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.gsh-bestelling__toggle:hover { background: var(--gsh-soft, #f3f6fb); }

.gsh-bestelling__nummer { font-size: 16px; font-weight: 800; }
.gsh-bestelling__datum { color: var(--gsh-muted, #65708b); font-size: 14px; }

.gsh-bestelling__status {
    justify-self: start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gsh-soft, #f3f6fb);
    color: var(--gsh-ink, #0a0e1a);
    font-size: 12px;
    font-weight: 700;
}

.gsh-bestelling__status.is-complete { background: #edf9f1; color: #12603a; }
.gsh-bestelling__status.is-processing,
.gsh-bestelling__status.is-pending { background: var(--gsh-accent-soft, #eef3ff); color: var(--gsh-accent-deep, #0a1f8c); }
.gsh-bestelling__status.is-canceled,
.gsh-bestelling__status.is-closed { background: #fdeef1; color: #8c1c33; }

.gsh-bestelling__totaal { font-size: 16px; font-weight: 800; white-space: nowrap; }
.gsh-bestelling__pijl { display: grid; place-items: center; color: var(--gsh-muted, #65708b); transition: transform .15s; }
.gsh-bestelling__pijl.is-open { transform: rotate(180deg); }

.gsh-bestelling__regels {
    margin: 0;
    padding: 0 20px;
    list-style: none;
    border-top: 1px solid var(--gsh-line, #e5e9f2);
}

.gsh-regel {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gsh-line, #e5e9f2);
}

.gsh-regel:last-child { border-bottom: 0; }

.gsh-regel__foto {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--gsh-line, #e5e9f2);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.gsh-regel__foto img { width: 100%; height: 100%; object-fit: contain; }
.gsh-regel__foto--leeg { background: var(--gsh-soft, #f3f6fb); }

.gsh-regel__tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gsh-regel__tekst a { color: var(--gsh-ink, #0a0e1a); font-weight: 600; text-decoration: none; }
.gsh-regel__tekst a:hover { text-decoration: underline; }
.gsh-regel__detail { color: var(--gsh-muted, #65708b); font-size: 14px; }

.gsh-regel__actie { margin: 0; }
.gsh-regel .gsh-regel__knop { min-height: 40px; padding: 0 16px !important; font-size: 14px !important; }
.gsh-regel__weg { color: var(--gsh-muted, #65708b); font-size: 13px; font-style: italic; }

.gsh-bestelling__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--gsh-line, #e5e9f2);
    background: var(--gsh-soft, #f3f6fb);
}

.gsh-bestelling__voet form { margin: 0; }
.gsh-bestelling__bekijk { color: var(--gsh-accent, #1e4dff); font-weight: 600; text-decoration: underline; }

/* --- de bestaande blokken accountgegevens en adresboek als kaart --- */
.block-dashboard-info .card,
.block-dashboard-addresses .card,
.block-dashboard-info .block-content > div > div,
.block-dashboard-addresses .block-content > div > div {
    border-radius: 18px;
}

.block-dashboard-info .block-title,
.block-dashboard-addresses .block-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.block-dashboard-info .card,
.block-dashboard-addresses .card {
    border: 1px solid var(--gsh-line, #e5e9f2);
    background: #fff;
    box-shadow: 0 18px 40px -34px var(--gsh-schaduw, rgb(10 31 140 / .35));
}

/* --- telefoon --- */
@media (max-width: 900px) {
    body[class*="customer-"] .columns,
    body[class*="sales-order"] .columns,
    body.newsletter-manage-index .columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    body[class*="customer-"] .columns > .sidebar-main,
    body[class*="sales-order"] .columns > .sidebar-main,
    body.newsletter-manage-index .columns > .sidebar-main {
        position: static;
    }

    /* het menu wordt een rij pillen die je opzij schuift */
    .gsh-acc-nav { padding: 12px; border-radius: 16px; }
    .gsh-acc-nav__kop { display: none; }

    .gsh-acc-nav__lijst {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .gsh-acc-nav__lijst::-webkit-scrollbar { display: none; }
    .gsh-acc-nav__lijst li { flex: 0 0 auto; }
    .gsh-acc-nav__lijst li.delimiter { display: none; }

    .gsh-acc-nav__lijst li a,
    .gsh-acc-nav__lijst li strong {
        padding: 9px 14px;
        border: 1px solid var(--gsh-line, #e5e9f2);
        border-radius: 999px;
        white-space: nowrap;
        font-size: 14px;
    }

    .gsh-acc-nav__lijst li strong { border-color: var(--gsh-accent, #1e4dff); }

    .gsh-acc-welkom { padding: 18px; }
    .gsh-acc-welkom__acties { width: 100%; }
    .gsh-acc-welkom__acties .btn { flex: 1 1 auto; }

    .gsh-bestelling__toggle {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
        padding: 14px 16px;
    }

    .gsh-bestelling__datum { grid-column: 1; }
    .gsh-bestelling__status { grid-column: 1; }
    .gsh-bestelling__totaal { grid-column: 2; grid-row: 1; }
    .gsh-bestelling__pijl { grid-column: 2; grid-row: 2; justify-self: end; }

    .gsh-bestelling__regels { padding: 0 16px; }

    .gsh-regel {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas: "foto tekst" "actie actie";
        gap: 12px;
    }

    .gsh-regel__foto { grid-area: foto; width: 56px; height: 56px; }
    .gsh-regel__tekst { grid-area: tekst; }
    .gsh-regel__actie, .gsh-regel__weg { grid-area: actie; }
    .gsh-regel__actie .btn { width: 100%; }

    .gsh-bestelling__voet { padding: 14px 16px; }
    .gsh-bestelling__voet form, .gsh-bestelling__voet .btn { width: 100%; }
}

/* ==== afrekenen: leesbare strookjes =======================================
   De voetjes onder de adreskaarten ("VAN ADRES BOEK", "NIEUW ADRES",
   "Meest recent gebruikt") krijgen van de checkout de klasse
   .text-secondary-lighter. Die haalt zijn kleur uit --color-secondary-lighter
   en dat is in dit thema limoengeel (#e7ff70): op wit vrijwel onleesbaar.
   De bedoelde achtergrond (.bg-container / .bg-container-darker) bestaat niet
   in de gecompileerde CSS, dus het strookje is ook nog eens wit gebleven.

   Hieronder krijgt zo'n strookje zijn grijze voet terug en de tekst een
   leesbare kleur. Alles staat binnen #react-checkout, zodat het limoengeel
   als accent op de rest van de winkel gewoon blijft werken.
   ======================================================================== */

#react-checkout .text-secondary-lighter {
    color: var(--gsh-muted, #65708b);
}

/* het voetje van een adreskaart: -mx-4/-mb-4 maken het breed tot in de rand */
#react-checkout .-mx-4.-mb-4.bg-container,
#react-checkout .-mx-4.-mb-4.bg-container-darker {
    background-color: var(--gsh-soft, #f4f7fc);
    border-top: 1px solid var(--gsh-line, #e5e9f2);
}

/* de SKU-regel in het besteloverzicht stond op grijs-400, net te licht */
#react-checkout .text-gray-400 {
    color: var(--gsh-muted, #65708b);
}