/*
 * Aurum Blocks — Custom overrides & animations
 * Tailwind handles utility classes via CDN; this file adds
 * custom component styles and scroll-triggered animations.
 */

/* ── AURUM Typography System (ported from React theme.css) ── */
:root {
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background: #0B0B0C;
  color: #F2F2F0;
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

h2 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

h3 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #A8A8A8;
  margin: 0;
}

a { text-decoration: none; }

/* ── Scroll animations ── */
.aurum-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.aurum-animate.from-left  { transform: translateX(-30px); }
.aurum-animate.from-right { transform: translateX(30px); }
.aurum-animate.visible {
  opacity: 1;
  transform: translate(0,0);
}
.aurum-delay-1 { transition-delay: .1s; }
.aurum-delay-2 { transition-delay: .2s; }
.aurum-delay-3 { transition-delay: .3s; }
.aurum-delay-4 { transition-delay: .4s; }
.aurum-delay-5 { transition-delay: .5s; }
.aurum-delay-7 { transition-delay: .7s; }

/* ── Hero entrance ── */
@keyframes aurum-hero-scale {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.aurum-hero-bg-anim img {
  animation: aurum-hero-scale 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ── Product card hover ── */
.aurum-product-card { transition: border-color .5s ease; }
.aurum-product-card:hover { border-color: #C6A65A !important; }
.aurum-product-card img { transition: transform .7s ease; }
.aurum-product-card:hover img { transform: scale(1.05); }
.aurum-product-card .aurum-hover-border {
  position: absolute; inset: 0;
  border: 2px solid #C6A65A;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.aurum-product-card:hover .aurum-hover-border { opacity: 1; }

/* ── Category tabs ── */
.aurum-cat-tab { transition: all .5s ease; cursor: pointer; }
.aurum-cat-tab:hover { border-color: #C6A65A !important; }
.aurum-cat-tab.active { border-color: #C6A65A !important; background: rgba(198,166,90,.05); }
.aurum-cat-tab.active h4 { color: #C6A65A !important; }

/* ── Skeleton pulse ── */
@keyframes aurum-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:.5; }
}
.aurum-skeleton {
  background: #2A2A2A;
  border-radius: .25rem;
  animation: aurum-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* ── Scroll indicator ── */
.aurum-scroll-line {
  width: 1px; height: 4rem;
  background: linear-gradient(to bottom, #C6A65A, transparent);
}

/* ── Gold bullet ── */
.aurum-bullet {
  width: 4px; height: 4px; flex-shrink: 0;
  background: #C6A65A;
  margin-top: .625rem; margin-right: .75rem;
}

/* ── Step card ── */
.aurum-step-card { transition: border-color .5s ease; }
.aurum-step-card:hover { border-color: #C6A65A !important; }

/* ── Decorative corner ── */
.aurum-deco {
  display: none !important; /* Completely hidden */
}

/* ── Checkout: compact form + payment + Place order ── */
.aurum-checkout-form {
  padding: 1.25rem 1.5rem !important;
}

/* Aurum Checkout design tokens for third-party UI (accordion) */
#aurum-checkout-form,
#aurum-checkout-form * {
  --colorBackground: #0B0B0C !important;
  --colorText: #F2F2F0 !important;
  --colorTextSecondary: #A8A8A8 !important;
  --colorTextPlaceholder: #A8A8A8 !important;
}

/* Ensure accordion backgrounds inside payment UI stay black */
#aurum-checkout-form .p-Accordion.p-Accordion--spaced {
  background-color: #0B0B0C !important;
}
.aurum-checkout-form .aurum-checkout-fields input,
.aurum-checkout-form .aurum-checkout-fields select,
.aurum-checkout-form .aurum-checkout-fields textarea {
  transition: border-color .25s ease;
}
.aurum-checkout-form .aurum-checkout-fields input:focus,
.aurum-checkout-form .aurum-checkout-fields select:focus,
.aurum-checkout-form .aurum-checkout-fields textarea:focus {
  outline: none;
  border-color: #C6A65A !important;
}

/* Payment methods: clean Aurum card, no WC arrows/triangles */
#aurum-checkout-form #payment {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #2A2A2A;
  background: #151515;
  color: #F2F2F0;
}
#aurum-checkout-form #payment .payment_methods {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}
#aurum-checkout-form #payment .payment_methods li {
  margin: 0 0 .5rem 0;
  padding: 0;
  list-style: none;
}
#aurum-checkout-form #payment .woocommerce-NoticeGroup,
#aurum-checkout-form #payment .woocommerce-NoticeGroup-checkout,
#aurum-checkout-form #payment ul.woocommerce-error,
#aurum-checkout-form #payment .woocommerce-error,
#aurum-checkout-form #payment .stripe-source-errors,
#aurum-checkout-form #payment .wc-stripe-error {
  display: block !important;
  margin: 0 0 1rem 1rem !important;
  padding: .875rem 1rem !important;
  background: rgba(140, 36, 36, 0.18) !important;
  border: 1px solid rgba(198, 166, 90, 0.35) !important;
  color: #F2F2F0 !important;
  list-style: none !important;
}
#aurum-checkout-form #payment .woocommerce-error li,
#aurum-checkout-form #payment .stripe-source-errors li {
  color: #F2F2F0 !important;
  margin: 0 !important;
}
/* Remove WooCommerce triangle/arrow and default icons */
#aurum-checkout-form #payment .wc_payment_method::before,
#aurum-checkout-form #payment .wc_payment_method::after,
#aurum-checkout-form #payment .payment_box::before,
#aurum-checkout-form #payment .payment_box::after,
#aurum-checkout-form #payment .wc_payment_method *::before,
#aurum-checkout-form #payment .wc_payment_method *::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}
#aurum-checkout-form #payment .wc_payment_method,
#aurum-checkout-form #payment .payment_box {
  background-image: none !important;
}
#aurum-checkout-form #payment .wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem 0;
  margin-left: 1rem;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
#aurum-checkout-form #payment .wc_payment_method input[name="payment_method"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#aurum-checkout-form #payment .wc_payment_method > label {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid #2A2A2A;
  background: #151515;
  color: #F2F2F0;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  min-width: 0;
}
#aurum-checkout-form #payment .wc_payment_method > label::before {
  content: '₣';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid #C6A65A;
  color: #C6A65A;
  font-size: .8rem;
}
/* Hide description only for Cash on delivery; keep it for card gateways */
#aurum-checkout-form #payment .payment_method_cod .payment_box {
  display: none !important;
}

