/* =========================================================================================
   Guest checkout (Guest Checkout blueprint, Phase 4-7).

   This file existed on the served static tree but was never linked from any JSP, so NONE of it
   applied: the six OTP boxes rendered as full-width stacked inputs. It is now linked from
   plugin.jsp and kept in the repo as well as on disk.

   The OTP and membership steps deliberately reuse the LOGIN panel's visual language
   (.form-title / .login___number / .otp-box / .dont_get / .resend_code / .signup-btn from
   demo.css + style-ganesh.css) so guest checkout and sign-in look like the same product.

   The one thing NOT reused is the .otp-input class itself: login.js collects $(".otp-input")
   page-wide when verifying the login OTP, and the login panel is present in the DOM on this
   page too. The guest boxes therefore keep .guest-otp-input and copy the look here.
   ========================================================================================= */

.guest-identity-box { padding: 8px 0; }
.guest-identity-help { font-size: 13px; color: #666; margin-bottom: 14px; }
.guest-identity-msg { font-size: 13px; margin: 8px 0; min-height: 18px; color: #444; }
.guest-identity-msg.is-error { color: #c0392b; }

.guest-otp-section,
.guest-membership-section { margin-top: 6px; }

/* The login panel is a narrow offcanvas; this card is ~745px wide, so the shared
   justify-content-between would fling the six boxes to the edges. Centre them and let the gap
   do the spacing, which reproduces the reference grouping at any card width. */
.guest-otp-section,
.guest-membership-section { max-width: 480px; margin-left: auto; margin-right: auto; }

/* Six square boxes on one row — mirrors .otp-input in demo.css (58x69, centred, gold border). */
.guest-otp-digits { gap: 15px; margin-bottom: 10px; justify-content: center !important; }
.guest-otp-digits .guest-otp-input {
    width: 58px;
    height: 69px;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 0;
    border: 1px solid #B08A4A;
    border-radius: 6px;
    outline: none;
}
.guest-otp-digits .guest-otp-input:focus {
    border-color: #5B1F2A;
    box-shadow: none;
}

/* "Didn't get it? RESEND CODE" — matches the login panel's resend row. */
#guestResendOtpBtn { cursor: pointer; }
#guestResendOtpBtn.is-disabled { pointer-events: none; opacity: .5; }

.login-otp-change-number .w-number { color: #211D1A; }
.login-otp-change-number .change-link { color: #5B1F2A; }

/* Delivery address form: same rhythm as the page's own "add new address" form. */
#deliveryAddressFields label { display: block; margin-bottom: 4px; }
#deliveryAddressFields input[readonly] { background: #f4f2ef; cursor: default; }
#deliveryAddressFields .form-select-phone-code { max-width: 90px; }

@media (max-width: 600px) {
    .guest-otp-digits { gap: 8px; }
    .guest-otp-digits .guest-otp-input { width: 44px; height: 52px; font-size: 18px; }
}