/*
 * Verification Kit styles. Change the colours here to match the website.
 * Your own input styles stay as they are; this only adds the extra parts.
 */
:root {
    --vk-accent: #EA3F78;      /* buttons hover, code box border (XoomMD pink) */
    --vk-dark: #031731;        /* buttons (XoomMD navy) */
    --vk-ok: #188A4E;          /* verified */
    --vk-error: #D93025;       /* errors */
    --vk-muted: #6B6B70;
    --vk-radius: 10px;
}

/* email + "Send Code" */
.vk-email { position: relative; }
.vk-email input { width: 100%; padding-right: 112px !important; box-sizing: border-box; }
.vk-email.vk-open:not(.vk-verified) input { padding-right: 14px !important; }
.vk-send, .vk-badge {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    height: calc(100% - 12px); min-height: 30px;
    padding: 0 14px; border-radius: calc(var(--vk-radius) - 2px);
    font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.vk-send { border: 0; background: var(--vk-dark); color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.vk-send:hover { background: var(--vk-accent); color: #fff; }
.vk-send:disabled { opacity: .6; cursor: wait; }
.vk-badge { display: none; background: #E7F6EE; color: var(--vk-ok); pointer-events: none; }
.vk-email.vk-verified .vk-badge { display: inline-flex; }
.vk-email.vk-verified .vk-send, .vk-email.vk-open .vk-send { display: none; }
.vk-email.vk-verified input { border-color: #2DB36F !important; }

/* code box */
.vk-box {
    margin: 10px 0 16px; padding: 16px 18px;
    border: 1.5px dashed var(--vk-accent); border-radius: calc(var(--vk-radius) + 4px);
    background: #FFF7FA;
    animation: vkIn .3s ease;
}
.vk-box[hidden] { display: none; }
@keyframes vkIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vk-box-head strong { display: block; font-size: 15px; }
.vk-box-head p { margin: 2px 0 12px; font-size: 13px; color: var(--vk-muted); line-height: 1.5; word-break: break-word; }
.vk-timer { color: #E8501F; font-variant-numeric: tabular-nums; }
.vk-timer.expired { color: var(--vk-error); }
.vk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.vk-code {
    width: 100%; box-sizing: border-box;
    text-align: center; font: inherit; font-size: 22px; font-weight: 700; letter-spacing: 10px;
    padding: 10px 12px 10px 22px; border: 1.5px solid #E2DED5; border-radius: var(--vk-radius); background: #fff; outline: none;
}
.vk-code:focus { border-color: var(--vk-accent); box-shadow: 0 0 0 3px rgba(234, 63, 120, .15); }
.vk-verify {
    border: 0; border-radius: var(--vk-radius); padding: 0 22px;
    background: var(--vk-dark); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .2s, color .2s;
}
.vk-verify:hover { background: var(--vk-accent); color: #fff; }
.vk-verify:disabled { opacity: .55; cursor: not-allowed; background: var(--vk-dark); color: #fff; }
.vk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.vk-msg { font-size: 12.5px; color: var(--vk-muted); }
.vk-msg.error { color: var(--vk-error); }
.vk-msg.ok { color: var(--vk-ok); }
.vk-resend { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #E8501F; cursor: pointer; text-decoration: underline; }
.vk-resend:disabled { color: var(--vk-muted); cursor: default; text-decoration: none; }

/* phone: country + number */
.vk-phone { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.vk-phone input, .vk-phone select { width: 100%; box-sizing: border-box; }
.vk-country { cursor: pointer; font-weight: 600; }
.vk-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--vk-muted); }

/* errors */
.vk-error { display: none; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--vk-error); }
.vk-error.show { display: block; }
.vk-invalid input, .vk-invalid select { border-color: var(--vk-error) !important; }

@media (max-width: 480px) {
    .vk-row { grid-template-columns: 1fr; }
    .vk-verify { padding: 12px 22px; }
}

/* ---------- XoomMD footer newsletter (dark background, pill-shaped bar) ---------- */
.footer-newsletter-form .vk-email { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.footer-newsletter-form .vk-email input { padding-right: 0 !important; }
.footer-newsletter-form .vk-send,
.footer-newsletter-form .vk-badge {
    position: static; transform: none; height: auto; min-height: 0;
    padding: 8px 14px; border-radius: 9999px; margin-right: 8px; flex-shrink: 0;
}
.footer-newsletter-form .vk-send { background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.footer-newsletter-form .vk-send:hover { background: var(--vk-accent); border-color: var(--vk-accent); color: #fff; }
.footer-newsletter-form .vk-badge { background: rgba(45, 179, 111, .18); color: #6EE7A8; }
.footer-newsletter-form .vk-error { margin: -4px 0 12px; text-align: center; color: #FF9B9B; }
.footer-newsletter-form .vk-box { margin: 0 0 14px; text-align: left; color: #1F2937; }
@media (max-width: 768px) {
    .footer-newsletter-form .vk-email { width: 100%; flex-direction: column; }
    .footer-newsletter-form .vk-send,
    .footer-newsletter-form .vk-badge { margin-right: 0; }
}