/* ============================================================================
   GUIDO - mijn profiel (Account.aspx)
   Vereist theme.css. Deze pagina staat los van Site.Master, dus alles wat ze
   nodig heeft staat hier; de kleuren en vormen komen uit de tokens.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--surface-page);
    font-family: var(--font-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

form { margin: 0; }

.ac {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 14px 16px 34px;
}

.ac-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-structure);
    text-decoration: none;
    margin-bottom: 14px;
}

.ac-back:hover { text-decoration: underline; }

.ac-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-structure);
    opacity: .7;
    margin: 0 0 10px;
}

/* ------------------------------------------------------------------ wie ben je
   De vaste stadsfoto is vervangen door de initialen: die zijn altijd juist,
   en de pagina gaat over de gebruiker en niet over een stad. */
.ac-id {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.ac-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--text-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .01em;
}

.ac-id-main { flex: 1 1 auto; min-width: 0; }

.ac-id-main b {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--color-structure);
}

.ac-id-main span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ meldingen */
.ac-flash, .ac-err {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border-radius: var(--radius-card-sm);
    padding: 12px 13px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.45;
}

.ac-flash {
    background: var(--color-structure-tint);
    color: var(--color-structure);
}

.ac-flash > i { color: var(--color-ok); margin-top: 2px; }

.ac-err { background: var(--surface-card); border: 1px solid var(--color-error); color: var(--color-error); }
.ac-err > i { margin-top: 2px; }

/* ------------------------------------------------------------------ secties */
.ac-section { margin-top: 24px; }

.ac-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-structure);
    opacity: .7;
    /* 10px onder elk sectielabel, app-breed hetzelfde ritme */
    margin: 0 0 10px;
}

/* Eén kaart per groep, met scheidingslijnen tussen de rijen. Dat is de vorm
   die de rest van de app ook gebruikt voor lijsten. */
.ac-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* ------------------------------------------------------------------- velden */
.ac-field { padding: 14px 16px 0; }
.ac-field:last-of-type { padding-bottom: 2px; }

.ac-fieldlabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.ac-input {
    width: 100%;
    background: var(--surface-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-sm);
    padding: 13px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    -webkit-appearance: none;
}

.ac-input:focus {
    outline: 0;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-veil);
}

.ac-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

.ac-btn {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    background: var(--color-brand);
    color: var(--text-on-brand);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 15px;
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
}

.ac-btn:active { background: var(--color-brand-strong); }

/* de knop staat in een kaart, dus binnen de padding van die kaart */
.ac-card .ac-btn { margin: 16px 16px 16px; width: calc(100% - 32px); }

.ac-btn--danger { background: var(--color-error); text-decoration: none; }

/* --------------------------------------------------------------------- rijen */
.ac-row, .ac-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-body);
}

.ac-row + .ac-row,
.ac-link + .ac-link,
.ac-row + .ac-link,
.ac-link + .ac-row { border-top: 1px solid var(--border-subtle); }

.ac-row > i:first-child,
.ac-link > i:first-child {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--color-brand);
}

.ac-row-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }

.ac-row-main b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.ac-row-main span {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

.ac-chev { flex: 0 0 auto; color: var(--text-muted); font-size: 13px; }

.ac-link:hover { text-decoration: none; }
.ac-link:hover .ac-row-main b { color: var(--color-brand); }

.ac-link--danger > i:first-child,
.ac-link--danger .ac-row-main b { color: var(--color-error); }

/* ================================================================ schakelaar
   Opgebouwd op de input zelf met appearance: none, en niet met een los
   span-element ernaast. asp:CheckBox bepaalt zelf of het een omhullende span
   rendert, en dan zou een broer-selector stilletjes stoppen met werken.
   ========================================================================= */
.ac-switch { flex: 0 0 auto; display: flex; align-items: center; }

.ac-switch input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 46px;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    cursor: pointer;
    transition: background .18s ease;
}

.ac-switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform .18s ease;
}

.ac-switch input[type="checkbox"]:checked { background: var(--color-brand); }
.ac-switch input[type="checkbox"]:checked::after { transform: translateX(18px); }

