/* Not something this plugin added — .alignwide is the active theme's own
   "wide alignment" support class (Gutenberg/theme block support), applying
   a negative margin-inline to pull whatever it's on 80px past its
   container on each side. Wherever it's landing on the checkout page, on a
   phone-width screen that's enough on its own to push content past the
   viewport and force the whole page into horizontal scroll — which is
   what was cutting text off on both edges. This stylesheet only loads on
   the checkout page, so neutralizing it here is safe; it won't affect
   wide-aligned images/blocks anywhere else on the site. */
.alignwide {
  margin-inline: 0 !important;
}
.woocommerce-checkout form .form-row .input-text, .select2-container .select2-selection--single .select2-selection__rendered, .woocommerce form .form-row select{
  color: #4d4d4d !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: 0 !important;
    padding: 10px 14px;
    box-shadow: 0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10), 0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);
}

/* Coupon form — shown directly, no "Click here to enter your code"
   toggle (matching the reference design). */
.checkout_coupon.woocommerce-form-coupon {
  display: flex !important;
  flex-wrap: nowrap !important;
   border: none !important;
  padding: 0 !important;
}
.checkout_coupon.woocommerce-form-coupon .form-row {
  /* Flex children ignore percentage widths and refuse to shrink below
     their content's natural size by default (min-width:auto) — that's
     what made the coupon input + "Apply coupon" button together wider
     than a phone screen and forced the whole page to scroll sideways.
     min-width:0 lets them actually shrink/wrap on narrow screens. */
  min-width: 0;

}


.woocommerce-form-coupon-toggle {
  display: none !important;
}

.checkout_coupon.woocommerce-form-coupon .form-row-first{
  width: 100%;
}
/* .form-row.form-row-last{
background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%)) !important;
} */
/* Coupon input specifically gets a fuller pill shape (100px) than the
   generic 14px on other fields — matches the reference, where the coupon
   input and its "Apply" button share the exact same roundness. */
.woocommerce-checkout input#coupon_code {
  line-height: 22px !important;
  border-radius: 100px !important;
}

/* Placeholder text color — reference uses a lighter grey than the
   filled-in text color for both the coupon field and the email field. */
#coupon_code::placeholder {
  color: #7b7b7b !important;
  opacity: 1;
}
body.woocommerce-checkout #billing_email::placeholder {
  color: #7b7b7b !important;
}

/* Select2 dropdowns (if any select field appears on checkout) — matches
   the reference's transparent, borderless dropdown styling so it's
   visually consistent with the plain text inputs above. */
.select2-container .select2-dropdown,
.select2-container .select2-selection {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0px !important;
}
.select2-results {
  background: #fff !important;
}

.itr-cw-refund-policy-row td {
  border-top: none;
  padding-top: 8px;
  font-size: 14px;
  text-align: right;
}
.itr-cw-refund-policy-link {
  color: #000;
  text-decoration: underline;
}
.itr-cw-refund-policy-link:hover {
  text-decoration: none;
}

.woocommerce-billing-fields > h3 {
  position: relative;
  font-size: 0;
}
body:not(.itr-cw-verified) .woocommerce-billing-fields > h3::before {
  content: "1. Log in or Create an Account";
  font-size: 22px;
  font-weight: 700;
}
body.itr-cw-verified .woocommerce-billing-fields > h3 {
  font-size: 22px;
  font-weight: 700;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 24px;
}
body.itr-cw-verified .woocommerce-billing-fields > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #e5e7eb;
}
.itr-cw-email {
  font-size: 16px;
  color: #555;
  font-weight: 500;
  margin-left: 6px;
}
.itr-cw-check {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: #16a34a;
  font-weight: bold;
}

/* Defensive field hiding stays !important — this one isn't about theme
   styling conflicts, it's specifically to survive WooCommerce's own
   update_checkout AJAX re-render silently undoing plain JS .hide() calls
   (the same issue WiseCompass's own CSS guards against). */
#billing_full_name_field,
#billing_phone_field,
#billing_password_field {
  display: none !important;
}
body.itr-cw-mode-register #billing_full_name_field,
body.itr-cw-mode-register #billing_phone_field,
body.itr-cw-mode-register #billing_password_field {
  display: block !important;
}
body.itr-cw-locked #billing_whatsapp_optin_field {
  display: none !important;
}

/* ── Payment section: always visible, locked = disabled + dimmed ──────────
   Matches the reference design exactly — #payment is never display:none.
   It's visible from page load and simply disabled/dimmed via the
   .itr-cw-locked class (toggled in JS) until the account step finishes,
   then enabled in place. This also means logged-in visitors (who skip
   straight to the unlocked state) see the exact same markup/styling as a
   verified guest — no more separate, unstyled layout for that state. */
