/*
Theme Name: Bamboure Child
 Theme URI: https://bamboure.se
 Description: Child theme for Bamboure WooCommerce payment page
 Author: Bamboure
 Author URI: https://bamboure.se
 Template: twentytwentyfive
 Version: 1.0.2
*/

/* ================================================
   BAMBOURE - Payment Page Styles
   Structure (WooCommerce template override):
   form#order_review.bamboure-order-pay
   └── div.bamboure-order-pay__layout
       ├── aside.bamboure-order-pay__summary (order summary table)
       ├── div.bamboure-order-pay__before-payment (WooPayments express buttons + divider)
       └── div.bamboure-order-pay__payment
           └── div#payment
               ├── ul.wc_payment_methods (card/klarna)
               └── div.form-row (button + privacy text)
   ================================================ */

/* === HIDE ADMIN BAR & COMING SOON BANNER === */
body.woocommerce-order-pay #wpadminbar,
body.woocommerce-order-pay [class*="coming-soon"],
body.woocommerce-order-pay a[href*="site-visibility"] {
  display: none !important;
}

body.woocommerce-order-pay {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html.wp-toolbar,
html {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* === BASE STYLES === */
body.woocommerce-order-pay {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: #FAFAF9 !important;
  color: #1C1917 !important;
}

/* === HIDE FOOTER & UNNECESSARY ELEMENTS === */
body.woocommerce-order-pay footer.wp-block-template-part,
body.woocommerce-order-pay .wp-block-spacer {
  display: none !important;
}

/* === HEADER === */
/* Outer header (wp-block-template-part) */
body.woocommerce-order-pay header.wp-block-template-part {
  background: white !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Inner header (wp-block-group) */
body.woocommerce-order-pay header.wp-block-template-part header {
  background: white !important;
  border-bottom: 1px solid #E7E5E4 !important;
  padding: 1.25rem 2rem !important;
  margin: 0 !important;
  min-height: 77px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

body.woocommerce-order-pay header .wp-block-site-title a,
body.woocommerce-order-pay header a[href*="bamboure"] {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: #2D5A27 !important;
  text-decoration: none !important;
}

body.woocommerce-order-pay header .wp-block-site-title a::after,
body.woocommerce-order-pay header a[href*="bamboure"]::after {
  content: "." !important;
  color: #EA580C !important;
}

/* === MAIN CONTAINER === */
body.woocommerce-order-pay main {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0.75rem 1.5rem !important;
}

/* === HIDE GUEST ORDER WARNING BANNER === */
body.woocommerce-order-pay main > [role="alert"],
body.woocommerce-order-pay .woocommerce-info,
body.woocommerce-order-pay .wc-block-components-notice-banner {
  display: none !important;
}

/* === FORM CONTAINER - TWO COLUMN GRID === */
body.woocommerce-order-pay #order_review {
  margin: 0 !important;
}

body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  grid-template-areas:
    "before before"
    "payment summary" !important;
  gap: 0.75rem !important;
  align-items: start !important;
}

body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__before-payment {
  grid-area: before !important;
}

body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__payment {
  grid-area: payment !important;
}

body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__summary {
  grid-area: summary !important;
  position: sticky !important;
  top: 1rem !important;
  align-self: start !important;
}

/* === FALLBACK LAYOUT (when template override isn't active) === */
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 0.75rem !important;
  align-items: start !important;
}

/* Express checkout (Apple Pay / Google Pay) */
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > .wcpay-express-checkout-wrapper,
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > .wcpay-payment-request-wrapper {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

/* Divider ("— ELLER —") */
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > p {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* Payment methods */
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > #payment {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

/* Order summary */
body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > table.shop_table {
  grid-column: 2 !important;
  grid-row: 3 !important;
  position: sticky !important;
  top: 1rem !important;
  align-self: start !important;
}

/* === EXPRESS CHECKOUT (Apple Pay / Google Pay) === */
body.woocommerce-order-pay .wcpay-express-checkout-wrapper,
body.woocommerce-order-pay .wcpay-payment-request-wrapper {
  margin-bottom: 0.25rem !important;
}

body.woocommerce-order-pay .wcpay-express-checkout-wrapper button,
body.woocommerce-order-pay .wcpay-payment-request-wrapper button {
  border-radius: 0.5rem !important;
  height: 48px !important;
}

/* === "OR" DIVIDER === */
body.woocommerce-order-pay .bamboure-order-pay__before-payment > p,
body.woocommerce-order-pay #payment > p {
  text-align: center !important;
  color: #78716C !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
}

body.woocommerce-order-pay .bamboure-order-pay__before-payment > p::before,
body.woocommerce-order-pay .bamboure-order-pay__before-payment > p::after,
body.woocommerce-order-pay #payment > p::before,
body.woocommerce-order-pay #payment > p::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #E7E5E4 !important;
  margin: 0 1rem !important;
}

/* === ORDER TABLE (Right Column) === */
body.woocommerce-order-pay table.shop_table {
  background: white !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #E7E5E4 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

body.woocommerce-order-pay .shop_table th,
body.woocommerce-order-pay .shop_table td {
  padding: 0.625rem 1rem !important;
  border-bottom: 1px solid #F5F5F4 !important;
  text-align: left !important;
}

body.woocommerce-order-pay .shop_table thead th {
  background: #F5F5F4 !important;
  font-weight: 600 !important;
  color: #57534E !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.woocommerce-order-pay .shop_table tbody td {
  font-size: 0.9375rem !important;
  color: #1C1917 !important;
}

body.woocommerce-order-pay .shop_table tfoot th,
body.woocommerce-order-pay .shop_table tfoot td {
  background: #FAFAF9 !important;
  font-weight: 500 !important;
}

body.woocommerce-order-pay .shop_table tfoot tr:last-child th,
body.woocommerce-order-pay .shop_table tfoot tr:last-child td {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #2D5A27 !important;
  background: #F0FDF4 !important;
}

/* === PAYMENT SECTION (Left Column) === */
body.woocommerce-order-pay #payment {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === PAYMENT METHODS LIST === */
body.woocommerce-order-pay .wc_payment_methods {
  background: white !important;
  border-radius: 1rem !important;
  padding: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #E7E5E4 !important;
  list-style: none !important;
  margin: 0 !important;
}

body.woocommerce-order-pay .wc_payment_method {
  padding: 0.75rem !important;
  border: 2px solid #E7E5E4 !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.5rem !important;
  transition: all 0.2s ease !important;
  background: white !important;
  list-style: none !important;
}

body.woocommerce-order-pay .wc_payment_method:last-child {
  margin-bottom: 0 !important;
}

body.woocommerce-order-pay .wc_payment_method:hover {
  border-color: #A3A3A3 !important;
}

body.woocommerce-order-pay .wc_payment_method > label {
  font-weight: 600 !important;
  color: #1C1917 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

body.woocommerce-order-pay .wc_payment_method input[type="radio"] {
  accent-color: #2D5A27 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 !important;
}

body.woocommerce-order-pay .wc_payment_method .payment_box {
  margin-top: 0.5rem !important;
  padding: 0.75rem !important;
  background: #F5F5F4 !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  color: #57534E !important;
}

/* Test card notice styling */
body.woocommerce-order-pay .wc_payment_method .payment_box > p:first-child {
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid #E7E5E4 !important;
}

body.woocommerce-order-pay .wc_payment_method .payment_box button {
  background: #E7E5E4 !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-family: monospace !important;
  cursor: pointer !important;
}

body.woocommerce-order-pay .wc_payment_method .payment_box button:hover {
  background: #D6D3D1 !important;
}

/* Stripe card input styling */
body.woocommerce-order-pay .wc-stripe-elements-field,
body.woocommerce-order-pay [id*="card-element"],
body.woocommerce-order-pay .InputContainer,
body.woocommerce-order-pay .__PrivateStripeElement {
  border: 2px solid #E7E5E4 !important;
  border-radius: 0.5rem !important;
  background: white !important;
  padding: 0.75rem !important;
}

body.woocommerce-order-pay .wc-stripe-elements-field:focus-within,
body.woocommerce-order-pay [id*="card-element"]:focus-within {
  border-color: #2D5A27 !important;
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1) !important;
}

body.woocommerce-order-pay input[type="checkbox"] {
  accent-color: #2D5A27 !important;
}

/* Save card checkbox */
body.woocommerce-order-pay .wc_payment_method label[for*="save"] {
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  color: #57534E !important;
}

/* === BUTTON & PRIVACY SECTION === */
body.woocommerce-order-pay .bamboure-order-pay__submit {
  text-align: center !important;
  margin-top: 1rem !important;
}

body.woocommerce-order-pay #payment .form-row {
  text-align: center !important;
  margin-top: 0.75rem !important;
}

body.woocommerce-order-pay #place_order {
  background-color: #2D5A27 !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  padding: 1rem 3rem !important;
  border: none !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 400px !important;
  margin: 0 auto 0.5rem !important;
  transition: background-color 0.2s !important;
  display: inline-block !important;
}

