/* ==========================================================================
   Cosmic Byte OTP — frontend styling
   --------------------------------------------------------------------------
   This stylesheet is intentionally restrained. It does NOT impose colors,
   fonts, or button styles — those should inherit from your Porto theme.
   We only add structural rules: spacing, layout, and a few state classes
   for OTP-specific UI (verified ✓, disabled, etc.).

   The plugin's HTML uses WooCommerce-standard classes (.form-row,
   .input-text, .button, .woocommerce-message, .woocommerce-error) so
   Porto's existing WC styles cascade through naturally.
   ========================================================================== */

/* Outer wrapper around the OTP block. Sits between form fields. */
.cbotp-wrapper {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.05);   /* near-invisible, follows page bg */
}

/* Heading inside the wrapper */
.cbotp-wrapper .cbotp-title {
    margin: 0 0 0.6em 0;
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.4;
    color: inherit;
}

/* Sub-row layout — keeps button and status inline */
.cbotp-wrapper .cbotp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65em;
    margin: 0 0 0.4em 0;
}
.cbotp-wrapper .cbotp-row:last-child { margin-bottom: 0; }

/* Status text (Sent / Verified / Error) */
.cbotp-wrapper .cbotp-status {
    font-size: 0.9em;
    line-height: 1.4;
}
.cbotp-wrapper .cbotp-status.is-success { color: #18794e; font-weight: 500; }
.cbotp-wrapper .cbotp-status.is-error   { color: #cd2b31; font-weight: 500; }
.cbotp-wrapper .cbotp-status.is-info    { color: inherit; opacity: 0.75; }

/* OTP input — uses WC's .input-text class so theme styling applies,
   we just constrain width + spacing for the 6-digit code */
.cbotp-wrapper .cbotp-otp-input {
    width: 10em;
    max-width: 100%;
    letter-spacing: 0.35em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.05em;
    text-transform: uppercase;
}

/* Resend timer countdown */
.cbotp-wrapper .cbotp-resend {
    font-size: 0.85em;
    opacity: 0.75;
    margin-left: 0.25em;
}
.cbotp-wrapper .cbotp-resend-link {
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
.cbotp-wrapper .cbotp-resend-link[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
}

/* Verified pill — small visual confirmation after success */
.cbotp-wrapper .cbotp-verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background: rgba(24, 121, 78, 0.12);
    color: #18794e;
    font-size: 0.85em;
    font-weight: 600;
}
.cbotp-wrapper .cbotp-verified-pill::before {
    content: "✓";
    font-weight: 700;
}

/* When OTP is verified, dim Send/Verify/input so user knows the row is locked */
.cbotp-wrapper.is-verified .cbotp-send-btn,
.cbotp-wrapper.is-verified .cbotp-verify-btn,
.cbotp-wrapper.is-verified .cbotp-otp-input {
    opacity: 0.6;
    pointer-events: none;
}

/* v0.11.6: hide the Resend button + countdown entirely once verified.
   No reason to invite a re-send after success — and the cooldown
   countdown ticking next to a "Verified" pill is confusing. */
.cbotp-wrapper.is-verified .cbotp-resend-link,
.cbotp-wrapper.is-verified .cbotp-resend {
    display: none !important;
}

/* Hide the OTP entry row until "Send OTP" is clicked */
.cbotp-wrapper .cbotp-otp-row { display: none; }
.cbotp-wrapper.has-sent .cbotp-otp-row { display: flex; }

/* Channel selector (if you let user pick WhatsApp/SMS/Email) */
.cbotp-channel-select {
    display: inline-flex;
    gap: 0.4em;
    margin: 0 0 0.6em 0;
}
.cbotp-channel-select label {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em 0.7em;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    user-select: none;
}
.cbotp-channel-select input[type="radio"]:checked + span {
    font-weight: 600;
}
.cbotp-channel-select label:has(input:checked) {
    border-color: currentColor;
    background: rgba(127, 127, 127, 0.08);
}

/* Mobile tweaks — stack on narrow screens */
@media (max-width: 480px) {
    .cbotp-wrapper { padding: 0.85em 1em; }
    .cbotp-wrapper .cbotp-row { gap: 0.5em; }
    .cbotp-wrapper .cbotp-otp-input { width: 100%; }
    .cbotp-wrapper .cbotp-send-btn,
    .cbotp-wrapper .cbotp-verify-btn { width: 100%; }
}

/* Dark mode — when the page has a dark background, the background tint
   we use needs to lift instead of darken. The rgba() values above already
   adapt, but tighten contrast for prefers-color-scheme: dark. */
@media (prefers-color-scheme: dark) {
    .cbotp-wrapper {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.15);
    }
    .cbotp-wrapper .cbotp-status.is-success { color: #5ec88a; }
    .cbotp-wrapper .cbotp-status.is-error   { color: #ff6b6b; }
    .cbotp-wrapper .cbotp-verified-pill {
        background: rgba(94, 200, 138, 0.15);
        color: #5ec88a;
    }
}

/* Compatibility: Porto often uses .form-row for inputs. Make sure our
   inline buttons don't break that layout on the my-account page. */
.woocommerce form .form-row .cbotp-wrapper { width: 100%; }

/* v0.11.10: phone input with locked country-code prefix.
   Renders a fixed "+91" pill next to the input. The input itself takes
   just the 10-digit national number. Visually a single field. */
.cbotp-phone-input-group {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
.cbotp-phone-input-group .cbotp-phone-cc {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 3px 0 0 3px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    user-select: none;
    flex: 0 0 auto;
}
.cbotp-phone-input-group .cbotp-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 3px 3px 0 !important;
}

/* v0.11.10: email typo suggestion hint shown under email inputs. */
.cbotp-email-suggest {
    margin-top: 4px;
    font-size: 13px;
    color: #555;
    display: none;
}
.cbotp-email-suggest a.cbotp-accept-suggest {
    color: #0073aa;
    font-weight: 600;
    text-decoration: underline;
}
.cbotp-email-suggest a.cbotp-accept-suggest:hover {
    color: #00a0d2;
}