/* ============================================================
   RAMONIA — css-forms.css
   ============================================================ */

:root {
    --gold:         #EBB52D;
    --gold-dk:      #c99520;
    --gold-glow:    rgba(235, 181, 45, 0.18);
    --gold-border:  rgba(235, 181, 45, 0.35);
    --bg-field:     #111111;
    --border-dim:   #1e1e1e;
    --text-label:   #a89060;
    --text-input:   #c8c0b0;
    --text-dim:     #5a5040;
    --error-bg:     rgba(160, 40, 40, 0.15);
    --error-border: rgba(180, 60, 60, 0.35);
    --error-text:   #c07070;
    --success-bg:   rgba(40, 100, 40, 0.15);
    --success-border: rgba(60, 130, 60, 0.35);
    --success-text: #70a870;
    --radius:       5px;
}

/* ── FIELD WRAPPER ───────────────────────────────────── */
.rm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

/* ── LABEL ───────────────────────────────────────────── */
.rm-field label,
.rm-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-label) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.rm-field label i,
.rm-label i {
    color: var(--gold);
    font-size: 10px;
    opacity: 0.85;
}

/* ── INPUT WRAPPER (pozycjonuje gif) ─────────────────── */
.rm-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.rm-password-row .rm-input-wrap {
    width: 100%;
    max-width: 100%;
}

/* ── INPUTS ──────────────────────────────────────────── */
.rm-input-wrap input[type="text"],
.rm-input-wrap input[type="password"],
.rm-input-wrap input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 9px 34px 9px 12px !important; /* prawy padding dla gifa */
    font-size: 13px !important;
    color: var(--text-input) !important;
    background-color: var(--bg-field) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: var(--radius) !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,0,0,0.3) !important;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        color 200ms ease !important;
}

.rm-input-wrap input:focus {
    outline: none;
    color: #e8dcc8 !important;
    border-color: var(--gold-border) !important;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 0 0 2px var(--gold-glow) !important;
    background-color: #0d0d0d !important;
}

/* input z błędem */
.rm-input-wrap input.rm-input-error {
    border-color: var(--error-border) !important;
}

/* ── WALIDACYJNY GIF ─────────────────────────────────── */
.rm-input-wrap img[id$="_indicator"] {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    pointer-events: none;
}

/* check_name.js robi .show() → display:inline-block */
.rm-input-wrap img[id$="_indicator"][style*="inline"],
.rm-input-wrap img[id$="_indicator"][style*="block"] {
    display: block !important;
}

/* ── SELECT ──────────────────────────────────────────── */
.rm-field select {
    width: 95% !important;
    max-width: 460px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    color: var(--text-input) !important;
    background-color: var(--bg-field) !important;
    border: 1px solid var(--border-dim) !important;
    border-radius: var(--radius) !important;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,0,0,0.3) !important;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease !important;
}

.rm-field select:focus {
    outline: none;
    border-color: var(--gold-border) !important;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 0 0 2px var(--gold-glow) !important;
    background-color: #0d0d0d !important;
}

/* ── ERROR / SUCCESS MESSAGES ────────────────────────── */
.FormFieldError,
.rm-error {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: var(--error-text) !important;
    background: var(--error-bg) !important;
    border: 1px solid var(--error-border) !important;
    border-radius: 3px !important;
    text-shadow: none !important;
    /* ukryj gdy pusty */
    empty-cells: hide;
}

.FormFieldError:empty,
.rm-error:empty {
    display: none !important;
}

/* ── DIVIDER ─────────────────────────────────────────── */
.rm-divider {
    border: none;
    border-top: 1px solid #1a1a1a;
    margin: 20px 0 18px;
    position: relative;
}
.rm-divider::after {
    content: attr(data-label);
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f0f0f;
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 10px;
}

