/* =============================================================================
   rpr-cart.css
   Loaded only on the WooCommerce Cart page (body.woocommerce-cart).
   Splits Shipping Details and Cart Totals into two distinct sections, 
   with a visible gap (white‐space) between them.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   1) SHIPPING DETAILS WRAPPER
   ───────────────────────────────────────────────────────────────────────── */
body.woocommerce-cart .shipping-details-wrapper {
  width:           100% !important;
  box-sizing:      border-box;
  border:          2px solid lightsteelblue !important;
  background-color: rgba(135, 171, 201, 0.1) !important;
  margin-bottom:   1rem !important;   /* some slight gap below the shipping box (optional) */
  padding:         1rem !important;   /* breathing room inside the shipping box */
}

/* If you want to style the Shipping Details <h2> specifically: */
body.woocommerce-cart .shipping-details-wrapper > h2 {
  margin:          0 0 0.5rem 0 !important; /* push the header away from its content */
  font-size:       1.5rem !important;
  color:           #333 !important;
}

/* The shipping <table> itself can remain un‐modified, or you can adjust further
   if you need. If you want a little padding around each <td> in the shipping table: */
body.woocommerce-cart .shipping-details-wrapper table td,
body.woocommerce-cart .shipping-details-wrapper table th {
  padding: 0.5rem 0.75rem !important;
  vertical-align: middle !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2) FIXED SPACER (forces a white gap between the two boxes)
   ───────────────────────────────────────────────────────────────────────── */
body.woocommerce-cart .cart-totals-spacer {
  height:          2rem;              /* adjust this value to taste */
  width:           100%;
  background:      transparent;
  /* You could also do margin, e.g. margin-bottom, but a fixed‐height div is simplest */
}

/* ─────────────────────────────────────────────────────────────────────────
   3) CART TOTALS WRAPPER
   ───────────────────────────────────────────────────────────────────────── */
body.woocommerce-cart .cart_totals_wrapper {
  width:           100% !important;
  box-sizing:      border-box;
  border:          2px solid lightsteelblue !important;
  background-color: rgba(135, 171, 201, 0.1) !important;
  margin-bottom:   1rem !important;   /* if you want a bit of space below Cart Totals */
  padding-top:     1rem !important;   /* breathing room above the <h2> inside */
}

