/* Modal Design System - PiYo Calendar Glassmorphism Style */

/* Sophisticated multi-layer shadow variable */
:root {
    --piyo-glass-shadow:
        rgba(0, 0, 0, 0.08) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 4px 12px 0px,
        rgba(0, 0, 0, 0.04) 0px 8px 24px 0px,
        rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset;
    --piyo-glass-bg: rgba(255, 255, 255, 0.45);
    --piyo-glass-blur: blur(5px) saturate(1.8);
    --piyo-glass-border: 1px solid rgba(255, 255, 255, 0.25);
    --piyo-glass-radius: 25px;
    --piyo-brown: #8D6E63;
    --piyo-brown-dark: #6D4C41;
}

.piyo-modal-header {
    background: linear-gradient(135deg, rgba(141, 110, 99, 0.85) 0%, rgba(109, 76, 65, 0.9) 100%);
    backdrop-filter: blur(5px) saturate(1.8);
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    border-radius: 25px 25px 0 0;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.piyo-modal-title {
    font-family: "Neoteric-Bold", Georgia, serif;
    color: white;
    font-size: 1.9rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    line-height: 1.3;
    text-transform: uppercase;
}
.piyo-modal-subtitle {
    color: rgba(255,255,255,0.8);
    font-family: "Neoteric-Bold", Georgia, serif;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.piyo-modal-subtitle.piyo-modal-subtitle-soft {
    font-family: inherit;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    line-height: 1.35;
}
.piyo-class-pill {
    background: var(--piyo-glass-bg);
    color: white;
    border-radius: var(--piyo-glass-radius);
    padding: 0.3rem 1rem;
    font-size: 0.85rem;
    display: inline-block;
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    border: var(--piyo-glass-border);
    box-shadow: var(--piyo-glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.piyo-section-card {
    background: var(--piyo-glass-bg);
    border-radius: var(--piyo-glass-radius);
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    border: var(--piyo-glass-border);
    box-shadow: var(--piyo-glass-shadow);
    margin-bottom: 0.65rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.piyo-section-card:hover {
    transform: translateY(-2px);
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 2px 6px 0px,
        rgba(0, 0, 0, 0.08) 0px 6px 16px 0px,
        rgba(0, 0, 0, 0.05) 0px 12px 32px 0px,
        rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset;
}
/* Override global styles.css rule that hides all alerts */
.piyo-modal-body .alert {
    display: block !important;
}
.piyo-section-header {
    background: linear-gradient(135deg, rgba(141,110,99,0.12) 0%, rgba(109,76,65,0.08) 100%);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(141,110,99,0.15);
}
.piyo-section-label {
    color: #8D6E63;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 600;
}
.piyo-section-icon {
    color: #8D6E63;
    font-size: 1rem;
    margin-right: 0.5rem;
}
.piyo-section-body {
    padding: 1rem;
    background: rgba(255,255,255,0.3);
}
.piyo-trainer-image {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: var(--piyo-glass-shadow);
}
.piyo-link {
    color: #8D6E63;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.piyo-link:hover {
    color: #6D4C41;
    text-decoration: underline;
}
.piyo-checkbox-card {
    background: var(--piyo-glass-bg);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    border: var(--piyo-glass-border);
    box-shadow: var(--piyo-glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.piyo-btn-register {
    background: var(--piyo-glass-bg);
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    color: #6D4C41;
    border: var(--piyo-glass-border);
    border-radius: var(--piyo-glass-radius);
    padding: 0.85rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: var(--piyo-glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}
.piyo-btn-register:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.6);
    box-shadow:
        rgba(0, 0, 0, 0.12) 0px 2px 6px 0px,
        rgba(0, 0, 0, 0.1) 0px 8px 20px 0px,
        rgba(0, 0, 0, 0.06) 0px 16px 40px 0px,
        rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset;
    color: #5D4037;
}
.piyo-btn-contact {
    background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
    color: #fff;
    border: none;
    border-radius: 28px;
    padding: 0.85rem 2rem;
    min-height: 48px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(140, 85, 56, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}
.piyo-btn-contact:hover,
.piyo-btn-contact:focus {
    background: linear-gradient(135deg, #a86c4a 0%, #8c5538 100%);
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(140, 85, 56, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15);
}
.piyo-btn-contact:active { transform: translateY(0) scale(0.98); }
.piyo-btn-cancel {
    background: var(--piyo-glass-bg);
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    color: #dc3545;
    border: 2px solid #dc3545;
    border-radius: var(--piyo-glass-radius);
    padding: 0.75rem 2rem;
    box-shadow: var(--piyo-glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.piyo-btn-cancel:hover {
    transform: translateY(-2px);
    background: rgba(220, 53, 69, 0.1);
}
.piyo-modal-content {
    border-radius: var(--piyo-glass-radius) !important;
    overflow: hidden;
    border: none !important;
    box-shadow: var(--piyo-glass-shadow);
    background: transparent !important;
}
.piyo-modal-body {
    padding: 1.25rem;
    background: rgba(250, 250, 250, 0.75);
    backdrop-filter: blur(5px) saturate(1.8);
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
}
.piyo-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(5px);
}
.piyo-close-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* Mobile-specific compact styles for small screens */
@media screen and (max-width: 430px) {
    .piyo-modal-header {
        padding: 1rem 0.75rem;
    }
    .piyo-modal-title {
        font-size: 1.4rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 0.25rem;
    }
    .piyo-modal-subtitle {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    .piyo-class-pill {
        padding: 0.2rem 0.75rem;
        font-size: 0.75rem;
    }
    .piyo-modal-body {
        padding: 0.75rem;
    }
    .piyo-section-card {
        margin-bottom: 0.5rem;
        border-radius: 18px;
    }
    .piyo-section-header {
        padding: 0.5rem 0.75rem;
    }
    .piyo-section-label {
        font-size: 0.75rem;
    }
    .piyo-section-icon {
        font-size: 0.85rem;
        margin-right: 0.35rem;
    }
    .piyo-section-body {
        padding: 0.65rem 0.75rem;
    }
    .piyo-trainer-image {
        width: 55px;
        height: 55px;
        border-radius: 12px;
    }
    .piyo-checkbox-card {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.35rem;
        border-radius: 12px;
    }
    .piyo-btn-register {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
        border-radius: 20px;
    }
    .piyo-close-btn {
        top: 0.6rem;
        right: 0.6rem;
        width: 28px;
        height: 28px;
    }
    .piyo-link {
        font-size: 0.8rem;
    }
}

/* Customer modal desktop width - 30% wider than default */
@media (min-width: 576px) {
    .modal-customer-wide {
        max-width: 650px;
    }
}

/* Trainer schedule class list rows */
.trainer-schedule-fragment .list-group {
    gap: 0;
}

.trainer-schedule-fragment .list-group-item + .list-group-item {
    border-top-width: 1px;
}

.trainer-schedule-class-btn {
    border-radius: 14px !important;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.trainer-schedule-location-label {
    color: #a02828;
    font-weight: 600;
    margin-right: 0.25rem;
}

.list-group .trainer-schedule-class-btn:last-child {
    margin-bottom: 0;
}

/* ===== Trainer contact request modal ===== */
.trainer-contact-intro {
    background: var(--piyo-glass-bg);
    border: var(--piyo-glass-border);
    border-radius: var(--piyo-glass-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    color: var(--piyo-brown-dark);
    backdrop-filter: var(--piyo-glass-blur);
    -webkit-backdrop-filter: var(--piyo-glass-blur);
    box-shadow: var(--piyo-glass-shadow);
}
.trainer-contact-slot-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(141, 110, 99, 0.25);
    background: rgba(255, 255, 255, 0.6);
    color: var(--piyo-brown-dark);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.trainer-contact-slot-option:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.85);
}
.trainer-contact-slot-option .slot-weekday {
    font-weight: 600;
}
.trainer-contact-slot-option .slot-time {
    color: #6D4C41;
    font-variant-numeric: tabular-nums;
}
.trainer-contact-slot-option.selected {
    border: 2px solid var(--piyo-brown);
    background: rgba(141, 110, 99, 0.14);
    box-shadow: 0 4px 10px rgba(140, 85, 56, 0.18);
}
.priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 0.25rem;
    box-shadow: 0 2px 6px rgba(140, 85, 56, 0.35);
}
.trainer-contact-form .piyo-section-card {
    margin-bottom: 1rem;
}
.trainer-contact-form .piyo-btn-contact.w-auto,
.trainer-contact-form .piyo-link {
    width: auto;
}
.trainer-contact-form .piyo-link {
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

/* ===== Contact channel pill picker ===== */
.contact-channel-picker {
    border: none;
    padding: 0;
    margin: 0 0 1rem 0;
}
.contact-channel-picker legend {
    float: none;
    width: auto;
    font-size: 0.85rem;
    color: var(--piyo-brown-dark);
    margin-bottom: 0.5rem;
}
.contact-channel-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(141, 110, 99, 0.25);
    background: rgba(255, 255, 255, 0.6);
    color: var(--piyo-brown-dark);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
}
.contact-channel-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.contact-channel-option i {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}
.contact-channel-option:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.85);
}
.contact-channel-option.selected,
.contact-channel-option:has(input:checked) {
    background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(140, 85, 56, 0.3);
}
.contact-channel-option:focus-within {
    outline: 2px solid var(--piyo-brown);
    outline-offset: 2px;
}

/* =====================================================================
   Auth modals (registration + login) — reuse the glass design system.
   Single-column, viewport-capped so content can never overflow again.
   Scoped to .piyo-modal-auth so the class modals are untouched.
   ===================================================================== */
.piyo-modal-auth {
    max-width: 480px;
}
@media (min-width: 576px) {
    .piyo-modal-auth {
        max-width: 520px;
    }
}

/* Cap the card to the viewport: header stays fixed, body scrolls. This is
   what guarantees the submit / social / toggle buttons are always reachable. */
.piyo-modal-auth .piyo-modal-content {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
/* Both auth modals are now hand-rendered from the imported designs
   (includes/login_modal.html + includes/registration_modal.html) and share the
   `auth-*` system at the end of this file. The crispy-shaped chrome that used to
   live here — .form-label / .form-control / .modal-footer / input[type=submit],
   plus .piyo-social-btn and .piyo-ghost-btn — had no markup left to match and
   was removed. Re-adding it will do nothing.
   Kept below: the viewport cap, which both designs still rely on. */

@media screen and (max-width: 575px) {
    .piyo-modal-auth {
        margin: 0.5rem;
    }
    .piyo-modal-auth .piyo-modal-content {
        max-height: 95vh;
    }
}

/* =====================================================================
   Registration modal — implementation of the imported design
   "PiYo Registration Modal.dc.html" (claude.ai/design project fefc5160).

   Scoped entirely to .piyo-auth-modal: the login modal still uses the glass
   system above, so nothing here may leak sideways. Colour tokens are the
   design's own hex values, lifted verbatim.

   Two deviations from the design file, both deliberate:
     * Poppins -> WorkSans. The site ships WorkSans locally (200/300/400/700);
       pulling a Google font into base.html for one modal costs every page a
       render-blocking third-party request. Design weights 500/600 map to 400/700.
     * The design's default `implicitConsent` variant (legal text, no checkbox)
       is not built — we implement its `explicitConsent` branch instead, because
       consent here is a required field backed by a ConsentEvent audit trail.
   ===================================================================== */
.piyo-auth-modal {
    --auth-card: #FFFDFA;
    --auth-surface: #FBF7F1;
    --auth-ink: #3A302A;
    --auth-ink-soft: #5C5049;
    --auth-ink-mute: #8C7F73;
    --auth-label: #4A413A;
    --auth-brand: #7E5120;
    --auth-brand-dark: #6A4318;
    --auth-brand-deep: #4A2F10;
    --auth-line: #E5DACB;
    --auth-line-soft: #EFE7DE;
    --auth-line-strong: #C9B99F;
    --auth-chip: #F0E4D2;
    --auth-warn-line: #C97B4A;
    --auth-warn-bg: #FAEFE4;
    --auth-warn-ink: #A14D2A;
    --auth-disabled: #C9B49A;
    --auth-placeholder: #B4A899;
    font-family: "WorkSans", system-ui, sans-serif;
    color: var(--auth-ink);
}

/* The shared .piyo-modal-content forces a transparent background and a 25px
   radius with !important; this card is opaque cream at 20px. */
.piyo-auth-modal .auth-card {
    background: var(--auth-card) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(44, 34, 28, 0.35);
    overflow: hidden;
}
.piyo-auth-modal .piyo-modal-auth { max-width: 460px; }

/* ---- header ---- */
.piyo-auth-modal .auth-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 28px 0;
}
.piyo-auth-modal .auth-head-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.piyo-auth-modal .auth-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auth-brand);
}
.piyo-auth-modal .auth-title {
    margin: 0;
    font-family: "WorkSans", system-ui, sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--auth-ink);
    text-transform: none;
}
.piyo-auth-modal .auth-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--auth-ink-soft);
    text-wrap: pretty;
}
.piyo-auth-modal .auth-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--auth-line-soft);
    background: var(--auth-surface);
    color: var(--auth-ink-soft);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.piyo-auth-modal .auth-close:hover {
    background: var(--auth-chip);
    color: var(--auth-ink);
}

/* ---- body / steps ---- */
.piyo-auth-modal .auth-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px 28px 26px;
    background: transparent;
    /* Login puts the providers and divider outside the <form>, so the column
       lives on the body itself; registration has a single child and is
       unaffected. Hidden inputs are display:none, so they add no phantom gaps. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.piyo-auth-modal .auth-body > form,
.piyo-auth-modal .auth-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.piyo-auth-modal [hidden] { display: none !important; }

/* ---- social ---- */
.piyo-auth-modal .auth-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .2s ease;
}
/* The design's `socialOpacity` / `blocked` state. */
.piyo-auth-modal.is-consent-blocked .auth-social { opacity: 0.5; }
.piyo-auth-modal .auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 999px;
    border: 1px solid var(--auth-line);
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    color: var(--auth-ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.piyo-auth-modal .auth-social-btn:hover {
    border-color: var(--auth-line-strong);
    background: var(--auth-surface);
    color: var(--auth-ink);
}
.piyo-auth-modal .auth-social-btn svg { flex: 0 0 auto; }

/* ---- divider ---- */
.piyo-auth-modal .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--auth-ink-mute);
    font-size: 12px;
}
.piyo-auth-modal .auth-divider span {
    flex: 1;
    height: 1px;
    background: var(--auth-line-soft);
}

