/* Login / OTP pop-up — one authoritative look (loaded last by master.blade.php).
   Same language as the checkout: white card, 16px corners, 48px fields, dark action button, teal links.
   Selectors are chained under .login-popup-overlay so they out-rank the older rules in style.css,
   mobile.css and product-details.css without needing !important (except where noted). */
.login-popup-overlay { background: rgba(20, 24, 26, .55); padding: 16px; box-sizing: border-box; }

.login-popup-overlay .login-popup-cover {
  position: static; transform: none; width: 100%; max-width: 400px; margin: 0 auto;
}

.login-popup-overlay .login-popup-cover .contents {
  display: block; width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px;
  padding: 28px 24px 24px; text-align: left; position: relative;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
}

.login-popup-overlay .popup-message { margin: 0 0 18px; padding-right: 36px; }
.login-popup-overlay .popup-message p {
  font-size: 22px !important; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0; color: #1d1d1f;
}
.login-popup-overlay .popup-message p span.popup-company { color: #005c67; }
.login-popup-overlay .popup-message svg { width: 56px; height: 56px; display: block; margin: 0 0 4px; }

.login-popup-overlay .input-number { margin: 0; }
.login-popup-overlay .input-number input {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px; margin: 0;
  border: 1px solid #d2d2d7; border-radius: 10px; font-size: 15px; color: #1d1d1f; background: #fff;
}
.login-popup-overlay .input-number input::placeholder { color: #86868b; font-size: 15px; }
.login-popup-overlay .input-number input:focus { outline: 2px solid #005c67; outline-offset: 1px; border-color: #005c67; }

.login-popup-overlay .input-field-content { margin: 12px 0 0; }
.login-popup-overlay .input-field-content p,
.login-popup-overlay .input-field-content .txt-left {
  font-size: 12.5px; line-height: 1.5; color: #6e6e73; margin: 0; text-align: left;
}
.login-popup-overlay .input-field-content h3 { font-size: 20px; font-weight: 600; margin: 6px 0 2px; color: #1d1d1f; }
.login-popup-overlay .orange-content,
.login-popup-overlay .orange-content a { color: #005c67; font-weight: 600; text-decoration: underline; }
.login-popup-overlay .timer-text { margin-top: 6px !important; }

.login-popup-overlay .otp-input { display: flex; justify-content: flex-start; gap: 8px; margin: 0; }
.login-popup-overlay .otp-input input {
  width: 100%; max-width: 48px; height: 48px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid #d2d2d7; border-radius: 10px; font-size: 20px; font-weight: 600; text-align: center; color: #1d1d1f;
}
.login-popup-overlay .otp-input input:focus { border-color: #005c67; box-shadow: none; outline: 2px solid #005c67; outline-offset: 1px; }

.login-popup-overlay span.otp-button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 16px;
  box-sizing: border-box; padding: 0; background: #1d1d1f; color: #fff; text-transform: none;
  letter-spacing: 0; transition: background .2s;
}
.login-popup-overlay span.otp-button:hover { background: #000; }
.login-popup-overlay span.otp-button.disabled { background: #1d1d1f; opacity: .35; cursor: not-allowed; pointer-events: none; }
.login-popup-overlay span.otp-button.logout { background: #1d1d1f; }

.login-popup-overlay .close {
  position: absolute; top: 14px; right: 14px; left: auto; transform: none; width: 32px; height: 32px;
  border-radius: 50%; background: #f5f5f7; color: #1d1d1f; padding: 0; display: grid; place-items: center;
  font-size: 18px; cursor: pointer; transition: background .2s;
}
.login-popup-overlay .close:hover { background: #e8e8ed; }

.login-popup-overlay #error-msg, .login-popup-overlay #otp-error-msg { display: block; margin-top: 8px; font-size: 12.5px; color: #d92d20 !important; }
.login-popup-overlay .resend-otp, .login-popup-overlay #resend-otp { color: #005c67 !important; font-weight: 600; text-decoration: underline; font-size: 13px; }

/* Email box (membership sign-in only) sits under the number field */
.login-popup-overlay .login-email-wrap { margin-top: 10px; }
.login-popup-overlay .login-email-wrap[hidden] { display: none; }