/* ==========================================================================
   Origins of Light — checkout (onepagecheckoutps) skin, 1:1 with the design
   ========================================================================== */

/* Neutralize classic wrapper on checkout */
#checkout #wrapper { padding: 0; background: var(--background); }
#checkout #wrapper > .container { max-width: none; padding: 0; }
#checkout .breadcrumb { display: none; }
#checkout #content-wrapper { padding: 0; width: 100%; }

/* Breadcrumb band (no title) */
.ool-checkouthero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* Main OPC container back into page container */
#opc_main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  font-family: var(--font-body);
}
@media (min-width: 1024px) { #opc_main { padding: 0 2.5rem 5rem; } }

/* ---------- Steps bar (Koszyk → Zamówienie → Potwierdzenie) ---------- */
.ool-csteps-wrap { margin: 2.5rem 0 2rem; background: none; border: 0; box-shadow: none; }
.ool-csteps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.ool-csteps__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ool-csteps__item.is-current { color: var(--foreground); }
.ool-csteps__item.is-done { color: var(--gold); }
.ool-csteps__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--border);
  flex-shrink: 0;
}
.ool-csteps__item.is-current .ool-csteps__dot,
.ool-csteps__item.is-done .ool-csteps__dot { background: var(--gold); }
.ool-csteps__sep { width: 3rem; height: 1px; background: var(--border); }
.ool-csteps__sep.is-done { background: var(--gold); }

/* ---------- Layout columns ---------- */
#opc_content { display: flex; flex-wrap: wrap; margin: 0 -1rem; }
#opc_content > .col-lg-7 { width: 100%; padding: 0 1rem; }
#opc_content > .col-lg-5 { width: 100%; padding: 0 1rem; }
#opc_content > .col-lg-12 { width: 100%; padding: 0 1rem; }
@media (min-width: 1024px) {
  #opc_content > .col-lg-7 { width: 58.333%; }
  #opc_content > .col-lg-5 { width: 41.667%; }
  #opc_content_side { position: sticky; top: 7rem; }
}

/* ---------- Section cards with numbered headers ---------- */
#opc_content_main { counter-reset: oolstep; }
#opc_content_main .opc-step {
  border: 2px solid var(--border);
  background: var(--background);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 1024px) { #opc_content_main .opc-step { padding: 1.75rem; } }
#opc_content_main .opc-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  margin-bottom: 1.25rem;
  background: none;
  border: 0 !important;
  cursor: default;
}
#opc_content_main .opc-step-header::before {
  counter-increment: oolstep;
  content: counter(oolstep);
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-display);
  font-size: 1rem;
  flex-shrink: 0;
}
.opc-step-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--foreground);
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .opc-step-title { font-size: 1.5rem; } }
.opc-step-body { padding: 0; }
.opc-step-footer { padding: 0.75rem 0 0; border: 0; background: none; }

/* ---------- Form fields ---------- */
#opc_main .field-container { margin-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; }
#opc_main label,
#opc_main .form-control-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 70%, transparent);
  margin-bottom: 0.5rem;
  text-align: left;
  font-weight: 400;
}
#opc_main label .required-asterisk,
#opc_main label sup { color: var(--gold); }
#opc_main .form-control {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  border: 2px solid var(--border);
  background: var(--background);
  font-size: 0.875rem;
  color: var(--foreground);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--transition-elegant);
}
#opc_main .form-control:focus { outline: none; border-color: var(--gold); background: var(--background); }
#opc_main textarea.form-control { height: auto; min-height: 5rem; padding: 0.75rem 1rem; }
#opc_main select.form-control { appearance: auto; }
#opc_main .form-control-comment { font-size: 0.6875rem; color: var(--muted-foreground); }
#opc_main input[type="checkbox"] { accent-color: var(--gold); width: 1rem; height: 1rem; }
#opc_main .checkbox label, #opc_main .checkbox-field label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ---------- Radio cards (delivery + payment) ---------- */
#opc_main .delivery_option,
#opc_main .payment-option,
#opc_main .payment_option_form {
  border: 2px solid var(--border);
  background: var(--background);
  margin-bottom: 0.75rem;
  padding: 1rem;
  transition: border-color var(--transition-elegant), background var(--transition-elegant);
  border-radius: 0;
}
#opc_main .delivery_option.selected,
#opc_main .delivery_option:has(input:checked),
#opc_main .payment-option.selected,
#opc_main .payment-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--pearl);
}
#opc_main .delivery_option label,
#opc_main .payment-option label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  color: inherit;
}
/* custom radio dot */
.ool-radio-dot {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.delivery_option:has(input:checked) .ool-radio-dot,
.payment-option:has(input:checked) .ool-radio-dot { border-color: var(--gold); }
.delivery_option:has(input:checked) .ool-radio-dot::after,
.payment-option:has(input:checked) .ool-radio-dot::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--gold);
}
#opc_main .delivery_option input[type="radio"],
#opc_main .payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ool-carrier-icon, .ool-payment-icon { width: 1.5rem; height: auto; color: var(--gold); flex-shrink: 0; }
#opc_main .delivery_option .carrier_name,
#opc_main .payment-option .payment_name,
#opc_main .delivery_option .carrier-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--foreground);
  display: block;
}
#opc_main .delivery_option .carrier_delay,
#opc_main .payment-option .payment_desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  display: block;
}
#opc_main .delivery_option .carrier_price {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-left: auto;
  white-space: nowrap;
}
.ool-gratis { font-style: italic; color: var(--gold); font-family: var(--font-display); }