/* ── SECTION HEADING ─────────────────────────────────── */
.rm-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--gold);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 -28px 20px;
    padding: 9px 28px;
    background: rgba(235, 181, 45, 0.06);
    border-top: 1px solid rgba(235, 181, 45, 0.1);
    border-bottom: 1px solid rgba(235, 181, 45, 0.1);
}
.rm-section-heading::after {
    display: none;
}

/* ── FORM CARD ───────────────────────────────────────── */
.rm-form-card {
    background: rgba(10, 9, 8, 0.85);
    border: 1px solid #1c1a17;
    border-top: 1px solid #2a2520;
    border-radius: 6px;
    padding: 0 28px 24px;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── RADIO GROUP ─────────────────────────────────────── */
.rm-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}
.rm-radio-group .OptionContainer {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a7f70;
    font-size: 12px;
    cursor: pointer;
}
.rm-radio-group label {
    color: #8a7f70 !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

/* ── PASSWORD ROW (2 obok siebie) ────────────────────── */
.rm-password-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.rm-password-row .rm-field {
    flex: 1;
    min-width: 0;
}

/* ── ACCEPT RULES ────────────────────────────────────── */
.rm-accept {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(235, 181, 45, 0.04);
    border: 1px solid rgba(235, 181, 45, 0.12);
    border-radius: var(--radius);
    font-size: 12px;
    color: #7a7060;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    margin-bottom: 6px;
}
.rm-accept a {
    color: var(--gold) !important;
    text-decoration: none;
}
.rm-accept a:hover {
    text-decoration: underline;
}

/* ── CREATE ACCOUNT — strip old table chrome ─────────── */
#createaccount .TableContent {
    border: none !important;
    background: transparent !important;
}
#createaccount .InnerTableContainer {
    background: transparent;
}
#createaccount .TableContentContainer {
    padding: 0;
}
#createaccount .TableContentAndRightShadow,
#createaccount .TableShadowContainerRightTop,
#createaccount .TableShadowContainer {
    background: none !important;
}

/* ── AUTOFILL OVERRIDE — rejestracja ─────────────────── */
#createaccount input:-webkit-autofill,
#createaccount input:-webkit-autofill:hover,
#createaccount input:-webkit-autofill:focus,
#createaccount input:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 1px #1e1b16,
        inset 0 0 0 100000px #111111 !important;
    -webkit-text-fill-color: #c8c0b0 !important;
    caret-color: #c8c0b0;
}

/* ── LOGIN MODAL ─────────────────────────────────────── */
.confirm_box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#page_login.page_login {
    background: #0d0c0a;
    border: 1px solid #1e1b16;
    border-top: 2px solid var(--gold-border);
    border-radius: 8px;
    box-shadow:
        0 12px 48px rgba(0,0,0,0.85),
        0 0 0 1px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
    min-width: 340px;
}

#page_login .page_header {
    padding: 18px 24px 14px !important;
    background: linear-gradient(180deg, rgba(235,181,45,0.07) 0%, transparent 100%);
    border-bottom: 1px solid #1a1712 !important;
}

#page_login .page_header .title {
    font-size: 18px !important;
    color: #d4c49a !important;
    letter-spacing: 0.05em;
    font-family: 'PT Serif', serif;
}

#page_login .page_header .title i {
    color: var(--gold) !important;
    font-style: italic !important;
}

#page_login .page_body {
    padding: 22px 24px 20px !important;
}

#page_login .page_form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#page_login .page_form .rm-field {
    margin-bottom: 14px;
}

/* login — inputy przez rm-input-wrap */
#page_login .rm-input-wrap {
    width: 100%;
    max-width: 100%;
}

