/* verify.css — phone OTP verification page */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #fdfaf7;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 107, 53, 0.04) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 237, 213, 0.12) 0px, transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #3f3128;
}
.top { padding: 18px 20px; max-width: 460px; margin: 0 auto; }
.brand { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 21px; color: #ff6b35; text-decoration: none; letter-spacing: -0.02em; }
.brand span { color: #9CA3AF; font-weight: 600; }

.card {
    max-width: 420px;
    margin: 40px auto 60px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 107, 53, 0.15);
    border-radius: 24px;
    padding: 36px 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(220, 100, 50, 0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.big { font-size: 48px; }
h1 { font-size: 23px; font-weight: 900; margin: 10px 0 6px; letter-spacing: -0.02em; }
.v {
    display: inline-flex; align-items: center; justify-content: center;
    background: #0ea5e9; color: #fff;
    border-radius: 50%; width: 22px; height: 22px;
    font-size: 12px; font-style: normal; font-weight: 900;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.2);
}
.sub { font-size: 14.5px; color: #8A7A6D; margin-bottom: 24px; font-weight: 500; }

label { display: block; text-align: left; font-size: 13.5px; font-weight: 700; margin: 16px 0 6px; }
input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid rgba(255, 107, 53, 0.5); border-radius: 14px;
    font-family: inherit; font-size: 20px; font-weight: 800;
    letter-spacing: 2px; text-align: center;
    background: #fff;
    transition: all 0.2s ease;
}
input:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
input::placeholder {
    color: #efe4da;
    font-weight: 600;
    opacity: 1;   /* Firefox lowers placeholder opacity by default */
}

.btn {
    display: inline-block; margin-top: 18px;
    background: #fff; color: #ff6b35;
    border: 1.5px solid rgba(255, 107, 53, 0.25);
    border-radius: 999px; padding: 11px 26px;
    font-family: inherit; font-size: 15px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s ease;
}
.btn:hover {
    background: #fdf8f5;
    border-color: #ff6b35;
}
.btn.go {
    background: linear-gradient(135deg, #ff8c61, #ff6b35);
    border: none;
    color: #fff;
    width: 100%;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.25);
}
.btn.go:hover:not(:disabled) {
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
}
.btn.go:disabled { opacity: 0.55; cursor: default; box-shadow: none; background: #cbd5e1; }

.sent { font-size: 14.5px; color: #3f3128; font-weight: 500; }
.sent small { color: #9CA3AF; }
.again { margin-top: 16px; font-size: 13.5px; color: #8A7A6D; }
.again a { color: #ff6b35; font-weight: 700; text-decoration: underline; }
.again a:hover { color: #e8501c; }
.done p { font-size: 14.5px; color: #8A7A6D; margin-bottom: 8px; }
.err { margin-top: 16px; font-size: 14px; font-weight: 800; color: #dc2626; }