/* ---------- Order summary (right column) ---------- */
#opc_content_side .opc-step,
#opc_step_cart {
  border: 2px solid var(--border);
  background: var(--pearl);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
#opc_step_cart_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 2px solid var(--border);
  background: none;
}
#opc_step_cart_header .opc-step-title { font-size: 1.25rem; }
#opc_step_cart_header .opc-step-title em,
.ool-gold-em {
  font-style: italic;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ool-cart-edit-link {
  font-size: 0.75rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--gold);
  text-decoration: none;
}
#opc_step_cart_body { padding: 0; }

/* product lines in summary */
#opc_main .cart-summary-products,
#opc_main .opc-cart-products { list-style: none; margin: 0; padding: 0; }
#opc_main .opc-cart-product,
#opc_main .cart-summary-line.cart-summary-product,
#opc_main .product-line {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
#opc_main .opc-cart-product .product-image,
#opc_main .product-line .product-image {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
#opc_main .opc-cart-product img { width: 100%; height: 100%; object-fit: cover; }
#opc_main .opc-cart-product .product-qty-badge {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#opc_main .opc-cart-product .product-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.35;
}
#opc_main .opc-cart-product .product-price {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}

/* totals */
#opc_main .cart-summary-subtotals-container,
#opc_main .opc-cart-totals { padding: 1.25rem 1.5rem; border-top: 2px solid var(--border); }
#opc_main .cart-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
#opc_main .cart-summary-line .label { color: var(--muted-foreground); text-transform: none; letter-spacing: 0; font-size: 0.875rem; margin: 0; }
#opc_main .cart-summary-line .value { color: var(--foreground); }
#opc_main .cart-summary-line.cart-total {
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}
#opc_main .cart-summary-line.cart-total .label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--foreground);
}
#opc_main .cart-summary-line.cart-total .value {
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.ool-vat-note { font-size: 0.6875rem; color: var(--muted-foreground); text-align: right; margin: 0.25rem 0 0; }

/* voucher inside summary */
#opc_main .block-promo .promo-input {
  height: 3rem;
  border: 2px solid var(--border);
  border-radius: 0;
}
#opc_main .block-promo .btn { border-radius: 0; }

/* ---------- Terms + submit ---------- */
.ool-terms-text { font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.ool-terms-text a { color: var(--gold); text-decoration: underline; }
#opc_main #buttonToProceedPayment,
#opc_main .btn-place-order,
#opc_main #btn_place_order,
#opc_main .payment-confirmation .btn,
#opc_main button[name="confirmDeliveryOption"] {
  width: 100%;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--primary-foreground);
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  font-weight: 500;
  transition: opacity var(--transition-elegant);
  box-shadow: none;
}
.ool-ssl-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
}
.ool-ssl-note svg { width: 0.75rem; height: 0.75rem; }

/* ---------- Mobile summary trigger ---------- */
#opc_mobile_cart_wrapper { margin: 1rem 0 0; }
#opc_cart_trigger, .opc-cart-trigger {
  width: 100%;
  border: 2px solid var(--border);
  background: var(--pearl);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.875rem;
}
.ool-trigger-icon { color: var(--gold); }
.ool-trigger-chevron { transition: transform 0.3s; }
.opc-mobile-cart-visible .ool-trigger-chevron { transform: rotate(180deg); }