body.woocommerce-order-pay #place_order:hover {
  background-color: #1E3D1A !important;
}

body.woocommerce-order-pay #place_order:disabled {
  background-color: #A8A29E !important;
  cursor: not-allowed !important;
}

/* === PRIVACY TEXT === */
body.woocommerce-order-pay .bamboure-order-pay__terms {
  text-align: center !important;
  color: #78716C !important;
  font-size: 0.8125rem !important;
  max-width: 600px !important;
  margin: 1rem auto 0 !important;
  line-height: 1.5 !important;
  padding: 0 1rem !important;
}

body.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-order-pay #payment .form-row > p {
  text-align: center !important;
  color: #78716C !important;
  font-size: 0.8125rem !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

body.woocommerce-order-pay .woocommerce-privacy-policy-link {
  color: #2D5A27 !important;
  text-decoration: underline !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 900px) {
  body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "before"
      "payment"
      "summary" !important;
  }

  body.woocommerce-order-pay #order_review.bamboure-order-pay .bamboure-order-pay__summary {
    position: static !important;
  }

  body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
  }

  body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > #payment {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body.woocommerce-order-pay #order_review:not(.bamboure-order-pay) > table.shop_table {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: static !important;
  }

  body.woocommerce-order-pay #place_order {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-order-pay main {
    padding: 1rem !important;
  }
}

/* === KLARNA STYLING === */
body.woocommerce-order-pay .wc_payment_method.payment_method_klarna .payment_box iframe {
  min-height: 100px !important;
}

/* === LOADING STATE === */
body.woocommerce-order-pay .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.8) !important;
}

body.woocommerce-order-pay .woocommerce-checkout-payment .blockUI.blockOverlay::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border: 3px solid #E7E5E4 !important;
  border-top-color: #2D5A27 !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: -20px 0 0 -20px !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}