/* Selina Theme - WooCommerce UI enhancements
   Loaded after front.css.
*/

/* CART */
.woocommerce-cart .woocommerce,
.woocommerce-page.woocommerce-cart .woocommerce{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-page.woocommerce-cart .woocommerce-cart-form{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(16,24,40,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06) !important;
  padding: 18px !important;
}

html.selina-dark-mode .woocommerce-cart .woocommerce-cart-form,
html.selina-dark-mode.woocommerce-cart .woocommerce-cart-form{
  background: rgba(17,24,39,0.55) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.woocommerce-cart table.shop_table.cart{
  width: 100% !important;
  border: 0 !important;
  border-collapse: collapse !important;
}

.woocommerce-cart table.shop_table.cart thead th{
  border: 0 !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: transparent !important;
}

.woocommerce-cart table.shop_table.cart tbody td{
  border-top: 1px solid rgba(16,24,40,0.08) !important;
  padding: 14px 12px !important;
  vertical-align: middle !important;
}

html.selina-dark-mode .woocommerce-cart table.shop_table.cart tbody td{
  border-top-color: rgba(255,255,255,0.10) !important;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.woocommerce-cart table.shop_table.cart td.product-name a{
  font-weight: 800 !important;
  text-decoration: none !important;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove{
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(16,24,40,0.12) !important;
  background: rgba(16,24,40,0.04) !important;
  color: inherit !important;
  line-height: 1 !important;
}

html.selina-dark-mode .woocommerce-cart table.shop_table.cart td.product-remove a.remove{
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
}

.woocommerce-cart table.shop_table.cart td.actions{
  border: 0 !important;
  padding-top: 16px !important;
}

.woocommerce-cart table.shop_table.cart td.actions .coupon{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text{
  border-radius: 12px !important;
  min-width: 220px !important;
  padding: 10px 12px !important;
}

.woocommerce-cart table.shop_table.cart td.actions button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .woocommerce-cart-form__contents button.button{
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-weight: 800 !important;
}

/* Cart totals */
.woocommerce-cart .cart-collaterals .cart_totals{
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(16,24,40,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06) !important;
  padding: 16px !important;
}

html.selina-dark-mode .woocommerce-cart .cart-collaterals .cart_totals{
  background: rgba(17,24,39,0.55) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2{
  font-size: 18px !important;
  margin: 0 0 12px !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table{
  border: 0 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals th,
.woocommerce-cart .cart-collaterals .cart_totals td{
  padding: 10px 0 !important;
  border: 0 !important;
}

/* Make cart responsive */
@media (max-width: 820px){
  .woocommerce-cart table.shop_table.cart thead{ display:none !important; }

  /* Ensure the table doesn't enforce a narrow layout on mobile */
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody{
    display: block !important;
    width: 100% !important;
  }

  /* The theme's base CSS turns ALL <tr> into a grid on mobile.
     That breaks the coupon/actions row and can cause clipped buttons.
     Reset all non-cart-item rows back to normal flow. */
  .woocommerce-cart table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item){
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cart item rows as cards (avoid Woo default broken layout on mobile) */
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 72px 1fr auto !important;
    grid-template-areas:
      "thumb name remove"
      "thumb price price"
      "thumb quantity quantity"
      "thumb subtotal subtotal";
    gap: 10px 12px !important;
    padding: 14px !important;
    margin: 0 0 12px !important;
    border: 1px solid rgba(16,24,40,0.10) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.85) !important;
    box-shadow: 0 10px 24px rgba(16,24,40,0.06) !important;
  }

  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    background: rgba(17,24,39,0.55) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td{
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: start !important;
  }

  /* Disable Woo default responsive labels only where they break the card layout.
     Keep labels available for Price/Qty/Subtotal (we style them below). */
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-name::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-remove::before{
    content: none !important;
    display: none !important;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail{
    grid-area: thumb;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-name{
    grid-area: name;
    align-self: center;
    text-align: start !important;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-remove{
    grid-area: remove;
    justify-self: end;
    align-self: start;
  }

  /* Detail rows (Price / Qty / Subtotal) */
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(16,24,40,0.08) !important;
  }

  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{
    border-top-color: rgba(255,255,255,0.10) !important;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price{ grid-area: price; }
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity{ grid-area: quantity; }
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{ grid-area: subtotal; }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before{
    content: attr(data-title) ":" !important;
    display: inline-block !important;
    font-weight: 900;
    color: rgba(17,24,39,0.72);
  }

  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before{
    color: rgba(255,255,255,0.75);
  }

  /* Keep prices/currencies on one line (avoid awkward wrapping) */
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item .woocommerce-Price-amount,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item .woocommerce-Price-amount *{
    white-space: nowrap !important;
  }

  /* Quantity input sizing */
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity .quantity{
    margin: 0 !important;
  }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity input.qty{
    width: 96px !important;
    max-width: 100% !important;
  }

  /* Actions row (Coupon/Update) */
  .woocommerce-cart table.shop_table.cart td.actions .coupon{
    float: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text{
    width: 100% !important;
    min-width: 0 !important;
  }

  .woocommerce-cart table.shop_table.cart td.actions .coupon button,
  .woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"]{
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
  }

  .woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"]{
    margin-top: 10px !important;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}

/* RTL tweaks */
html[dir="rtl"] .woocommerce-cart table.shop_table.cart td.actions .coupon{
  justify-content: flex-start !important;
}

html[dir="rtl"] .woocommerce-cart table.shop_table.cart td.product-remove{
  text-align: left !important;
}


/* ------------------------------------------------------------
   WooCommerce Cart Block (wc-block) styling
   Note: WooCommerce Cart page may use blocks instead of classic shortcode.
------------------------------------------------------------ */
html[dir="rtl"] .wc-block-cart,
html[dir="rtl"] .wc-block-components-main,
html[dir="rtl"] .wc-block-components-sidebar{ direction: rtl; }

.wc-block-cart{ margin-top: 18px; }

.wc-block-components-main{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 16px;
}

.wc-block-components-sidebar{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 16px;
}

.wc-block-cart-items{ border-top: 0 !important; }

.wc-block-cart-items__row{
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.wc-block-cart-item__image img{ border-radius: 12px; }

.wc-block-cart-item__remove-link{
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.wc-block-components-totals-wrapper{
  border: 0 !important;
  padding: 0 !important;
}

.wc-block-components-totals-item{
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.wc-block-components-totals-item:last-child{ border-bottom: 0 !important; }

.wc-block-components-button{
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.wc-block-components-button:not(.is-link){
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.wc-block-cart__submit-container{ margin-top: 12px !important; }

.wc-block-components-panel__button{ border-radius: 12px !important; }

@media (max-width: 782px){
  .wc-block-components-main,
  .wc-block-components-sidebar{ padding: 12px; }
}


/* ---------------------------------------------------------
   Selina Theme - Classic Cart (Shortcode) Accent Styling
   Applies on Cart page and when using [selina_cart] wrapper.
--------------------------------------------------------- */

.woocommerce-cart .woocommerce-cart-form button.button,
.woocommerce-cart .woocommerce-cart-form .button,
.woocommerce-cart table.shop_table.cart td.actions button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.selina-wc-cart .woocommerce-cart-form button.button,
.selina-wc-cart .woocommerce-cart-form .button,
.selina-wc-cart table.shop_table.cart td.actions button,
.selina-wc-cart .wc-proceed-to-checkout a.checkout-button{
  background: var(--selina-accent) !important;
  color: #fff !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce-cart .woocommerce-cart-form button.button:hover,
.woocommerce-cart .woocommerce-cart-form .button:hover,
.woocommerce-cart table.shop_table.cart td.actions button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.selina-wc-cart .woocommerce-cart-form button.button:hover,
.selina-wc-cart .woocommerce-cart-form .button:hover,
.selina-wc-cart table.shop_table.cart td.actions button:hover,
.selina-wc-cart .wc-proceed-to-checkout a.checkout-button:hover{
  filter: brightness(.93);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16,24,40,0.14) !important;
}

/* Disabled update cart */
.woocommerce-cart button[name="update_cart"][disabled],
.selina-wc-cart button[name="update_cart"][disabled]{
  background: rgba(16,24,40,0.10) !important;
  color: rgba(16,24,40,0.65) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}
html.selina-dark-mode.woocommerce-cart button[name="update_cart"][disabled],
html.selina-dark-mode .selina-wc-cart button[name="update_cart"][disabled]{
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.75) !important;
}

/* Make table headings consistent with RTL */
html[dir="rtl"] .woocommerce-cart table.shop_table th,
html[dir="rtl"] .selina-wc-cart table.shop_table th{
  text-align: right !important;
}



/* --- SELINA Woo Shortcodes Variants --- */
.selina-wc-shop.selina-wc-shop-list ul.products{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.selina-wc-shop.selina-wc-shop-list ul.products li.product{
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.06) !important;
}
html.selina-dark-mode .selina-wc-shop.selina-wc-shop-list ul.products li.product{
  background: rgba(17,24,39,.55) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.selina-wc-shop.selina-wc-shop-list ul.products li.product a.woocommerce-LoopProduct-link{
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
}
.selina-wc-shop.selina-wc-shop-list ul.products li.product a img{
  margin: 0 !important;
  border-radius: 14px !important;
}
.selina-wc-shop.selina-wc-shop-list ul.products li.product h2,
.selina-wc-shop.selina-wc-shop-list ul.products li.product .woocommerce-loop-product__title{
  margin: 0 0 6px !important;
}
@media (max-width: 782px){
  .selina-wc-shop.selina-wc-shop-list ul.products li.product,
  .selina-wc-shop.selina-wc-shop-list ul.products li.product a.woocommerce-LoopProduct-link{
    grid-template-columns: 1fr !important;
  }
}

/* Featured categories cards */
.selina-wc-featured-categories .woocommerce ul.products,
.selina-wc-featured-categories ul.products{
  gap: 14px !important;
}
.selina-wc-featured-categories-cards ul.products li.product-category a{
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.selina-wc-featured-categories-cards ul.products li.product-category a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(16,24,40,.10) !important;
  filter: brightness(.98);
}
html.selina-dark-mode .selina-wc-featured-categories-cards ul.products li.product-category a{
  background: rgba(17,24,39,.55) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Mini cart basic styling */
.selina-wc-mini-cart{
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
  padding: 14px;
}
html.selina-dark-mode .selina-wc-mini-cart{
  background: rgba(17,24,39,.55);
  border-color: rgba(255,255,255,.10);
}


/* --------------------------------------------------------------------------
 * Modern Checkout (Theme)
 * -------------------------------------------------------------------------- */

/* Page background */
body.selina-checkout-modern{
  background: #fbf8f2;
}

/* Do NOT pad the <body> (it creates a gap above the header/nav). */
body.selina-checkout-modern.woocommerce-checkout{
  padding: 0;
}

/* Add vertical spacing only for the checkout content area. */
body.selina-checkout-modern .selina-wc-checkout{
  padding: 20px 0;
}

/* Layout grid */
body.selina-checkout-modern .selina-checkout-modern-wrap{
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 18px;
}

body.selina-checkout-modern .selina-checkout-grid{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  body.selina-checkout-modern .selina-checkout-grid{
    grid-template-columns: 1fr;
  }
}

/* Mobile: avoid excessive side padding caused by nested theme containers.
   The page template already applies horizontal padding; so on small screens
   we remove the extra padding here to keep the checkout cards full-width. */
@media (max-width: 768px){
  body.selina-checkout-modern .selina-checkout-modern-wrap{
    padding-inline: 0;
  }

  /* Make paired fields stack to avoid narrow half-width inputs on phones */
  body.selina-checkout-modern .woocommerce form .form-row-first,
  body.selina-checkout-modern .woocommerce form .form-row-last{
    float: none !important;
    width: 100% !important;
  }
}

/* Card base */
body.selina-checkout-modern .selina-checkout-card{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16,24,40,.08);
  padding: 18px;
}

/* Card headers */
body.selina-checkout-modern .selina-checkout-card__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body.selina-checkout-modern .selina-checkout-card__kicker{
  font-size: 14px;
  font-weight: 800;
  color: rgba(17,24,39,.88);
}

body.selina-checkout-modern .selina-checkout-card__sub{
  font-size: 13px;
  margin-top: 4px;
  color: rgba(17,24,39,.60);
}

body.selina-checkout-modern .selina-secure-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #1f9d55;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

body.selina-checkout-modern .selina-checkout-card__title{
  font-size: 14px;
  font-weight: 800;
  color: rgba(17,24,39,.88);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(246,177,0,.35);
  background: rgba(246,177,0,.12);
  margin-bottom: 14px;
}

/* Summary header */
body.selina-checkout-modern .selina-checkout-summary-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body.selina-checkout-modern .selina-checkout-edit-cart{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.85);
  color: rgba(17,24,39,.85);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

body.selina-checkout-modern .selina-checkout-edit-cart:hover{
  filter: brightness(.98);
}

/* Coupon box */
body.selina-checkout-modern .selina-checkout-coupon{
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 16px;
  background: rgba(248,250,252,.95);
  padding: 14px;
  margin-bottom: 14px;
}

body.selina-checkout-modern .selina-checkout-coupon__title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
  color: rgba(17,24,39,.80);
}

body.selina-checkout-modern .woocommerce-form-coupon-toggle{
  display: none !important;
}

body.selina-checkout-modern form.checkout_coupon{
  display: block !important;
  margin: 0 !important;
}

body.selina-checkout-modern form.checkout_coupon p{
  margin: 0 !important;
}

body.selina-checkout-modern form.checkout_coupon .form-row{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

body.selina-checkout-modern form.checkout_coupon .form-row-first,
body.selina-checkout-modern form.checkout_coupon .form-row-last{
  width: auto !important;
}

body.selina-checkout-modern form.checkout_coupon .input-text{
  width: 100% !important;
}

body.selina-checkout-modern form.checkout_coupon .button{
  background: #f6b100 !important;
  border-color: #f6b100 !important;
  color: #1b1f2a !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.selina-checkout-modern form.checkout_coupon .button:hover{
  filter: brightness(.96);
}

/* Inputs */
body.selina-checkout-modern .woocommerce form .form-row label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.78);
  margin-bottom: 6px;
}

body.selina-checkout-modern .woocommerce form .form-row .required{
  color: #e11d48;
}

body.selina-checkout-modern .woocommerce form .form-row input.input-text,
body.selina-checkout-modern .woocommerce form .form-row textarea,
body.selina-checkout-modern .woocommerce form .form-row select{
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.98);
  padding: 12px 14px;
  min-height: 44px;
  box-shadow: none;
}



/* Ensure full-width fields inside the modern checkout layout */
body.selina-checkout-modern #customer_details,
body.selina-checkout-modern #customer_details.col2-set{
  width: 100%;
  float: none;
}

body.selina-checkout-modern #customer_details .col-1,
body.selina-checkout-modern #customer_details .col-2{
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.selina-checkout-modern .woocommerce form .form-row input.input-text,
body.selina-checkout-modern .woocommerce form .form-row textarea,
body.selina-checkout-modern .woocommerce form .form-row select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.selina-checkout-modern .select2-container{
  width: 100% !important;
  max-width: 100%;
}

body.selina-checkout-modern .woocommerce form .form-row textarea{
  min-height: 110px;
  resize: vertical;
}

/* Select2 */
body.selina-checkout-modern .select2-container--default .select2-selection--single{
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.12);
  min-height: 44px;
}

body.selina-checkout-modern .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 42px;
  padding-inline: 14px;
}

body.selina-checkout-modern .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 42px;
  inset-inline-end: 10px;
}

/* Order review table */
body.selina-checkout-modern #order_review{
  background: transparent;
}

body.selina-checkout-modern .woocommerce-checkout-review-order-table{
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
}

body.selina-checkout-modern .woocommerce-checkout-review-order-table th,
body.selina-checkout-modern .woocommerce-checkout-review-order-table td{
  padding: 12px 14px;
  border-color: rgba(16,24,40,.08);
}

body.selina-checkout-modern .woocommerce-checkout-review-order-table thead th{
  background: rgba(248,250,252,.95);
  font-weight: 900;
}

body.selina-checkout-modern .woocommerce-checkout-review-order-table tfoot th,
body.selina-checkout-modern .woocommerce-checkout-review-order-table tfoot td{
  background: rgba(248,250,252,.60);
  font-weight: 900;
}

/* Payment section */
body.selina-checkout-modern #payment{
  background: transparent;
  border: 0;
}

body.selina-checkout-modern #payment ul.payment_methods{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 16px;
  padding: 12px 14px;
}

body.selina-checkout-modern #payment ul.payment_methods li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(16,24,40,.08);
}

body.selina-checkout-modern #payment ul.payment_methods li:last-child{
  border-bottom: 0;
}

body.selina-checkout-modern #payment div.payment_box{
  border-radius: 14px;
  background: rgba(248,250,252,.95);
  border: 1px solid rgba(16,24,40,.08);
}

/* Place order button */
body.selina-checkout-modern #payment #place_order,
body.selina-checkout-modern .woocommerce a.button.alt,
body.selina-checkout-modern .woocommerce button.button.alt,
body.selina-checkout-modern .woocommerce input.button.alt{
  background: #f6b100 !important;
  border-color: #f6b100 !important;
  color: #1b1f2a !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.selina-checkout-modern #payment #place_order{
  width: 100% !important;
}

body.selina-checkout-modern #payment #place_order:hover{
  filter: brightness(.96);
}