/* ---------- Back link ---------- */
.ool-checkout-back { margin-top: 2rem; }
.ool-checkout-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: color var(--transition-elegant);
}

/* ---------- OPC misc cleanup ---------- */
#opc_main .card, #opc_main .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: var(--border);
}
#opc_main .btn-default, #opc_main .btn-secondary {
  border-radius: 0;
  border: 1px solid var(--foreground);
  background: transparent;
  color: var(--foreground);
}
#opc_main .spinner-border { color: var(--gold); }
#opc_main a { color: var(--gold); }
#opc_main .opc-step a.text-muted { color: var(--muted-foreground); }

/* login/guest tabs inside personal information step */
#opc_step_my_account .nav-tabs { border-bottom: 1px solid var(--border); }
#opc_step_my_account .nav-tabs .nav-link {
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background: none;
}
#opc_step_my_account .nav-tabs .nav-link.active {
  color: var(--foreground);
  border-bottom: 2px solid var(--gold);
}

/* Order confirmation page */
#order-confirmation .ool-confirm-card {
  max-width: 42rem;
  margin: 0 auto;
  border: 2px solid var(--border);
  background: var(--background);
  padding: 2.5rem;
  text-align: center;
}
#order-confirmation .ool-confirm-check {
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--gold) 15%, transparent);
  color: var(--gold);
  margin-bottom: 1.5rem;
}

/* ---------- Overrides vs module CSS (loaded after theme) ---------- */
#opc_main .opc-step-header { justify-content: flex-start !important; }
#opc_main .opc-step-title {
  text-transform: none !important;
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  color: var(--foreground) !important;
  font-weight: 400 !important;
  text-align: left;
  flex: 0 1 auto !important;
  margin: 0 !important;
}
#opc_main .opc-step-header .line-title { display: none !important; }
#opc_content_main .opc-step,
#opc_content_main .opc-step-header,
#opc_content_main .opc-step-header.collapsed,
#opc_content_main .opc-step-header.disabled {
  background: var(--background) !important;
}
#opc_content_main .opc-step-header.collapsed { margin-bottom: 0; }
#opc_main .btn-primary {
  background: var(--gold) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--primary-foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  box-shadow: none !important;
}
#opc_main .ool-hidden-count {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  font-size: 0.6875rem;
  padding: 0.25rem 0.75rem;
}
#opc_main .block-promo input, #opc_main input[name="discount_name"] {
  border: 2px solid var(--border) !important;
  border-radius: 0 !important;
  height: 2.75rem;
  background: var(--background);
}
#opc_main .opc-step .form-group .input-group .btn { height: 2.75rem; }
/* qty spinner in summary */
#opc_main .opc-cart-quantity input, #opc_main input.product-quantity-spin {
  border: 2px solid var(--border) !important;
  border-radius: 0 !important;
  width: 3rem;
  text-align: center;
}
/* hide OPC decorative material icons that clash with design */
#opc_main .material-icons.opc-si { color: var(--gold); }

/* summary header spacing */
#opc_step_cart_header { gap: 1rem; flex-wrap: wrap; }
#opc_step_cart_header .ool-cart-edit-link { margin-left: 0.25rem; }
#opc_step_cart_header .ool-hidden-count { margin-left: auto; }

/* mobile summary trigger — pearl look + show/hide toggle */
#opc_mobile_cart_trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid var(--border) !important;
  background: var(--pearl) !important;
  color: var(--foreground) !important;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}
#opc_mobile_cart_trigger .cart-trigger-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
#opc_mobile_cart_trigger #cart_total_label { display: inline-flex; align-items: center; gap: 0.5rem; }
#opc_mobile_cart_trigger #cart_total_value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
}
#opc_mobile_cart_trigger .ool-trigger-hide { display: none; }
#opc_mobile_cart_trigger.opc-mobile-cart-visible .ool-trigger-hide { display: inline; }
#opc_mobile_cart_trigger.opc-mobile-cart-visible .ool-trigger-show { display: none; }
#opc_mobile_cart_trigger .cart-trigger-handle { display: none; }