/* Stripe / Visa-Debit: visible only when selected, styled in Aurum theme */
#aurum-checkout-form #payment .payment_method_stripe .payment_box {
  display: none !important;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box {
  display: block !important;
  margin: .75rem 0 0 1rem;
  padding: 1rem;
  border: 1px solid #2A2A2A;
  border-radius: .25rem;
  background: #151515;
  color: #D4D4D4;
  font-size: .8125rem;
  line-height: 1.6;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) #wc-stripe-upe-form,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .wc-upe-form,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .wc-payment-form {
  margin: 0 !important;
  padding: 0 !important;
  background: #0B0B0C !important;
  border: 0 !important;
  box-shadow: none !important;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) fieldset,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .wc-stripe-upe-element,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .wc-stripe-upe-element-container,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .wc-stripe-upe-element-wrapper {
  background: #0B0B0C !important;
  border-color: #2A2A2A !important;
  box-shadow: none !important;
}

/* Specific accordion/fieldset inside Stripe UPE (your selector) */
#aurum-checkout-form #payment > ul > li.wc_payment_method.payment_method_stripe > div > fieldset:nth-child(4) {
  background: #0B0B0C !important;
  border: 1px solid #2A2A2A !important;
  border-radius: .25rem !important;
  color: #F2F2F0 !important;
}
#aurum-checkout-form #payment .payment_method_stripe .payment_box a {
  color: #C6A65A;
}
#aurum-checkout-form #payment .payment_method_stripe .payment_box a:hover {
  color: #d4b56d;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box label,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box span,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box p {
  color: #D4D4D4 !important;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box input[type="text"],
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box input[type="tel"],
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box input[type="email"],
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box select,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .StripeElement,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-elements-field {
  background: #0B0B0C !important;
  color: #F2F2F0 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: .25rem !important;
  box-shadow: none !important;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-upe-element iframe {
  border-radius: .25rem !important;
}
/* Stripe UPE iframe wrapper sometimes keeps a light bottom border; force Aurum border color */
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-upe-element,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-upe-element-container,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-upe-element-wrapper {
  border-color: #2A2A2A !important;
  background: #0B0B0C !important;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box input[type="checkbox"] {
  accent-color: #C6A65A;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .save-source-checkbox,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .woocommerce-SavedPaymentMethods-saveNew,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-save-source {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid #2A2A2A;
}
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .save-source-checkbox label,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .woocommerce-SavedPaymentMethods-saveNew label,
#aurum-checkout-form #payment .payment_method_stripe:has(input:checked) .payment_box .wc-stripe-save-source label {
  color: #D4D4D4 !important;
  font-size: .8rem;
  cursor: pointer;
}
#aurum-checkout-form #payment .wc_payment_method:has(input:checked) > label {
  border-color: #C6A65A;
  background: rgba(198,166,90,.06);
  color: #C6A65A;
}

