@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* PORTALISTA PREMIUM AGENCY REGISTRATION */

:root {
    --navy:#173542;
    --gold:#b89a6b;
    --ivory:#f8f5ee;
    --muted:#687982;
    --pink:#ed1760;
}

* { box-sizing:border-box; }

body {
    margin:0;
    min-height:100vh;
    background:var(--ivory);
    color:var(--navy);
    font-family:Poppins,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    padding:17px max(30px,calc((100vw - 1240px)/2));
    background:#fff;
    border-bottom:1px solid #eae5db;
    box-shadow:0 5px 24px rgba(20,40,50,.035);
}

header img {
    display:block;
    width:245px;
    max-width:55vw;
    height:auto;
}

.back-home {
    font-size:12px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--navy);
    text-decoration:none;
}

.back-home:hover { color:var(--pink); }

main {
    position:relative;
    max-width:1160px;
    margin:65px auto 85px;
    padding:60px 65px 65px 52%;
    background:#fff;
    border:1px solid #e9e3d9;
    border-radius:5px;
    box-shadow:0 24px 70px rgba(22,45,55,.09);
    overflow:hidden;
    isolation:isolate;
}

main::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:45%;
    background:
      linear-gradient(160deg,#e9e2d3 0%,#f5f0e5 55%,#e7dbc5 100%);
    z-index:-1;
}

main::after {
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:1px solid rgba(159,125,75,.23);
    border-radius:50%;
    left:8%;
    bottom:-115px;
    box-shadow:
      0 0 0 38px rgba(183,154,107,.055),
      0 0 0 77px rgba(183,154,107,.04);
    pointer-events:none;
    z-index:-1;
}

main h1 {
    font-family:Poppins,Arial,sans-serif;
    font-size:clamp(34px,3.1vw,47px);
    font-weight:400;
    line-height:1.18;
    letter-spacing:-.035em;
    margin:0 0 19px;
    color:#153340;
}

main > p:first-of-type {
    color:#61747b;
    font-size:16px;
    line-height:1.85;
    margin:0 0 30px;
}

main form {
    margin-top:25px;
}

main label:not(.consent label) {
    display:block;
    margin:20px 0 8px;
    color:#25414b;
    font-size:12px;
    font-weight:700;
    letter-spacing:.045em;
}

main input:not([type="checkbox"]) {
    display:block;
    width:100%;
    padding:15px 16px;
    border:1px solid #dcdedb;
    border-radius:3px;
    background:#fbfaf8;
    color:#193642;
    font:inherit;
    font-size:15px;
    transition:border-color .2s,box-shadow .2s;
}

main input:not([type="checkbox"]):focus {
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(184,154,107,.13);
    background:#fff;
}

.consent {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:23px 0;
    font-size:13px;
    line-height:1.7;
    color:#546771;
}

.consent input {
    width:17px;
    height:17px;
    margin-top:3px;
    flex-shrink:0;
    accent-color:var(--pink);
}

.consent label {
    margin:0 !important;
    font-size:13px;
    font-weight:400;
    letter-spacing:normal;
}

main a:not(.back-home) {
    color:#a47b42;
    text-underline-offset:3px;
}

main p:has(> small) {
    padding:17px 19px;
    background:#f9f7f2;
    border-left:3px solid #c5aa7c;
    border-radius:2px;
    line-height:1.75;
}

main small {
    font-size:12px;
    color:#667781;
}

main button {
    display:block;
    width:100%;
    padding:19px 24px;
    margin-top:25px;
    border:0;
    border-radius:3px;
    background:var(--pink);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:700;
    letter-spacing:.10em;
    text-transform:uppercase;
    box-shadow:0 9px 24px rgba(237,23,96,.16);
    transition:background .2s,transform .2s;
}

main button:not(:disabled) {
    cursor:pointer;
    opacity:1;
}

main button:not(:disabled):hover {
    background:#c90f4e;
    transform:translateY(-2px);
}

main button:disabled {
    cursor:not-allowed;
    opacity:.65;
}

@media(min-width:901px) {
    main h1,
    main > p:first-of-type {
        position:relative;
    }
    main::before {
        border-right:1px solid #e4d8c5;
    }
}

@media(max-width:900px) {
    main {
        margin:35px 20px 60px;
        padding:42px;
    }
    main::before,
    main::after {
        display:none;
    }
}

@media(max-width:600px) {
    header {
        padding:15px 20px;
    }
    header img {
        width:190px;
    }
    .back-home {
        font-size:10px;
    }
    main {
        margin:20px 12px 45px;
        padding:32px 22px;
    }
    main h1 {
        font-size:34px;
    }
    main > p:first-of-type {
        font-size:15px;
    }
}


/* REGISTRATION LAYOUT CORRECTION */

main {
    max-width: 760px !important;
    margin: 55px auto 85px !important;
    padding: 55px 65px 65px !important;
    display: block !important;
    background: #fff !important;
}

main::before,
main::after {
    display: none !important;
}

main h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.2 !important;
}

main > p:first-of-type {
    max-width: 620px !important;
    font-size: 16px !important;
}

main form {
    width: 100% !important;
    max-width: 100% !important;
}

main input:not([type="checkbox"]) {
    width: 100% !important;
}

@media(max-width:800px) {
    main {
        margin: 30px 20px 60px !important;
        padding: 40px 35px !important;
    }
}

@media(max-width:600px) {
    main {
        margin: 20px 12px 45px !important;
        padding: 30px 22px !important;
    }
    main h1 {
        font-size: 34px !important;
    }
}


/* HEADING FONT SIZE ONLY */
main h1 {
    font-size: 35px !important;
}