/* Rejestracja, logowanie, przypomnienie danych i wylogowanie (Views/Account/Register, Login, ResendAccountInfo, Logout), prefiks rg-. Mobile-first, kolory tylko z tokenów --g-*. */

.rg-body { margin: 0; background: var(--g-surface); color: var(--g-text); }

.rg-demo {
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--g-amber);
    color: var(--g-amber-text);
    border-bottom: 1px solid var(--g-amber-border);
}

.rg-wrap {
    max-width: 440px;
    margin: 0 auto;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.rg-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
    color: var(--g-text-muted);
}

.rg-back i { font-size: 22px; }

.rg-head { display: flex; align-items: center; gap: 12px; }

.rg-head h1 { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--g-text); }

.rg-head p { margin: 2px 0 0; font-size: 15px; color: var(--g-text-muted); }

.rg-alert {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--g-red);
    border: 1px solid var(--g-red-border);
    color: var(--g-red-text);
    font-size: 15px;
    font-weight: 700;
}

.rg-alert i { font-size: 20px; flex: none; }

.rg-success {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--g-green);
    border: 1px solid var(--g-green-border);
    color: var(--g-green-text);
    font-size: 15px;
    font-weight: 700;
}

.rg-success i { font-size: 20px; flex: none; }

/* Wylogowanie: treść na środku */
.rg-wrap-center { min-height: 100dvh; justify-content: center; text-align: center; }

.rg-logo-big { align-self: center; }

.rg-head-center { justify-content: center; }

.rg-head-center p { max-width: 320px; margin-left: auto; margin-right: auto; }

/* Polecający */
.rg-ref [hidden] { display: none !important; }

.rg-ref-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--g-green);
    border: 1px solid var(--g-green-border);
    color: var(--g-green-text);
}

.rg-ref-locked > i { font-size: 22px; flex: none; }

.rg-ref-locked-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }

.rg-ref-locked-text strong { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }

/* .g-btn-inline na telefonie dostaje width: 100% !important — tu przycisk ma być wąski */
.rg-ref-change { width: auto !important; flex: none; min-height: 44px; padding: 0 14px; font-size: 14px; }

.rg-ref-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font: 800 15px var(--g-font);
    color: var(--g-green-text);
    cursor: pointer;
    text-align: left;
}

.rg-ref-open > i:first-child { font-size: 20px; }

.rg-ref-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--g-surface-alt);
    border: 1px solid var(--g-border);
}

.rg-suggest-wrap { position: relative; }

.rg-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    overflow: hidden;
    border-radius: 10px;
    background: var(--g-surface-raised);
    border: 1px solid var(--g-border);
    box-shadow: 0 8px 24px var(--g-shadow);
}

.rg-suggest-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--g-border);
    background: none;
    font: 700 15px var(--g-font);
    color: var(--g-text);
    text-align: left;
    cursor: pointer;
}

.rg-suggest-item:last-child { border-bottom: 0; }

.rg-suggest-item:hover, .rg-suggest-item:focus { background: var(--g-green); }

/* Google / Apple */
.rg-social { display: flex; flex-direction: column; gap: 10px; }

.rg-social form { margin: 0; }

.rg-btn-social { min-height: 50px; gap: 10px; font-size: 16px; font-weight: 700; color: var(--g-text); }

.rg-btn-social i { font-size: 20px; }

.rg-divider { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--g-text-muted); }

.rg-divider::before, .rg-divider::after { content: ""; flex: 1; height: 1px; background: var(--g-border); }

/* Formularz */
.rg-form { display: flex; flex-direction: column; gap: 12px; }

.rg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.rg-label-row .rg-label { margin-bottom: 6px; }

.rg-forgot { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 700; color: var(--g-green-text); }

.rg-gift a { color: var(--g-green-text); font-weight: 800; }

.rg-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--g-text-muted); }

.rg-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--g-gray-border);
    background: var(--g-surface-alt);
    font: 600 16px var(--g-font); /* 16 px — iOS nie przybliża strony */
    color: var(--g-text);
}

.rg-input:focus { outline: 2px solid var(--g-green-border); outline-offset: 0; border-color: var(--g-green-border); }

.rg-input[readonly] { background: var(--g-gray); }

.rg-pass { position: relative; }

.rg-pass .rg-input { padding-right: 52px; }

.rg-pass-toggle {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--g-text-muted);
    font-size: 22px;
    cursor: pointer;
}

.rg-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.rg-rules li {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: var(--g-gray);
    color: var(--g-gray-text);
}

.rg-rules li.is-ok { background: var(--g-green); color: var(--g-green-text); }

.rg-small { margin: 0; font-size: 13px; line-height: 1.45; color: var(--g-text-muted); }

.rg-small a, .rg-login a { color: var(--g-green-text); font-weight: 800; }

.rg-captcha { display: flex; justify-content: center; }

.rg-submit { width: 100%; min-height: 52px; font-size: 17px; font-weight: 800; border-radius: 12px; }

.rg-gift {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
    background: var(--g-surface-alt);
    border: 1px solid var(--g-border);
}

.rg-gift > i { font-size: 22px; color: var(--g-green-text); flex: none; }

.rg-gift p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--g-text-muted); }

.rg-gift strong { color: var(--g-text); }

.rg-login { margin: 0; text-align: center; font-size: 15px; color: var(--g-text-muted); }

@media (min-width: 768px) {
    .rg-wrap { padding-top: 32px; }
}