/* Note box */
body.selina-checkout-modern .selina-checkout-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(246,177,0,.35);
  background: rgba(246,177,0,.12);
  color: rgba(17,24,39,.78);
  font-size: 13px;
}

body.selina-checkout-modern .selina-checkout-note a{
  color: rgba(17,24,39,.85);
  font-weight: 800;
  text-decoration: none;
}

body.selina-checkout-modern .selina-checkout-note a:hover{
  text-decoration: underline;
}

/* Hide default "Your order" heading (we render a custom header) */
body.selina-checkout-modern #order_review_heading{
  display: none !important;
}

/* Woo Blocks checkout (basic alignment to the same vibe) */
body.selina-checkout-modern .wc-block-checkout{
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 18px;
}

body.selina-checkout-modern .wc-block-checkout__main,
body.selina-checkout-modern .wc-block-checkout__sidebar{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16,24,40,.08);
}

body.selina-checkout-modern .wc-block-checkout__main{
  padding: 18px;
}

body.selina-checkout-modern .wc-block-checkout__sidebar{
  padding: 18px;
}

body.selina-checkout-modern .wc-block-components-button:not(.is-link){
  border-radius: 16px !important;
}

body.selina-checkout-modern .wc-block-components-button.wc-block-components-checkout-place-order-button{
  background: #f6b100 !important;
  border-color: #f6b100 !important;
  color: #1b1f2a !important;
  font-weight: 900 !important;
}

body.selina-checkout-modern .wc-block-components-text-input input,
body.selina-checkout-modern .wc-block-components-text-input textarea,
body.selina-checkout-modern .wc-block-components-select select,
body.selina-checkout-modern .wc-block-components-combobox .components-combobox-control__input{
  border-radius: 14px !important;
  border-color: rgba(16,24,40,.14) !important;
  padding: 12px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.selina-checkout-modern .wc-block-components-text-input input:focus,
body.selina-checkout-modern .wc-block-components-text-input textarea:focus,
body.selina-checkout-modern .wc-block-components-select select:focus,
body.selina-checkout-modern .wc-block-components-combobox .components-combobox-control__input:focus{
  outline: none !important;
  border-color: rgba(246,177,0,.9) !important;
  box-shadow: 0 0 0 4px rgba(246,177,0,.18) !important;
}




/* --------------------------------------------------------------------------
   WooCommerce – Shop / Archives: Center the product grid rows
   Fixes RTL float alignment issues (rows split left/right) by switching to flex.
---------------------------------------------------------------------------*/

/* Add breathing room below the header/breaking-news bar on WooCommerce archives */
body.post-type-archive-product .selina-woo-main,
body.tax-product_cat .selina-woo-main,
body.tax-product_tag .selina-woo-main{
  /* Default theme padding-top is 28px; bump it slightly for a nicer separation */
  padding-top: 46px !important;
}

/* Match the same spacing on Single Product pages (so product info doesn't stick to the header) */
body.single-product .selina-woo-main{
  padding-top: 46px !important;
}

body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 22px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style: none !important;
}

body.post-type-archive-product .woocommerce ul.products::before,
body.post-type-archive-product .woocommerce ul.products::after,
body.tax-product_cat .woocommerce ul.products::before,
body.tax-product_cat .woocommerce ul.products::after,
body.tax-product_tag .woocommerce ul.products::before,
body.tax-product_tag .woocommerce ul.products::after{
  display: none !important;
}

body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product,
body.tax-product_tag .woocommerce ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product{
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 calc(25% - 22px) !important;
  max-width: calc(25% - 22px) !important;
}

/* Center product title/price/button inside the card (Shop/Archives) */
body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product,
body.tax-product_tag .woocommerce ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product{
  text-align: center !important;
}

body.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product .woocommerce ul.products li.product .price,
body.tax-product_cat .woocommerce ul.products li.product .price,
body.tax-product_tag .woocommerce ul.products li.product .price{
  text-align: center !important;
}

