/* BR Checkout – Same structure as cart (container + view), two-tab UI, address section matches account addresses tab. */

/* Cart-like container and view (same as cart page) */
.br-checkout-container {
  background-color: var(--cart-bg, #efece8);
  max-width: 100%;
}

.br-checkout-view {
  width: 100%;
}

/* Two-tab wrapper (Address | Shipping & Payment) */
.br-checkout-tabs-wrapper {
  --br-checkout-tab-bg: var(--stone-beige, #D2C8BC);
  --br-checkout-tab-active-bg: var(--chestnut-brown, #6C3E24);
  --br-checkout-tab-active-color: var(--stone-beige, #D2C8BC);
  --br-checkout-tab-border: var(--cocoa-brown, #271519);
  font-family: 'The Year of the Camel', Aileron, sans-serif;
  color: var(--espresso-black, #231010);
}

.br-checkout-tab-list {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--mink-taupe, #998273);
  padding: 0;
  list-style: none;
}

.br-checkout-tab {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--br-checkout-tab-bg);
  color: var(--br-checkout-tab-border);
  border: 1px solid var(--br-checkout-tab-border);
  border-bottom: none;
  border-radius: 0;
  cursor: pointer;
  margin-bottom: -1px;
  position: relative;
}

.br-checkout-tab:hover {
  opacity: 0.9;
}

.br-checkout-tab[aria-selected="true"] {
  background: var(--br-checkout-tab-active-bg);
  color: var(--br-checkout-tab-active-color);
}

.br-checkout-panels {
  min-height: 200px;
}

.br-checkout-panel {
  display: block;
}

.br-checkout-panel[aria-hidden="true"],
.br-checkout-panel[hidden] {
  display: none !important;
}

/* RTL */
[dir="rtl"] .br-checkout-tab-list {
  flex-direction: row-reverse;
}

[dir="rtl"] .br-checkout-tab {
  border-bottom: none;
}

/* ==========================================================================
   Address section – same design as account addresses tab (card, selected state, UPDATE/REMOVE)
   Target Vitrin output; adjust selectors if platform markup differs.
   ========================================================================== */

.br-checkout-panel-address {
  font-family: 'The Year of the Camel', Aileron, sans-serif;
  color: var(--espresso-black, #231010);
}

/* Section title: "Choose Address" – match account/cart title style */
.br-checkout-panel-address h2,
.br-checkout-panel-address h3,
.br-checkout-panel-address [class*="title"],
.br-checkout-panel-address [class*="Title"] {
  font-size: 4.2rem;
  font-weight: 400;
  color: var(--chestnut-brown, #6c3e24);
  font-family: 'The Year of the Camel', sans-serif;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .br-checkout-panel-address h2,
  .br-checkout-panel-address h3,
  .br-checkout-panel-address [class*="title"],
  .br-checkout-panel-address [class*="Title"] {
    font-size: 2rem;
  }
}

/* "Add new address" button – match account (stone-beige / mink-taupe) */
.br-checkout-panel-address button[class*="add"]:not([class*="address-dialog"]),
.br-checkout-panel-address a[class*="add"],
.br-checkout-panel-address .MuiButton-root:has([class*="add"]) {
  background-color: var(--mink-taupe, #998273);
  color: var(--cocoa-brown, #271519);
  border: none;
  padding: 12px 1.5rem;
  border-radius: 0;
  font-family: 'The Year of the Camel', sans-serif;
}

.br-checkout-panel-address button[class*="add"]:hover:not([class*="address-dialog"]),
.br-checkout-panel-address a[class*="add"]:hover {
  background-color: var(--chestnut-brown, #6c3e24);
  color: var(--stone-beige, #D2C8BC);
  opacity: 0.9;
}

/* Address cards: account-style (border, selected = dark brown, UPDATE/REMOVE) */
.br-checkout-panel-address [role="region"],
.br-checkout-panel-address .MuiAccordion-root,
.br-checkout-panel-address [class*="Accordion"],
.br-checkout-panel-address section[class*="address"],
.br-checkout-panel-address [data-step] {
  background-color: transparent;
  border: 1px solid var(--chestnut-brown, #6c3e24);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  font-family: 'The Year of the Camel', Aileron, sans-serif;
}

.br-checkout-panel-address [role="region"]:hover,
.br-checkout-panel-address .MuiAccordion-root:hover,
.br-checkout-panel-address [class*="Accordion"]:hover,
.br-checkout-panel-address section[class*="address"]:hover {
  background-color: rgba(108, 62, 36, 0.08);
  border-color: var(--chestnut-brown, #6c3e24);
}

/* Selected address card – dark brown background (match account .active) */
.br-checkout-panel-address [role="region"][aria-expanded="true"],
.br-checkout-panel-address [role="region"].selected,
.br-checkout-panel-address [role="region"][aria-selected="true"],
.br-checkout-panel-address .MuiAccordion-root.Mui-expanded,
.br-checkout-panel-address .MuiAccordion-root.expanded,
.br-checkout-panel-address [class*="address"][class*="selected"],
.br-checkout-panel-address [class*="address"].active {
  background-color: var(--chestnut-brown, #6c3e24);
  border-color: var(--chestnut-brown, #6c3e24);
}

.br-checkout-panel-address [role="region"][aria-expanded="true"] .MuiTypography-root,
.br-checkout-panel-address [role="region"].selected p,
.br-checkout-panel-address [role="region"].selected span,
.br-checkout-panel-address .MuiAccordion-root.Mui-expanded .MuiTypography-root,
.br-checkout-panel-address [class*="address"].active p,
.br-checkout-panel-address [class*="address"].active span {
  color: var(--stone-beige, #D2C8BC) !important;
}

.br-checkout-panel-address [role="region"][aria-expanded="true"] button,
.br-checkout-panel-address [role="region"].selected button,
.br-checkout-panel-address [class*="address"].active button {
  color: var(--mink-taupe, #998273) !important;
}

/* UPDATE / REMOVE buttons – match account address actions */
.br-checkout-panel-address button[class*="update"],
.br-checkout-panel-address button[class*="edit"],
.br-checkout-panel-address button[class*="remove"],
.br-checkout-panel-address button[class*="delete"],
.br-checkout-panel-address a[class*="update"],
.br-checkout-panel-address a[class*="remove"] {
  background: none;
  border: none;
  color: var(--cocoa-brown, #271519);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: 'The Year of the Camel', sans-serif;
}

.br-checkout-panel-address [role="region"].selected button[class*="update"],
.br-checkout-panel-address [role="region"].selected button[class*="edit"],
.br-checkout-panel-address [role="region"].selected button[class*="remove"],
.br-checkout-panel-address [role="region"].selected button[class*="delete"],
.br-checkout-panel-address [class*="address"].active button {
  color: var(--mink-taupe, #998273) !important;
}

/* Back / Continue buttons – match cart checkout button style */
.br-checkout-panel [data-br-checkout-back],
.br-checkout-panel button[class*="back"],
.br-checkout-view .btn-outline-primary {
  background-color: var(--stone-beige, #D2C8BC);
  color: var(--cocoa-brown, #271519);
  border: 1px solid var(--cocoa-brown, #271519);
  border-radius: 0;
  font-family: 'The Year of the Camel', sans-serif;
}

.br-checkout-panel [data-br-checkout-continue],
.br-checkout-panel button[class*="continue"],
.br-checkout-panel button[class*="pay"],
.br-checkout-view .btn-primary {
  background-color: var(--cocoa-brown, #271519);
  color: var(--stone-beige, #D2C8BC);
  border: none;
  border-radius: 0;
  font-family: 'The Year of the Camel', sans-serif;
}

.br-checkout-panel .btn-primary:hover,
.br-checkout-view .btn-primary:hover {
  background-color: var(--chestnut-brown, #6c3e24);
  color: var(--stone-beige, #D2C8BC);
}