/* login — submit */
#page_login .page_form input[type="submit"] {
    margin-top: 6px !important;
    padding: 9px 28px !important;
    background: linear-gradient(180deg, #c99a22 0%, #a07a10 100%) !important;
    border: 1px solid #6e5208 !important;
    border-radius: var(--radius) !important;
    color: #f5e8c0 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    transition: all 200ms ease !important;
}
#page_login .page_form input[type="submit"]:hover {
    background: linear-gradient(180deg, #d4aa28 0%, #b08818 100%) !important;
    box-shadow:
        0 3px 12px rgba(0,0,0,0.6),
        0 0 8px var(--gold-glow),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* login — cancel */
#page_login .nice_button.confirm_hide {
    padding: 9px 20px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid #252320 !important;
    border-radius: var(--radius) !important;
    color: #6a6050 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: all 200ms ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 6px !important;
}
#page_login .nice_button.confirm_hide:hover {
    color: #9a9080 !important;
    border-color: #353230 !important;
    background: rgba(255,255,255,0.05) !important;
}

/* login — forgot */
#forgot {
    margin-top: 14px;
}
#forgot a {
    color: #5a5040 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    transition: color 200ms !important;
}
#forgot a:hover {
    color: var(--gold) !important;
}

#page_login center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px;
}

/* ── AUTOFILL OVERRIDE — login ───────────────────────── */
#page_login input:-webkit-autofill,
#page_login input:-webkit-autofill:hover,
#page_login input:-webkit-autofill:focus,
#page_login input:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 1px #1e1b16,
        inset 0 0 0 100000px #111111 !important;
    -webkit-text-fill-color: #c8c0b0 !important;
    caret-color: #c8c0b0;
}

/* ── FIX: gif zawsze 16x16 ───────────────────────────── */
.rm-input-wrap img[id$="_indicator"] {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain;
}

.rm-radio-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #3a3530;
    background: #111;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 200ms, box-shadow 200ms;
    box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.88);
}

.rm-radio-group input[type="radio"]:checked {
    border-color: var(--gold-border);
    background: radial-gradient(circle, var(--gold) 35%, transparent 36%);
    box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.88), 0 0 6px var(--gold-glow);
}

.rm-radio-group input[type="radio"]:hover {
    border-color: #4a4540;
}

/* ── SUCCESS MESSAGE ─────────────────────────────────── */
.FormFieldSuccess {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: var(--success-text) !important;
    background: var(--success-bg) !important;
    border: 1px solid var(--success-border) !important;
    border-radius: 3px !important;
    text-shadow: none !important;
}

.FormFieldSuccess:empty {
    display: none !important;
}

/* ── FIX: error box pełna szerokość ──────────────────── */
.FormFieldError,
.rm-error {
    display: flex !important;   /* zamiast inline-flex */
    width: 100%;
    box-sizing: border-box;
}

/* ── CHECKBOX — złoty styl ───────────────────────────── */
.rm-accept input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 3px;
    border: 1px solid #3a3530;
    background: #111;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 1px;
    transition: border-color 200ms, background 200ms;
    box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.88);
}

.rm-accept input[type="checkbox"]:checked {
    border-color: var(--gold-border);
    background: var(--gold-dk);
}

.rm-accept input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #1a1200;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.rm-accept input[type="checkbox"]:hover {
    border-color: #4a4540;
}

/* ── ACCOUNT LOGIN — strip old table chrome ──────────── */
#accountlogin .TableContent {
    border: none !important;
    background: transparent !important;
}
#accountlogin .InnerTableContainer {
    background: transparent;
}
#accountlogin .TableContentContainer {
    padding: 0;
}
#accountlogin .TableContentAndRightShadow,
#accountlogin .TableShadowContainerRightTop,
#accountlogin .TableShadowContainer {
    background: none !important;
}
#accountlogin .rm-input-wrap {
    width: 100%;
}

#accountlogin input:-webkit-autofill,
#accountlogin input:-webkit-autofill:hover,
#accountlogin input:-webkit-autofill:focus,
#accountlogin input:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 1px #1e1b16,
        inset 0 0 0 100000px #111111 !important;
    -webkit-text-fill-color: #c8c0b0 !important;
    caret-color: #c8c0b0;
}