/* shipping-form.css */

.shipping-form {
    margin: 0 auto;
    /*! padding: 40px 20px; */
    font-family: "Inter", Arial, sans-serif;
    color: #1e1e1e;
    box-sizing: border-box;
  }
  
  /* heading */
  .shipping-form h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 24px 0;
  }
  
  /* form grid: each .form-row is a grid item */
  .shipping-form form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    align-items: start;
  }
  
  /* wrapper for each label+control */
  .shipping-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  /* full-width row (spans both columns) */
  .shipping-form .form-row--full {
    grid-column: 1 / -1;
  }
  
  /* labels */
  .shipping-form label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    text-transform: capitalize
  }
  
  /* inputs, selects, textarea */
  .shipping-form input,
  .shipping-form select,
  .shipping-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 6px;
    background-color: #fdf8f5; /* Light beige */
    font-size: 0.95rem;
    color: #1e1e1e;
    outline: none;
    box-sizing: border-box;
    min-height: 64px;
    resize: vertical;
  }
  
  /* textarea slightly taller */
  .shipping-form textarea {
    min-height: 70px;
    padding-top: 14px;
  }
  
  /* placeholder color */
  .shipping-form input::placeholder,
  .shipping-form textarea::placeholder {
    color: #bfb6b0;
  }
  
  /* focus state for accessibility */
  .shipping-form input:focus,
  .shipping-form select:focus,
  .shipping-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(90, 32, 18, 0.06);
    outline: none;
  }
  
  /* form actions / button */
  .shipping-form .form-actions {
    display: flex;
    align-items: center;
  }
  
  /* button expands to available width */
  .shipping-form button {
    width: 100%;
    padding: 14px;
    background-color: #5a2012; /* Dark brown */
    color: #ffb14a;           /* Warm orange */
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.06s ease;
    box-shadow: none;
  }
  
  /* hover/focus */
  .shipping-form button:hover,
  .shipping-form button:focus {
    background-color: #43180e;
    transform: translateY(-1px);
  }
  
  /* Responsive: switch to single column at <=768px */
  @media (max-width: 768px) {
    .shipping-form form {
      grid-template-columns: 1fr;
    }
  
    .shipping-form .form-row--full {
      grid-column: 1 / -1;
    }
  
    .shipping-form {
      padding: 24px 16px;
    }
  }
  
  /* small polish for very small screens */
  @media (max-width: 420px) {
    .shipping-form form {
      gap: 14px 14px;
    }
    .shipping-form h2 {
      font-size: 1.5rem;
    }
  }
  
  
  /**********************chipping container****************/
  
  .shipping-container { /* Added a container based on the previous structure for overall layout */
    /*! background-color: #fff; */
    /*! border-radius: 8px; */
    /*! box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    /*! padding: 30px; */
    /* max-width: 600px; */
    /* width: 100%; */
  }
  
  .shipping-container h1 { /* Assuming these headers are still present outside your provided snippet */
    font-size: 24px;
    color: #333;
    margin-bottom: 5px;
  }
  
  .subtitle { /* Assuming these headers are still present outside your provided snippet */
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
  }
  
  .shipping-options {
    margin-bottom: 30px;
  }
  
  /* Base style for each shipping option container (the label) */
  .shipping-option {
    display: flex;
    align-items: center; /* Align items vertically in the middle */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px; /* Adjust padding as needed */
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative; /* Essential for absolute positioning of custom radio */
    min-height: 80px; /* Ensure a minimum height for alignment */
    /* Adjust these styles if the label itself is not the clickable area you want */
  }
  
  .shipping-option:hover {
    border-color: #f0c59a;
  }
  
  /* Style for the selected option - this class needs to be dynamically added by your backend/JS */
  .shipping-option.selected {
    background-color: #fffaf5;
    border-color: #f2a059;
  }
  
  /* Styling the form inside the label - we need to adjust its display */
  .shipping-option > form {
    display: flex; /* Use flexbox for the form to align its children */
    align-items: center; /* Vertically align items within the form */
    margin-right: 15px; /* Space between the radio button and option content */
    position: relative; /* For custom radio button positioning */
    /*! justify-content: flex-end; */
  }
  
  /* Hide the default radio button visually */
  .shipping-option > form > input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Move it off-screen but keep it clickable through the custom pseudo-element */
    position: absolute; /* Relative to its flex container (the form) */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Make it invisible but occupy space for interaction */
    height: 20px;
    cursor: pointer;
    margin: 0; /* Remove default margin */
    z-index: 1; /* Ensure it's above the pseudo-element for clicks */
  }
  
  /* Custom radio button styling */
  /* We'll target the form's input directly for the custom styling */
  .shipping-option > form > input[type="radio"]::before {
    content: '';
    display: block; /* Make it a block to control width/height */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    transition: all 0.2s ease-in-out;
    position: absolute; /* Position relative to the form */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0; /* Behind the actual input for clickability */
  }
  
  /* Style when the radio button is checked (using the selected class on the label) */
  .shipping-option.selected > form > input[type="radio"]::before {
    border-color: #f2a059; /* Orange border for selected */
    background-color: #f2a059; /* Orange background for selected */
    box-shadow: inset 0 0 0 4px #fff; /* Inner white circle */
  }
  
  /* Style for the "float-right" button (likely for submitting the form) */
  .shipping-option > form > button[type="submit"] {
    display: none; /* Hide the submit button, as the radio changes will submit */
  }
  
  
  .option-content {
    flex-grow: 1; /* Takes up available space */
    display: flex;
    flex-direction: column;
    /* Removed margin-left as the form now handles spacing for the radio */
     display: flex;
    justify-content: start;
  gap: 8px; /* optional: space between them */
  }
  
  .option-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
    text-align: ;
    padding-left: 1.8rem;
    display: inline-block;
  }
  
  .options-align-09{
    padding-left: 1.8rem
  }
  
  .option-days {
    font-size: 13px;
    color: #888;
  }
  
  .option-price {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: auto; /* Pushes the price to the right */
  }
  
  .navigation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px; /* Add some space above the buttons */
    margin-bottom: 40px; /* Space for the footer nav if present */
  }
  
  .shipping-container .btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    width:100%;
    border:1px solid #47170D
  }
  
  .back-btn {
    background-color: #fff;
    color: #a0572b;
    border: 1px solid #a0572b;
  }
  
  .back-btn:hover {
    background-color: #f7f7f7;
  }
  
  .next-btn {
    background-color: #a0572b;
    color: #fff;
  }
  
  .next-btn:hover {
    background-color: #8a4a25;
  }
  
  
  
  /* Responsive adjustments */
  @media (max-width: 480px) {
    .shipping-container {
        padding: 20px;
    }
  
    .shipping-container h1 {
        font-size: 20px;
    }
  
    .option-title {
        font-size: 15px;
    }
  
    .option-price {
        font-size: 16px;
    }
  
    .navigation-buttons {
        flex-direction: column;
    }
  
    .shipping-container .btn {
        max-width: 100%;
    }
  }
  
  
  
  .payment-container {
  padding: 2rem; /* p-8 */
  max-width: 595px;
  background-color: #FCF6F0; /* bg-[#FCF6F0] */
  border-radius: 10px; /* rounded-[10px] */
  color: #333333; /* Default text color, adjust if needed */
  }
  
  .payment-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #47140D; /* text-primary (assuming primary is #FF7B00) */
  }
  
  .payment-description {
  font-size: 0.875rem; /* text-sm */
  margin-top: 0.25rem; /* mt-1 */
  }
  
  .payment-requirements {
  margin-top: 2.5rem; /* my-10 (half of y-axis margin) */
  margin-bottom: 2.5rem; /* my-10 (half of y-axis margin) */
  padding: 1.25rem; /* p-5 */
  border: 1px solid #FFA500; /* border border-brand-orange-alt (assuming brand-orange-alt is #FFA500) */
  border-radius: 0.5rem; /* rounded-lg */
  }
  
  .payment-container form > .payment-button {
  width: 100%; /* w-full */
  background-color: #47140D; /* bg-primary */
  font-weight: 600; /* font-semibold */
  color: #FFA500; /* text-brand-orange-alt */
  height: 3rem; /* h-12 */
  border-radius: 0.5rem; /* rounded-lg */
  border: none; /* Add this if you want to remove default button border */
  cursor: pointer; /* Indicate it's clickable */
  transition: background-color 0.3s ease;
  }
  
  .payment-button:hover {
  background-color: #e66a00; /* A slightly darker shade of #FF7B00 for hover */
  }
  
  
  
  
  /* shipping-form.css */
  
  .shipping-form {
  margin: 0 auto;
  /*! padding: 40px 20px; */
  font-family: "Inter", Arial, sans-serif;
  color: #1e1e1e;
  box-sizing: border-box;
  }
  
  /* heading */
  .shipping-form h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 24px 0;
  }
  
  /* form grid: each .form-row is a grid item */
  .shipping-form form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  align-items: start;
  }
  
  /* wrapper for each label+control */
  .shipping-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  }
  
  /* full-width row (spans both columns) */
  .shipping-form .form-row--full {
  grid-column: 1 / -1;
  }
  
  /* labels */
  .shipping-form label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  text-transform: capitalize
  }
  
  /* inputs, selects, textarea */
  .shipping-form input,
  .shipping-form select,
  .shipping-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 6px;
  background-color: #fdf8f5; /* Light beige */
  font-size: 0.95rem;
  color: #1e1e1e;
  outline: none;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  }
  
  /* textarea slightly taller */
  .shipping-form textarea {
  min-height: 70px;
  padding-top: 14px;
  }
  
  /* placeholder color */
  .shipping-form input::placeholder,
  .shipping-form textarea::placeholder {
  color: #bfb6b0;
  }
  
  /* focus state for accessibility */
  .shipping-form input:focus,
  .shipping-form select:focus,
  .shipping-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(90, 32, 18, 0.06);
  outline: none;
  }
  
  /* form actions / button */
  .shipping-form .form-actions {
  display: flex;
  align-items: center;
  }
  
  /* button expands to available width */
  .shipping-form button {
  width: 100%;
  padding: 14px;
  background-color: #5a2012; /* Dark brown */
  color: #ffb14a;           /* Warm orange */
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.06s ease;
  box-shadow: none;
  }
  
  /* hover/focus */
  .shipping-form button:hover,
  .shipping-form button:focus {
  background-color: #43180e;
  transform: translateY(-1px);
  }
  
  /* Responsive: switch to single column at <=768px */
  @media (max-width: 768px) {
  .shipping-form form {
    grid-template-columns: 1fr;
  }
  
  .shipping-form .form-row--full {
    grid-column: 1 / -1;
  }
  
  .shipping-form {
    padding: 24px 16px;
  }
  }
  
  /* small polish for very small screens */
  @media (max-width: 420px) {
  .shipping-form form {
    gap: 14px 14px;
  }
  .shipping-form h2 {
    font-size: 1.5rem;
  }
  }
  
  
  /**********************chipping container****************/
  
  .shipping-container { /* Added a container based on the previous structure for overall layout */
  /*! background-color: #fff; */
  /*! border-radius: 8px; */
  /*! box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  /*! padding: 30px; */
  /* max-width: 600px; */
  width: 100%;
  }
  
  .shipping-container h1 { /* Assuming these headers are still present outside your provided snippet */
  font-size: 24px;
  color: #333;
  margin-bottom: 5px;
  font-weight: 600;
  }
  
  .subtitle { /* Assuming these headers are still present outside your provided snippet */
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
  }
  
  .shipping-options {
  margin-bottom: 30px;
  }
  
  /* Base style for each shipping option container (the label) */
  .shipping-option {
  display: flex;
  align-items: center; /* Align items vertically in the middle */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px 20px; /* Adjust padding as needed */
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative; /* Essential for absolute positioning of custom radio */
  min-height: 80px; /* Ensure a minimum height for alignment */
  /* Adjust these styles if the label itself is not the clickable area you want */
  }
  
  .shipping-option:hover {
  border-color: #f0c59a;
  }
  
  /* Style for the selected option - this class needs to be dynamically added by your backend/JS */
  .shipping-option.selected {
  background-color: #fffaf5;
  border-color: #f2a059;
  }
  
  /* Styling the form inside the label - we need to adjust its display */
  .shipping-option > form {
  display: flex; /* Use flexbox for the form to align its children */
  align-items: center; /* Vertically align items within the form */
  margin-right: 15px; /* Space between the radio button and option content */
  position: relative; /* For custom radio button positioning */
  /*! justify-content: flex-end; */
  }
  
  /* Hide the default radio button visually */
  .shipping-option > form > input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Move it off-screen but keep it clickable through the custom pseudo-element */
  position: absolute; /* Relative to its flex container (the form) */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* Make it invisible but occupy space for interaction */
  height: 20px;
  cursor: pointer;
  margin: 0; /* Remove default margin */
  z-index: 1; /* Ensure it's above the pseudo-element for clicks */
  }
  
  /* Custom radio button styling */
  /* We'll target the form's input directly for the custom styling */
  .shipping-option > form > input[type="radio"]::before {
  content: '';
  display: block; /* Make it a block to control width/height */
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box; /* Include padding/border in element's total width/height */
  transition: all 0.2s ease-in-out;
  position: absolute; /* Position relative to the form */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0; /* Behind the actual input for clickability */
  }
  
  /* Style when the radio button is checked (using the selected class on the label) */
  .shipping-option.selected > form > input[type="radio"]::before {
  border-color: #f2a059; /* Orange border for selected */
  background-color: #f2a059; /* Orange background for selected */
  box-shadow: inset 0 0 0 4px #fff; /* Inner white circle */
  }
  
  /* Style for the "float-right" button (likely for submitting the form) */
  .shipping-option > form > button[type="submit"] {
  display: none; /* Hide the submit button, as the radio changes will submit */
  }
  
  
  .option-content {
  flex-grow: 1; /* Takes up available space */
  display: flex;
  flex-direction: column;
  /* Removed margin-left as the form now handles spacing for the radio */
   display: flex;
  justify-content: start;
  gap: 8px; /* optional: space between them */
  }
  
  .option-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
  text-align: ;
  padding-left: 1.8rem;
  display: inline-block;
  }
  
  .options-align-09{
  padding-left: 1.8rem
  }
  
  .option-days {
  font-size: 13px;
  color: #888;
  }
  
  .option-price {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-left: auto; /* Pushes the price to the right */
  }
  
  .navigation-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px; /* Add some space above the buttons */
  margin-bottom: 40px; /* Space for the footer nav if present */
  }
  
  .shipping-container .btn {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  width:100%;
  border:1px solid #47170D
  }
  
  .back-btn {
  background-color: #fff;
  color: #a0572b;
  border: 1px solid #a0572b;
  }
  
  .back-btn:hover {
  background-color: #f7f7f7;
  }
  
  .next-btn {
  background-color: #a0572b;
  color: #fff;
  }
  
  .next-btn:hover {
  background-color: #8a4a25;
  }
  
  
  
  /* Responsive adjustments */
  @media (max-width: 480px) {
  .shipping-container {
      padding: 20px;
  }
  
  .shipping-container h1 {
      font-size: 20px;
  }
  
  .option-title {
      font-size: 15px;
  }
  
  .option-price {
      font-size: 16px;
  }
  
  .navigation-buttons {
      flex-direction: column;
  }
  
  .shipping-container .btn {
      max-width: 100%;
  }
  }
  
  
  
  .payment-container {
  padding: 2rem; /* p-8 */
  max-width: 595px;
  background-color: #FCF6F0; /* bg-[#FCF6F0] */
  border-radius: 10px; /* rounded-[10px] */
  color: #333333; /* Default text color, adjust if needed */
  }
  
  .payment-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #47140D; /* text-primary (assuming primary is #FF7B00) */
  }
  
  .payment-description {
  font-size: 0.875rem; /* text-sm */
  margin-top: 0.25rem; /* mt-1 */
  }
  
  .payment-requirements {
  margin-top: 2.5rem; /* my-10 (half of y-axis margin) */
  margin-bottom: 2.5rem; /* my-10 (half of y-axis margin) */
  padding: 1.25rem; /* p-5 */
  border: 1px solid #FFA500; /* border border-brand-orange-alt (assuming brand-orange-alt is #FFA500) */
  border-radius: 0.5rem; /* rounded-lg */
  }
  
  .payment-container form > .payment-button {
  width: 100%; /* w-full */
  background-color: #47140D; /* bg-primary */
  font-weight: 600; /* font-semibold */
  color: #FFA500; /* text-brand-orange-alt */
  height: 3rem; /* h-12 */
  border-radius: 0.5rem; /* rounded-lg */
  border: none; /* Add this if you want to remove default button border */
  cursor: pointer; /* Indicate it's clickable */
  transition: background-color 0.3s ease;
  }
  
  .payment-button:hover {
  background-color: #e66a00; /* A slightly darker shade of #FF7B00 for hover */
  }
  
  
  
  
  
  
  .shipping-card {
  padding: 2rem; /* equivalent to p-8 */
  background-color: #FCF6F0;
  border-radius: 10px;
  }
  
  .shipping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  
  .shipping-title {
  font-size: 1.5rem; /* ~ text-2xl */
  font-weight: 600;  /* font-semibold */
  color: #47140D; /* replace with your "text-primary" */
  }
  
  .edit-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  color: #47140D;
  }
  
  .recipient-name {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  margin-top: 1.5rem; /* mt-6 */
  margin-bottom: 0.5rem; /* mb-2 */
  }
  
  .address-line {
  font-size: 0.875rem;
  color: #667185;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  }
  
  .contact-info {
  font-size: 0.875rem;
  color: #667185;
  margin: 0; /* remove default pre margin */
  white-space: pre-wrap; /* allows wrapping if text is long */
  }
  
  .colt {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* space between cards */
  }
  
  .shipping-card {
  flex: 1 1 100%; /* default: full width on mobile */
  box-sizing: border-box;
  }
  
  /* On larger screens, 50% each */
  @media (min-width: 768px) {
  .shipping-card {
    flex: 1 1 calc(50% - 1rem); /* 50% width minus the gap */
  }
  }
  
  
  
  
  
  
  /* --- Container --- */
  .checkout-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
    padding: 10px;
  }
  
  @media (min-width: 1024px) {
    .checkout-container {
      grid-template-columns: 2fr 1fr;
      gap: 6rem;
    }
  }
  
  /* --- Cart Items --- */
  .cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .cart-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid #f5f5f5;
    padding: 0.75rem 0;
  }
  
  @media (min-width: 768px) {
    .cart-item {
      flex-direction: row;
      gap: 3rem;
      height: 180px;
    }
  }
  
  .cart-image {
    flex: 1;
    max-width: 300px;
    border: none;
  }
  
  .cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .cart-details {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .item-title {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .item-title a{
    color: #47140D;
  }
  
  .item-variant,
  .item-quantity {
    color: #0D0B0E;
    font-size: 0.875rem;
    font-weight: 300;
  }
  
  .cart-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .item-price {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: right;
  }
  
  .remove-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .remove-btn span {
    color: #dc2626; /* Tailwind red-600 */
    font-size: 0.875rem;
  }
  
  /* --- Order Summary --- */
  .order-summary {
    border: 1px solid #E0D8D6;
    border-radius: 12px;
    margin-bottom: 2rem;
  }
  
  .summary-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #E0D8D6;
    font-size: 1.5rem;
    font-weight: 600;
  }
  
  .summary-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 300;
    color: #484747;
  }
  
  .summary-row p:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  
  .summary-row.total {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
  }
  
  /* --- Checkout Buttons --- */
  .checkout-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  
  }
  
  .checkout-actions .btn-back{
    border-color:#47170D;
    color: #47170D;
    width:100%
  }
  
  .checkout-actions .btn-order{
    background: #47170D;
  }
  
  @media (min-width: 768px) {
    .checkout-actions {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
  }
  
  .checkout-actions button {
    height: 3rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
  }
  
  .btn-back {
    border: 1px solid var(--primary, #0070f3);
    color: var(--primary, #0070f3);
    background: transparent;
  }
  
  .btn-order {
    background: var(--primary, #0070f3);
    color: var(--brand-orange-alt, #ff7a00);
    border: none;
  }