:root {
  --sidra-green: #39b54a;
  --sidra-green-dark: #258b35;
  --sidra-green-light: #eff9f0;
  --sidra-blue: #006ca8;
  --sidra-blue-dark: #004c78;
  --sidra-blue-light: #eaf8fb;
  --sidra-aqua: #4ec5d4;
  --sidra-aqua-light: #dff7fa;
  --sidra-white: #ffffff;
  --sidra-gray-50: #f8fafb;
  --sidra-gray-100: #f5f7f8;
  --sidra-gray-200: #edf1f3;
  --sidra-gray-300: #dce4e8;
  --sidra-gray-500: #687780;
  --sidra-gray-700: #37454d;
  --sidra-text: #1e2a32;
  --sidra-font-heading: "Montserrat", Arial, sans-serif;
  --sidra-font-body: "Montserrat", Arial, sans-serif;
}

body.woocommerce-account:not(.logged-in),
body.page-template-default:has(.sdrauth-v1--register) {
  background:
    radial-gradient(circle at 15% 20%, rgba(78, 197, 212, .13), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(57, 181, 74, .10), transparent 32%),
    linear-gradient(135deg, #f7fbfc, #eef5ef);
}

.woocommerce-account:not(.logged-in) .site-main,
body:has(.sdrauth-v1--register) .site-main {
  max-width: none;
  padding: 0;
}

.sdrauth-v1 {
  width: min(100% - 32px, 640px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(50px, 7vw, 90px) 0 42px;
  color: var(--sidra-text);
  font-family: var(--sidra-font-body);
}

.sdrauth-v1 * { box-sizing: border-box; }
.sdrauth-v1__brand { margin-bottom: 32px; text-align: center; }
.sdrauth-v1__logo img { width: auto; max-width: 190px; max-height: 82px; }
.sdrauth-v1__tagline { margin: 10px 0 0; color: var(--sidra-gray-500); font-size: .82rem; font-weight: 700; letter-spacing: .2em; }

.sdrauth-v1__card {
  padding: clamp(30px, 6vw, 52px);
  border: 1px solid rgba(0, 108, 168, .08);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 70px rgba(0, 76, 120, .11);
  backdrop-filter: blur(12px);
}

.sdrauth-v1__header { margin-bottom: 30px; }
.sdrauth-v1__header h1 { margin: 0 0 7px; color: var(--sidra-text); font-family: var(--sidra-font-heading); font-size: clamp(1.8rem, 4vw, 2.35rem); font-weight: 700; line-height: 1.15; }
.sdrauth-v1__header p { margin: 0; color: var(--sidra-gray-700); font-size: 1rem; line-height: 1.55; }

.sdrauth-v1__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.sdrauth-v1__tab {
  min-height: 48px;
  border: 2px solid var(--sidra-blue);
  border-radius: 12px;
  background: var(--sidra-white);
  color: var(--sidra-blue-dark);
  font: 700 .95rem/1 var(--sidra-font-body);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.sdrauth-v1__tab:hover { transform: translateY(-1px); }
.sdrauth-v1__tab.is-active { border-color: var(--sidra-green-dark); background: #007d21; color: var(--sidra-white); }
.sdrauth-v1__panel[hidden] { display: none !important; }

.sdrauth-v1__form { margin: 0; }
.sdrauth-v1__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sdrauth-v1__field { margin: 0 0 22px; }
.sdrauth-v1__field label { display: block; margin-bottom: 8px; color: var(--sidra-gray-700); font-size: .9rem; font-weight: 700; }
.sdrauth-v1 input[type="text"],
.sdrauth-v1 input[type="email"],
.sdrauth-v1 input[type="tel"],
.sdrauth-v1 input[type="password"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sidra-gray-100);
  color: var(--sidra-text);
  font: 400 1rem/1.4 var(--sidra-font-body);
  outline: none;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sdrauth-v1 input:focus { border-color: var(--sidra-blue); background: var(--sidra-white); box-shadow: 0 0 0 4px rgba(0,108,168,.12); }

/* The Sidra Phone Auth plugin's own markup (phone number + verification
   code steps) renders nested inside this card. Its CSS sets a visible
   border and reserves 68px of left padding on the phone-number field for
   the "+974" prefix badge — but the broad input[type=...] reset above
   ties with those rules in specificity, and by load order wins, which
   both hid the border (making the fields look empty) and collapsed the
   phone field's padding-left, so "+974" sat on top of the digits typed
   after it. These two rules are deliberately more specific than both
   competing declarations so the fix holds regardless of stylesheet
   load order. */
.sdrauth-v1 .sdw-phone-auth-v1 input[type="tel"],
.sdrauth-v1 .sdw-phone-auth-v1 input[type="text"] {
  border-color: var(--sidra-gray-300, #dce4e8);
  background: var(--sidra-gray-50, #f8fafb);
}
.sdrauth-v1 .sdw-phone-auth-v1__phone-wrap input[type="tel"] {
  padding-left: 68px;
}
.sdrauth-v1 select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sidra-gray-100);
  color: var(--sidra-text);
  font: 400 1rem/1.4 var(--sidra-font-body);
  outline: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sdrauth-v1 select:focus { border-color: var(--sidra-blue); background: var(--sidra-white); box-shadow: 0 0 0 4px rgba(0,108,168,.12); }
.sdrauth-v1__field-note { display: block; margin-top: 6px; font-size: .8rem; color: var(--sidra-gray-700); }
.sdrauth-v1__password-wrap { position: relative; display: block; }
.sdrauth-v1__password-wrap input { padding-right: 72px; }
.sdrauth-v1__password-toggle { position: absolute; top: 50%; right: 12px; min-height: auto; padding: 5px 7px; border: 0; background: transparent; color: var(--sidra-blue-dark); font: 700 .78rem/1 var(--sidra-font-body); transform: translateY(-50%); cursor: pointer; }

.sdrauth-v1__login-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 24px; }
.sdrauth-v1__login-options a, .sdrauth-v1__switch a { color: var(--sidra-blue); font-weight: 700; }
.sdrauth-v1__check { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--sidra-gray-700); font-size: .9rem; line-height: 1.45; cursor: pointer; }
.sdrauth-v1__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sidra-green-dark); }

.sdrauth-v1__submit,
.sdrauth-v1 .woocommerce-button.button.sdrauth-v1__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 14px 24px;
  border: 1px solid #007d21;
  border-radius: 11px;
  background: #007d21;
  color: var(--sidra-white);
  font: 700 1rem/1.2 var(--sidra-font-body);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,125,33,.18);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.sdrauth-v1__submit:hover,
