/* ==========================================================
   BHG Family – registrační modul
   Používá tokeny z typography.css / user.css:
     --c-paper, --c-canvas, --c-merlot-400, --c-heritage-400,
     --c-merlot-300, --radius-card, --shadow-1, --focus-ring
   ========================================================== */

/* ----------------------------------------------------------
   Karta (wrapper)
   ---------------------------------------------------------- */
.bhgf-mod-register {
    background-color: var(--c-paper);
    border-radius: var(--radius-card);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    max-width: 560px;
    margin: 0 auto;
    box-shadow: var(--shadow-1);
    color: var(--c-merlot-300);
}

/* ----------------------------------------------------------
   Nadpis + intro
   ---------------------------------------------------------- */
.bhgf-mod-register .bhgf-mod-heading {
    color: var(--c-merlot-400);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: .5rem;
}
.bhgf-mod-register .bhgf-mod-intro {
    color: var(--c-merlot-300);
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------
   Labely – bere styling z globálního typography.css
   (třída .form-label), modul do něj nezasahuje
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Inputy – styling (barva, radius, focus) přebírá typography.css
   z globální třídy .form-control. Modul jen přidává padding
   vlevo a background pozici pro SVG ikonu.
   ---------------------------------------------------------- */
.bhgf-mod-register input[name="first_name"],
.bhgf-mod-register input[name="last_name"],
.bhgf-mod-register input[type="email"],
.bhgf-mod-register input[type="tel"],
.bhgf-mod-register input[type="date"] {
    padding-left: 2.75rem;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 18px 18px;
}

/* SVG ikony (barva %235A232A = merlot-400) */
.bhgf-mod-register input[name="first_name"],
.bhgf-mod-register input[name="last_name"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A232A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
}
.bhgf-mod-register input[type="email"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A232A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");
}
.bhgf-mod-register input[type="tel"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A232A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/></svg>");
}
.bhgf-mod-register input[type="date"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A232A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* ----------------------------------------------------------
   GDPR checkbox
   ---------------------------------------------------------- */
.bhgf-mod-register .form-check {
    padding-left: 1.75rem;
    margin-bottom: 1rem;
}
.bhgf-mod-register .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: -1.75rem;
    margin-top: .15rem;
    border: 1.5px solid color-mix(in srgb, var(--c-merlot-400) 40%, transparent);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}
.bhgf-mod-register .form-check-input:checked {
    background-color: var(--c-heritage-400);
    border-color: var(--c-heritage-400);
}
.bhgf-mod-register .form-check-input:focus {
    box-shadow: var(--focus-ring);
    border-color: var(--c-heritage-400);
}
.bhgf-mod-register .form-check-label {
    color: var(--c-merlot-300);
    font-size: .82rem;
    line-height: 1.45;
    cursor: pointer;
}
.bhgf-mod-register .form-check-label a {
    color: var(--c-heritage-400);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   Submit tlačítko – bere styling z globálního typography.css
   (třída .btn.btn-primary), modul do něj nezasahuje
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Validace – bere styling z globálního typography.css
   (třídy .was-validated .form-control:invalid a .form-check-input:invalid)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Horizontal layout
   ---------------------------------------------------------- */
.bhgf-mod-register.bhgf-mod-horizontal {
    max-width: 100%;
}
.bhgf-mod-register.bhgf-mod-horizontal .bhgf-mod-heading {
    text-align: center;
}
.bhgf-mod-register.bhgf-mod-horizontal .bhgf-mod-intro {
    text-align: center;
}

/* ----------------------------------------------------------
   Inline layout
   ---------------------------------------------------------- */
.bhgf-mod-inline .form-check-label a {
    text-decoration: underline;
}

/* ----------------------------------------------------------
   Transparentní pozadí formulářových prvků
   ---------------------------------------------------------- */
.bhgf-mod-register .form-control,
.bhgf-mod-register .form-select {
    background-color: transparent;
}
