/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 
 /* Colors Styles Will be Added Here */
.danger-text{
	color:var(--danger) !important;
}

.danger-text:hover{
	color:var(--dark) !important;
}

.bg-custom-grad{
  background: linear-gradient(92deg, var(--primaryDull) 50%, #0E1B21 118.16%);
}

/* Colors Styles End */

.hover-pointer:hover{
cursor:pointer !important;
}

.custom-product-wrapper{
width:100%;
}


.urban-product-item{
  border-radius: 10px;  
  margin-bottom: 20px; 
  width: 100%;
}

.urban-product-image-wrapper{
 position: relative; 
 border-radius: 20px; 
 display: flex; 
 flex-direction: column; 
 align-items: flex-end;

}


.urban-icons-wrapper{
 position: absolute; 
 top: 10px; 
 right: 10px; 
 display: flex; 
 flex-direction: column;

}

.urban-icon{
 position:relative;
 width: 40px; 
 height: 40px;
}

.urban-icon:hover{
  cursor:pointer;
}

.urban-icon i, .urban-icon svg {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.urban-product-details{
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.urban-item-link{
  width:100%;
}



.text-danger{
  color:var(--danger) !important;
}

.regularPriceSales{
  color:var(--secondary);
}

.PricesSection, .digi_items_price{
  display: flex;
  column-gap: 10px;
}

.percentage{
  background: var(--primary-light);
  padding:2px 12px;
  border-radius: 62px;
  font-size:14px;
}

.productListsFooter{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.productListsFooter img{
  width:40px;
  display: none;
}


/* Toast Styles */

.toast-buttons {
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 2em auto;
}

.toast-row {
  display: flex;
  justify-content: center;
  margin: 1em 0;
  padding: 1rem;
  flex-wrap: wrap;
}


.toast {
  position: fixed;
  top: 60px;
  right: 25px;
  z-index: 9999999999 !important;
  max-width: 300px;
  background: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  box-shadow: -1px 1px 10px
      rgba(0, 0, 0, 0.3);
  z-index: 1023;
  animation: slideInRight 0.3s
          ease-in-out forwards,
      fadeOut 0.5s ease-in-out
          forwards 3s;
  transform: translateX(110%);
}

.toast.closing {
  animation: slideOutRight 0.5s
      ease-in-out forwards;
}

.toast-progress {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: #b7b7b7;
  animation: toastProgress 5000s
      ease-in-out forwards;
}



.toast-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toast-icon {
  padding: 0.35rem 0.5rem;
  font-size: 2rem;
  color: var(--light, #fff);
}

.toast-message {
  flex: 1;
  font-size: 1.2rem;
  color: var(--light, #fff);
  padding: 0.5rem;
}

.toast.toast-success {
  background: var(--success, #28a745);
}

.toast.toast-success .toast-progress {
  background-color: #3498db;
}

.toast.toast-danger {
  background:  var(--danger, #dc3545);
}

.toast.toast-danger .toast-progress {
  background-color: #e74c3c;
}

.toast.toast-info {
  background: var(--info, #17a2b8);
}

.toast.toast-info .toast-progress {
  background-color: #3498db;
}

.toast.toast-warning {
  background: var(--warning, #ffc107);
}

.toast.toast-warning .toast-progress {
  background-color: #f1c40f;
}

@keyframes slideInRight {
  0% {
      transform: translateX(110%);
  }

  75% {
      transform: translateX(-10%);
  }

  100% {
      transform: translateX(0%);
  }
}

@keyframes slideOutRight {
  0% {
      transform: translateX(0%);
  }

  25% {
      transform: translateX(-10%);
  }

  100% {
      transform: translateX(110%);
  }
}

@keyframes fadeOut {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0;
      display: none;
  }
}

@keyframes toastProgress {
  0% {
      width: 100%;
  }

  100% {
      width: 0%;
  }
}

ul.page-numbers li{
  margin:0px !important;
  padding: 10px;
  background: var(--neutral);
}

.page-numbers{
  padding:6px 16px !important;
  padding-bottom:3px !important;
}

.page-numbers .current{
  background: var(--dark);
  border-radius: 20px;
  color: #fff;
}


ul.page-numbers li:nth-last-child(2){
  border-radius: 0px 30px 30px 0px !important;
}

/* ul.page-numbers li:nth-child(2){
  border-radius: 30px 0px 0px 30px !important;
} */



ul.page-numbers li:has(a.prev){
  margin-right:20px !important;
  border-radius: 30px;
}

ul.page-numbers li:has(a.next){
  margin-left:20px !important;
  border-radius: 30px;
}

ul.page-numbers li:nth-child(1):not(:has(.prev)) + li:nth-last-child(2) {
  border-radius: 0px 30px 30px 0px !important;
}


ul.page-numbers li:nth-child(1):not(:has(.prev)) {
  border-radius: 30px 0px 0px 30px !important;
}


ul.page-numbers li:nth-last-child(1):not(:has(.next)) {
  border-radius: 0px 30px 30px 0px !important;
}

ul.page-numbers li:nth-last-child(1):not(:has(.next)) + li:nth-last-child(2) {
  border-radius: 0px 0px 0px 0px !important;
}

ul.page-numbers li:nth-child(1):has(.prev) + li:nth-child(2) {
  border-radius: 30px 0px 0px 30px !important;
}

ul.page-numbers li:nth-last-child(2):not(:has(+ li a.next)) {
  border-radius: 0px !important;
}

.brxe-woocommerce-products-filter .search-form input[type=search]{
  padding-top:10px;
  padding-bottom: 10px;
}



#brxe-nhymkd li:nth-child(2) form ul{
  display: flex;
  column-gap:20px;
}




.cursor-pointer:hover{
  cursor: pointer !important;
}


.loader {
  border: 4px solid #f3f3f3 !important; /* Light grey */
  border-top: 4px solid var(--dark) !important; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.product-listing-sale-percentage{
  display: flex;
  padding: 2px 12px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 62px;
  background: var(--primary);
  opacity:0.3;
  color: var(--light);
  /* tags (desktop) */
  font-family: Mulish;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.7px;
  text-transform: capitalize;
}


.dynamicpress-select{
  width:100% !important;
}

.swatchesOuterWrapper{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
}


cite{
font-family: Mulish;
text-transform: capitalize !important;
	font-size:16px !important;
}

.wp-block-table td, .wp-block-table th {
    border: 0px !important;
}

.loader-overlay {
  position: fixed;
  top: 0;
  right:0 ;
  z-index: 99998;
  pointer-events: auto;
}

/* Overlay Background */
.loader-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left:0;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.4));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeInOverlay 0.2s ease-in-out forwards;
  opacity: 0;
  z-index: 1;
}

/* Spinning Loader Circle */
.loader-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-top: 6px solid var(--primary);
  border-radius: 50%;
  animation: spinLoader 1s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Keyframes */
@keyframes spinLoader {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fadeInOverlay {
  to { opacity: 1; }
}

.brx-popup {
  background:  rgba(0, 0, 0, 0.5) !important;
    height: 100%;
    z-index: 999999999 !important;
    width: 100%;
    position: fixed;
}

body.bricks-is-frontend :focus-visible{
  outline:1px solid rbga(255,255,255,0.3) !important;
}

h2#swal2-title {
    line-height: normal !important;
    font-size:2.85em !important;
}

#swal2-html-container{
    font-size:1.5em !important;
}

.swal2-confirm.swal2-styled{
    font-size:1.5em !important;
}

[active-category="true"]{
width:50% !important;
}


/* ─── Wishlist Delete Button Loader (ring/circle spinner) ──────────────────────
   Variable-driven so the Bricks "Loader" controls on the Wishlist Delete Button
   element can design it. Defaults are chosen to look good on the dark circular
   delete button out of the box. The same markup is reused by the AJAX drawer
   delete item (the loader <span> is injected by JS when missing). */
.dp-wishlist-delete-loader {
  box-sizing: border-box;
  display: none;
  width: var(--dp-del-loader-size, 18px);
  height: var(--dp-del-loader-size, 18px);
  border: var(--dp-del-loader-thickness, 2px) solid var(--dp-del-loader-track, rgba(255, 255, 255, 0.35));
  border-top-color: var(--dp-del-loader-color, #ffffff);
  border-radius: 50%;
  animation: dpWishlistDeleteSpin var(--dp-del-loader-speed, 0.6s) linear infinite;
}

/* While a delete request is in flight: lock the button, swap content for loader. */
.add-to-wishlist-dynamicpress-delete-item.is-loading {
  pointer-events: none;
  cursor: progress;
}

.add-to-wishlist-dynamicpress-delete-item.is-loading > *:not(.dp-wishlist-delete-loader) {
  display: none !important;
}

.add-to-wishlist-dynamicpress-delete-item.is-loading > .dp-wishlist-delete-loader {
  display: inline-block;
}

@keyframes dpWishlistDeleteSpin {
  to { transform: rotate(360deg); }
}