/* Styling & Custom Aurora Keyframe Animations */
@keyframes auroraMove1 {
    0% { transform: translate(-10%, -10%) scale(1); opacity: 0.4; }
    50% { transform: translate(15%, 15%) scale(1.2); opacity: 0.7; }
    100% { transform: translate(-10%, -10%) scale(1); opacity: 0.4; }
}

@keyframes auroraMove2 {
    0% { transform: translate(20%, -15%) scale(1.1); opacity: 0.3; }
    50% { transform: translate(-10%, 20%) scale(0.9); opacity: 0.6; }
    100% { transform: translate(20%, -15%) scale(1.1); opacity: 0.3; }
}

@keyframes auroraMove3 {
    0% { transform: translate(-5%, 25%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(10%, -10%) scale(1.15); opacity: 0.3; }
    100% { transform: translate(-5%, 25%) scale(0.8); opacity: 0.5; }
}

.aurora-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

.aurora-1 {
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,56,92,0.18) 0%, rgba(255,255,255,0) 70%);
    animation: auroraMove1 14s ease-in-out infinite;
}

.aurora-2 {
    top: 20%;
    right: -10%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(147,51,234,0.12) 0%, rgba(255,255,255,0) 70%);
    animation: auroraMove2 18s ease-in-out infinite;
}

.aurora-3 {
    bottom: -10%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(244,63,94,0.12) 0%, rgba(255,255,255,0) 70%);
    animation: auroraMove3 16s ease-in-out infinite;
}

/* Scrollbar Utility */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom transitions */
.service-card, .gallery-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-answer {
    transition: all 0.3s ease-in-out;
}
/* [POSTFIX] Enforce uniform gallery images - auto-injected */
img[src*="gallery_"],
[id*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[id*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]) {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Parent containers of gallery images: enforce aspect-ratio on the wrapper */
[id*="gallery"] [class*="overflow-hidden"],
[class*="gallery"] [class*="overflow-hidden"],
[id*="portfolio"] [class*="overflow-hidden"],
[class*="portfolio"] [class*="overflow-hidden"] {
  aspect-ratio: 4 / 3 !important;
}

/* Except when inside lightbox/modal */
[id*="modal"] img,
[class*="modal"] img,
[id*="lightbox"] img,
[class*="lightbox"] img,
.modal img,
.lightbox img {
  aspect-ratio: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Ensure the grid wrapper doesn't use bento grid heights */
[id*="gallery"] [class*="grid"],
[class*="gallery"] [class*="grid"],
[id*="portfolio"] [class*="grid"],
[class*="portfolio"] [class*="grid"] {
  grid-auto-rows: auto !important;
}

/* [POSTFIX] Enforce small uniform sizes for images inside the shopping cart/basket - auto-injected */
[id*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
.cart-item img,
.basket-item img,
[class*="cart-item"] img,
[class*="basket-item"] img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  aspect-ratio: 1 / 1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Ensure cart items are laid out horizontally in a flex row */
.cart-item,
.basket-item,
[class*="cart-item"],
[class*="basket-item"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* Prevent text overflow in cart items (allows text to wrap) */
.cart-item > div,
.basket-item > div,
[class*="cart-item"] > div,
[class*="basket-item"] > div {
  min-width: 0 !important;
}

/* Let the title and price wrap gracefully */
.cart-item h1, .cart-item h2, .cart-item h3, .cart-item h4, .cart-item h5, .cart-item p, .cart-item span,
.basket-item h1, .basket-item h2, .basket-item h3, .basket-item h4, .basket-item h5, .basket-item p, .basket-item span,
[class*="cart-item"] h1, [class*="cart-item"] h2, [class*="cart-item"] h3, [class*="cart-item"] h4, [class*="cart-item"] h5, [class*="cart-item"] p, [class*="cart-item"] span,
[class*="basket-item"] h1, [class*="basket-item"] h2, [class*="basket-item"] h3, [class*="basket-item"] h4, [class*="basket-item"] h5, [class*="basket-item"] p, [class*="basket-item"] span {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure action buttons don't shrink */
.cart-item button,
.basket-item button,
[class*="cart-item"] button,
[class*="basket-item"] button {
  flex-shrink: 0 !important;
}