/* ==========================================================
   HANDL — HANDLORD ACCOUNT
   Reference composition: 1448 x 1086 desktop mockup.
   Existing Homey/HANDL header and footer remain global.
   ========================================================== */

body.handl-handlord-account-page{
    overflow-x:hidden;
}

body.handl-handlord-account-page .page-title,
body.handl-handlord-account-page .page-title-wrap,
body.handl-handlord-account-page .breadcrumb-wrap,
body.handl-handlord-account-page .breadcrumbs{
    display:none !important;
}

.handl-hla,
.handl-hla *{
    box-sizing:border-box;
}

.handl-hla{
    --hla-purple:#6845f5;
    --hla-purple-2:#7a4cff;
    --hla-purple-soft:#f3efff;
    --hla-orange:#ff5a22;
    --hla-orange-soft:#fff3ec;
    --hla-ink:#17152a;
    --hla-text:#383347;
    --hla-muted:#7a7486;
    --hla-border:#e6e2ee;
    --hla-field:#d9d5e2;
    --hla-bg:#faf9ff;
    position:relative;
    isolation:isolate;
    width:100%;
    min-height:820px;
    overflow:hidden;
    padding:28px 24px 42px;
    background:
        radial-gradient(circle at 50% 26%,rgba(104,69,245,.065),transparent 42%),
        linear-gradient(180deg,#fbfaff 0%,#f9f8fe 100%);
    color:var(--hla-ink);
    font-family:inherit;
}

.handl-hla__shell{
    position:relative;
    z-index:2;
    width:min(1228px,100%);
    margin:0 auto;
}

.handl-hla__decor{
    position:absolute;
    z-index:0;
    width:390px;
    height:390px;
    opacity:.48;
    pointer-events:none;
}

.handl-hla__decor::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 18px,
        rgba(104,69,245,.10) 19px 20px,
        transparent 21px 34px
    );
}

.handl-hla__decor--left{
    left:-245px;
    bottom:-145px;
}

.handl-hla__decor--right{
    right:-235px;
    top:5px;
}

.handl-hla__hero{
    max-width:760px;
    margin:0 auto 28px;
    text-align:center;
}

.handl-hla__hero-icon{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 13px;
    border:1.5px solid rgba(104,69,245,.55);
    border-radius:50%;
    background:rgba(255,255,255,.72);
    color:var(--hla-purple);
}

.handl-hla__hero-icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hla__hero h1{
    margin:0;
    color:var(--hla-ink);
    font-size:39px;
    line-height:1.08;
    font-weight:750;
    letter-spacing:-.035em;
}

.handl-hla__hero p{
    margin:9px 0 0;
    color:#7f798c;
    font-size:18px;
    line-height:1.45;
}

.handl-hla__notices{
    width:min(1228px,100%);
    margin:0 auto 16px;
}

.handl-hla__notices .woocommerce-error,
.handl-hla__notices .woocommerce-message,
.handl-hla__notices .woocommerce-info{
    margin:0;
    padding:14px 18px 14px 46px;
    border:1px solid var(--hla-border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(32,25,61,.06);
    color:var(--hla-text);
    font-size:13px;
}

.handl-hla__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:stretch;
}

.handl-hla-card{
    min-width:0;
    min-height:610px;
    overflow:hidden;
    border:1px solid rgba(226,222,235,.95);
    border-radius:21px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 48px rgba(31,24,58,.075);
}

.handl-hla-card__inner{
    height:100%;
    display:flex;
    flex-direction:column;
    padding:38px 39px 33px;
}

.handl-hla__eyebrow{
    display:block;
    margin:0 0 16px;
    color:var(--hla-purple);
    font-size:14px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
}

.handl-hla-card h2{
    margin:0;
    color:var(--hla-ink);
    font-size:37px;
    line-height:1.18;
    font-weight:760;
    letter-spacing:-.035em;
}

.handl-hla-login{
    margin-top:30px;
}

.handl-hla-field + .handl-hla-field{
    margin-top:22px;
}