/* Style the Cart Totals <h2>: */
body.woocommerce-cart .cart_totals_wrapper > .cart_totals > h2 {
  margin:          0 0 0.5rem 0 !important; /* push header away from its bars */
  font-size:       1.5rem !important;
  color:           #333 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4) SUBTOTAL / TAX / TOTAL “BARS”
   We create a mini‐flex container inside each <td> so that
   the label + amount sit to the right, while the background 
   spans 100% width of the parent table row.
   ───────────────────────────────────────────────────────────────────────── */

/* 4A) “Subtotal” row background + text color */
body.woocommerce-cart .cart_totals_wrapper .cart-subtotal {
  background-color: lightsteelblue !important;
}
body.woocommerce-cart .cart_totals_wrapper .cart-subtotal .rpr-cart-subtotals-label,
body.woocommerce-cart .cart_totals_wrapper .cart-subtotal .rpr-subtotals-amount {
  color: blue !important;
}

/* 4B) “Tax” row background + text color */
body.woocommerce-cart .cart_totals_wrapper .tax-rate,
body.woocommerce-cart .cart_totals_wrapper .tax-total {
  background-color: #e0e0e0 !important;
}
body.woocommerce-cart .cart_totals_wrapper .tax-rate .rpr-cart-subtotals-label,
body.woocommerce-cart .cart_totals_wrapper .tax-rate .rpr-subtotals-amount,
body.woocommerce-cart .cart_totals_wrapper .tax-total .rpr-cart-subtotals-label,
body.woocommerce-cart .cart_totals_wrapper .tax-total .rpr-subtotals-amount {
  color: #333 !important;
}

/* 4C) “Order Total” row background + text color */
body.woocommerce-cart .cart_totals_wrapper .order-total {
  background-color: lightsteelblue !important;
}
body.woocommerce-cart .cart_totals_wrapper .order-total .rpr-cart-subtotals-label,
body.woocommerce-cart .cart_totals_wrapper .order-total .rpr-subtotals-amount {
  color: blue !important;
}

/* 4D) Make the wrapper <td> a flex container that itself spans 100% width */
body.woocommerce-cart .cart_totals_wrapper .rpr-cart-totals-subtotals-wrapper {
  display:          flex !important;
  justify-content:  flex-end !important;  /* push the mini‐flex-box to the right edge */
  align-items:      center !important;
  width:            100% !important;      /* ensure the full bar spans the three columns */
  margin:           0 !important;
  padding:          0 !important;
  box-sizing:       border-box;
}

/* 4E) Turn the inner container (rpr-mini-totals-flex) into a flex‐row */
body.woocommerce-cart .cart_totals_wrapper .rpr-mini-totals-flex {
  display:          flex !important;
  flex-direction:   row !important;
  width:            auto !important;      /* shrink to the two child <div>s, then get pushed right */
  margin:           0 !important;
  padding:          0 !important;
  box-sizing:       border-box;
  margin-left:      auto !important;      /* extra insurance to keep it flush right */
}

/* 4F) Style the two children inside that flex row—label & amount */
body.woocommerce-cart .cart_totals_wrapper .rpr-mini-totals-flex .rpr-cart-subtotals-label,
body.woocommerce-cart .cart_totals_wrapper .rpr-mini-totals-flex .rpr-subtotals-amount {
  flex:        0 0 auto !important;     /* do not stretch—size to content */
  margin:      0 !important;
  padding:     0.5em 0.75em !important;  /* breathing room inside each cell */
  text-align:  right !important;        /* right-align the text inside each box */
  box-sizing:  border-box;
}

/* 4G) If some plugin/theme overrides these, re-enforce them here too */
body.woocommerce-cart .cart_totals_wrapper .cart_totals .rpr-subtotals-amount,
body.woocommerce-cart .cart_totals_wrapper .cart_totals .rpr-cart-subtotals-label {
  text-align: right !important;
  padding:    0.5em 0.75em !important;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────
   5) OPTIONAL: Add any further tweaks below
   ───────────────────────────────────────────────────────────────────────── */

/* If you want even more vertical separation between Shipping Details 
   and the Cart Totals H2, simply increase the spacer’s height: */
/*
body.woocommerce-cart .cart-totals-spacer {
  height: 3rem !important;
}
*/

/* If you’d rather use “margin” on the wrappers instead of a spacer, you can do something like: */
/*
body.woocommerce-cart .shipping-details-wrapper {
  margin-bottom: 2rem !important;
}
body.woocommerce-cart .cart_totals_wrapper {
  margin-top:  1rem !important;
}
*/

body.woocommerce-cart .cart_totals_wrapper {
  background: transparent !important;
  border:     none        !important;
  margin:     0           !important;
  padding:    0           !important;
}


/* Late Additions */ 

/* ─────────────────────────────────────────────────────────────────────────
   Work on the select shipping address items
   ───────────────────────────────────────────────────────────────────────── */
.rpr-cart-item-container {
	background-color: rgba(135, 171, 201, 0.1) !important; }

body.woocommerce-cart .shop_table.cart{
	margin-bottom: 3px;
	background-color: var(--tblbck-color);
}


/* ─────────────────────────────────────────────────────────────────────────
   Style the “Update cart” button in the Cart page
   ───────────────────────────────────────────────────────────────────────── */
body.woocommerce-cart .actions button[name="update_cart"] {
  background-color: var(--tblbck-color) !important;     /* your accent color */
  color: blue !important;                    /* white text */
  border: 2px solid grey;     /* match border to background */
  padding: 0.5em 1.2em;          /* adjust as needed */
  font-size: 0.95rem;            /* slightly smaller text */
  border-radius: 4px;            /* rounded corners */
  transition: background-color 0.2s ease, color 0.2s ease;
	margin-bottom: 1.5rem;
}

/* Hover / Focus state */
body.woocommerce-cart .actions button[name="update_cart"]:hover,
body.woocommerce-cart .actions button[name="update_cart"]:focus {
  background-color: var(--accent-color) !important;     /* a darker shade for hover */
  border-color:  crimson;
  color: white !important;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------
   If an anchor has “.disabled”, we prevent clicks & make it look grayed‐out. 
--------------------------------------------------------------------------------------- */
.woocommerce .checkout-button.disabled {
  pointer-events: none;
  opacity: 0.5;
  /* optionally adjust the cursor so it isn’t the normal “hover‐hand”: */
  cursor: default;
}
/* ==========================================================================
   CART TOTALS: “Shipping” & “Tax” row backgrounds
   ========================================================================== */

/* Shipping row */
body.woocommerce-cart .cart_totals table tr.shipping {
  background-color: #F3F6FA !important;
}

/* Tax rows (usually .tax-rate or .tax-total) */
body.woocommerce-cart .cart_totals table tr.tax-rate,
body.woocommerce-cart .cart_totals table tr.tax-total {
  background-color: #F3F6FA !important;
}

/* ==========================================================================
   Override RPR’s “Proceed to checkout” link (remove purple & set new color)
   ========================================================================== */

/* Target the wrapper around your custom link */
.rpr-proceed-to-checkout-button .checkout-button {
  background-color: #213c43 !important;  /* your new button color */
  color:            #ffffff !important;  /* white text */
  border-color:     #213c43 !important;  /* match border to background */
}

/* Hover state (slightly darker shade) */
.rpr-proceed-to-checkout-button .checkout-button:hover {
  background-color: #1a2e33 !important;
  color:            #ffffff !important;
}

/* If you ever need to target the link directly (it also has rpr-checkout-button): */
.rpr-checkout-button {
  background-color: #213c43 !important;
  color:            #ffffff !important;
  border-color:     #213c43 !important;
}
.rpr-checkout-button:hover {
  background-color: #1a2e33 !important;
  color:            #ffffff !important;
}

/* Style the confirm checkbox wrapper */
.rpr-attention-wrapper {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.rpr-attention-wrapper input.rpr-confirm-checkbox {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* (Optional) If you want to highlight missing FFL or invalid shipping items: */
.rpr-cart-ffl.invalid select {
  border-color: crimson !important;
}
.rpr-cart-item-container.invalid {
  outline: 1px solid crimson;
  background-color: rgba(255, 230, 230, 0.5);
}

/* If you want the entire <div.rpr-attention-wrapper> to look “grayed out” when disabled */
.rpr-attention-wrapper.rpr-attention-wrapper--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.rpr-update-needed-msg {
  color: crimson;
  font-weight: bold;
  margin-left: 10px;
  transition: opacity 0.5s ease;
  opacity: 1;
  display: inline;
}

.rpr-update-needed-msg.hidden {
  opacity: 0;
  display: none;
}

.rpr-update-needed-msg.fade-in {
  opacity: 1;
  display: inline;
}

/* Right-align the confirmation checkbox container */
.rpr-attention-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 1em 0;
  }


/* ─────────────────────────────────────────────────────────────────────────
   END of rpr-cart.css
   ───────────────────────────────────────────────────────────────────────── */