/**
 * Yuno Payment Gateway - Checkout Styles
 * Fully isolated, responsive, and theme-independent
 *
 * Breakpoints:
 * - Mobile:  < 576px (1 column)
 * - Tablet:  576px - 767px (2 columns)
 * - Desktop: >= 768px (4 columns)
 */

/* ===== CONTAINER ===== */
.yuno-receipt {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .yuno-receipt {
    max-width: 800px;
    padding: 0;
  }
}

/* ===== PAGE TITLE ===== */
.yuno-page-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #282A30 !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* ===== ORDER SUMMARY CONTAINER ===== */
.yuno-order-summary {
  display: grid;
  gap: 20px;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 24px;
  box-sizing: border-box;
}

/* Mobile: 1 column */
@media (max-width: 575px) {
  .yuno-order-summary {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }
}

/* Tablet: 2 columns */
@media (min-width: 576px) and (max-width: 767px) {
  .yuno-order-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop: 4 columns with separators */
@media (min-width: 768px) {
  .yuno-order-summary {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 24px 0;
  }

  /* Vertical separators between items (desktop only) */
  .yuno-order-item:not(:last-child) {
    border-right: 1px solid #dee2e6;
    padding-right: 20px;
    margin-right: 20px;
  }

  .yuno-order-item:first-child {
    padding-left: 0;
  }

  .yuno-order-item:last-child {
    padding-right: 20px;
  }
}

/* ===== ORDER ITEM (Label + Value) ===== */
.yuno-order-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* Allow text truncation if needed */
}

/* Label (uppercase, small, gray) */
.yuno-order-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #6C6F75 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 16px !important;
  vertical-align: middle !important;
}

/* Value (larger, bold, dark) */
.yuno-order-value {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #282A30 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  word-break: break-word; /* Prevent overflow */
}

/* Total: keep same style as other values */
.yuno-order-total {
  /* Inherits all styles from .yuno-order-value */
}

/* ===== PAYMENT INFO ===== */
.yuno-payment-info {
  text-align: left;
  margin: 50px 0 30px 0;
}

.yuno-payment-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #282A30 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

.yuno-payment-subtitle {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #282A30 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

/* ===== LOADER ===== */
.yuno-loader {
  font-size: 14px !important;
  color: #6c757d !important;
  text-align: center !important;
  padding: 16px !important;
  margin: 0 0 24px 0 !important;
  background: #f8f9fa;
  border-radius: 4px;
}

/* ===== PAY BUTTON ===== */
.yuno-pay-button {
  width: 100% !important;
  margin: 32px 0 0 0 !important;
  padding: 16px 24px !important;
  background-color: #282A30 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  box-sizing: border-box !important;
}

.yuno-pay-button:hover:not(:disabled) {
  background-color: #333333 !important;
}

.yuno-pay-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #666666 !important;
}

/* ===== SDK ISOLATION ===== */
/* Remove ALL theme-added styles from SDK inputs */
.yuno-receipt #yuno-root input,
.yuno-receipt #yuno-root input:focus,
.yuno-receipt #yuno-root input:focus-visible,
.yuno-receipt #yuno-root input:active,
.yuno-receipt #yuno-root input:hover,
.yuno-receipt #yuno-apm-form input,
.yuno-receipt #yuno-apm-form input:focus,
.yuno-receipt #yuno-apm-form input:focus-visible,
.yuno-receipt #yuno-apm-form input:active,
.yuno-receipt #yuno-apm-form input:hover,
.yuno-receipt #yuno-action-form input,
.yuno-receipt #yuno-action-form input:focus,
.yuno-receipt #yuno-action-form input:focus-visible,
.yuno-receipt #yuno-action-form input:active,
.yuno-receipt #yuno-action-form input:hover {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: none !important;
  animation: none !important;
  padding: 0 !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* CRITICAL: Remove browser autofill/autocomplete background colors */
/* Chrome, Safari, Edge - autofill background override */
.yuno-receipt #yuno-root input:-webkit-autofill,
.yuno-receipt #yuno-root input:-webkit-autofill:hover,
.yuno-receipt #yuno-root input:-webkit-autofill:focus,
.yuno-receipt #yuno-root input:-webkit-autofill:active,
.yuno-receipt #yuno-apm-form input:-webkit-autofill,
.yuno-receipt #yuno-apm-form input:-webkit-autofill:hover,
.yuno-receipt #yuno-apm-form input:-webkit-autofill:focus,
.yuno-receipt #yuno-apm-form input:-webkit-autofill:active,
.yuno-receipt #yuno-action-form input:-webkit-autofill,
.yuno-receipt #yuno-action-form input:-webkit-autofill:hover,
.yuno-receipt #yuno-action-form input:-webkit-autofill:focus,
.yuno-receipt #yuno-action-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
}

