/* ==========================================================================
   rdo-tenant-popup.css — Maskoten v1.5.15
   Tenant signup popup — visual identity aligned with the customer signup
   popup (rdo-auth-popup.css). Inputs render as themed pills, labels are
   visually hidden (placeholder carries the affordance) and the plan strike
   price sits inline to the LEFT of the live price.

   Specificity note (since 1.5.15):
   The theme's form reset uses selectors like
       body form:not(#acf-form) input[type=text]
       body form:not(#acf-form) label:not(.switch)
   The :not(#acf-form) part counts as one ID for specificity, so the theme
   rule weighs (0,1,1,3). Plain `body .modal .form input` only weighs
   (0,0,3,2), which loses. We therefore mark the popup-scoped overrides
   !important — same approach as rdo-auth-popup.css for the customer popup.

   Author: RedOcean <https://redocean.pt>
   ========================================================================== */

.rdo-tenant-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}
/* Pre-rendered overlay starts with [hidden]; JS toggles it on click. */
.rdo-tenant-popup-overlay[hidden] {
    display: none !important;
}

.rdo-tenant-popup-modal {
    background: #FFFFFF;
    border-radius: 1.6rem;
    padding: 4rem;
    max-width: 52rem;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.rdo-tenant-popup-modal h2 {
    margin: 0 0 2rem 0;
    color: var(--rdo-brown, #7E5B34);
    font-size: 2.4rem;
}

.rdo-tenant-popup-close {
    position: absolute;
    top: 1.6rem; right: 1.6rem;
    background: none; border: none;
    font-size: 3.2rem; line-height: 1;
    color: var(--rdo-brown, #7E5B34);
    cursor: pointer;
    width: 4rem; height: 4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background var(--rdo-ease, .2s ease);
}
.rdo-tenant-popup-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.rdo-tenant-popup-open {
    overflow: hidden;
}

/* ==========================================================================
   Plan summary box — name on the left, price column on the right.
   Since 1.5.14: strike sits inline LEFT of the live price.
   ========================================================================== */
.rdo-tenant-signup-plan {
    background: #FFFCEB;
    padding: 1.6rem 2rem;
    border-radius: 0.8rem;
    margin-bottom: 2.4rem;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1.6rem;
}
.rdo-tenant-signup-plan-name {
    font-weight: 600; font-size: 1.6rem;
    color: var(--rdo-brown, #7E5B34);
}
.rdo-tenant-signup-plan-pricecol {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: nowrap;
}
.rdo-tenant-signup-plan-price {
    font-weight: 600; font-size: 1.8rem;
    color: var(--rdo-orange, #EF4C24);
    white-space: nowrap;
}
.rdo-tenant-signup-plan-strike {
    font-weight: 600;
    font-size: 1.4rem;
    color: rgba(126, 91, 52, 0.55);
    white-space: nowrap;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-align: right;
}
.rdo-tenant-signup-plan-strike.hidden {
    display: none;
}

/* ==========================================================================
   Form layout
   ========================================================================== */
.rdo-tenant-popup-modal .rdo-tenant-signup-form {
    display: block;
}
.rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-row {
    margin-bottom: 1.2rem;
}

/* Two-column row — used to put password + confirm side by side on desktop.
   Each .rdo-tenant-signup-col is a flex item that holds one input plus its
   inline error slot, so column-level errors land below the right field. */
.rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-row-cols {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
    align-items: flex-start;
}
.rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Hint row — pulls the "6 caractères minimum." closer to the password row
   above it (the row-cols default margin-bottom keeps the gap below). */
.rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-row-hint {
    margin-top: -0.6rem;
    margin-bottom: 1.2rem;
}
.rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-row-hint .rdo-tenant-signup-hint {
    margin: 0 0 0 1rem;
}

/* Visually hide field labels — accessibility preserved.
   Targets ONLY the rdo-tenant-signup-label class (not the CGV label). */
.rdo-tenant-popup-modal .rdo-tenant-signup-form label.rdo-tenant-signup-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Pill inputs — replicate rdo-auth-popup.css visual.
   !important is mandatory because the theme rule
   `body form:not(#acf-form) input[type=...]` wins on specificity otherwise. */
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="text"],
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="email"],
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="password"] {
    border: 1px solid var(--rdo-brown, #7E5B34) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.8rem 2.2rem !important;
    border-radius: 2.2rem !important;
    background: #FFFFFF !important;
    color: var(--rdo-brown, #7E5B34) !important;
    height: auto !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: box-shadow var(--rdo-ease, .2s ease), border-color var(--rdo-ease, .2s ease) !important;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="text"]:focus,
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="email"]:focus,
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input[type="password"]:focus {
    box-shadow: 0 0 0 2px rgba(126, 91, 52, 0.15) !important;
    border-color: var(--rdo-brown, #7E5B34) !important;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input::placeholder {
    color: var(--rdo-brown, #7E5B34) !important;
    opacity: 0.7 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 1.6rem !important;
}

/* Error state for text/email/password inputs (since 1.5.15;
   restyled in 1.5.18 to use a clear error red instead of the brand orange). */
body .rdo-tenant-popup-modal .rdo-tenant-signup-form input.rdo-input-error {
    border-color: #D14520 !important;
    background: #FFF6F3 !important;
}

/* Hint right under the password input */
.rdo-tenant-popup-modal .rdo-tenant-signup-hint {
    display: block;
    margin: 0.6rem 0 0 1rem;
    font-size: 1.2rem;
    color: #888;
}

/* Per-field inline error message (since 1.5.15; generalised in 1.5.18 to
   cover every input + the CGV checkbox). Text is set by becomeprovider.js
   via setFieldError(). */
.rdo-tenant-popup-modal .rdo-tenant-signup-field-error {
    display: none;
    margin: 0.6rem 0 0 1rem;
    font-size: 1.2rem;
    color: #D14520;
    line-height: 1.4;
}
.rdo-tenant-popup-modal .rdo-tenant-signup-field-error.is-visible {
    display: block;
}

/* CGV row — when error is present, paint the box border red.
   Inline-flex container has the small under it. */
.rdo-tenant-popup-modal .rdo-tenant-signup-cgv .rdo-tenant-signup-field-error {
    margin-left: 0;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-cgv input[type="checkbox"].rdo-input-error {
    outline: 2px solid #D14520 !important;
    outline-offset: 2px;
}

/* ==========================================================================
   CGV checkbox — restore native control inside the themed checkbox row.
   The theme rule body form:not(#acf-form) input[type=checkbox] sets
   opacity:0 and floats the box; we counter it here and use a real native
   control with accent-color for brand tint. The sibling <span> is also
   neutralised so the theme's painted bullet stops rendering.
   ========================================================================== */
.rdo-tenant-popup-modal .rdo-tenant-signup-cgv .rdo-tenant-signup-cgv-label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.8rem !important;
    font-weight: 400 !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    color: var(--rdo-brown, #7E5B34) !important;
    line-height: 1.5 !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: auto !important;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-cgv input[type="checkbox"] {
    opacity: 1 !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    margin: 0.2rem 0 0 0 !important;
    float: none !important;
    accent-color: var(--rdo-orange, #EF4C24);
    cursor: pointer;
    position: static !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-cgv input[type="checkbox"] + span {
    position: static !important;
    padding: 0 !important;
    display: inline !important;
}
body .rdo-tenant-popup-modal .rdo-tenant-signup-cgv input[type="checkbox"] + span::before {
    content: none !important;
    display: none !important;
}
.rdo-tenant-popup-modal .rdo-tenant-signup-cgv a {
    color: var(--rdo-orange, #EF4C24);
    text-decoration: underline;
}

/* ==========================================================================
   Error block + actions
   ========================================================================== */
.rdo-tenant-signup-error {
    display: none;
    background: #FCEBEB;
    border-left: 3px solid #D14520;
    padding: 1rem 1.4rem;
    margin: 1.6rem 0;
    color: #791F1F;
    font-size: 1.3rem;
    border-radius: 0.4rem;
}

.rdo-tenant-signup-actions {
    margin-top: 2.4rem;
    text-align: center;
}
.rdo-tenant-signup-submit {
    min-width: 24rem;
}
.rdo-tenant-signup-submit.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.rdo-tenant-signup-signin-link {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.3rem;
    color: #666;
}
.rdo-tenant-signup-signin-link a {
    color: var(--rdo-orange, #EF4C24);
    text-decoration: underline;
    margin-left: 0.4rem;
}

.rdo-tenant-popup-actions {
    margin-top: 2rem;
    text-align: center;
}

.rdo-customer-on-becomeprovider-notice {
    background: #FAEEDA;
    border-left: 4px solid #BA7517;
    padding: 1.6rem 2rem;
    margin-bottom: 2.4rem;
    border-radius: 0.4rem;
    text-align: left;
}
.rdo-customer-on-becomeprovider-notice p {
    margin: 0.4rem 0;
    color: #633806;
    font-size: 1.4rem;
}

@media (max-width: 600px) {
    .rdo-tenant-popup-modal { padding: 3.2rem 2rem; }
    .rdo-tenant-popup-modal h2 { font-size: 2rem; }
    .rdo-tenant-signup-plan { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .rdo-tenant-signup-plan-pricecol { align-self: flex-start; }
    .rdo-tenant-signup-submit { min-width: 100%; }
    .rdo-tenant-popup-modal .rdo-tenant-signup-form .rdo-tenant-signup-row-cols {
        flex-direction: column;
        gap: 1.2rem;
    }
}