.ac-switch input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- keuzelijst */
.ac-select {
    flex: 0 0 auto;
    max-width: 46%;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 9px 32px 9px 14px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-structure);
    cursor: pointer;

    /* het pijltje als achtergrond, want appearance: none haalt het weg */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23004d72' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px 18px;
}

.ac-select:focus {
    outline: 0;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-veil);
}

/* --------------------------------------------------------------- verwijderen */
.ac-danger {
    background: var(--surface-card);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-card);
    padding: 16px;
    margin-top: 10px;
}

.ac-danger-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-error);
    margin: 0 0 6px;
}

.ac-danger-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 14px;
}

.ac-danger .ac-btn { margin: 0; width: 100%; }

.ac-cancel {
    display: block;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-structure);
    text-decoration: underline;
    padding: 14px 0 0;
}

/* ------------------------------------------------------------------- versie */
.ac-version {
    margin: 28px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

@media (min-width: 700px) {
    .ac { max-width: 560px; padding: 22px 24px 48px; }
}

/* ------------------------------------------------------------- code kopen
   Het "of"-lijntje en de koopknop onder het activatiecodeveld, en de
   uitkomstkaart van PaymentReturn.aspx (na de betaalpagina van CM.com). */
.ac-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 16px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ac-or::before,
.ac-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-subtle);
}

/* 10px onder het lijntje, zelfde ritme als de sectielabels */
.ac-buy-hint { margin: 10px 16px 0; }

/* De koopknop in de structuurkleur, zodat "code inwisselen" (brand) de
   eerste keuze blijft en kopen de tweede. */
.ac-btn--buy { background: var(--color-structure); }

/* ------------------------------------------------------ betaaluitkomst */
.ac-pay {
    padding: 28px 20px 20px;
    text-align: center;
}

.ac-pay > i {
    font-size: 42px;
    color: var(--color-structure);
}

.ac-pay--ok > i  { color: var(--color-ok); }
.ac-pay--err > i { color: var(--color-error); }

.ac-pay h1 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--color-structure);
    /* 10px tussen titel en tekst, app-breed hetzelfde ritme */
    margin: 14px 0 10px;
}

.ac-pay p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
}

/* De knop is hier een link; de kaartregel hierboven (.ac-card .ac-btn) zou
   er nog eens marges bij doen, en de kaart heeft al eigen padding. */
.ac-pay .ac-btn,
.ac-card.ac-pay .ac-btn {
    display: block;
    width: 100%;
    margin: 18px 0 0;
    text-decoration: none;
}

/* --------------------------------------------------- toegang kopen: formules */
/* Twee keuzekaarten (één stad / alle steden). Het echte radiorondje is
   verborgen; het bolletje links is getekend, zodat de kaarten dezelfde taal
   spreken als de rest van de pagina. Zelfde inspringing (16px) als de knop. */
.ac-buytype {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 16px 0;
    padding: 0;
}

.ac-buytype li { position: relative; margin: 0; }

.ac-buytype input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ac-buytype label {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-sm);
    padding: 13px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}

/* het getekende radiorondje */
.ac-buytype label::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-card);
}

.ac-buytype input:checked + label {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
}

.ac-buytype input:checked + label::before {
    border-color: var(--color-brand);
    background: radial-gradient(circle, var(--color-brand) 0 45%, var(--surface-card) 50%);
}

.ac-buytype input:focus-visible + label {
    box-shadow: 0 0 0 3px var(--color-brand-veil);
}

.ac-buytype-name { flex: 1 1 auto; font-weight: 600; }

.ac-buytype-price {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--color-brand);
    white-space: nowrap;
}

/* stedenkiezer onder de éénstadsformule; zelfde breedte als de knop */
.ac-buycity { margin: 12px 16px 0; }

.ac-buycity select.ac-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
}

/* ------------------------------------------------------------ pushmeldingen */
/* De uitlegregel onder de meldingenschakelaar. Ze verschijnt alleen wanneer
   het aanmelden niet lukte (toestemming geweigerd, app niet op het
   beginscherm), dus de kleur van een waarschuwing. Uitlijnen met de tekst in
   de rij erboven: die begint na het pictogram van 20px plus de tussenruimte. */
.ac-card > .ac-hint {
    margin: 0;
    padding: 0 16px 14px 49px;
    color: var(--color-error);
}