/* Custom Styles for Herba Sparsh Login & Registration */

/* Grid and form row formatting for new fields */
.woocommerce-form-register .form-row-first {
  width: 48%;
  float: left;
  margin-right: 4%;
}

.woocommerce-form-register .form-row-last {
  width: 48%;
  float: left;
  margin-right: 0;
}

.woocommerce-form-register .clear {
  clear: both;
}

/* Beautiful Social Login Divider */
.hs-social-login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 25px 0 15px 0;
  color: var(--color-foreground-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.hs-social-login-divider::before,
.hs-social-login-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}

.hs-social-login-divider:not(:empty)::before {
  margin-right: 1em;
}

.hs-social-login-divider:not(:empty)::after {
  margin-left: 1em;
}

/* Nextend Social Login Container styling */
.hs-social-login-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

/* Enhancing the Nextend Google Login Button appearance & interaction */
.hs-social-login-container .nsl-container {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-social-login-container .nsl-container-grid {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.hs-social-login-container .nsl-container-grid a {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  transition:
    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--color-border) !important;
}

/* Adding a premium hover micro-interaction */
.hs-social-login-container .nsl-container-grid a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--color-border-hover) !important;
}

.hs-social-login-container .nsl-container-grid a:active {
  transform: translateY(0px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Responsive adjustment for forms on tablets & mobile screens */
@media screen and (max-width: 768px) {
  .woocommerce-form-register .form-row-first,
  .woocommerce-form-register .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* =========================================================================
   6. LIVE INLINE VALIDATION & INTL-TEL-INPUT STYLES
   ========================================================================= */

/* Make intl-tel-input container full width */
.woocommerce-form-register .iti {
  width: 100%;
  display: block;
}

.woocommerce-form-register .iti__country-list {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  z-index: 99 !important;
}

/* Live validation message formatting */
.cfc-validation-msg {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.cfc-validation-msg.valid {
  color: var(--color-success);
}

.cfc-validation-msg.invalid {
  color: var(--color-destructive);
}

/* Highlight inputs when valid or invalid */
.woocommerce-form-register input.input-invalid {
  border-color: var(--color-destructive) !important;
  background-color: var(--color-destructive-bg) !important;
}

.woocommerce-form-register input.input-valid {
  border-color: var(--color-accent) !important;
  background-color: var(--color-success-bg) !important;
}

/* Fix flag alignment and full width phone input */
.woocommerce-form-register .iti,
.woocommerce-account .iti {
  width: 100% !important;
  display: block !important;
}

.woocommerce-form-register .iti input[type="tel"],
.woocommerce-account .iti input[type="tel"],
#reg_billing_phone {
  width: 100% !important;
  height: 44px !important;
  padding-left: 90px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  background: var(--color-surface) !important;
}

.woocommerce-form-register .iti__flag-container,
.woocommerce-account .iti__flag-container {
  z-index: 5 !important;
}

/* =========================================================================
   7. DUAL CHECKOUT BUTTONS LAYOUT (ADD TO CART, BUY NOW, WISHLIST)
   ========================================================================= */

/* Use flexbox to align buttons and inputs side-by-side on single product pages */
.woocommerce div.product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Standardize elements heights to look premium */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .cfc-buy-now-button {
  margin: 0 !important;
  float: none !important;
  height: 44px !important;
  line-height: 44px !important;
  box-sizing: border-box !important;
}

/* Format custom Buy Now button */
.woocommerce div.product form.cart .cfc-buy-now-button {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 24px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.woocommerce div.product form.cart .cfc-buy-now-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
}

.woocommerce div.product form.cart .cfc-buy-now-button:active {
  transform: translateY(0px) !important;
}

/* Standard wishlist alignments (YITH & TI Wishlist integration) */
.woocommerce div.product form.cart .yith-wcwl-add-to-wishlist,
.woocommerce div.product form.cart .tinv-wraper {
  margin: 0 !important;
  display: inline-block !important;
}

/* =========================================================================
   8. TABBED MY ACCOUNT UI
   ========================================================================= */
/* Moved to the theme's woocommerce.css so there is a single, token-driven
   implementation instead of two independently hardcoded copies that had
   drifted out of sync (480px vs 520px card width, 32px vs 48px padding,
   #e74c3c vs the shared --color-destructive red). See design-system/AUDIT_AND_PLAN.md. */

/* Hide duplicate phone field in registration form.
   NOTE: the theme also carries this rule (woocommerce.css) — kept here too
   since this plugin can't assume the theme is the active one, and this
   selector runs regardless of which stylesheet loads last. */
.woocommerce-form-register p.form-row:has(input[name="phone"]) {
  display: none !important;
}