/* Align the product price to the edge (RTL right / LTR left) inside archive cards */
body.post-type-archive-product .woocommerce ul.products li.product .price,
body.tax-product_cat .woocommerce ul.products li.product .price,
body.tax-product_tag .woocommerce ul.products li.product .price{
  display: block;
  width: 100%;
  text-align: start !important;
}
body.rtl.post-type-archive-product .woocommerce ul.products li.product .price,
body.rtl.tax-product_cat .woocommerce ul.products li.product .price,
body.rtl.tax-product_tag .woocommerce ul.products li.product .price{
  text-align: right !important;
}
body:not(.rtl).post-type-archive-product .woocommerce ul.products li.product .price,
body:not(.rtl).tax-product_cat .woocommerce ul.products li.product .price,
body:not(.rtl).tax-product_tag .woocommerce ul.products li.product .price{
  text-align: left !important;
}


body.post-type-archive-product .woocommerce ul.products li.product a.button,
body.tax-product_cat .woocommerce ul.products li.product a.button,
body.tax-product_tag .woocommerce ul.products li.product a.button,
body.post-type-archive-product .woocommerce ul.products li.product button.button,
body.tax-product_cat .woocommerce ul.products li.product button.button,
body.tax-product_tag .woocommerce ul.products li.product button.button{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.post-type-archive-product .woocommerce ul.products li.first,
body.post-type-archive-product .woocommerce ul.products li.last,
body.tax-product_cat .woocommerce ul.products li.first,
body.tax-product_cat .woocommerce ul.products li.last,
body.tax-product_tag .woocommerce ul.products li.first,
body.tax-product_tag .woocommerce ul.products li.last{
  clear: none !important;
}

@media (max-width: 1100px){
  body.post-type-archive-product .woocommerce ul.products li.product,
  body.tax-product_cat .woocommerce ul.products li.product,
  body.tax-product_tag .woocommerce ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product{
    flex: 0 0 calc(33.333% - 22px) !important;
    max-width: calc(33.333% - 22px) !important;
  }
}

@media (max-width: 840px){
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products{
    gap: 16px !important;
  }

  body.post-type-archive-product .woocommerce ul.products li.product,
  body.tax-product_cat .woocommerce ul.products li.product,
  body.tax-product_tag .woocommerce ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product{
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}

@media (max-width: 520px){
  body.post-type-archive-product .woocommerce ul.products li.product,
  body.tax-product_cat .woocommerce ul.products li.product,
  body.tax-product_tag .woocommerce ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* --------------------------------------------------------------------------
   WooCommerce – Single Product: Related/Upsells/Cross-sells
   Center the last row (flex instead of grid) + add a soft heading container.
---------------------------------------------------------------------------*/

/*
  IMPORTANT:
  - On many WooCommerce layouts the product image gallery and the summary are floated.
  - If the related/upsells section doesn't clear those floats, any background on the
    heading/section can appear "behind" the product info area.
  - We explicitly clear floats and keep the section background transparent, then
    render the soft colored bar ONLY on the heading itself.
*/

body.single-product .selina-content section.related.products,
body.single-product .selina-content section.upsells.products,
body.single-product .selina-content section.cross-sells,
body.single-product .woocommerce section.related.products,
body.single-product .woocommerce section.upsells.products,
body.single-product .woocommerce section.cross-sells{
  clear: both !important;
  float: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 22px !important;
}

body.single-product .selina-content section.related.products > h2,
body.single-product .selina-content section.upsells.products > h2,
body.single-product .selina-content section.cross-sells > h2,
body.single-product .woocommerce section.related.products > h2,
body.single-product .woocommerce section.upsells.products > h2,
body.single-product .woocommerce section.cross-sells > h2{
  display: block;
  clear: both;
  /*
    Prevent the heading bar from overflowing the container in boxed layouts.
    WooCommerce headings often use width:100% and we add padding+border;
    without border-box the element can become wider than its parent.
  */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 6px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(246, 177, 0, 0.10);
  border: 1px solid rgba(246, 177, 0, 0.16);
  color: #101828;
  font-weight: 900;
  text-align: center;
}

html.selina-dark-mode body.single-product .selina-content section.related.products > h2,
html.selina-dark-mode body.single-product .selina-content section.upsells.products > h2,
html.selina-dark-mode body.single-product .selina-content section.cross-sells > h2,
html.selina-dark-mode body.single-product .woocommerce section.related.products > h2,
html.selina-dark-mode body.single-product .woocommerce section.upsells.products > h2,
html.selina-dark-mode body.single-product .woocommerce section.cross-sells > h2{
  background: rgba(246, 177, 0, 0.12);
  border-color: rgba(246, 177, 0, 0.22);
  color: #f3f4f6;
}

body.single-product .selina-content section.related.products ul.products,
body.single-product .selina-content section.upsells.products ul.products,
body.single-product .selina-content section.cross-sells ul.products,
body.single-product .woocommerce section.related.products ul.products,
body.single-product .woocommerce section.upsells.products ul.products,
body.single-product .woocommerce section.cross-sells ul.products{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.single-product .selina-content section.related.products ul.products::before,
body.single-product .selina-content section.related.products ul.products::after,
body.single-product .selina-content section.upsells.products ul.products::before,
body.single-product .selina-content section.upsells.products ul.products::after,
body.single-product .selina-content section.cross-sells ul.products::before,
body.single-product .selina-content section.cross-sells ul.products::after,
body.single-product .woocommerce section.related.products ul.products::before,
body.single-product .woocommerce section.related.products ul.products::after,
body.single-product .woocommerce section.upsells.products ul.products::before,
body.single-product .woocommerce section.upsells.products ul.products::after,
body.single-product .woocommerce section.cross-sells ul.products::before,
body.single-product .woocommerce section.cross-sells ul.products::after{
  display: none !important;
}

body.single-product .selina-content section.related.products ul.products li.product,
body.single-product .selina-content section.upsells.products ul.products li.product,
body.single-product .selina-content section.cross-sells ul.products li.product,
body.single-product .woocommerce section.related.products ul.products li.product,
body.single-product .woocommerce section.upsells.products ul.products li.product,
body.single-product .woocommerce section.cross-sells ul.products li.product{
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 calc(25% - 22px) !important;
  max-width: calc(25% - 22px) !important;
  text-align: center !important;
}

@media (max-width: 1100px){
  body.single-product .selina-content section.related.products ul.products li.product,
  body.single-product .selina-content section.upsells.products ul.products li.product,
  body.single-product .selina-content section.cross-sells ul.products li.product,
  body.single-product .woocommerce section.related.products ul.products li.product,
  body.single-product .woocommerce section.upsells.products ul.products li.product,
  body.single-product .woocommerce section.cross-sells ul.products li.product{
    flex: 0 0 calc(33.333% - 22px) !important;
    max-width: calc(33.333% - 22px) !important;
  }
}

@media (max-width: 840px){
  body.single-product .selina-content section.related.products ul.products,
  body.single-product .selina-content section.upsells.products ul.products,
  body.single-product .selina-content section.cross-sells ul.products,
  body.single-product .woocommerce section.related.products ul.products,
  body.single-product .woocommerce section.upsells.products ul.products,
  body.single-product .woocommerce section.cross-sells ul.products{
    gap: 16px !important;
  }

  body.single-product .selina-content section.related.products ul.products li.product,
  body.single-product .selina-content section.upsells.products ul.products li.product,
  body.single-product .selina-content section.cross-sells ul.products li.product,
  body.single-product .woocommerce section.related.products ul.products li.product,
  body.single-product .woocommerce section.upsells.products ul.products li.product,
  body.single-product .woocommerce section.cross-sells ul.products li.product{
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}

@media (max-width: 520px){
  body.single-product .selina-content section.related.products ul.products li.product,
  body.single-product .selina-content section.upsells.products ul.products li.product,
  body.single-product .selina-content section.cross-sells ul.products li.product,
  body.single-product .woocommerce section.related.products ul.products li.product,
  body.single-product .woocommerce section.upsells.products ul.products li.product,
  body.single-product .woocommerce section.cross-sells ul.products li.product{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* Keep prices readable on small screens (avoid digit/currency splitting) */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.woocommerce-Price-currencySymbol{
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* --------------------------------------------------------------------------
   WooCommerce – Single Product: Price alignment (MAIN product only)
---------------------------------------------------------------------------*/
/* Important: Related / Upsells products are rendered inside the same div.product wrapper.
   So we MUST target only the summary (entry-summary) area to avoid affecting loop cards. */
body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price,
body.single-product div.product .summary .price,
body.single-product .summary.entry-summary p.price,
body.single-product .summary.entry-summary span.price,
body.single-product .summary.entry-summary .price,
body.single-product .woocommerce div.product .summary p.price,
body.single-product .woocommerce div.product .summary span.price,
body.single-product .woocommerce div.product .summary .price{
  display: block;
  width: 100%;
  text-align: start !important;
}

body.rtl.single-product div.product .summary p.price,
body.rtl.single-product div.product .summary span.price,
body.rtl.single-product div.product .summary .price,
body.rtl.single-product .summary.entry-summary p.price,
body.rtl.single-product .summary.entry-summary span.price,
body.rtl.single-product .summary.entry-summary .price,
body.rtl.single-product .woocommerce div.product .summary p.price,
body.rtl.single-product .woocommerce div.product .summary span.price,
body.rtl.single-product .woocommerce div.product .summary .price{
  text-align: right !important;
}

body:not(.rtl).single-product div.product .summary p.price,
body:not(.rtl).single-product div.product .summary span.price,
body:not(.rtl).single-product div.product .summary .price,
body:not(.rtl).single-product .summary.entry-summary p.price,
body:not(.rtl).single-product .summary.entry-summary span.price,
body:not(.rtl).single-product .summary.entry-summary .price,
body:not(.rtl).single-product .woocommerce div.product .summary p.price,
body:not(.rtl).single-product .woocommerce div.product .summary span.price,
body:not(.rtl).single-product .woocommerce div.product .summary .price{
  text-align: left !important;
}

/* Related / Upsells / Cross-sells: keep price centered (as before) */
body.single-product div.product section.related ul.products li.product .price,
body.single-product div.product section.upsells ul.products li.product .price,
body.single-product div.product section.cross-sells ul.products li.product .price{
  text-align: center !important;
}


/* --------------------------------------------------------------------------
   WooCommerce – Single Product: Mobile layout (Theme)
---------------------------------------------------------------------------*/
@media (max-width: 820px){
  /* Stack gallery + summary */
  body.single-product div.product div.images,
  body.single-product div.product div.summary,
  body.single-product .woocommerce div.product div.images,
  body.single-product .woocommerce div.product div.summary{
    float: none !important;
    width: 100% !important;
  }

  body.single-product div.product div.images,
  body.single-product .woocommerce div.product div.images{
    margin: 0 0 14px !important;
  }

  /* Improve spacing inside the summary */
  body.single-product div.product .summary,
  body.single-product .woocommerce div.product .summary{
    padding: 0 !important;
  }

  /* Cart form: quantity + button should be clear and usable */
  body.single-product div.product form.cart,
  body.single-product .woocommerce div.product form.cart{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.single-product div.product form.cart .quantity,
  body.single-product .woocommerce div.product form.cart .quantity{
    flex: 0 0 120px !important;
  }

  body.single-product div.product form.cart button.single_add_to_cart_button,
  body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button{
    flex: 1 1 auto !important;
    min-width: 180px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
    padding: 12px 14px !important;
  }

  /* Variations/selects should be full width */
  body.single-product div.product form.cart .variations select,
  body.single-product .woocommerce div.product form.cart .variations select{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grouped products table */
  body.single-product .group_table td,
  body.single-product .woocommerce .group_table td{
    padding: 10px 0 !important;
  }
}

@media (max-width: 480px){
  /* On very small screens, make quantity and button stack full width */
  body.single-product div.product form.cart .quantity,
  body.single-product .woocommerce div.product form.cart .quantity,
  body.single-product div.product form.cart button.single_add_to_cart_button,
  body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button{
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ------------------------------------------------------------
   My Account (Dashboard) layout
------------------------------------------------------------ */
.woocommerce-account .selina-wc-account{ max-width: 1200px; margin: 0 auto; }

/* Disable legacy floats from WooCommerce so we can use Flex layout */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float: none !important;
  width: auto !important;
}

.woocommerce-account .selina-wc-account .selina-wc-account-inner{
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
  overflow: hidden;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account .selina-wc-account-inner{
  background: rgba(17,24,39,0.55);
  border-color: rgba(255,255,255,0.08);
}
/* RTL: put the account navigation on the right */
html[dir="rtl"] .woocommerce-account .selina-wc-account .selina-wc-account-inner{
  flex-direction: row-reverse;
}


/* Left navigation */
.woocommerce-account .selina-wc-account-nav{
  flex: 0 0 310px;
  max-width: 360px;
  border-inline-end: 1px solid rgba(16,24,40,0.08);
  background: rgba(255,255,255,0.60);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-nav{
  background: rgba(17,24,39,0.25);
  border-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-account-nav-title{
  padding: 18px 18px 16px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(16,24,40,0.08);
  text-align: center;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-nav-title{
  border-bottom-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-account-user{
  padding: 18px;
  text-align: center;
}

.woocommerce-account .selina-wc-account-avatar .avatar{
  width: 150px;
  height: 150px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(16,24,40,0.12);
  background: rgba(16,24,40,0.03);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-avatar .avatar{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.woocommerce-account .selina-wc-account-avatar-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #22c55e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-avatar-link{
  background: #16a34a;
  color: #fff;
}

.woocommerce-account .selina-wc-account-avatar-link:hover{
  filter: brightness(0.95);
  color: #fff;
}

/* My Account menu container (groups the navigation links in a dedicated box) */
.woocommerce-account .selina-wc-account-menu-box{
  margin: 0 12px 16px;
  padding: 6px 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,0.10);
  background: rgba(16,24,40,0.02);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-menu-box{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
}

.woocommerce-account .selina-wc-account-menu{
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .selina-wc-account-menu li{
  margin: 0;
}

.woocommerce-account .selina-wc-account-menu li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 3px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.woocommerce-account .selina-wc-account-menu li a .selina-wc-mi-icon{
  margin-inline-start: auto;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.woocommerce-account .selina-wc-account-menu li.is-active a{
  background: rgba(16,24,40,0.05);
  border-color: rgba(16,24,40,0.08);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-menu li.is-active a{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.woocommerce-account .selina-wc-account-menu li a:hover{
  background: rgba(16,24,40,0.04);
  border-color: rgba(16,24,40,0.08);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-menu li a:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-account-menu li a:hover .selina-wc-mi-icon{
  color: var(--selina-accent);
}

/* Right content */
.woocommerce-account .selina-wc-account-content{
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 24px;
}

/* Welcome / intro box (matches the reference dashboard style) */
.woocommerce-account .selina-wc-account-welcome{
  background: rgba(255, 243, 205, 0.85);
  font-family: Tahoma, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 18px;
  padding: 18px 18px;
  margin: 0 0 18px;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-welcome{
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.18);
}

.woocommerce-account .selina-wc-account-welcome .selina-wc-welcome-text{
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(17,24,39,0.78);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-welcome .selina-wc-welcome-text{
  color: rgba(255,255,255,0.82);
}


.woocommerce-account .selina-wc-hello{
  margin: 0 0 10px;
  font-size: 14px;
}

.woocommerce-account .selina-wc-account-welcome .selina-wc-hello{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 400;
}

.woocommerce-account .selina-wc-account-welcome .selina-wc-hello a{
  color: var(--selina-accent);
  text-decoration: none;
  font-weight: 800;
}

.woocommerce-account .selina-wc-account-welcome .selina-wc-hello a:hover{
  text-decoration: underline;
}

.woocommerce-account .selina-wc-desc{
  margin: 0 0 18px;
  font-size: 14px;
  color: rgba(17,24,39,0.70);
}

.woocommerce-account .selina-wc-account-welcome .selina-wc-desc{
  margin: 0;
  color: rgba(17,24,39,0.78);
}

html.selina-dark-mode .woocommerce-account .selina-wc-desc{
  color: rgba(255,255,255,0.74);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-welcome .selina-wc-desc{
  color: rgba(255,255,255,0.80);
}

/* Cards grid */
.woocommerce-account .selina-wc-account-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}

.woocommerce-account .selina-wc-account-card{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-card{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-account-card:hover{
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 14px 34px rgba(16,24,40,0.10);
  transform: translateY(-1px);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-card:hover{
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);
}

.woocommerce-account .selina-wc-account-card-icon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(17,24,39,0.80);
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-card-icon{
  color: rgba(255,255,255,0.80);
}

.woocommerce-account .selina-wc-account-card-label{
  font-weight: 800;
  font-size: 13px;
}

/* My Account custom endpoint sections (e.g., My Subscriptions) */
.woocommerce-account .selina-wc-account-section{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 14px;
  padding: 18px 16px;
  margin: 0 0 18px;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-section{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-account-section-title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
}

.woocommerce-account .selina-wc-account-section-content{
  font-size: 14px;
}

.woocommerce-account .selina-wc-account-hint{
  margin: 0;
  color: rgba(17,24,39,0.75);
  font-size: 13px;
  line-height: 1.6;
}

html.selina-dark-mode .woocommerce-account .selina-wc-account-hint{
  color: rgba(255,255,255,0.75);
}

/* Responsive */
@media (max-width: 980px){
  .woocommerce-account .selina-wc-account .selina-wc-account-inner{
    flex-direction: column;
  }

  /* On RTL sites, the base row-reverse rule can override the mobile stacking.
     Repeat with the same specificity so the layout remains responsive. */
  html[dir="rtl"] .woocommerce-account .selina-wc-account .selina-wc-account-inner,
  html.rtl .woocommerce-account .selina-wc-account .selina-wc-account-inner{
    flex-direction: column;
  }
  .woocommerce-account .selina-wc-account-nav{
    max-width: 100%;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(16,24,40,0.08);
  }
  html.selina-dark-mode .woocommerce-account .selina-wc-account-nav{
    border-bottom-color: rgba(255,255,255,0.10);
  }
  .woocommerce-account .selina-wc-account-cards{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 560px){
  .woocommerce-account .selina-wc-account-avatar .avatar{
    width: 150px;
    height: 150px;
    border-radius: 20px;
  }
  .woocommerce-account .selina-wc-account-cards{
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   My Account: Edit Account / Addresses styling
------------------------------------------------------------ */

.woocommerce-account .selina-wc-form-card{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
  overflow: hidden;
}

html.selina-dark-mode .woocommerce-account .selina-wc-form-card{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}

.woocommerce-account .selina-wc-form-card-head{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(16,24,40,0.08);
}

html.selina-dark-mode .woocommerce-account .selina-wc-form-card-head{
  border-bottom-color: rgba(255,255,255,0.10);
}

.woocommerce-account .selina-wc-form-card-title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

.woocommerce-account .selina-wc-form-card-body{
  padding: 18px;
}

/* Avatar uploader */
.woocommerce-account .selina-wc-avatar-uploader{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px dashed rgba(16,24,40,0.18);
  border-radius: 16px;
  background: rgba(16,24,40,0.03);
  margin: 0 0 16px;
}

html.selina-dark-mode .woocommerce-account .selina-wc-avatar-uploader{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.woocommerce-account .selina-wc-avatar-preview .avatar{
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(16,24,40,0.12);
  background: rgba(16,24,40,0.03);
}

html.selina-dark-mode .woocommerce-account .selina-wc-avatar-preview .avatar{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.woocommerce-account .selina-wc-avatar-fields{
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-account .selina-wc-field-label{
  display: block;
  font-weight: 900;
  margin: 0 0 8px;
  text-align: start;
}

.woocommerce-account .selina-wc-avatar-fields input[type="file"]{
  width: 100%;
  max-width: 520px;
}

.woocommerce-account .selina-wc-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}

.woocommerce-account .selina-wc-help{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(17,24,39,0.65);
}

html.selina-dark-mode .woocommerce-account .selina-wc-help{
  color: rgba(255,255,255,0.70);
}

/* Edit account grid */
.woocommerce-account .selina-wc-edit-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px 16px;
  margin: 0;
}

.woocommerce-account .selina-wc-edit-grid .form-row{
  margin: 0;
  width: auto;
  float: none;
}

.woocommerce-account .selina-wc-edit-grid .form-row-wide{
  grid-column: 1 / -1;
}

.woocommerce-account .selina-wc-edit-grid label,
.woocommerce-account .woocommerce-address-fields label{
  display: block;
  margin: 0 0 7px;
  font-weight: 900;
  text-align: start;
}

.woocommerce-account .selina-wc-edit-grid input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields textarea{
  width: 100%;
  border-radius: 12px;
}

.woocommerce-account .selina-wc-inline-desc{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(17,24,39,0.60);
}

html.selina-dark-mode .woocommerce-account .selina-wc-inline-desc{
  color: rgba(255,255,255,0.70);
}

/* Password fieldset */
.woocommerce-account .selina-wc-form-card fieldset{
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,0.12);
  background: rgba(16,24,40,0.02);
}

html.selina-dark-mode .woocommerce-account .selina-wc-form-card fieldset{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.woocommerce-account .selina-wc-form-card fieldset legend{
  font-weight: 900;
  padding: 0 8px;
}

.woocommerce-account .selina-wc-form-card fieldset .form-row{
  margin: 0 0 12px;
}

.woocommerce-account .selina-wc-form-card fieldset .form-row:last-child{
  margin-bottom: 0;
}

/* Actions */
.woocommerce-account .selina-wc-form-actions{
  margin: 16px 0 0;
}

.woocommerce-account .selina-wc-form-actions .button{
  background: var(--selina-accent);
  border: 1px solid rgba(0,0,0,0.08);
  color: #fff;
  border-radius: 12px;
  padding: 11px 18px;
  font-weight: 900;
}

.woocommerce-account .selina-wc-form-actions .button:hover{
  filter: brightness(0.96);
}

/* Address cards */
.woocommerce-account .woocommerce-Addresses{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px 16px;
  margin: 0;
}

.woocommerce-account .woocommerce-Address{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
}

html.selina-dark-mode .woocommerce-account .woocommerce-Address{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}

.woocommerce-account .woocommerce-Address-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.woocommerce-account .woocommerce-Address-title h3{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

.woocommerce-account .woocommerce-Address-title a{
  font-weight: 900;
  color: var(--selina-accent);
  text-decoration: none;
}

.woocommerce-account .woocommerce-Address-title a:hover{
  text-decoration: underline;
}

.woocommerce-account .woocommerce-Address address{
  margin: 0;
  font-style: normal;
  line-height: 1.75;
  color: rgba(17,24,39,0.75);
}

html.selina-dark-mode .woocommerce-account .woocommerce-Address address{
  color: rgba(255,255,255,0.78);
}

/* ---------------------------------------------------------
   My Account > View order
   Force billing contact lines to align consistently (left),
   and ensure icons appear BEFORE values (not after).
--------------------------------------------------------- */

body.woocommerce-view-order .woocommerce-customer-details address,
body.woocommerce-view-order .woocommerce-order-details__customer-details address{
  text-align: left !important;
}

/* Phone & email lines: keep them aligned to the left, and keep icons at the start */
body.woocommerce-view-order .woocommerce-customer-details--email,
body.woocommerce-view-order .woocommerce-customer-details--phone{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
  flex-wrap: nowrap;
  line-height: 1.6;
  margin: 8px 0 0;
  text-align: left !important;
  direction: ltr; /* stable ordering for numbers/emails and icons */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* If email/phone is a link, keep it aligned and unstyled */
body.woocommerce-view-order .woocommerce-customer-details--email a,
body.woocommerce-view-order .woocommerce-customer-details--phone a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.woocommerce-view-order .woocommerce-customer-details--email a:hover,
body.woocommerce-view-order .woocommerce-customer-details--phone a:hover{
  text-decoration: underline;
}

/* Any injected pseudo-icons should behave like normal inline items and stay BEFORE the value */
body.woocommerce-view-order .woocommerce-customer-details--email::before,
body.woocommerce-view-order .woocommerce-customer-details--phone::before,
body.woocommerce-view-order .woocommerce-customer-details--email::after,
body.woocommerce-view-order .woocommerce-customer-details--phone::after{
  position: static !important;
  float: none !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  order: -1; /* put before the text */
}

/* Any injected icon elements should come BEFORE the text and never overlap */
body.woocommerce-view-order .woocommerce-customer-details--email i,
body.woocommerce-view-order .woocommerce-customer-details--phone i,
body.woocommerce-view-order .woocommerce-customer-details--email svg,
body.woocommerce-view-order .woocommerce-customer-details--phone svg,
body.woocommerce-view-order .woocommerce-customer-details--email .dashicons,
body.woocommerce-view-order .woocommerce-customer-details--phone .dashicons,
body.woocommerce-view-order .woocommerce-customer-details--email .fa,
body.woocommerce-view-order .woocommerce-customer-details--phone .fa,
body.woocommerce-view-order .woocommerce-customer-details--email img,
body.woocommerce-view-order .woocommerce-customer-details--phone img{
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
  order: -1; /* put before the text */
}

/* If icons are inside the link, reorder them within the link too */
body.woocommerce-view-order .woocommerce-customer-details--email a i,
body.woocommerce-view-order .woocommerce-customer-details--phone a i,
body.woocommerce-view-order .woocommerce-customer-details--email a svg,
body.woocommerce-view-order .woocommerce-customer-details--phone a svg,
body.woocommerce-view-order .woocommerce-customer-details--email a .dashicons,
body.woocommerce-view-order .woocommerce-customer-details--phone a .dashicons,
body.woocommerce-view-order .woocommerce-customer-details--email a .fa,
body.woocommerce-view-order .woocommerce-customer-details--phone a .fa{
  order: -1;
}


/* ---------------------------------------------------------
   My Account > Addresses (edit-address endpoint)
   Center title, show edit button underneath, then username.
--------------------------------------------------------- */

body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title h3{
  font-size: 15px;
}

body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title .selina-myaddress-edit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
}

body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title .selina-myaddress-edit:hover{
  text-decoration: none;
}

body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title .selina-myaddress-user{
  font-size: 13px;
  font-weight: 900;
  color: rgba(17,24,39,0.65);
}

html.selina-dark-mode body.woocommerce-account.woocommerce-edit-address .woocommerce-Address-title .selina-myaddress-user{
  color: rgba(255,255,255,0.70);
}

/* Edit address form */
.woocommerce-account .woocommerce-address-fields{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
}

html.selina-dark-mode .woocommerce-account .woocommerce-address-fields{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}

.woocommerce-account .woocommerce-address-fields__field-wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px 16px;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row{
  margin: 0;
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide{
  grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-address-fields p{
  margin: 0;
}

.woocommerce-account .woocommerce-address-fields .button{
  background: var(--selina-accent);
  border: 1px solid rgba(0,0,0,0.08);
  color: #fff;
  border-radius: 12px;
  padding: 11px 18px;
  font-weight: 900;
}

.woocommerce-account .woocommerce-address-fields .button:hover{
  filter: brightness(0.96);
}

/* Responsive */
@media (max-width: 720px){
  .woocommerce-account .selina-wc-edit-grid,
  .woocommerce-account .woocommerce-address-fields__field-wrapper,
  .woocommerce-account .woocommerce-Addresses{
    grid-template-columns: 1fr;
  }
  .woocommerce-account .selina-wc-avatar-uploader{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---------------------------------------------------------
   Selina Theme - Global WooCommerce Buttons
   Prevent WooCommerce default hover (gray) overriding theme.
   Keeps buttons in Accent color with a subtle hover effect.
--------------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button:not(.is-link){
  background: var(--selina-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus,
.wc-block-components-button:not(.is-link):focus{
  background: var(--selina-accent) !important;
  color: #fff !important;
  filter: brightness(0.96);
}

.woocommerce #respond input#submit:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.wc-block-components-button:not(.is-link):active{
  background: var(--selina-accent) !important;
  color: #fff !important;
  filter: brightness(0.94);
}

/* Keep disabled buttons readable */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce #respond input#submit:disabled,
.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link).is-disabled,
.wc-block-components-button:not(.is-link)[aria-disabled="true"]{
  background: rgba(16,24,40,0.12) !important;
  color: rgba(16,24,40,0.60) !important;
  filter: none !important;
  cursor: not-allowed !important;
}
html.selina-dark-mode .woocommerce a.button.disabled,
html.selina-dark-mode .woocommerce a.button:disabled,
html.selina-dark-mode .woocommerce button.button:disabled,
html.selina-dark-mode .woocommerce input.button:disabled,
html.selina-dark-mode .woocommerce #respond input#submit:disabled,
html.selina-dark-mode .wc-block-components-button:not(.is-link):disabled,
html.selina-dark-mode .wc-block-components-button:not(.is-link).is-disabled,
html.selina-dark-mode .wc-block-components-button:not(.is-link)[aria-disabled="true"]{
  background: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.70) !important;
}

/* Checkout: hide the "Billing details" heading (keep fields, remove the title only). */
.woocommerce-checkout .woocommerce-billing-fields > h3{
  display: none !important;
}


/* Checkout: align first/last name labels consistently (RTL/LTR) */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last{
  text-align: start;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first label,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last label,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first label,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last label{
  text-align: start;
}

/* ---------------------------------------------------------
   Selina Theme - WooCommerce Button Sizing (Custom)
   Requirement:
   - All WooCommerce buttons: width 115px, height 40px, font-size 14px
   - Exception (Proceed to checkout): keep width auto, height 52px, font-size 16px
--------------------------------------------------------- */

/* Global buttons (excluding Proceed to checkout buttons) */
.woocommerce .button:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce a.button:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce button.button:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce input.button:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce #respond input#submit:not(.checkout-button):not(.wc-block-cart__submit-button),
.woocommerce a.added_to_cart,
.wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button){
  width: 115px !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 0 14px !important;
  white-space: nowrap;
}

/* Proceed to checkout (keep width as theme/default, only adjust height & font-size) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-block-cart__submit-button{
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  font-size: 16px !important;

  box-sizing: border-box;
  padding: 0 22px !important;
}

/*
  Cart (Empty cart): "Return to shop" button
  -------------------------------------------------
  The theme enforces a fixed 115px width for WooCommerce buttons.
  This is fine for short labels, but it breaks longer RTL strings
  (e.g. "العودة إلى المتجر") causing text to overflow outside the button.
  We keep the general sizing rule, but opt-out this specific CTA.
*/

.woocommerce-cart .return-to-shop a.button,
.woocommerce-cart .return-to-shop a.button.wc-backward,
.woocommerce .return-to-shop a.button,
.woocommerce-page .return-to-shop a.button{
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 40px !important;

  line-height: 1.35 !important;
  padding: 10px 18px !important;

  white-space: normal !important;
}

/* Cart: Apply coupon button label can be longer than 115px (e.g., Arabic).
   Keep the global button sizing everywhere, but allow this specific button
   to size to its content so the label never overflows. */
.woocommerce-cart table.shop_table.cart td.actions .coupon button[name="apply_coupon"],
.woocommerce-cart table.shop_table.cart td.actions .coupon .button[name="apply_coupon"],
.woocommerce-cart .woocommerce-cart-form__contents td.actions .coupon button[name="apply_coupon"],
.woocommerce-cart .woocommerce-cart-form__contents td.actions .coupon .button[name="apply_coupon"]{
  width: auto !important;
  min-width: 140px !important;
  padding: 0 18px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Mini-cart dropdown buttons (Header cart menu)
   These buttons live in the header (outside .woocommerce wrapper),
   so we must size them explicitly to prevent flex:1 from stretching.
*/
.selina-cart-menu p.woocommerce-mini-cart__buttons{
  flex-wrap: wrap !important;
}

.selina-cart-menu p.woocommerce-mini-cart__buttons a.button,
.selina-cart-menu p.woocommerce-mini-cart__buttons a.button.checkout{
  width: 115px !important;
  flex: 0 0 115px !important;

  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}


/* ==========================================================================
   Dark Mode — WooCommerce (Shop / Product / Checkout)
   Applies when <html> has class "selina-dark-mode".
   ========================================================================== */

/* Global WooCommerce typography + surfaces */
html.selina-dark-mode .woocommerce,
html.selina-dark-mode .woocommerce-page{
  color: rgba(255,255,255,0.90);
}

html.selina-dark-mode .woocommerce a,
html.selina-dark-mode .woocommerce-page a{
  color: inherit;
}

/* Basic form controls */
html.selina-dark-mode .woocommerce input[type="text"],
html.selina-dark-mode .woocommerce input[type="email"],
html.selina-dark-mode .woocommerce input[type="tel"],
html.selina-dark-mode .woocommerce input[type="number"],
html.selina-dark-mode .woocommerce input[type="password"],
html.selina-dark-mode .woocommerce input[type="search"],
html.selina-dark-mode .woocommerce textarea,
html.selina-dark-mode .woocommerce select{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

html.selina-dark-mode .woocommerce input::placeholder,
html.selina-dark-mode .woocommerce textarea::placeholder{
  color: rgba(255,255,255,0.55);
}

/* Tables */
html.selina-dark-mode .woocommerce table.shop_table{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

html.selina-dark-mode .woocommerce table.shop_table th,
html.selina-dark-mode .woocommerce table.shop_table td{
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
}

html.selina-dark-mode .woocommerce table.shop_table thead th{
  background: rgba(255,255,255,0.05);
}

/* Notices */
html.selina-dark-mode .woocommerce .woocommerce-message,
html.selina-dark-mode .woocommerce .woocommerce-error,
html.selina-dark-mode .woocommerce .woocommerce-info{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
}

/* Shop/Product cards (archives + related) */
html.selina-dark-mode .woocommerce ul.products li.product,
html.selina-dark-mode .woocommerce-page ul.products li.product{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

html.selina-dark-mode .woocommerce ul.products li.product .woocommerce-loop-product__title,
html.selina-dark-mode .woocommerce ul.products li.product .price,
html.selina-dark-mode .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html.selina-dark-mode .woocommerce-page ul.products li.product .price{
  color: rgba(255,255,255,0.92) !important;
}

/* Single product tabs/panels */
html.selina-dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

html.selina-dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background: rgba(255,255,255,0.08);
}

html.selina-dark-mode .woocommerce div.product .woocommerce-tabs .panel{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 14px;
}

/* Modern Checkout (theme layout) */
html.selina-dark-mode body.selina-checkout-modern{
  background: #0f1115;
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-card,
html.selina-dark-mode body.selina-checkout-modern .wc-block-checkout__main,
html.selina-dark-mode body.selina-checkout-modern .wc-block-checkout__sidebar{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-card__kicker,
html.selina-dark-mode body.selina-checkout-modern .selina-checkout-card__sub,
html.selina-dark-mode body.selina-checkout-modern .woocommerce form .form-row label{
  color: rgba(255,255,255,0.78) !important;
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-card__title{
  background: rgba(246,177,0,.14);
  border-color: rgba(246,177,0,.22);
  color: rgba(255,255,255,0.92);
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-edit-cart{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-edit-cart:hover{
  background: rgba(255,255,255,0.10);
}

/* Checkout inputs/selects */
html.selina-dark-mode body.selina-checkout-modern .woocommerce form .form-row input.input-text,
html.selina-dark-mode body.selina-checkout-modern .woocommerce form .form-row textarea,
html.selina-dark-mode body.selina-checkout-modern .woocommerce form .form-row select{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

html.selina-dark-mode body.selina-checkout-modern .select2-container--default .select2-selection--single{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}

html.selina-dark-mode body.selina-checkout-modern .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(255,255,255,0.92);
}

/* Order review table */
html.selina-dark-mode body.selina-checkout-modern .woocommerce-checkout-review-order-table{
  border-color: rgba(255,255,255,0.10);
}

html.selina-dark-mode body.selina-checkout-modern .woocommerce-checkout-review-order-table thead th,
html.selina-dark-mode body.selina-checkout-modern .woocommerce-checkout-review-order-table tfoot th,
html.selina-dark-mode body.selina-checkout-modern .woocommerce-checkout-review-order-table tfoot td{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
}

/* Payment methods */
html.selina-dark-mode body.selina-checkout-modern #payment ul.payment_methods{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

html.selina-dark-mode body.selina-checkout-modern #payment ul.payment_methods li{
  border-bottom-color: rgba(255,255,255,0.10);
}

html.selina-dark-mode body.selina-checkout-modern #payment div.payment_box{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}

/* Note box under order button */
html.selina-dark-mode body.selina-checkout-modern .selina-checkout-note{
  background: rgba(246,177,0,.12);
  border-color: rgba(246,177,0,.35);
  color: rgba(255,255,255,0.80);
}

html.selina-dark-mode body.selina-checkout-modern .selina-checkout-note a{
  color: rgba(255,255,255,0.92);
}

/* Woo Blocks: inputs/selects inside the Blocks checkout */
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-text-input input,
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-text-input textarea,
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-select select,
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-combobox .components-combobox-control__input{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

html.selina-dark-mode body.selina-checkout-modern .wc-block-components-text-input input::placeholder,
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-text-input textarea::placeholder,
html.selina-dark-mode body.selina-checkout-modern .wc-block-components-combobox .components-combobox-control__input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

/* Select2 dropdowns (classic Woo checkout + account/address screens) */
html.selina-dark-mode .select2-dropdown{
  background: rgba(31,35,40,0.98);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

html.selina-dark-mode .select2-search__field{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

html.selina-dark-mode .select2-container--default .select2-results__option{
  color: rgba(255,255,255,0.90);
}

html.selina-dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.96);
}

html.selina-dark-mode .select2-container--default .select2-results__option[aria-selected=true]{
  background: rgba(255,255,255,0.08);
}


/* ------------------------------------------------------------
   My Account: Login / Register + Lost Password
   (Front-end authentication screens)
------------------------------------------------------------ */

/* Centralized sizing for WooCommerce auth screens.
   This controls the visual width of the white “card” container.
   (Input widths are 100% of the card.) */
body.woocommerce-account:not(.logged-in),
body.woocommerce-lost-password,
body.woocommerce-reset-password{
  /* Width of the white background container (card) for Login / Lost Password / Reset Password screens. */
  --selina-wc-auth-card-max-width: 900px;
  /* Width of the form content inside the card (inputs, labels, actions). */
  --selina-wc-auth-content-max-width: 520px;
}

/* Keep the auth screens readable and centered inside the theme layout.
   Note: My Account content is typically rendered inside the page content (not as a direct child). */
/* Auth screens should use the full content width.
   The white “card” container controls its own max-width; this avoids narrowing the entire WooCommerce wrapper. */
body.woocommerce-account:not(.logged-in) .selina-entry-content .woocommerce,
body.woocommerce-account:not(.logged-in) .selina-content > .woocommerce,
body.woocommerce-lost-password .selina-entry-content .woocommerce,
body.woocommerce-lost-password .selina-content > .woocommerce,
body.woocommerce-reset-password .selina-entry-content .woocommerce,
body.woocommerce-reset-password .selina-content > .woocommerce{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

@media (max-width: 960px){
  body.woocommerce-account:not(.logged-in) .selina-entry-content .woocommerce,
  body.woocommerce-account:not(.logged-in) .selina-content > .woocommerce,
  body.woocommerce-lost-password .selina-entry-content .woocommerce,
  body.woocommerce-lost-password .selina-content > .woocommerce,
  body.woocommerce-reset-password .selina-entry-content .woocommerce,
  body.woocommerce-reset-password .selina-content > .woocommerce{
    padding-inline: 18px;
  }
}

/* Login/Register columns (WooCommerce default markup). */
body.woocommerce-account:not(.logged-in) #customer_login{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: 18px 0 0;
}

/* Single-column login layout
   Some setups output only the login form (no #customer_login wrapper).
   In that case, we apply the same “card” container treatment used by the
   Lost Password screen to keep the login form readable and not full-width. */
body.woocommerce-account:not(.logged-in) .woocommerce > h2{
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

/* In some WooCommerce versions/configurations, the login form is wrapped in a
   single .u-column1 container (without #customer_login). Treat it as a card. */
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  width: 100%;
  max-width: var(--selina-wc-auth-card-max-width);
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(16,24,40,0.07);
  padding: 28px;
  margin-top: 18px;
  box-sizing: border-box;
  overflow: visible;
}

html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1{
  background: rgba(17,24,39,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
}

body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce > form.login{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  display: block;
  float: none;
  clear: both;
  width: 100%;
  max-width: var(--selina-wc-auth-card-max-width);
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(16,24,40,0.07);
  padding: 28px;
  margin-top: 18px;
  box-sizing: border-box;
  overflow: visible;
}

/* Make the white card container wider while keeping the form elements at a comfortable readable width. */
body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login > *,
body.woocommerce-account:not(.logged-in) .woocommerce > form.login > *,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 > *{
  max-width: var(--selina-wc-auth-content-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}


html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce > form.login{
  background: rgba(17,24,39,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
}

@media (max-width: 520px){
  body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.login{
    padding: 18px 16px;
    border-radius: 16px;
  }
}


/* Mobile hardening: Authentication screens (Login + Lost/Reset Password)
   - Make the “card” containers fluid on small screens (full width within the page frame)
   - Remove the inner max-width clamp so inputs can use the full card width
   - Slightly reduce typography to prevent Arabic labels from stacking awkwardly
*/
@media (max-width: 768px){
  body.woocommerce-account:not(.logged-in),
  body.woocommerce-lost-password,
  body.woocommerce-reset-password{
    --selina-wc-auth-card-max-width: 100%;
    --selina-wc-auth-content-max-width: 100%;
  }

  /* Keep a small consistent gutter (do not create an artificially narrow column). */
  body.woocommerce-account:not(.logged-in) .selina-entry-content .woocommerce,
  body.woocommerce-account:not(.logged-in) .selina-content > .woocommerce,
  body.woocommerce-lost-password .selina-entry-content .woocommerce,
  body.woocommerce-lost-password .selina-content > .woocommerce,
  body.woocommerce-reset-password .selina-entry-content .woocommerce,
  body.woocommerce-reset-password .selina-content > .woocommerce{
    padding-inline: var(--selina-gutter, 16px) !important;
  }

  /* Force auth cards to span the available content width. */
  body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.login,
  body.woocommerce-account:not(.logged-in) #customer_login > div,
  body.woocommerce-lost-password .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Remove inner content width clamp on small screens. */
  body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login > *,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.login > *,
  body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 > *,
  body.woocommerce-account:not(.logged-in) #customer_login > div > *,
  body.woocommerce-lost-password .woocommerce-ResetPassword > *,
  body.woocommerce-account .woocommerce-ResetPassword > *,
  body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword > *{
    max-width: 100% !important;
  }
}

@media (max-width: 520px){
  /* Base size inside the auth cards */
  body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
  body.woocommerce-account:not(.logged-in) .woocommerce > form.login,
  body.woocommerce-lost-password .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword{
    font-size: 16px;
    line-height: 1.45;
  }

  body.woocommerce-account:not(.logged-in) .woocommerce form label,
  body.woocommerce-lost-password .woocommerce form label,
  body.woocommerce-reset-password .woocommerce form label{
    font-size: 16px;
    line-height: 1.35;
  }

  body.woocommerce-account:not(.logged-in) .woocommerce form .input-text,
  body.woocommerce-lost-password .woocommerce form .input-text,
  body.woocommerce-reset-password .woocommerce form .input-text{
    font-size: 16px;
    line-height: 1.4;
  }

  body.woocommerce-account:not(.logged-in) .woocommerce button.button,
  body.woocommerce-lost-password .woocommerce button.button,
  body.woocommerce-reset-password .woocommerce button.button{
    font-size: 16px;
  }

  body.woocommerce-account:not(.logged-in) .woocommerce form .woocommerce-form-login__rememberme,
  body.woocommerce-account:not(.logged-in) .woocommerce .lost_password a,
  body.woocommerce-lost-password .woocommerce .lost_password a{
    font-size: 15px;
  }
}



/* ------------------------------------------------------------
   Mobile hardening (generic selectors)
   Some sites render the WooCommerce My Account shortcode on a normal page
   without WooCommerce-specific body classes (e.g., body.woocommerce-account).
   In that case, the card width + typography rules above won't run.
   These fallbacks target the auth forms by their WooCommerce markup so the
   login / lost-password UI becomes fluid on mobile in ALL contexts.
------------------------------------------------------------ */

@media (max-width: 768px){
  /* Make the auth containers span the full content width (within the page frame). */
  .woocommerce form.woocommerce-form-login,
  .woocommerce form.woocommerce-form-register,
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce .woocommerce-ResetPassword,
  .woocommerce form.lost_reset_password,
  .woocommerce form.woocommerce-ResetPassword,
  .woocommerce #customer_login > div{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  /* Reduce the inner clamp so fields can use the full card width on mobile. */
  .woocommerce form.woocommerce-form-login .form-row,
  .woocommerce form.woocommerce-form-register .form-row,
  .woocommerce form.login .form-row,
  .woocommerce form.register .form-row,
  .woocommerce .woocommerce-ResetPassword .form-row,
  .woocommerce form.lost_reset_password .form-row{
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Keep inputs fully fluid. */
  .woocommerce form.woocommerce-form-login .input-text,
  .woocommerce form.woocommerce-form-register .input-text,
  .woocommerce form.login .input-text,
  .woocommerce form.register .input-text,
  .woocommerce .woocommerce-ResetPassword .input-text,
  .woocommerce form.lost_reset_password .input-text{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 520px){
  /* Slightly reduce typography so Arabic labels don't stack awkwardly.
     Keep inputs at 16px to avoid iOS zoom-on-focus. */
  .woocommerce > h2,
  .woocommerce #customer_login h2{
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .woocommerce form.woocommerce-form-login label,
  .woocommerce form.woocommerce-form-register label,
  .woocommerce form.login label,
  .woocommerce form.register label,
  .woocommerce .woocommerce-ResetPassword label,
  .woocommerce form.lost_reset_password label{
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .woocommerce form.woocommerce-form-login,
  .woocommerce form.woocommerce-form-register,
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce .woocommerce-ResetPassword,
  .woocommerce form.lost_reset_password,
  .woocommerce #customer_login > div{
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
}
/* If registration is disabled, keep it single-column. */
body.woocommerce-account:not(.logged-in) #customer_login.u-columns,
body.woocommerce-account:not(.logged-in) #customer_login.col2-set{
  width: 100%;
}

@media (max-width: 880px){
  body.woocommerce-account:not(.logged-in) #customer_login{
    grid-template-columns: 1fr;
  }
}

/* Card wrapper for Login/Register columns. */
body.woocommerce-account:not(.logged-in) #customer_login > div{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
  padding: 18px;
}

html.selina-dark-mode body.woocommerce-account:not(.logged-in) #customer_login > div{
  background: rgba(17,24,39,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

body.woocommerce-account:not(.logged-in) #customer_login h2{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

/* Forms inside the auth cards
   IMPORTANT: Do NOT reset the direct-child login form used as the “card” on single-column layouts.
   WooCommerce outputs different markups depending on configuration:
   - Two-column layout: #customer_login > div (card) contains the form -> safe to reset the inner form.
   - Single-column layout: .woocommerce > form.woocommerce-form-login is itself the card -> must keep its margins/padding.
*/
body.woocommerce-account:not(.logged-in) #customer_login form.woocommerce-form-login,
body.woocommerce-account:not(.logged-in) #customer_login form.woocommerce-form-register,
body.woocommerce-account:not(.logged-in) #customer_login form.login,
body.woocommerce-account:not(.logged-in) #customer_login form.register,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 form.woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 form.woocommerce-form-register,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 form.login,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-column1 form.register{
  margin: 0;
  padding: 0;
  border: 0;
}

body.woocommerce-account:not(.logged-in) .woocommerce form .form-row,
body.woocommerce-lost-password .woocommerce form .form-row{
  margin: 0 0 12px;
}

/* Default auth alignment (Login/Register): keep labels and helper text aligned to
   the reading direction. Reset Password screens have their own centered layout.
   We scope this to avoid fighting later ResetPassword rules and to prevent
   “text-align: start” from overriding centering on the lost-password endpoint.
*/
body.woocommerce-account:not(.logged-in) .woocommerce form:not(.woocommerce-ResetPassword) .form-row,
body.woocommerce-lost-password .woocommerce form:not(.woocommerce-ResetPassword) .form-row{
  text-align: start;
}

/* Center the form rows inside the auth card.
   WooCommerce core styles float .form-row elements; auto-margins won’t center floats.
   We intentionally remove floats ONLY on the authentication screens.
*/
body.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-login .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-register .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce form.login .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce form.register .form-row,
body.woocommerce-lost-password .woocommerce form .form-row,
body.woocommerce-reset-password .woocommerce form .form-row{
  float: none;
  width: 100%;
  max-width: var(--selina-wc-auth-content-max-width);
  margin-inline: auto;
}

body.woocommerce-account:not(.logged-in) .woocommerce form label,
body.woocommerce-lost-password .woocommerce form label{
  display: block;
  font-weight: 900;
  margin: 0 0 8px;
}

body.woocommerce-account:not(.logged-in) .woocommerce form:not(.woocommerce-ResetPassword) label,
body.woocommerce-lost-password .woocommerce form:not(.woocommerce-ResetPassword) label{
  text-align: start;
}

body.woocommerce-account:not(.logged-in) .woocommerce form .input-text,
body.woocommerce-account:not(.logged-in) .woocommerce form select,
body.woocommerce-account:not(.logged-in) .woocommerce form textarea,
body.woocommerce-lost-password .woocommerce form .input-text,
body.woocommerce-lost-password .woocommerce form select,
body.woocommerce-lost-password .woocommerce form textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(16,24,40,0.14);
  background: rgba(255,255,255,0.92);
  text-align: start;
}

html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form .input-text,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form select,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form textarea,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form .input-text,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form select,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form textarea{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}

body.woocommerce-account:not(.logged-in) .woocommerce form .input-text:focus,
body.woocommerce-lost-password .woocommerce form .input-text:focus,
body.woocommerce-account:not(.logged-in) .woocommerce form select:focus,
body.woocommerce-lost-password .woocommerce form select:focus,
body.woocommerce-account:not(.logged-in) .woocommerce form textarea:focus,
body.woocommerce-lost-password .woocommerce form textarea:focus{
  outline: none;
  border-color: rgba(30,115,190,0.55);
  box-shadow: 0 0 0 4px rgba(30,115,190,0.15);
}

html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form .input-text:focus,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form .input-text:focus,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form select:focus,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form select:focus,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce form textarea:focus,
html.selina-dark-mode body.woocommerce-lost-password .woocommerce form textarea:focus{
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
}

/* Primary submit buttons */
body.woocommerce-account:not(.logged-in) .woocommerce button.button,
body.woocommerce-account:not(.logged-in) .woocommerce a.button,
body.woocommerce-lost-password .woocommerce button.button,
body.woocommerce-lost-password .woocommerce a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 0;
  background: var(--selina-accent);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(16,24,40,0.14);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.woocommerce-account:not(.logged-in) .woocommerce button.button:hover,
body.woocommerce-account:not(.logged-in) .woocommerce a.button:hover,
body.woocommerce-lost-password .woocommerce button.button:hover,
body.woocommerce-lost-password .woocommerce a.button:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(16,24,40,0.18);
}


/* Remember me checkbox should align naturally (and never inherit 100% width). */
body.woocommerce-account:not(.logged-in) .woocommerce form .woocommerce-form-login__rememberme{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  margin: 8px 0 0;
}
body.woocommerce-account:not(.logged-in) .woocommerce form .woocommerce-form-login__rememberme input{
  width: auto;
  min-height: auto;
  margin: 0;
}

/* Secondary links (e.g., Lost password) */
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-LostPassword,
body.woocommerce-account:not(.logged-in) .woocommerce .lost_password{
  margin: 10px 0 0;
}

body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-LostPassword a,
body.woocommerce-account:not(.logged-in) .woocommerce .lost_password a{
  color: rgba(17,24,39,0.78);
  text-decoration: none !important;
}

html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-LostPassword a,
html.selina-dark-mode body.woocommerce-account:not(.logged-in) .woocommerce .lost_password a{
  color: rgba(255,255,255,0.82);
}

/* Lost password page: remove any link underlines (theme preference). */
body.woocommerce-lost-password .woocommerce a,
body.woocommerce-lost-password .woocommerce a:hover,
body.woocommerce-account:not(.logged-in) .woocommerce a,
body.woocommerce-account:not(.logged-in) .woocommerce a:hover{
  text-decoration: none !important;
}

/* Auth forms: allow long Arabic labels on submit buttons.
   The global 115px button sizing rule is great for short labels,
   but reset-password buttons can be longer and would overflow.
*/
body.woocommerce-lost-password .woocommerce-ResetPassword button.button,
body.woocommerce-lost-password .woocommerce-ResetPassword input.button,
body.woocommerce-account .woocommerce-ResetPassword button.button,
body.woocommerce-account .woocommerce-ResetPassword input.button,
body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button,
body.woocommerce-lost-password .woocommerce form.lost_reset_password input.button{
  width: auto !important;
  min-width: 220px !important;
  height: auto !important;
  min-height: 46px !important;
  line-height: 1.2 !important;
  padding: 12px 18px !important;
  white-space: normal !important;
}

@media (max-width: 520px){
  body.woocommerce-lost-password .woocommerce-ResetPassword button.button,
  body.woocommerce-lost-password .woocommerce-ResetPassword input.button,
  body.woocommerce-account .woocommerce-ResetPassword button.button,
  body.woocommerce-account .woocommerce-ResetPassword input.button,
  body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button,
  body.woocommerce-lost-password .woocommerce form.lost_reset_password input.button{
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Lost Password screen card */
body.woocommerce-lost-password .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  width: 100%;
  max-width: var(--selina-wc-auth-card-max-width);
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(16,24,40,0.07);
  padding: 28px;
  margin-top: 18px;
  box-sizing: border-box;
  overflow: visible;
}

/* Keep Lost / Reset Password form content width comfortable inside the wider card. */
body.woocommerce-lost-password .woocommerce-ResetPassword > *,
body.woocommerce-account .woocommerce-ResetPassword > *,
body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword > *{
  max-width: var(--selina-wc-auth-content-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}


/* Ensure the Lost/Reset Password form rows are truly centered.
   Earlier auth rules set `.form-row` margins using physical values (left/right = 0)
   with higher specificity. On ResetPassword screens we want the rows centered,
   so we re-apply margins with `auto` inline sides.
*/
body.woocommerce-lost-password .woocommerce-ResetPassword .form-row,
body.woocommerce-reset-password .woocommerce-ResetPassword .form-row,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword .form-row,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword .form-row{
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--selina-wc-auth-content-max-width) !important;
  margin: 0 auto 12px !important;
}

/* Keep input text aligned to the reading direction while centering the row container. */
body.woocommerce-lost-password .woocommerce-ResetPassword .form-row .input-text,
body.woocommerce-reset-password .woocommerce-ResetPassword .form-row .input-text,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword .form-row .input-text,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword .form-row .input-text{
  text-align: start;
}


/* Center Lost/Reset Password screen content (text, labels, and actions).
   Keep input text aligned to the reading direction, but center the overall layout.
*/
body.woocommerce-lost-password .woocommerce-ResetPassword,
body.woocommerce-reset-password .woocommerce-ResetPassword,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword{
  text-align: center;
}

body.woocommerce-lost-password .woocommerce-ResetPassword p,
body.woocommerce-reset-password .woocommerce-ResetPassword p,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword p,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword p{
  text-align: center;
}

body.woocommerce-lost-password .woocommerce-ResetPassword .form-row,
body.woocommerce-reset-password .woocommerce-ResetPassword .form-row,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword .form-row,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword .form-row{
  text-align: center;
}

body.woocommerce-lost-password .woocommerce-ResetPassword label,
body.woocommerce-reset-password .woocommerce-ResetPassword label,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword label,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword label{
  text-align: center;
}

/* Inputs: keep natural RTL/LTR alignment; only the field block is centered. */
body.woocommerce-lost-password .woocommerce-ResetPassword .input-text,
body.woocommerce-reset-password .woocommerce-ResetPassword .input-text,
body.woocommerce-account.woocommerce-lost-password .woocommerce-ResetPassword .input-text,
body.woocommerce-account.woocommerce-reset-password .woocommerce-ResetPassword .input-text{
  text-align: start;
}

/* Some sites render the Lost/Reset Password form inside the My Account endpoint
   without adding the expected body classes (woocommerce-lost-password / woocommerce-reset-password).
   To keep the layout consistent, also center the Lost/Reset Password UI by targeting
   the form class itself. This is a scoped rule (only affects Reset Password screens). */
.woocommerce .woocommerce-ResetPassword{
  text-align: center;
}

.woocommerce .woocommerce-ResetPassword p,
.woocommerce .woocommerce-ResetPassword label,
.woocommerce .woocommerce-ResetPassword .form-row{
  text-align: center;
}

/* WooCommerce may float .form-row elements by default. If the expected body classes
   are not present, our earlier “auth form float reset” won’t run.
   Ensure the Reset Password rows are non-floated and centered by targeting the form class. */
.woocommerce .woocommerce-ResetPassword .form-row{
  float: none;
  width: 100%;
  max-width: var(--selina-wc-auth-content-max-width);
  margin-inline: auto;
}

/* Keep input typing alignment natural (RTL/LTR), while the field block is centered. */
.woocommerce .woocommerce-ResetPassword .input-text{
  text-align: start;
}


html.selina-dark-mode body.woocommerce-lost-password .woocommerce-ResetPassword,
html.selina-dark-mode body.woocommerce-account .woocommerce-ResetPassword,
html.selina-dark-mode body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword{
  background: rgba(17,24,39,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
}

@media (max-width: 520px){
  body.woocommerce-lost-password .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-ResetPassword,
  body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword{
    padding: 18px 16px;
    border-radius: 16px;
  }
}


/* ------------------------------------------------------------
   Order Received (Thank you) page
------------------------------------------------------------ */

body.woocommerce-order-received .selina-content > .woocommerce{
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  margin-inline: auto;
}

body.woocommerce-order-received .woocommerce-order{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
  padding: 18px;
}

html.selina-dark-mode body.woocommerce-order-received .woocommerce-order{
  background: rgba(17,24,39,0.45);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

/* Hide the default WooCommerce "order received" notice (we output our own hero). */
body.woocommerce-order-received .woocommerce-thankyou-order-received{
  display: none !important;
}

/* Selina: Order received hero */
body.woocommerce-order-received .selina-order-received-hero{
  margin: 0 0 14px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,0.30);
  background: rgba(34,197,94,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

html.selina-dark-mode body.woocommerce-order-received .selina-order-received-hero{
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.10);
  color: rgba(255,255,255,0.90);
}

body.woocommerce-order-received .selina-order-received-icon{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(34,197,94,1);
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.26);
}

body.woocommerce-order-received .selina-order-received-icon svg{
  width: 56px;
  height: 56px;
}

body.woocommerce-order-received .selina-order-received-title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

body.woocommerce-order-received .selina-order-received-actions .button{
  /* Override the global 115px WooCommerce button sizing on this page */
  width: min(420px, 100%) !important;
  min-width: 280px !important;

  /* Allow long Arabic labels without overflowing */
  height: auto !important;
  min-height: 52px !important;
  line-height: 1.2 !important;

  border-radius: 14px !important;
  padding: 14px 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 16px !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Order received: hide customer details (billing/shipping address) block */
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-order-details__customer-details{
  display: none !important;
}

/*
  Order received: the default WooCommerce overview list
  (Order number / Date / Email / Total / Payment method)
  is removed via a WooCommerce template override:
  selina-theme/woocommerce/checkout/thankyou.php
*/

/* Details and customer cards */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details{
  margin-top: 16px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(16,24,40,0.10);
  border-radius: 18px;
  padding: 16px;
}

html.selina-dark-mode body.woocommerce-order-received .woocommerce-order-details,
html.selina-dark-mode body.woocommerce-order-received .woocommerce-customer-details{
  background: rgba(17,24,39,0.35);
  border-color: rgba(255,255,255,0.10);
}

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
}

/* Order details table */
body.woocommerce-order-received table.woocommerce-table,
body.woocommerce-order-received table.shop_table{
  border: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
}

body.woocommerce-order-received table.woocommerce-table th,
body.woocommerce-order-received table.shop_table th{
  text-align: start;
  padding: 12px 10px;
  border: 0;
  font-weight: 900;
}

body.woocommerce-order-received table.woocommerce-table td,
body.woocommerce-order-received table.shop_table td{
  padding: 12px 10px;
  border-top: 1px solid rgba(16,24,40,0.10);
}

html.selina-dark-mode body.woocommerce-order-received table.woocommerce-table td,
html.selina-dark-mode body.woocommerce-order-received table.shop_table td{
  border-top-color: rgba(255,255,255,0.12);
}

/* Address block */
body.woocommerce-order-received .woocommerce-customer-details address{
  border: 1px dashed rgba(16,24,40,0.14);
  border-radius: 16px;
  padding: 14px;
  background: rgba(16,24,40,0.02);
}

html.selina-dark-mode body.woocommerce-order-received .woocommerce-customer-details address{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}

/* Ensure links/buttons look consistent */
body.woocommerce-order-received .woocommerce-order a.button,
body.woocommerce-order-received .woocommerce-order button.button{
  border-radius: 14px !important;
}

/* ------------------------------------------------------------
   Theme preference: remove link underlines across WooCommerce UI
   ------------------------------------------------------------ */
.woocommerce a,
.woocommerce a:hover,
.woocommerce a:focus{
  text-decoration: none !important;
}


/* --------------------------------------------------------------------------
 * v1.0.17 - Cart (Mobile): Fix Update Cart button baseline + ensure Qty is visible
 * -------------------------------------------------------------------------- */
@media (max-width: 820px){
  /* Force Selina card layout for any cart item row (some setups may miss one of the classes) */
  .woocommerce-cart table.shop_table.cart tr.cart_item,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 72px 1fr auto !important;
    grid-template-areas:
      "thumb name remove"
      "thumb price price"
      "thumb quantity quantity"
      "thumb subtotal subtotal";
    gap: 10px 12px !important;
    padding: 14px !important;
    margin: 0 0 12px !important;
    border: 1px solid rgba(16,24,40,0.10) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.85) !important;
    box-shadow: 0 10px 24px rgba(16,24,40,0.06) !important;
  }

  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.cart_item,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item{
    background: rgba(17,24,39,0.55) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td{
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: start !important;
    min-width: 0 !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail{ grid-area: thumb !important; }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-name{
    grid-area: name !important;
    align-self: center !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-remove{
    grid-area: remove !important;
    justify-self: end !important;
    align-self: start !important;
  }

  /* Price / Qty / Subtotal rows */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(16,24,40,0.08) !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price{ grid-area: price !important; }
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity{ grid-area: quantity !important; }
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal{ grid-area: subtotal !important; }

  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price{ grid-area: price !important; }
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity{ grid-area: quantity !important; }
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{ grid-area: subtotal !important; }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::before,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity::before,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity::before,
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before{
    content: attr(data-title) ":" !important;
    display: inline-block !important;
    font-weight: 900 !important;
    color: rgba(17,24,39,0.72) !important;
  }

  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity::before,
  html.selina-dark-mode .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before{
    color: rgba(255,255,255,0.75) !important;
  }

  /* Prevent currency wrapping */
  .woocommerce-cart table.shop_table.cart tr.cart_item .woocommerce-Price-amount,
  .woocommerce-cart table.shop_table.cart tr.cart_item .woocommerce-Price-amount *{
    white-space: nowrap !important;
  }

  /* If qty is injected as plain text/span, keep it readable */
  .woocommerce-cart .selina-cart-qty-display{
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  /* Actions buttons: center the text vertically (Arabic baseline fix) */
  .woocommerce-cart table.shop_table.cart td.actions button,
  .woocommerce-cart table.shop_table.cart td.actions input[type="submit"],
  .woocommerce-cart table.shop_table.cart td.actions .button{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
  }

  /* Ensure the update button doesn't look clipped when disabled */
  .woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"],
  .woocommerce-cart table.shop_table.cart td.actions button[name="apply_coupon"]{
    text-align: center !important;
  }
}