/* ---- primary action ---- */
.piyo-auth-modal .auth-btn-primary {
    padding: 14px 16px;
    border-radius: 999px;
    border: none;
    background: var(--auth-brand);
    color: #FFF8EC;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background .2s ease;
}
.piyo-auth-modal .auth-btn-primary:hover { background: var(--auth-brand-dark); }
.piyo-auth-modal .auth-submit {
    padding: 15px 20px;
    font-size: 14.5px;
    letter-spacing: 0.04em;
}
/* The design's `submitDisabled` / `submitBg`. Styled inert rather than set
   `disabled`, so the browser still runs native validation on the checkbox and
   the user gets a message instead of a dead button. */
.piyo-auth-modal.is-consent-blocked .auth-submit {
    background: var(--auth-disabled);
}

/* ---- back link (step 2) ---- */
.piyo-auth-modal .auth-back {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--auth-brand);
    cursor: pointer;
}
.piyo-auth-modal .auth-back:hover { color: var(--auth-brand-deep); }

/* ---- fields ---- */
.piyo-auth-modal .auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.piyo-auth-modal .auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}
.piyo-auth-modal .auth-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--auth-label);
}
.piyo-auth-modal .auth-label-hint {
    font-weight: 400;
    color: var(--auth-ink-mute);
}
/* Login: label on the left, "Aizmirsi paroli?" on the right of the same row. */
.piyo-auth-modal .auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.piyo-auth-modal .auth-label-link {
    font-size: 12.5px;
    white-space: nowrap;
}
.piyo-auth-modal .auth-input {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--auth-ink);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--auth-line);
    background: #FFFFFF;
    outline: none;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.piyo-auth-modal .auth-input:focus {
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 3px rgba(126, 81, 32, 0.12);
}
.piyo-auth-modal .auth-input::placeholder { color: var(--auth-placeholder); }

