/**
 * Cart / Checkout / My Account.
 *
 * No dedicated design exists for these pages (booking is a simple online
 * checkout, not a shown Figma screen) — this reskins WooCommerce's own
 * classic markup (woocommerce/cart/cart.php, checkout/form-checkout.php,
 * myaccount/*.php, all left as WooCommerce's defaults, no template
 * overrides) with the theme's existing palette, radius and button styles
 * instead of inventing new markup.
 *
 * Palette reused from main.css: rgb(205, 168, 121) gold accent,
 * rgb(1, 18, 53) navy, #120F0D near-black text, #ECECEC / #E0E3EB / #CACFD9
 * neutrals.
 */

/* Notices live in main.css (loaded on every page) since they can appear
   outside cart/checkout/my-account — e.g. the "added to cart" notice on the
   shop and single-product pages. */

/* Generic text links (coupon toggle, ToS/privacy policy, my-account
   dashboard prose, order links...) — WordPress's own classic-theme-styles.css
   colors and underlines plain <a> by default, which reads as an unstyled
   default blue link next to the theme's gold/navy palette.
   .woocommerce-MyAccount-navigation is excluded: its own rule further down
   is less specific than this one (1 class vs. this rule's class + :not
   pseudo-class) and would otherwise get overridden by it. */
.woocommerce a:not(.button):not(.woocommerce-MyAccount-navigation a) {
  color: rgb(205, 168, 121);
  text-decoration: none;
}

.woocommerce a:not(.button):not(.woocommerce-MyAccount-navigation a):hover {
  color: rgb(1, 18, 53);
  text-decoration: underline;
}

/* Generic WooCommerce buttons (coupon apply, update cart, place order, pay, my-account edit/save...) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  border-radius: 5px;
  background: rgb(205, 168, 121);
  color: white;
  padding: 12px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: 0.3s;
  font-size: 16px;
  border: none;
  font-weight: 600;
  white-space: nowrap;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  color: rgb(205, 168, 121);
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  background: white;
}

.woocommerce a.button.alt,
.woocommerce #place_order {
  background: rgb(1, 18, 53);
  width: 100%;
}

.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
  background: rgb(205, 168, 121);
  color: white;
}

/* Text inputs / selects / textareas across cart (coupon, qty), checkout and account forms */
.woocommerce table.shop_table input.qty,
.woocommerce-page table.shop_table input.qty,
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
  background: #ECECEC;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 15px;
  color: rgb(1, 18, 53);
  width: 100%;
  box-shadow: none;
  transition: 0.3s;
}

.woocommerce .input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  background: #E0E3EB;
  border-color: rgb(205, 168, 121);
}

.woocommerce table.shop_table input.qty {
  width: 70px;
  padding: 8px 10px;
  text-align: center;
}

.woocommerce form .form-row label {
  font-size: 14px;
  font-weight: 500;
  color: #120F0D;
  margin-bottom: 6px;
  display: inline-block;
}

.woocommerce form .form-row {
  margin-bottom: 16px;
}

/* Password field "show password" toggle (account details, login, register) */
.woocommerce .password-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.woocommerce .password-input input[type="password"],
.woocommerce .password-input input[type="text"] {
  padding-inline-end: 2.5rem;
}

.woocommerce .show-password-input {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  color: #120F0D;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  inset-inline-end: 0.7em;
  top: 50%;
  transform: translateY(-50%);
}

.woocommerce .show-password-input::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
}

.woocommerce .show-password-input.display-password::before {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}

.woocommerce input::-ms-reveal {
  display: none;
}



/* Shop tables (cart contents + checkout order review) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
}

.woocommerce table.shop_table thead th {
  background: rgb(1, 18, 53);
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 16px;
  text-align: start;
}

.woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid #ECECEC;
  font-size: 15px;
  color: #120F0D;
  vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce table.shop_table td.product-thumbnail img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
}

.woocommerce table.shop_table td.product-quantity .product-quantity-fixed {
  display: inline-block;
  font-weight: 600;
  color: #120F0D;
}

.woocommerce table.shop_table td.product-name a {
  color: rgb(1, 18, 53);
  font-weight: 600;
}

.woocommerce table.shop_table td.product-remove a.remove {
  color: #c0392b;
  font-size: 20px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
  background: #c0392b;
  color: white;
}

/* td.actions is intentionally left as a plain table-cell (no display:
   flex/grid override) — under table-layout: fixed, giving a colspan cell a
   flex/grid display breaks Chromium's column-width summing and collapses it
   to the first spanned column's width instead of the full row. Its two
   children (.coupon, #update_cart) are laid out inline-flex instead, so they
   flow and wrap like inline content within the normal table-cell box. */
.woocommerce table.shop_table td.actions {
  vertical-align: middle;
}

/* The cart items table pairs narrow icon/image columns with a colspan
   "actions" row (coupon input + 2 buttons). Under table-layout: auto, that
   row's un-wrapped intrinsic width skews auto column sizing and can blow the
   narrow columns up to hundreds of pixels. Fixed layout with explicit widths
   makes column sizing independent of row content. */
