/* Design Creator registration (register.php) and the sign-in page extras (login.php).
   Builds on style.css: the same paper colours, .ff floating-label inputs and success screen. */

.reg-wrap{width:100%; max-width:560px; margin:0 auto; padding:28px 16px 56px;}
.reg-head{text-align:center; margin-bottom:26px;}
.reg-head .brand{font-size:30px;}
.reg-head p{margin:2px 0 0; font-size:15px; color:var(--text-secondary);}
.reg-title{font-size:clamp(24px,5vw,30px); line-height:1.15; letter-spacing:-.02em; text-align:center;}
.reg-intro{margin:10px 0 22px; text-align:center; font-size:15px; line-height:1.6; color:var(--text-secondary);}

.reg-form{padding:26px 24px 22px; box-shadow:var(--shadow-sm);}
.reg-section + .reg-section{margin-top:22px; padding-top:22px; border-top:1px solid var(--border);}
.reg-section h2{margin:0 0 16px; font-size:17px; font-family:'Space Grotesk',sans-serif; letter-spacing:-.01em;}
.reg-form .ff input, .reg-form .ff select{padding-left:14px; padding-right:14px;}
.reg-form .ff select{padding-right:34px;}

/* Honeypot: off screen, only bots fill it in. */
.reg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Password: show/hide button inside the field, strength meter below. */
.ff.pw input{padding-right:74px;}
.pw-toggle{position:absolute; right:8px; top:9px; min-width:56px; height:40px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer;}
.pw-toggle:hover{background:var(--surface-2);}
.pw-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.pw-meter[hidden]{display:none;}
.pw-meter{display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:var(--text-secondary);}
.pw-bar{flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.pw-bar i{display:block; height:100%; width:8%; border-radius:99px; background:var(--attention); transition:width .25s ease, background-color .25s ease;}
.pw-meter[data-level="1"] .pw-bar i{width:34%; background:var(--attention);}
.pw-meter[data-level="2"] .pw-bar i{width:67%; background:var(--amber, #B7791F);}
.pw-meter[data-level="3"] .pw-bar i{width:100%; background:var(--success);}
.pw-meter[data-level="2"] .pw-word{color:var(--amber, #B7791F);}
.pw-meter[data-level="3"] .pw-word{color:var(--success);}
.pw-word{min-width:92px; text-align:right; font-weight:600;}

/* Experience: radio pills. */
.reg-pills{margin:4px 0 16px; padding:0; border:0; min-width:0;}
.reg-pills legend{margin-bottom:8px; padding:0; font-size:14px; font-weight:500;}
.pill-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
.pill-opt{position:relative; display:block; cursor:pointer;}
.pill-opt input{position:absolute; opacity:0; width:1px; height:1px;}
.pill-opt span{display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px 10px; border:1.5px solid var(--border-strong); border-radius:99px; background:var(--surface); text-align:center; font-size:14px; line-height:1.25; transition:border-color .15s, background-color .15s, color .15s;}
.pill-opt:hover span{border-color:var(--accent);}
.pill-opt input:checked + span{border-color:var(--accent); background:var(--accent); color:var(--surface); font-weight:600;}
.pill-opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.reg-pills.invalid .pill-opt span{border-color:var(--attention);}
@media (max-width:520px){.pill-row{grid-template-columns:1fr 1fr;}}

/* About me. */
.reg-form .ff-area{margin-bottom:16px;}
.reg-form .ff-area label{margin-bottom:2px; font-size:14px;}
.reg-q{margin:0 0 8px; font-size:13px; color:var(--text-secondary);}
.reg-form .ff-area textarea{min-height:140px; padding:14px; font-size:16px; line-height:1.5;}
.ff-area.invalid textarea{border-color:var(--attention);}
.reg-count{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:6px; font-size:12px; color:var(--text-muted);}
.reg-count .hint{flex:1; line-height:1.45;}
.reg-count .count{flex:none; font-weight:600; font-variant-numeric:tabular-nums;}
.reg-count .count.ok{color:var(--success);}
.reg-help{margin:6px 0 0; font-size:12px; line-height:1.45; color:var(--text-muted);}

.reg-form .form-error:not(:empty){padding:10px 12px; border-radius:8px; background:var(--attention-soft);}
.reg-form .btn-submit{margin-top:22px; min-height:54px;}
.reg-form .fine-print a, .reg-contact a{color:var(--accent); font-weight:500;}
.reg-contact{margin:18px 0 0; text-align:center; font-size:13px; color:var(--text-muted);}

.reg-success{padding:40px 26px 32px;}
.reg-success .check-anim{width:96px; height:96px;}
.reg-success h1{margin-top:4px;}
.reg-success .lead{margin:10px auto 14px; max-width:400px; font-size:16px; color:var(--text);}
.reg-success p{line-height:1.6;}
.reg-success a{color:var(--accent); font-weight:600;}

@media (max-width:480px){
  .reg-wrap{padding-top:20px;}
  .reg-form{padding:20px 16px 18px;}
}

/* ---- Sign-in page ---- */
.login-callout{margin:0 0 16px; padding:12px 14px; border:1px solid; border-left-width:4px; border-radius:8px; font-size:14px; line-height:1.5;}
.login-callout strong{display:block; margin-bottom:2px;}
.login-callout.amber{border-color:var(--amber, #B7791F); background:var(--amber-soft, #F6E7CF); color:var(--text);}
.login-callout.red{border-color:var(--attention); background:var(--attention-soft); color:var(--text);}
.login-callout a{color:inherit; font-weight:600;}
.login-register{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border); text-align:center; font-size:14px; color:var(--text-secondary);}
.login-register a{color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap;}
.login-register a:hover{text-decoration:underline;}

/* Two separate sign-in pages (login.php?type=staff / ?type=freelancer) */
.login-sub{margin:-12px 0 20px; font-size:14px; color:var(--text-secondary);}
body.login-staff .login-box{border-top:4px solid var(--accent);}
body.login-creator .login-box{border-top:4px solid var(--cta); box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));}
body.login-creator .wordmark{color:var(--text);}