/* ---- password reveal ---- */
.piyo-auth-modal .auth-pw {
    position: relative;
    display: flex;
}
.piyo-auth-modal .auth-pw .auth-input { padding-right: 88px; }
.piyo-auth-modal .auth-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--auth-chip);
    color: var(--auth-brand);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}

/* ---- consent ---- */
.piyo-auth-modal .auth-consent-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.piyo-auth-modal .auth-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--auth-ink-soft);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--auth-line-soft);
    background: var(--auth-surface);
    transition: border-color .2s ease, background .2s ease;
}
.piyo-auth-modal .auth-check {
    width: 17px;
    height: 17px;
    /* No top nudge: both consumers centre the box against the label, so any
       margin here just shifts it back off-centre. */
    margin: 0;
    accent-color: var(--auth-brand);
    flex: 0 0 auto;
    cursor: pointer;
}
/* ---- remember me (login) ---- */
.piyo-auth-modal .auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--auth-ink-soft);
}
/* The design's `consentBorder` / `consentBg` hint state. */
.piyo-auth-modal .auth-consent.is-consent-invalid {
    border-color: var(--auth-warn-line);
    background: var(--auth-warn-bg);
}
.piyo-auth-modal .auth-consent-hint {
    font-size: 12px;
    color: var(--auth-warn-ink);
}