.handl-hla-field label{
    display:block;
    margin:0 0 9px;
    color:#3c3748;
    font-size:14px;
    line-height:1.2;
    font-weight:600;
}

.handl-hla-input-wrap{
    position:relative;
}

.handl-hla-input-wrap input{
    width:100%;
    height:60px;
    margin:0;
    padding:0 54px 0 55px;
    border:1px solid var(--hla-field);
    border-radius:9px;
    outline:0;
    background:#fff;
    box-shadow:none;
    color:var(--hla-ink);
    font:inherit;
    font-size:14px;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.handl-hla-input-wrap input::placeholder{
    color:#9892a3;
    opacity:1;
}

.handl-hla-input-wrap input:focus{
    border-color:rgba(104,69,245,.72);
    box-shadow:0 0 0 3px rgba(104,69,245,.09);
}

.handl-hla-input-icon{
    position:absolute;
    z-index:2;
    left:18px;
    top:50%;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#747080;
    transform:translateY(-50%);
    pointer-events:none;
}

.handl-hla-input-icon svg,
.handl-hla-password-toggle svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hla-password-toggle{
    position:absolute;
    z-index:3;
    right:9px;
    top:50%;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#6d6878;
    cursor:pointer;
    transform:translateY(-50%);
}

.handl-hla-password-toggle:hover,
.handl-hla-password-toggle:focus-visible{
    background:#f6f3ff;
    color:var(--hla-purple);
    outline:none;
}

.handl-eye--closed{
    display:none;
}

.handl-hla-password-toggle.is-visible .handl-eye--open{
    display:none;
}

.handl-hla-password-toggle.is-visible .handl-eye--closed{
    display:block;
}

.handl-hla-forgot{
    display:inline-block;
    margin-top:14px;
    color:var(--hla-purple) !important;
    font-size:13px;
    line-height:1.3;
    text-decoration:none !important;
}

.handl-hla-forgot:hover{
    text-decoration:underline !important;
}

.handl-hla-btn{
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:0 22px;
    border:0;
    border-radius:8px;
    font:inherit;
    font-size:16px;
    line-height:1;
    font-weight:750;
    text-align:center;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}

.handl-hla-btn--primary{
    background:linear-gradient(90deg,#663cf3 0%,#713df6 55%,#7542f7 100%);
    color:#fff !important;
    box-shadow:0 10px 24px rgba(104,69,245,.22);
}

.handl-hla-login .handl-hla-btn{
    margin-top:38px;
}

.handl-hla-btn:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(104,69,245,.27);
}

.handl-hla-btn:focus-visible{
    outline:3px solid rgba(104,69,245,.19);
    outline-offset:3px;
}

.handl-hla-btn:disabled,
.handl-hla-btn[aria-disabled="true"]{
    cursor:not-allowed;
}

.handl-hla-create:disabled{
    opacity:.58;
    box-shadow:none;
}

.handl-hla-create.is-loading{
    opacity:.72;
    cursor:progress;
}

.handl-hla-security-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:auto;
    padding-top:24px;
    color:#8b8594;
    font-size:12px;
    line-height:1.35;
    text-align:center;
}

.handl-hla-security-note svg{
    width:19px;
    height:19px;
    flex:0 0 19px;
    fill:none;
    stroke:#9b95a6;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hla-card--join .handl-hla-card__inner{
    padding-left:41px;
    padding-right:41px;
}

.handl-hla-account-types{
    display:grid;
    gap:12px;
    margin-top:26px;
}