.woocommerce-cart-form__contents {
  table-layout: fixed;
}

.woocommerce-cart-form__contents .product-remove {
  width: 40px;
}

.woocommerce-cart-form__contents .product-thumbnail {
  width: 90px;
}

.woocommerce-cart-form__contents .product-quantity {
  width: 110px;
}

.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal {
  width: 130px;
}

.woocommerce table.shop_table .coupon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  vertical-align: middle;
  gap: 10px;
  margin-inline-end: 16px;
  margin-block: 4px;
}

.woocommerce table.shop_table .coupon .input-text {
  width: 200px;
  max-width: 100%;
}

.woocommerce table.shop_table .coupon button.button {
  flex-shrink: 0;
}

/* "Update cart" is secondary to "Apply coupon" — outline it instead of
   duplicating the solid gold so the two actions don't visually compete. */
.woocommerce table.shop_table td.actions button[name="update_cart"] {
  background: transparent;
  color: rgb(205, 168, 121);
  border: 1px solid rgb(205, 168, 121);
  vertical-align: middle;
  margin-block: 4px;
}

.woocommerce table.shop_table td.actions button[name="update_cart"]:hover {
  background: rgb(205, 168, 121);
  color: white;
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

@media only screen and (max-width: 480px) {
  .woocommerce table.shop_table .coupon {
    display: flex;
    width: 100%;
    margin-inline-end: 0;
  }

  .woocommerce table.shop_table .coupon .input-text {
    width: 100%;
  }

  .woocommerce table.shop_table td.actions button[name="update_cart"] {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

@media only screen and (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table td {
    display: block;
    border-bottom: none;
    padding: 6px 16px;
  }

  .woocommerce table.shop_table td[data-title]::before {
    content: attr(data-title);
    font-weight: 600;
    margin-inline-end: 8px;
  }

  .woocommerce table.shop_table tr {
    display: block;
    border-bottom: 1px solid #ECECEC;
    padding-block: 10px;
  }
}

/* Cart totals / cross-sells */
.woocommerce .cart-collaterals {
  display: flex;
  justify-content: flex-end;
}

.woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  max-width: 420px;
  background: #F8FAFF;
  border-radius: 12px;
  padding: 24px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 20px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  margin-bottom: 16px;
}

.woocommerce .cart-collaterals .cart_totals table {
  width: 100%;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
  padding: 10px 0;
  border-bottom: 1px solid #E0E3EB;
  font-size: 15px;
}

.woocommerce .cart-collaterals .cart_totals table tr:last-child th,
.woocommerce .cart-collaterals .cart_totals table tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  color: rgb(1, 18, 53);
  font-size: 18px;
}

.woocommerce .cross-sells {
  margin-block: 40px;
}

/* Checkout layout */
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media only screen and (max-width: 991px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
}

/* WooCommerce reuses "col-1"/"col-2" here too (billing vs. additional-fields
   columns), same collision with Bootstrap's .col-1/.col-2 width utilities
   (8.33%/16.67%) as .woocommerce-Address and #customer_login below — reset
   so each half fills its grid cell instead of shrinking to a sliver. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: auto;
  max-width: none;
  flex: none;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: 20px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 24px;
}

.woocommerce-checkout #order_review {
  background: #F8FAFF;
  border-radius: 12px;
  /* padding: 24px; */
}

.woocommerce-checkout #order_review table.shop_table {
  border: none;
  background: transparent;
  margin-bottom: 20px;
}

.woocommerce-checkout #payment {
  background: #F8FAFF;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid #E0E3EB;
  font-size: 15px;
  color: #120F0D;
}

.woocommerce-checkout #payment ul.payment_methods li:last-of-type {
  border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  font-size: 14px;
  color: #120F0D;
}

/* My Account (logged in) — the nav+content 2-column grid only applies when
   .woocommerce-MyAccount-navigation is actually in the DOM. When logged out,
   WC_Shortcode_My_Account::output() skips myaccount/my-account.php entirely
   and renders form-login.php / form-lost-password.php as the sole child of
   .woocommerce, so an unscoped grid here would force that single child into
   the first (240px) track and leave the 1fr track empty beside it. */
.myaccount-section .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

@media only screen and (max-width: 767px) {
  .myaccount-section .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F8FAFF;
  border-radius: 12px;
  padding: 12px;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  color: rgb(1, 18, 53);
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #E0E3EB;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: rgb(205, 168, 121);
  color: white;
}

.woocommerce-MyAccount-content {
  background: #F8FAFF;
  border-radius: 12px;
  padding: 24px;
}

.woocommerce-MyAccount-content .woocommerce-orders-table {
  background: white;
}

.woocommerce-MyAccount-content mark.order-status {
  background: rgb(205, 168, 121);
  color: white;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
}