#itr-cw-payment-wrapper {
  position: relative;
  transition: opacity 0.2s ease;
}
#itr-cw-payment-wrapper.itr-cw-locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(40%);
}
.itr-cw-payment-heading {
  font-size: 22px;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.itr-cw-lock-icon {
  font-size: 16px;
  opacity: 0.6;
}
body.itr-cw-verified .itr-cw-lock-icon {
  display: none;
}

#itr-cw-auth-box {
  margin-top: 25px;
}
#itr-cw-otp-wrap input {
  height: 46px;
  width: 100%;
  max-width: 300px;
  margin-bottom: 12px;
  color: #4d4d4d;
  border-radius: 14px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: bold;
  border: 0;
  padding: 10px 14px;
  box-shadow: 0 1.06px 2.13px -1.06px rgba(0,0,0,0.10), 0 1.06px 3.19px 0 rgba(0,0,0,0.10);
  box-sizing: border-box;
}
.itr-cw-btn {
  width: 100%;
  height: 48px;
  /* Uses the theme's own Elementor global colour where available (same
     variable the rest of the site's checkout buttons use), falling back
     to our existing blue gradient if that variable isn't defined on a
     given page — matches the reference checkout's button styling
     without hardcoding a colour that could drift from the live theme. */
  background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%));
  color: #ffffff !important;
  font-weight: 600;
  font-size: 18px;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 4.25px 6.38px -4.25px rgba(0,0,0,0.10), 0px 10.64px 15.96px -3.19px rgba(0,0,0,0.10);
}
.itr-cw-btn:hover,
.itr-cw-btn:focus {
  background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%)) !important;
  color: #ffffff;
  box-shadow: 0px 6px 10px -3px rgba(0,0,0,0.15), 0px 14px 22px -2px rgba(0,0,0,0.15);
}

/* Place Order button + coupon "Apply" button — matched to the reference
   checkout's pill-shaped, brand-colour styling. Purely visual; doesn't
   touch order placement or coupon logic. */
#place_order {
  width: 100%;
  height: 48px;
  background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%));
  color: #ffffff;
  font-weight: 600;
  border: 0;
  border-radius: 100px;
  box-shadow: 0px 4.25px 6.38px -4.25px rgba(0,0,0,0.10), 0px 10.64px 15.96px -3.19px rgba(0,0,0,0.10);
}
.checkout_coupon button.button,
.checkout_coupon input[type="submit"] {
  width: 100%;
  background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%));
  color: #ffffff;
  font-weight: 600;
  line-height: 22px;
  border: 0;
  border-radius: 100px;
  box-shadow: 0px 4.25px 6.38px -4.25px rgba(0,0,0,0.10), 0px 10.64px 15.96px -3.19px rgba(0,0,0,0.10);
}
.checkout_coupon button.button:hover,
.checkout_coupon input[type="submit"]:hover {
  background: var(--e-global-color-primary, linear-gradient(180deg, #1F79FF 0%, #0061F1 100%));
  color: #ffffff;
}

/* Spinner on the Place Order button while the order is processing —
   matches the reference checkout's UX touch. Toggled by plain WooCommerce
   core events (checkout_place_order / checkout_error) in the JS, so it
   doesn't interact with our own auth-flow logic at all. */
#place_order.processing {
  position: relative;
  opacity: 0.85;
}
#place_order.processing::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: itr-cw-spin 0.6s linear infinite;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes itr-cw-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
.itr-cw-btn + .itr-cw-btn {
  margin-top: 12px;
}
.itr-cw-btn:disabled {
  pointer-events: none;
  opacity: 0.85;
}
#itr-cw-resend-otp {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #35BABA;
  cursor: pointer;
}
#itr-cw-resend-otp.itr-cw-disabled {
  pointer-events: none;
  color: black;
  cursor: not-allowed;
  text-decoration: none !important;
}
#itr-cw-auth-error {
  color: red;
  margin-top: 10px;
}
.itr-cw-desc {
  margin-top: -5px;
  margin-bottom: 20px;
  color: #555;
  font-size: 14px;
}
.itr-cw-banner {
  color: #555;
  margin-bottom: 10px;
  font-size: 16px;
  width: 100%;
  max-width: 550px;
}
.itr-cw-banner a {
  margin-left: 8px;
  color: #35BABA;
}
body.logged-in #billing_email {
  background: #eef2ff;
  color: #333;
  cursor: not-allowed;
}



/* ══════════════════════════════════════════════════════════════════════
   MEDIA QUERIES — grouped at the end of the file, original content and
   relative order unchanged, nothing added or removed.
   ══════════════════════════════════════════════════════════════════════ */

/* Two-column layout — billing/account/payment on the left, order review
   on the right — matching the reference design. This is the same
   float-based layout WiseCompass uses; pure CSS, no DOM relocation risk. */
@media (min-width: 1025px) {
  .woocommerce .col2-set .col-1,
  .woocommerce-page .col2-set .col-1 {
    width: 90%;
  }
  #customer_details {
    display: flex;
    flex-flow: column nowrap;
    float: left;
    width: 50%;
    /* box-sizing keeps the column at exactly 50% while this padding
       creates a real gap against #order_review, instead of the two
       floated columns touching edge-to-edge with nothing between them. */
    box-sizing: border-box;
    padding-right: 24px;
  }
  #customer_details .col-2 {
    width: 90%;
    margin-top: 20px;
  }
  #order_review,
  #order_review_heading {
    width: 50%;
    float: left;
    clear: none;
    box-sizing: border-box;
    padding-left: 24px;
  }
}

/* Mobile: order review on top, account/payment details below — matching
   the reference design's mobile stacking order. */
@media (max-width: 767px) {
  form.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
  }
  #order_review_heading,
  #order_review {
    order: 1 !important;
    width: 100% !important;
  }
  #customer_details {
    order: 2 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Safety net: if anything on this page (the coupon row below, an
     Elementor widget, etc.) ends up wider than the screen, this stops it
     from dragging the WHOLE page into horizontal scroll — which is what
     was cutting off text on the left edge of every section, not just the
     coupon row itself. */
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  /* On very narrow phones, stack the coupon input above the button
     instead of squeezing both into one row. */
  .checkout_coupon.woocommerce-form-coupon .form-row-first,
  .checkout_coupon.woocommerce-form-coupon .form-row-last {
    width: 100% !important;
    float: none !important;
  }
}