/* ==========================================================================
   RentOS — popup + form skin
   --------------------------------------------------------------------------
   forms.css and popup.css ship from rto-form-popups untouched. Both are fully
   tokenised, so this file is the only place RentOS-specific values live —
   keeping the vendor files diffable against upstream.

   Every value here is measured from Figma:
     desktop popup  123:8133  (700 x 542.408)
     mobile popup   123:8106  (390 x 840)
     fields         123:8137 / 123:8117
     button         123:8135 / 123:8115

   Where the two frames disagree the mobile values win — the desktop popup
   instance is scaled ~111%, which is why it reports 1.111px borders and
   5.556px radii rather than the authored 1px / 5px. Confirm with the designer.
   ========================================================================== */

/* ------------------------------------------------------------------- Popup */
.popup .popup-overlay {
    /* Figma has no overlay on the popup frames; keeping the vendor scrim but
       softened, since the RentOS palette is light. Confirm with the designer. */
    background-color: rgba(30, 27, 24, .55);
}

.popup .popup-content {
    width: var(--popup-width);
    max-width: calc(100% - (var(--gutter-mobile) * 2));
    background-color: var(--popup-bg);
    border: 1px solid var(--popup-border);
    border-radius: var(--radius-card);
    box-shadow: var(--popup-shadow);
    /* Figma insets are measured from the outer edge (title at y=45.2, fields
       at x=58), and the frame width of 700 includes its 1px stroke. With
       border-box the border eats into the content box, so the padding is
       reduced by the border width to keep the content box at exactly 584. */
    padding: 44px 57px;
}

.popup .popup-close {
    width: 10px;                            /* measured @ 123:8151 */
    height: 10px;
    top: 21px;
    right: 20px;
}

.popup .popup-close:before,
.popup .popup-close:after {
    background-color: var(--primary-text);
}

.popup-title {
    font-size: var(--fs-modal-title);       /* 32px @ 123:8150 */
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
    text-align: center;
    margin-bottom: 32px;
}

/* -------------------------------------------------------------------- Form */
/* Overrides the --form-* tokens that forms.css reads. */
form.uni-style {
    --form-width: 584px;                    /* measured @ 123:8137 */
    --form-font-size: 18px;                 /* measured @ 123:8139 */
    --form-field-padding: 10px;             /* 20px gutter between fields */
    --form-field-basis: 50%;

    --form-input-height: var(--field-height);        /* 60px */
    --form-input-font-size: 1em;                     /* 18px */
    --form-input-radius: var(--radius-field);        /* 10px */
    --form-input-text-indent: var(--field-padding-x);/* 16px */
    --form-input-padding-top: 18px;
    --form-input-bg: var(--field-bg);
    --form-input-color: var(--field-text);
    --form-placeholder-color: var(--field-text);

    --form-label-offset-x: var(--field-padding-x);
    --form-label-font-size: 1em;
    --form-label-font-weight: var(--fw-regular);

    --form-select-arrow-right: var(--field-padding-x);
    --form-focus-border-width: 2px;
    --form-error-border-width: 2px;
}

/* Field borders — forms.css sets width/style via the .border utility, colour here */
form.uni-style .form-field input:not([type="radio"]):not([type="checkbox"]),
form.uni-style .form-field textarea,
form.uni-style .form-field select {
    border-color: var(--field-border);
}

/* Required asterisk — measured @ 123:8119 (#ff3c00) */
.f-required {
    color: var(--field-required);
}

/* Focus / error colours, overriding the vendor :root defaults in forms.css */
form.uni-style {
    --focus-border: var(--brand-dark-green);
    --focus-color: var(--primary-text);
    --error-border: var(--danger);
    --error-color: var(--danger);
}

/* ------------------------------------------------------------------ Button */
form.uni-style .form-action {
    display: flex;
    justify-content: center;
    margin-top: 31px;                       /* 447 - 416 measured @ 123:8135 */
}

form.uni-style .form-action [type="submit"].button {
    width: var(--button-width);             /* 192px */
    height: var(--button-height);           /* 50px */
    padding: 0 var(--button-padding-x);     /* 18px */
    background-color: var(--button-bg);
    color: var(--button-text);
    border-radius: var(--radius-button);    /* 45px */
    font-size: var(--fs-button);            /* 20px */
    line-height: var(--lh-button);          /* 25.5px */
    font-weight: var(--fw-semibold);
    text-transform: none;                   /* Figma label is sentence case */
    /* Figma sets whitespace-nowrap on the label: it is 158px inside a 192px
       button, so it slightly overruns the 18px padding rather than wrapping. */
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
}

form.uni-style .form-action [type="submit"].button:hover:not([disabled]) {
    background-color: var(--brand-black);
}

form.uni-style .form-action [type="submit"].button:active:not([disabled]) {
    transform: translateY(1px);
}

/* --------------------------------------------------------------- Mobile 390 */
@media screen and (max-width: 567px) {
    .popup .popup-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--popup-bg-mobile);   /* #f9faf6 @ 123:8106 */
        padding: 121px var(--gutter-mobile) 79px;   /* measured @ 123:8114 / 123:8115 */
        overflow-y: auto;
    }

    /* Decorative background shape — measured @ 123:8111.
       A 430.29 x 310.24 group, #193308 at 10% opacity, rotated 180deg and
       bled past the frame edges. Its Figma insets map exactly onto the
       390 x 840 frame (left -4.87% = -19px, right -5.46% = -21.3px, giving
       the group's 430.29 width; top 70% / bottom -6.93% giving its 310.24).

       position: fixed so it anchors to the viewport rather than the scrolling
       popup body — it is not clipped by the popup's overflow-y because no
       ancestor establishes a containing block for fixed elements. */
    .popup .popup-content::before {
        content: '';
        position: fixed;
        top: 70%;
        right: -5.46%;
        bottom: -6.93%;
        left: -4.87%;
        background-image: url(../images/popup-shape-mobile.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: rotate(180deg);
        pointer-events: none;
        z-index: 0;
    }

    /* Keep the form above the shape */
    .popup .popup-default,
    .popup .popup-thanks {
        z-index: 1;
    }

    .popup .popup-close {
        top: 75px;                                   /* measured @ 123:8130 */
        right: 17px;
        width: 13px;
        height: 13px;
        z-index: 2;
    }

    .popup-title {
        margin-bottom: 16px;
    }

    form.uni-style {
        --form-width-mobile: 100%;
        --form-field-padding-mobile: 10px 0;         /* keeps the 20px rhythm */
        --form-input-radius-mobile: var(--radius-field);
        --form-input-font-size-mobile: 1em;
        --form-label-font-size-mobile: 1em;
    }
}

/* ------------------------------------------------------------------- Status */
.form-status {
    margin-top: 12px;
    text-align: center;
    color: var(--danger);
}

.form-status.is-visible {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
}