.woocommerce-MyAccount-content address {
  background: white;
  border-radius: 8px;
  padding: 16px;
  font-style: normal;
  line-height: 1.8;
}

/* My Account > Addresses (billing/shipping cards) */
.woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  list-style: none;
  padding: 0;
}

@media only screen and (max-width: 767px) {
  .woocommerce-Addresses.col2-set {
    grid-template-columns: 1fr;
  }
}

.woocommerce-Address {
  /* WooCommerce reuses "col-1"/"col-2" for its own column bookkeeping here,
     which collides with Bootstrap's .col-1/.col-2 grid-width utilities
     (8.33%/16.67%) — reset what those impose so the card fills its grid cell. */
  width: auto;
  max-width: none;
  flex: none;

  background: white;
  border-radius: 12px;
  padding: 20px;
}

.woocommerce-Address-title {
  /* This is a <header> tag; reset the sticky site-header rule (main.css)
     that otherwise applies to any <header> element on the page. */
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  background: none;
  padding-block: 0;
  filter: none;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.woocommerce-Address-title h2 {
  font-size: 17px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  margin: 0;
}

.woocommerce-Address-title .edit {
  font-size: 14px;
  font-weight: 600;
  color: rgb(205, 168, 121);
  white-space: nowrap;
}

.woocommerce-Address address {
  background: none;
  padding: 0;
}

/* Login / Register (My Account when logged out) */
.woocommerce-form-login,
.woocommerce-form-register {
  background: #F8FAFF;
  border-radius: 12px;
  padding: 24px;
}

#customer_login.u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media only screen and (max-width: 767px) {
  #customer_login.u-columns {
    grid-template-columns: 1fr;
  }
}

#customer_login .u-column1,
#customer_login .u-column2 {
  /* Same "col-1"/"col-2" vs. Bootstrap .col-1/.col-2 collision as
     .woocommerce-Address — reset so each half fills its grid cell. */
  width: auto;
  max-width: none;
  flex: none;
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
  font-size: 20px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  margin-bottom: 20px;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
  font-size: 14px;
  color: #120F0D;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: 16px;
}

.woocommerce-LostPassword a {
  color: rgb(205, 168, 121);
  font-size: 14px;
  font-weight: 500;
}

/* Thank-you / order-received page */
.woocommerce-order {
  max-width: 760px;
  margin-inline: auto;
}

.woocommerce-thankyou-order-received {
  background: #F8FAFF;
  border: 1px solid #E0E3EB;
  border-radius: 12px;
  padding: 64px 24px 28px;
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: rgb(1, 18, 53);
  text-align: center;
  position: relative;
}

.woocommerce-thankyou-order-received::before {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: block;
  font-size: 42px;
  color: rgb(205, 168, 121);
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.woocommerce-order-overview.woocommerce-thankyou-order-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 24px 20px;
  margin: 0 0 30px;
  background: white;
  border: 1px solid #ECECEC;
  border-radius: 12px;
}

.woocommerce-order-overview li {
  min-width: 0;
  text-align: center;
  font-size: 13px;
  color: #7a7a7a;
  border-inline-end: 1px solid #ECECEC;
}

.woocommerce-order-overview li:last-child {
  border-inline-end: none;
}

.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  overflow-wrap: break-word;
}

@media only screen and (max-width: 600px) {
  .woocommerce-order-overview.woocommerce-thankyou-order-details {
    grid-template-columns: 1fr;
  }

  .woocommerce-order-overview li {
    border-inline-end: none;
    border-bottom: 1px solid #ECECEC;
    padding-bottom: 12px;
  }

  .woocommerce-order-overview li:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: 20px;
  font-weight: 700;
  color: rgb(1, 18, 53);
  margin-bottom: 16px;
}

.woocommerce-customer-details {
  margin-top: 30px;
}

.woocommerce-customer-details address {
  background: #F8FAFF;
  border-radius: 8px;
  padding: 16px;
  font-style: normal;
  line-height: 1.8;
  color: #120F0D;
}

/* WhatsApp follow-up card injected on the thank-you page (see
   woocommerce_thankyou action in inc/woocommerce.php) — kept visually
   distinct from the theme's gold buttons since it's a WhatsApp deep link. */
.wc-thankyou-whatsapp {
  margin-top: 30px;
  background: #E7F9E7;
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.wc-thankyou-whatsapp p {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(1, 18, 53);
}

/* .button is included alongside the theme's own class so the generic
   "a:not(.button)" link-color rule above (which otherwise beats a single
   custom class on specificity) doesn't repaint this text gold. */
.woocommerce a.wc-thankyou-whatsapp-btn.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: white;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 8px;
  transition: 0.3s;
}

.wc-thankyou-whatsapp-btn i {
  font-size: 24px;
}

.woocommerce a.wc-thankyou-whatsapp-btn.button:hover {
  background: #1EBE57;
  color: white;
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

@media only screen and (max-width: 480px) {
  .wc-thankyou-whatsapp-btn {
    width: 100%;
    padding: 16px 20px;
  }
}