.sdrauth-v1 .woocommerce-button.button.sdrauth-v1__submit:hover { background: var(--sidra-green-dark); color: var(--sidra-white); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,125,33,.24); }

.sdrauth-v1__switch { margin: 30px 0 0; color: var(--sidra-gray-700); text-align: center; }
.sdrauth-v1__phone-placeholder { padding: 24px; border-radius: 12px; background: var(--sidra-blue-light); color: var(--sidra-gray-700); text-align: center; }
.sdrauth-v1__phone-placeholder p { margin: 0; }

.sdrauth-v1 .woocommerce-error,
.sdrauth-v1 .woocommerce-message,
.sdrauth-v1 .woocommerce-info,
.woocommerce-account:not(.logged-in) > .woocommerce > .woocommerce-error,
.woocommerce-account:not(.logged-in) > .woocommerce > .woocommerce-message {
  width: min(100% - 32px, 640px);
  margin: 20px auto;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .sdrauth-v1 { width: min(100% - 24px, 560px); padding-top: 34px; }
  .sdrauth-v1__card { padding: 28px 22px; }
  .sdrauth-v1__grid { grid-template-columns: 1fr; gap: 0; }
  .sdrauth-v1__login-options { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .sdrauth-v1__tabs { grid-template-columns: 1fr; }
  .sdrauth-v1__card { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sdrauth-v1 *, .sdrauth-v1 *::before, .sdrauth-v1 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}