.handl-hla-type{
    position:relative;
    width:100%;
    min-height:108px;
    display:grid;
    grid-template-columns:76px minmax(0,1fr) 22px;
    gap:17px;
    align-items:center;
    padding:12px 23px 12px 17px;
    border:1.5px solid #ded9e9;
    border-radius:9px;
    background:#fff;
    color:var(--hla-ink);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.handl-hla-type:hover{
    transform:translateY(-1px);
}

.handl-hla-type--perso{
    border-color:rgba(104,69,245,.58);
}

.handl-hla-type--pro{
    border-color:rgba(255,90,34,.45);
}

.handl-hla-type--perso:hover,
.handl-hla-type--perso.is-selected{
    border-color:var(--hla-purple);
    background:#fdfcff;
    box-shadow:0 0 0 3px rgba(104,69,245,.08);
}

.handl-hla-type--pro:hover,
.handl-hla-type--pro.is-selected{
    border-color:var(--hla-orange);
    background:#fffdfb;
    box-shadow:0 0 0 3px rgba(255,90,34,.07);
}

.handl-hla-type:focus-visible{
    outline:3px solid rgba(104,69,245,.15);
    outline-offset:3px;
}

.handl-hla-type__icon{
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
}

.handl-hla-type--perso .handl-hla-type__icon{
    background:var(--hla-purple-soft);
    color:var(--hla-purple);
}

.handl-hla-type--pro .handl-hla-type__icon{
    background:var(--hla-orange-soft);
    color:var(--hla-orange);
}

.handl-hla-type__icon svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hla-type__copy{
    min-width:0;
}

.handl-hla-type__copy strong,
.handl-hla-type__copy small{
    display:block;
}

.handl-hla-type__copy strong{
    color:#201c29;
    font-size:17px;
    line-height:1.2;
    font-weight:750;
}

.handl-hla-type__copy small{
    margin-top:9px;
    color:#56505f;
    font-size:13px;
    line-height:1.35;
    font-weight:400;
}

.handl-hla-type__arrow{
    justify-self:end;
    color:var(--hla-purple);
    font-family:Arial,sans-serif;
    font-size:31px;
    line-height:1;
    font-weight:300;
}

.handl-hla-type--pro .handl-hla-type__arrow{
    color:var(--hla-orange);
}

.handl-hla-create{
    margin-top:17px;
}

.handl-hla-type-help{
    min-height:18px;
    margin:8px 0 0;
    color:#8a8393;
    font-size:10.5px;
    line-height:1.35;
    text-align:center;
}

.handl-hla-benefits{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
    margin-top:auto;
    padding-top:24px;
}

.handl-hla-benefit{
    min-width:0;
    display:grid;
    grid-template-columns:31px minmax(0,1fr);
    gap:9px;
    align-items:center;
}

.handl-hla-benefit > span{
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hla-purple);
}

