:root { --f2s-color: #2271b1; }

.f2s-otp-wrap {
    max-width: 420px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* Tabs */
.f2s-tabs { display:flex; border-bottom:2px solid #ddd; margin-bottom:20px; }
.f2s-tab {
    flex:1; background:none; border:none; padding:10px 0;
    font-size:15px; font-weight:600; color:#777; cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    transition: color .2s, border-color .2s;
}
.f2s-tab.active { color:var(--f2s-color); border-bottom-color:var(--f2s-color); }
.f2s-tab:hover {
  color: #fff !important;
  background-color: #2271b1;
  border-radius: 5px;
}

/* Fields */
.f2s-field { margin-bottom:16px; }
.f2s-field label { display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:5px; }
.f2s-field input[type="text"],
.f2s-field input[type="tel"],
.f2s-field input[type="email"] {
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px;
    font-size:15px; box-sizing:border-box; outline:none; transition:border-color .2s;
}
.f2s-field input:focus { border-color:var(--f2s-color); box-shadow:0 0 0 2px rgba(34,113,177,.15); }

/* Phone row */
.f2s-phone-row { display:flex; border:1px solid #ddd; border-radius:6px; overflow:hidden; transition:border-color .2s; }
.f2s-phone-row:focus-within { border-color:var(--f2s-color); box-shadow:0 0 0 2px rgba(34,113,177,.15); }
.f2s-cc { padding:10px 12px; background:#f5f5f5; border-right:1px solid #ddd; font-size:14px; font-weight:600; color:#555; }
.f2s-phone-row input { border:none !important; box-shadow:none !important; border-radius:0 !important; flex:1; padding:10px 12px; font-size:15px; outline:none; }

/* OTP input */
.f2s-otp { font-size:22px !important; letter-spacing:6px; text-align:center; font-weight:700; }

/* Button */
.f2s-btn {
    width:100%; padding:12px; background:var(--f2s-color); color:#fff;
    border:none; border-radius:6px; font-size:15px; font-weight:600;
    cursor:pointer; transition:opacity .2s; margin-bottom:4px;
}
.f2s-btn:hover   { opacity:.9; }
.f2s-btn:disabled { opacity:.5; cursor:not-allowed; }

/* OTP box */
.f2s-otp-box { margin-top:14px; animation:f2s-in .2s ease; }
@keyframes f2s-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* Timer */
.f2s-timer { text-align:right; margin-top:6px; font-size:13px; color:#777; }
.f2s-resend { color:var(--f2s-color); font-weight:600; text-decoration:none; }

/* Messages */
.f2s-msg { margin-top:12px; padding:10px 14px; border-radius:6px; font-size:14px; display:none; }
.f2s-msg.success { background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; display:block; }
.f2s-msg.error   { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; display:block; }
.f2s-msg.info    { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; display:block; }

/* WooCommerce */
.f2s-wc-otp-wrap .f2s-otp-wrap { border:none; box-shadow:none; padding:0; max-width:100%; }
.f2s-otp-divider { text-align:center; margin:24px 0 8px; position:relative; }
.f2s-otp-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#ddd; }
.f2s-otp-divider span { position:relative; background:#fff; padding:0 12px; color:#999; font-size:13px; }

@media(max-width:480px) { .f2s-otp-wrap { padding:20px 16px; } }