/* ---- links, errors, footer ---- */
.piyo-auth-modal a,
.piyo-auth-modal .auth-link {
    color: var(--auth-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.piyo-auth-modal a:hover,
.piyo-auth-modal .auth-link:hover { color: var(--auth-brand-deep); }
.piyo-auth-modal .auth-social-btn { text-decoration: none; }
.piyo-auth-modal .auth-link {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.piyo-auth-modal .auth-foot {
    text-align: center;
    font-size: 13px;
    color: var(--auth-ink-soft);
}
.piyo-auth-modal .auth-error {
    font-size: 12px;
    color: #B3261E;
}
.piyo-auth-modal .auth-alert {
    font-size: 13px;
    line-height: 1.5;
    color: var(--auth-warn-ink);
    background: var(--auth-warn-bg);
    border: 1px solid var(--auth-warn-line);
    border-radius: 12px;
    padding: 10px 12px;
}
.piyo-auth-modal .auth-alert ul { margin: 0; padding-left: 1.1rem; }

/* ---- small screens ---- */
@media screen and (max-width: 430px) {
    .piyo-auth-modal .auth-head { padding: 20px 18px 0; }
    .piyo-auth-modal .auth-body { padding: 18px 18px 22px; }
    .piyo-auth-modal .auth-title { font-size: 20px; }
    .piyo-auth-modal .auth-grid-2 { grid-template-columns: 1fr; }
}

/* =========================================================================
   TRAINING PROGRAMMES (Apmācības)

   The public programme page and its enrolment modal. The modal reuses the
   .piyo-auth-modal shell — card, head, consent row, submit button — so only
   the module list and price summary are new here. Palette tokens come from
   .piyo-auth-modal, which is why every .edu-* rule inside the modal is scoped
   under it.
   ========================================================================= */

/* ---- page ---- */
.edu-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px 64px;
    font-family: "WorkSans", system-ui, sans-serif;
    color: #3A302A;
}
.edu-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8C7F73;
    margin: 0 0 6px;
}
.edu-title {
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.15;
    color: #4A2F10;
    margin: 0 0 8px;
}
.edu-dates {
    font-size: 15px;
    color: #5C5049;
    margin: 0;
}
.edu-description {
    margin: 32px 0;
    font-size: 16px;
    line-height: 1.65;
    color: #5C5049;
}
.edu-cta { margin-top: 36px; }
.edu-open-btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFDFA;
    background: #7E5120;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.edu-open-btn:hover { background: #6A4318; transform: translateY(-1px); }
.edu-closed {
    font-size: 15px;
    color: #A14D2A;
    background: #FAEFE4;
    border: 1px solid #C97B4A;
    border-radius: 12px;
    padding: 14px 16px;
}
.edu-enrolled {
    background: #FBF7F1;
    border: 1px solid #E5DACB;
    border-radius: 16px;
    padding: 20px 22px;
}
.edu-enrolled-title { font-size: 18px; color: #4A2F10; margin: 0 0 12px; }
.edu-enrolled-list { margin: 0 0 12px; padding-left: 1.1rem; color: #5C5049; }
.edu-enrolled-total { margin: 0 0 6px; font-size: 16px; }
.edu-enrolled-note { margin: 0; font-size: 13px; color: #8C7F73; }

/* ---- modal: wider than the auth modals, the module rows need the room ---- */
.piyo-auth-modal .edu-modal-dialog { max-width: 560px; }

/* ---- module rows ---- */
.piyo-auth-modal .edu-modules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.piyo-auth-modal .edu-module {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.piyo-auth-modal .edu-module:hover { border-color: var(--auth-line-strong); }
.piyo-auth-modal .edu-module:has(.edu-module-check:checked) {
    border-color: var(--auth-brand);
    background: var(--auth-surface);
}
.piyo-auth-modal .edu-module.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--auth-surface);
}
.piyo-auth-modal .edu-module.is-rejected {
    border-color: var(--auth-warn-line);
    background: var(--auth-warn-bg);
}
.piyo-auth-modal .edu-module-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--auth-brand);
    margin: 0;
}
.piyo-auth-modal .edu-module-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.piyo-auth-modal .edu-module-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--auth-ink);
}
.piyo-auth-modal .edu-module-meta {
    font-size: 12px;
    color: var(--auth-ink-mute);
}
.piyo-auth-modal .edu-module-price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--auth-brand-deep);
    white-space: nowrap;
}
.piyo-auth-modal .edu-external {
    font-size: 12px;
    color: var(--auth-ink-mute);
    margin: 0 0 14px;
}
.piyo-auth-modal .edu-external a { color: var(--auth-brand); }