.handl-hla-benefit svg{
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hla-benefit p{
    margin:0;
    color:#3d3748;
    font-size:10.5px;
    line-height:1.35;
}

/* Keep WooCommerce hook-injected fields from breaking the custom composition. */
.handl-hla-login .woocommerce-form-row{
    width:100%;
}

/* ==========================================================
   LAPTOP — 1024 to 1279
   ========================================================== */
@media (min-width:1024px) and (max-width:1279px){
    .handl-hla{
        padding:26px 22px 38px;
    }

    .handl-hla__shell{
        width:min(1080px,100%);
    }

    .handl-hla__hero h1{
        font-size:36px;
    }

    .handl-hla__hero p{
        font-size:16px;
    }

    .handl-hla__grid{
        gap:20px;
    }

    .handl-hla-card{
        min-height:588px;
    }

    .handl-hla-card__inner,
    .handl-hla-card--join .handl-hla-card__inner{
        padding:32px 31px 29px;
    }

    .handl-hla-card h2{
        font-size:33px;
    }

    .handl-hla-type{
        min-height:100px;
        grid-template-columns:66px minmax(0,1fr) 20px;
        padding:11px 18px 11px 14px;
    }

    .handl-hla-type__icon{
        width:66px;
        height:66px;
    }

    .handl-hla-benefits{
        gap:10px;
    }
}

/* ==========================================================
   TABLET — 700 to 1023
   ========================================================== */
@media (min-width:700px) and (max-width:1023px){
    .handl-hla{
        min-height:0;
        padding:28px 28px 44px;
    }

    .handl-hla__shell{
        width:min(760px,100%);
    }

    .handl-hla__hero{
        margin-bottom:24px;
    }

    .handl-hla__hero h1{
        font-size:35px;
    }

    .handl-hla__hero p{
        font-size:16px;
    }

    .handl-hla__grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .handl-hla-card{
        min-height:0;
    }

    .handl-hla-card__inner,
    .handl-hla-card--join .handl-hla-card__inner{
        padding:34px 36px;
    }

    .handl-hla-security-note,
    .handl-hla-benefits{
        margin-top:26px;
    }
}

/* ==========================================================
   MOBILE — <= 699
   ========================================================== */
@media (max-width:699px){
    .handl-hla{
        min-height:0;
        padding:21px 14px 34px;
        background:linear-gradient(180deg,#fbfaff 0%,#f9f8fe 100%);
    }

    .handl-hla__decor{
        width:240px;
        height:240px;
        opacity:.34;
    }

    .handl-hla__decor--left{
        left:-170px;
        bottom:10%;
    }

    .handl-hla__decor--right{
        right:-170px;
        top:0;
    }

    .handl-hla__hero{
        margin-bottom:20px;
    }

    .handl-hla__hero-icon{
        width:39px;
        height:39px;
        margin-bottom:10px;
    }

    .handl-hla__hero h1{
        font-size:30px;
        line-height:1.12;
    }

    .handl-hla__hero p{
        margin-top:8px;
        font-size:14px;
        line-height:1.5;
    }

    .handl-hla__grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .handl-hla-card{
        min-height:0;
        border-radius:17px;
    }

    .handl-hla-card__inner,
    .handl-hla-card--join .handl-hla-card__inner{
        padding:25px 20px 23px;
    }

    .handl-hla__eyebrow{
        margin-bottom:12px;
        font-size:12px;
    }

    .handl-hla-card h2{
        font-size:29px;
        line-height:1.15;
    }

    .handl-hla-login{
        margin-top:24px;
    }

    .handl-hla-field + .handl-hla-field{
        margin-top:18px;
    }

    .handl-hla-field label{
        font-size:13px;
    }

    .handl-hla-input-wrap input{
        height:55px;
        padding-left:50px;
        font-size:14px;
    }

    .handl-hla-login .handl-hla-btn{
        margin-top:28px;
    }

    .handl-hla-btn{
        min-height:56px;
        font-size:15px;
    }

    .handl-hla-security-note{
        margin-top:22px;
        padding-top:0;
        font-size:11px;
    }

    .handl-hla-account-types{
        margin-top:22px;
    }

    .handl-hla-type{
        min-height:90px;
        grid-template-columns:58px minmax(0,1fr) 17px;
        gap:12px;
        padding:11px 13px;
    }

    .handl-hla-type__icon{
        width:58px;
        height:58px;
        border-radius:9px;
    }

    .handl-hla-type__icon svg{
        width:31px;
        height:31px;
    }

    .handl-hla-type__copy strong{
        font-size:15px;
    }

    .handl-hla-type__copy small{
        margin-top:5px;
        font-size:11.5px;
    }

    .handl-hla-type__arrow{
        font-size:26px;
    }

    .handl-hla-benefits{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:20px;
        padding-top:0;
    }

    .handl-hla-benefit{
        grid-template-columns:29px minmax(0,1fr);
    }

    .handl-hla-benefit p{
        font-size:11px;
    }

    .handl-hla-benefit p br{
        display:none;
    }
}

/* Very small phones */
@media (max-width:390px){
    .handl-hla{
        padding-left:10px;
        padding-right:10px;
    }

    .handl-hla-card__inner,
    .handl-hla-card--join .handl-hla-card__inner{
        padding-left:17px;
        padding-right:17px;
    }

    .handl-hla-card h2{
        font-size:26px;
    }

    .handl-hla-type{
        grid-template-columns:52px minmax(0,1fr) 15px;
    }

    .handl-hla-type__icon{
        width:52px;
        height:52px;
    }
}

@media (prefers-reduced-motion:reduce){
    .handl-hla *,
    .handl-hla *::before,
    .handl-hla *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}
/* ==========================================================
   v1.1 — TRUE FULLSCREEN + CENTERING + TITLE SCALE
   Keeps the existing HANDL/Homey global header and footer.
   Full-width behavior applies to desktop, laptop, tablet,
   and mobile without changing the page structure.
   ========================================================== */

html,
body.handl-handlord-account-page{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

body.handl-handlord-account-page .handl-hla{
    position:relative !important;
    left:auto !important;
    right:auto !important;

    width:100vw !important;
    width:100dvw !important;
    max-width:none !important;

    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-inline:calc(50% - 50dvw) !important;

    padding-left:0 !important;
    padding-right:0 !important;
}

body.handl-handlord-account-page .handl-hla__shell,
body.handl-handlord-account-page .handl-hla__notices{
    width:min(1600px, calc(100% - clamp(32px, 5vw, 96px))) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

body.handl-handlord-account-page .handl-hla__grid{
    width:100%;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:clamp(20px, 2vw, 34px);
}

body.handl-handlord-account-page .handl-hla__hero h1{
    font-size:clamp(32px, 2.45vw, 36px);
}

body.handl-handlord-account-page .handl-hla-card h2{
    font-size:clamp(30px, 2.25vw, 34px);
}

body.handl-handlord-account-page .handl-hla-card__inner{
    padding-left:clamp(30px, 3vw, 42px);
    padding-right:clamp(30px, 3vw, 42px);
}

body.handl-handlord-account-page .handl-hla-card--join .handl-hla-card__inner{
    padding-left:clamp(30px, 3vw, 42px);
    padding-right:clamp(30px, 3vw, 42px);
}

@media (min-width:1600px){
    body.handl-handlord-account-page .handl-hla__shell,
    body.handl-handlord-account-page .handl-hla__notices{
        width:min(1720px, calc(100% - 112px)) !important;
    }

    body.handl-handlord-account-page .handl-hla__hero{
        max-width:820px;
    }
}

@media (min-width:1024px) and (max-width:1279px){
    body.handl-handlord-account-page .handl-hla__shell,
    body.handl-handlord-account-page .handl-hla__notices{
        width:calc(100% - 44px) !important;
    }

    body.handl-handlord-account-page .handl-hla__hero h1{
        font-size:33px;
    }

    body.handl-handlord-account-page .handl-hla-card h2{
        font-size:31px;
    }
}

@media (min-width:700px) and (max-width:1023px){
    body.handl-handlord-account-page .handl-hla{
        width:100vw !important;
        width:100dvw !important;
    }

    body.handl-handlord-account-page .handl-hla__shell,
    body.handl-handlord-account-page .handl-hla__notices{
        width:calc(100% - 40px) !important;
    }

    body.handl-handlord-account-page .handl-hla__grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    body.handl-handlord-account-page .handl-hla__hero h1{
        font-size:32px;
    }

    body.handl-handlord-account-page .handl-hla-card h2{
        font-size:30px;
    }
}

@media (max-width:699px){
    body.handl-handlord-account-page .handl-hla{
        width:100vw !important;
        width:100dvw !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        margin-inline:calc(50% - 50dvw) !important;
    }

    body.handl-handlord-account-page .handl-hla__shell,
    body.handl-handlord-account-page .handl-hla__notices{
        width:calc(100% - 24px) !important;
    }

    body.handl-handlord-account-page .handl-hla__hero h1{
        font-size:28px;
    }

    body.handl-handlord-account-page .handl-hla-card h2{
        font-size:27px;
    }

    body.handl-handlord-account-page .handl-hla-card__inner,
    body.handl-handlord-account-page .handl-hla-card--join .handl-hla-card__inner{
        padding-left:20px;
        padding-right:20px;
    }
}

@media (max-width:390px){
    body.handl-handlord-account-page .handl-hla__shell,
    body.handl-handlord-account-page .handl-hla__notices{
        width:calc(100% - 18px) !important;
    }

    body.handl-handlord-account-page .handl-hla__hero h1{
        font-size:27px;
    }

    body.handl-handlord-account-page .handl-hla-card h2{
        font-size:25px;
    }
}