/* Firefox - autofill background override */
.yuno-receipt #yuno-root input:-moz-autofill,
.yuno-receipt #yuno-root input:-moz-autofill-preview,
.yuno-receipt #yuno-apm-form input:-moz-autofill,
.yuno-receipt #yuno-apm-form input:-moz-autofill-preview,
.yuno-receipt #yuno-action-form input:-moz-autofill,
.yuno-receipt #yuno-action-form input:-moz-autofill-preview {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove theme focus rings from SDK elements */
.yuno-receipt #yuno-root *:focus,
.yuno-receipt #yuno-root *:focus-visible,
.yuno-receipt #yuno-apm-form *:focus,
.yuno-receipt #yuno-apm-form *:focus-visible,
.yuno-receipt #yuno-action-form *:focus,
.yuno-receipt #yuno-action-form *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure consistent box-sizing */
.yuno-receipt #yuno-root *,
.yuno-receipt #yuno-apm-form *,
.yuno-receipt #yuno-action-form * {
  box-sizing: border-box !important;
}

/* Ensure SDK iframes are not affected by theme styles */
.yuno-receipt iframe {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===== HIDE WOOCOMMERCE NATIVE ORDER OVERVIEW ===== */
/* Hide WooCommerce's default order summary to avoid duplication */
/* CRITICAL: Only hides when our custom summary (.yuno-receipt) is present */
/* This prevents breaking other WooCommerce pages (my-account, order-received, etc.) */

/* Main order overview block (Order, Date, Total, Payment Method) */
body.woocommerce-order-pay .woocommerce-order-overview {
  display: none !important;
}

/* Order details table/list (if shown above our custom summary) */
body.woocommerce-order-pay .woocommerce-order-details {
  display: none !important;
}

/* Alternative selector for order overview */
body.woocommerce-order-pay ul.order_details {
  display: none !important;
}

/* Hide "Order received" heading if present (only on order-pay page) */
body.woocommerce-order-pay .woocommerce-order h2:first-of-type {
  display: none !important;
}

/* Ensure our custom summary is always visible */
.yuno-order-summary {
  display: grid !important;
}

/* ===== WOOCOMMERCE CHECKOUT PAGE STYLES ===== */
/* Styles for payment method selection on /checkout page */

/* Payment section container - reduce padding, remove dark background, keep border */
body.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background-color: transparent !important;
  border: 1px solid #e0e0e0 !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

/* Payment methods list - reduce spacing */
body.woocommerce-checkout ul.wc_payment_methods.payment_methods {
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  background-color: transparent !important;
}

/* Individual payment method item - remove background, reduce padding */
body.woocommerce-checkout .wc_payment_method {
  background-color: transparent !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Payment method label - reduce spacing */
body.woocommerce-checkout .wc_payment_method label {
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  color: inherit !important;
}

/* Add card icon before Yuno label */
body.woocommerce-checkout .wc_payment_method.payment_method_yuno label::before {
  content: "💳" !important;
  font-size: 18px !important;
  display: inline-block !important;
  line-height: 1 !important;
  filter: brightness(1.1) !important;
}

/* Show radio button for payment methods (override inline display:none) - move to right */
body.woocommerce-checkout .wc_payment_method input.input-radio[type="radio"] {
  display: inline-block !important;
  width: auto !important;
  margin: 0 0 0 auto !important;
  cursor: pointer !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  accent-color: #000000 !important;
}

/* Place order button container - reduce padding */
body.woocommerce-checkout .form-row.place-order {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Terms and conditions wrapper */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  padding: 0 0 16px 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Place order button - reduce padding */
body.woocommerce-checkout #place_order {
  padding: 14px 24px !important;
  margin-top: 0 !important;
}

/* ===== HIDE PRIVACY POLICY TEXT ===== */
/* Hide WooCommerce privacy policy text on checkout and order-pay pages */
/* Only applies to pages where Yuno CSS is loaded */
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-order-pay .woocommerce-privacy-policy-text {
  display: none !important;
}

/* ===== PROCESSING OVERLAY ===== */
/* Non-destructive overlay shown during payment processing (tokenization + payment creation) */

.yuno-processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.yuno-processing-content {
  text-align: center;
  max-width: 480px;
  width: 90%;
  padding: 0 16px;
}

.yuno-processing-title {
  font-size: 28px;
  font-weight: 700;
  color: #282A30;
  line-height: 36px;
  margin: 0 0 8px 0;
}

.yuno-processing-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #6C6F75;
  line-height: 24px;
  margin: 0 0 32px 0;
}

.yuno-processing-bar-track {
  width: 100%;
  height: 4px;
  background: #E5E7EB;
  border-radius: 2px;
  overflow: hidden;
}

.yuno-processing-bar-fill {
  width: 40%;
  height: 100%;
  background: #282A30;
  border-radius: 2px;
  animation: yuno-bar-slide 1.5s linear infinite;
}

@keyframes yuno-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Responsive: mobile < 576px ── */
@media (max-width: 575px) {
  .yuno-processing-content {
    max-width: 320px;
  }

  .yuno-processing-title {
    font-size: 22px;
    line-height: 30px;
  }

  .yuno-processing-subtitle {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px;
  }
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .yuno-processing-overlay {
    background: rgba(30, 30, 30, 0.95);
  }

  .yuno-processing-title {
    color: #F3F4F6;
  }

  .yuno-processing-subtitle {
    color: #9CA3AF;
  }

  .yuno-processing-bar-track {
    background: #374151;
  }

  .yuno-processing-bar-fill {
    background: #D1D5DB;
  }
}