/* ---- price summary: the reactive part ---- */
.piyo-auth-modal .edu-summary {
    border-top: 1px solid var(--auth-line-soft);
    padding-top: 14px;
    margin-bottom: 14px;
    text-align: right;
}
.piyo-auth-modal .edu-summary-prices {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
}
.piyo-auth-modal .edu-summary-list {
    font-size: 15px;
    color: var(--auth-ink-mute);
    text-decoration: line-through;
}
.piyo-auth-modal .edu-summary-total {
    font-size: 26px;
    font-weight: 700;
    color: var(--auth-brand-deep);
}
.piyo-auth-modal .edu-summary-package {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--auth-brand);
    margin-top: 2px;
}
.piyo-auth-modal .edu-summary-savings {
    font-size: 13px;
    font-weight: 600;
    color: #4F7A3A;
    margin-top: 4px;
}

/* ---- programme terms ---- */
.piyo-auth-modal .edu-terms {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--auth-ink-soft);
}
.piyo-auth-modal .edu-terms summary {
    cursor: pointer;
    color: var(--auth-brand);
}
.piyo-auth-modal .edu-terms-body {
    margin-top: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 6px;
    line-height: 1.55;
}

/* ---- success state ---- */
.piyo-auth-modal .edu-success {
    text-align: center;
    padding: 20px 0;
    color: var(--auth-ink);
}
.piyo-auth-modal .edu-success i {
    font-size: 34px;
    color: #4F7A3A;
    margin-bottom: 10px;
}

@media screen and (max-width: 430px) {
    .piyo-auth-modal .edu-module { padding: 10px 12px; gap: 10px; }
    .piyo-auth-modal .edu-module-price { font-size: 14px; }
    .piyo-auth-modal .edu-summary-total { font-size: 22px; }
}