/* =============================================================================
   WOOCOMMERCE DARK THEME OVERRIDE  –  Astra Child Hossam
   Location: /wp-content/themes/astra-child-hossam/assets/css/woocommerce-dark.css

   Covers every WooCommerce page:
   01. Base / Reset            07. Cart Page
   02. Notices & Messages      08. Cart Totals
   03. Buttons                 09. Checkout Page
   04. Form Fields             10. Checkout Order Review
   05. Shop Archive            11. Payment Methods
   06. Single Product          12. My Account & Login
                               13. Order Confirmation
                               14. WC Widgets (Sidebar)
                               15. Responsive
   ============================================================================= */

/* ── VARIABLES (inherit from theme-custom.css) ── */
/* All --c-* variables are already defined in theme-custom.css */

/* =============================================================================
   01. BASE / RESET – WooCommerce containers
   ============================================================================= */
.woocommerce,
.woocommerce-page {
  background: transparent;
  color: var(--c-text);
}

.woocommerce *,
.woocommerce-page * {
  box-sizing: border-box;
}

/* Remove Astra / WC default wrapper max-width restrictions */
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-notices-wrapper {
  width: 100%;
}

/* WC wraps its content in <div class="woocommerce"> */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  background: transparent;
}

/* Star ratings */
.woocommerce .star-rating {
  color: var(--c-gold);
}
.woocommerce .star-rating span {
  color: var(--c-gold);
}
.woocommerce .star-rating::before {
  color: rgba(77, 70, 53, 0.6);
}

/* WooCommerce Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 32px;
  background: transparent;
  padding: 0;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--c-muted);
  transition: color var(--dur-base) var(--ease);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--c-gold);
}

/* =============================================================================
   02. NOTICES & MESSAGES
   ============================================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  position: relative !important;
  border-top: 3px solid var(--c-gold) !important;
  background: rgba(53, 53, 52, 0.6) !important;
  backdrop-filter: blur(12px);
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: var(--c-text) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 16px 20px 16px 52px !important;
  margin-bottom: 24px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.woocommerce-error {
  border-top-color: var(--c-error) !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--c-gold) !important;
}
.woocommerce-error::before {
  color: var(--c-error) !important;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-error li + li,
.woocommerce-info li + li,
.woocommerce-message li + li {
  margin-top: 8px !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  background: transparent !important;
  border: 1px solid var(--c-gold) !important;
  color: var(--c-gold) !important;
  padding: 6px 16px !important;
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  font-family: var(--font-body);
  transition: background var(--dur-base) var(--ease) !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background: rgba(242, 202, 80, 0.1) !important;
}

/* =============================================================================
   03. BUTTONS
   ============================================================================= */

/* Base button style */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: transparent !important;
  border: 1px solid var(--c-outline) !important;
  color: var(--c-text) !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  transition: background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: rgba(53, 53, 52, 0.6) !important;
  border-color: var(--c-muted) !important;
  color: var(--c-text) !important;
}

/* PRIMARY / ALT buttons – Gold gradient */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: linear-gradient(135deg, #f2ca50 0%, #d4af37 100%) !important;
  border-color: transparent !important;
  color: #1c1b1b !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px -4px rgba(212, 175, 55, 0.3) !important;
  transition: transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease) !important;
}
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
.woocommerce .checkout-button::after,
.woocommerce #place_order::after,
.woocommerce .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce-checkout .wc-block-components-checkout-place-order-button::after {
  content: "arrow_forward";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout
  .wc-block-components-checkout-place-order-button:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 30px -4px rgba(212, 175, 55, 0.45) !important;
  background: linear-gradient(
    135deg,
    rgba(242, 202, 80, 0.82) 0%,
    rgba(212, 175, 55, 0.82) 100%
  ) !important;
  color: #1c1b1b !important;
}

/* Disabled */
.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* =============================================================================
   04. FORM FIELDS – Minimalist bottom-border style from checkout.html
   ============================================================================= */

/* All text inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout
  .wc-block-components-combobox
  .components-combobox-control__input,
.woocommerce-checkout
  .wc-block-components-select
  .components-custom-select-control__button,
.woocommerce-EditAccountForm input,
.woocommerce-EditAccountForm textarea,
.woocommerce-address-fields input,
.woocommerce-address-fields select {
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(242, 202, 80, 0.35) !important;
  border-radius: 0.35rem !important;
  color: #f5efe2 !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  min-height: 3.25rem !important;
  padding: 0.9rem 1rem !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout
  .wc-block-components-combobox
  .components-combobox-control__input:focus,
.woocommerce-checkout
  .wc-block-components-select
  .components-custom-select-control__button:focus {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(242, 202, 80, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(242, 202, 80, 0.1) !important;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder,
.woocommerce-checkout .wc-block-components-text-input input::placeholder,
.woocommerce-checkout
  .wc-block-components-combobox
  .components-combobox-control__input::placeholder {
  color: rgba(232, 222, 208, 0.58) !important;
}

/* Autofill override */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8f2de !important;
  caret-color: #f8f2de !important;
  background-color: #111110 !important;
  background-image: none !important;
  border-color: rgba(242, 202, 80, 0.42) !important;
  box-shadow: 0 0 0 9999px #111110 inset !important;
  -webkit-box-shadow: 0 0 0 9999px #111110 inset !important;
  color: #f8f2de !important;
  color-scheme: dark !important;
  filter: none !important;
  transition: background-color 999999s ease-out, color 999999s ease-out !important;
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label,
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-combobox label,
.woocommerce-checkout .wc-block-components-select label,
.woocommerce-checkout .wc-block-components-checkbox__label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #e8d6ad !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.woocommerce-checkout .form-row .optional,
.woocommerce-checkout .form-row label span,
.woocommerce-checkout .wc-block-components-text-input label span,
.woocommerce-checkout .wc-block-components-combobox label span,
.woocommerce-checkout .wc-block-components-select label span {
  color: rgba(232, 214, 173, 0.72) !important;
}

.woocommerce form .form-row label .required {
  color: var(--c-gold);
}

/* Select dropdowns */
.woocommerce form .form-row select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  color: #f5efe2 !important;
  background-color: rgba(255, 255, 255, 0.01) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%) !important;
  background-position: calc(100% - 24px) calc(50% - 2px),
    calc(100% - 17px) calc(50% - 2px) !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.8rem !important;
}

.woocommerce form .form-row select option,
.woocommerce-checkout select option,
.woocommerce-address-fields select option {
  background: #101010 !important;
  color: #f5efe2 !important;
}

.woocommerce form .form-row select option:checked,
.woocommerce-checkout select option:checked,
.woocommerce-address-fields select option:checked {
  background: rgba(242, 202, 80, 0.28) !important;
  color: #fff8e7 !important;
}

/* Checkbox & Radio */
.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  accent-color: var(--c-gold);
  background: transparent;
  border: 1px solid var(--c-outline);
}

/* Password strength */
.woocommerce-password-strength {
  display: none;
}