/* Place order row */
#aurum-checkout-form .form-row.place-order {
  margin: 1rem 0 0 0;
  padding: 0;
}
#aurum-checkout-form .form-row.place-order .woocommerce-privacy-policy-text {
  color: #A8A8A8;
  font-size: .75rem;
  margin-bottom: .75rem;
  line-height: 1.5;
}
#aurum-checkout-form #place_order {
  display: inline-block;
  width: auto;
  min-width: 12rem;
  padding: .875rem 2rem;
  background: #C6A65A !important;
  color: #0B0B0C !important;
  border: 1px solid #C6A65A !important;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
#aurum-checkout-form #place_order:hover {
  background: #d4b56d !important;
  border-color: #d4b56d !important;
  color: #0B0B0C !important;
}

/* ── Order received / Thank you page — Aurum styling ── */
.aurum-order-received .woocommerce-order {
  color: #F2F2F0;
  font-family: var(--font-sans);
}
.aurum-order-received .woocommerce-thankyou-order-received-text {
  color: #F2F2F0;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.aurum-order-received .woocommerce-order-overview {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  border-bottom: 1px solid #2A2A2A;
  padding-bottom: 1.5rem;
}
.aurum-order-received .woocommerce-order-overview li {
  color: #D4D4D4;
  font-size: .875rem;
}
.aurum-order-received .woocommerce-order-overview li strong {
  color: #F2F2F0;
  font-weight: 500;
}
.aurum-order-received .woocommerce-order-details,
.aurum-order-received .woocommerce-customer-details {
  margin-top: 2rem;
}
.aurum-order-received .woocommerce-order-details h2,
.aurum-order-received .woocommerce-column__title,
.aurum-order-received .woocommerce-customer-details h2 {
  color: #C6A65A;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 1rem 0;
  letter-spacing: .05em;
}
.aurum-order-received .woocommerce-table--order-details,
.aurum-order-received table.woocommerce-table {
  width: 100%;
  border: 1px solid #2A2A2A;
  border-collapse: collapse;
  background: #151515;
  margin: 0 0 1rem 0;
}
.aurum-order-received .woocommerce-table th,
.aurum-order-received .woocommerce-table td {
  padding: .75rem 1rem;
  border: 1px solid #2A2A2A;
  text-align: left;
  color: #F2F2F0;
  font-size: .875rem;
}
.aurum-order-received .woocommerce-table th {
  color: #A8A8A8;
  font-weight: 500;
}
.aurum-order-received .woocommerce-table a {
  color: #C6A65A;
}
.aurum-order-received .woocommerce-table a:hover {
  color: #d4b56d;
}
.aurum-order-received address {
  color: #D4D4D4;
  font-size: .875rem;
  line-height: 1.6;
  font-style: normal;
}
.aurum-order-received .payment_box {
  display: none !important;
}