/* AREM Auth Modal v2 — tabbed login + sign-up + social OAuth */

/* ── Overlay ── */
.arem-auth-overlay{position:fixed;inset:0;background:#0a1420a8;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}
.arem-auth-overlay.is-open{display:flex}

/* ── Modal shell ── */
.arem-auth-modal{position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;background:#fff;border-radius:20px;box-shadow:0 28px 80px #0006;padding:32px 32px 28px;font-family:Manrope,Arial,sans-serif;color:#17212B;box-sizing:border-box}

/* ── Close ── */
.arem-auth-close{position:absolute;right:18px;top:16px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#607080;padding:4px 8px;border-radius:8px}
.arem-auth-close:hover{background:#f4f7fa;color:#082A4A}
.arem-auth-close:focus-visible{outline:3px solid #0878E815;border-color:#0878E8}

/* ── Logo ── */
.arem-auth-logo{display:block;width:200px;max-width:65%;height:auto;margin:0 0 22px}

/* ── Tabs ── */
.arem-auth-tabs{display:flex;border-bottom:2px solid #DCE4EB;margin-bottom:26px;gap:0}
.arem-auth-tab{flex:1;padding:10px 0;border:0;background:none;font-family:Manrope,Arial,sans-serif;font-size:15px;font-weight:700;color:#607080;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.arem-auth-tab:hover{color:#082A4A}
.arem-auth-tab.is-active{color:#082A4A;border-bottom-color:#0878E8}
.arem-auth-tab:focus-visible{outline:3px solid #0878E815;border-radius:6px}

/* ── Form panels ── */
.arem-auth-panel{display:none}
.arem-auth-panel.is-active{display:block}

/* ── Labels ── */
.arem-auth-label{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;margin:0 0 6px;color:#17212B}
.arem-auth-label a,.arem-auth-label span.arem-auth-forgot{color:#0878E8;font-weight:600;font-size:12px;text-decoration:none;cursor:pointer}
.arem-auth-label a:hover,.arem-auth-label span.arem-auth-forgot:hover{text-decoration:underline}

/* ── Inputs ── */
.arem-auth-input{width:100%;height:50px;border:1.5px solid #cbd6e0;border-radius:10px;padding:0 14px;font:inherit;font-size:15px;box-sizing:border-box;color:#17212B;background:#fff;transition:border-color .15s,box-shadow .15s}
.arem-auth-input:focus{outline:none;border-color:#0878E8;box-shadow:0 0 0 3px #0878E815}
.arem-auth-input::placeholder{color:#a0aab4}
.arem-auth-field{margin-bottom:14px}
.arem-auth-field:last-of-type{margin-bottom:0}

/* ── Name row ── */
.arem-auth-name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}

/* ── Password strength ── */
.arem-auth-strength{height:4px;border-radius:99px;background:#DCE4EB;margin:6px 0 4px;overflow:hidden}
.arem-auth-strength-bar{height:100%;width:0;border-radius:99px;transition:width .3s,background .3s}
.arem-auth-strength-label{font-size:11px;color:#607080;margin-bottom:10px}

/* ── Keep signed in ── */
.arem-auth-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#607080;margin:12px 0 0;cursor:pointer}
.arem-auth-remember input[type=checkbox]{width:16px;height:16px;accent-color:#0878E8;cursor:pointer;flex-shrink:0}

/* ── Primary button ── */
.arem-auth-primary{width:100%;height:52px;border:0;border-radius:12px;background:#0878E8;color:#fff;font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:15px;margin-top:18px;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.arem-auth-primary:hover{background:#0669cc;box-shadow:0 4px 18px #0878E830}
.arem-auth-primary:active{transform:scale(.98)}
.arem-auth-primary:focus-visible{outline:3px solid #0878E840;outline-offset:2px}
.arem-auth-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── Divider ── */
.arem-auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:#607080;font-size:13px;font-weight:600}
.arem-auth-divider::before,.arem-auth-divider::after{content:"";height:1px;background:#DCE4EB;flex:1}

/* ── Social buttons ── */
.arem-auth-socials{display:flex;flex-direction:column;gap:10px}
.arem-auth-social{position:relative;width:100%;height:50px;border:1.5px solid #D1D9E0;border-radius:12px;background:#fff;color:#17212B;font-family:Manrope,Arial,sans-serif;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s,box-shadow .15s;padding:0 16px}
.arem-auth-social:hover{border-color:#0878E8;background:#f8fbff;box-shadow:0 2px 10px #0878E815}
.arem-auth-social:focus-visible{outline:none;border-color:#0878E8;box-shadow:0 0 0 3px #0878E820}
.arem-auth-social:disabled{opacity:.45;cursor:not-allowed}
.arem-auth-social-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.arem-auth-social svg{display:block}

/* ── Terms ── */
.arem-auth-terms{text-align:center;color:#607080;font-size:11.5px;line-height:1.6;margin:18px 0 0}
.arem-auth-terms a{color:#082A4A;font-weight:600;text-decoration:none}
.arem-auth-terms a:hover{text-decoration:underline}

/* ── Switch link ── */
.arem-auth-switch{text-align:center;font-size:13px;color:#607080;margin-top:16px}
.arem-auth-switch button{border:0;background:none;color:#0878E8;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;padding:0}
.arem-auth-switch button:hover{text-decoration:underline}

/* ── Messages ── */
.arem-auth-msg{min-height:0;font-size:13px;border-radius:8px;padding:0;transition:all .15s}
.arem-auth-msg.has-error{background:#fff0f0;border:1px solid #f5c0c0;color:#C83B3B;padding:10px 14px;margin-top:10px}
.arem-auth-msg.has-ok{background:#eaf7f1;border:1px solid #a8dfc5;color:#147A52;padding:10px 14px;margin-top:10px}

/* ── Spinner ── */
.arem-auth-spinner{width:18px;height:18px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:arem-spin .6s linear infinite;display:none}
.arem-auth-primary.is-loading .arem-auth-spinner{display:block}
.arem-auth-primary.is-loading .arem-auth-btn-text{opacity:.7}
@keyframes arem-spin{to{transform:rotate(360deg)}}

/* ── Body lock ── */
body.arem-auth-lock{overflow:hidden}

/* ── Listing / property gate (unchanged) ── */
.arem-listing-page,.arem-property-gate{max-width:900px;margin:48px auto;padding:32px;font-family:Manrope,Arial,sans-serif}
.arem-listing-page h1,.arem-property-gate h2{color:#082A4A}
.arem-listing-intro{color:#607080}
.arem-listing-form{display:grid;gap:18px}
.arem-listing-form label{display:grid;gap:7px;font-weight:700;color:#082A4A}
.arem-listing-form input,.arem-listing-form select,.arem-listing-form textarea{width:100%;border:1px solid #DCE4EB;border-radius:10px;padding:13px;font:inherit;box-sizing:border-box}
.arem-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.arem-submit-ok{background:#eaf7f1;color:#147A52;padding:14px;border-radius:10px}

/* ── Responsive ── */
@media(max-width:600px){
  .arem-auth-overlay{padding:0;align-items:flex-end}
  .arem-auth-modal{width:100%;max-height:93vh;border-radius:20px 20px 0 0;padding:24px 20px 32px}
  .arem-auth-logo{width:170px}
  .arem-auth-name-row{grid-template-columns:1fr}
  .arem-form-grid{grid-template-columns:1fr}
}
@media(min-width:601px) and (max-width:900px){
  .arem-auth-modal{width:min(420px,90vw)}
}