::-webkit-scrollbar{width:6px;background:transparent}
::-webkit-scrollbar-thumb{background:#1A3636; border-radius: 10px;}
::selection{background:#8A6E2F;color:white} /* Eco-Luxury Gold Selection */
body{font-family:'Space Grotesk',sans-serif; background: #F7F5F0; overflow-x: hidden;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.anim-up{opacity:0;animation:fadeInUp 0.8s ease-out forwards}
.anim-d1{animation-delay:.1s}.anim-d2{animation-delay:.2s}.anim-d3{animation-delay:.3s}.anim-d4{animation-delay:.4s}

.typewriter{overflow:hidden;white-space:nowrap;border-right:3px solid #C9A96E;animation:blink-caret .75s step-end infinite} /* Gold Cursor */
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#C9A96E}}

.product-card { border: 1px solid #1A3636; transition: all 0.2s; border-radius: 8px; } /* Refined 1px Border */
.product-card:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0px 0px rgba(26,54,54,0.1); } /* Softer Shadow */
.product-card:hover .product-img{transform:scale(1.03)} /* Subtle Scale */

.cat-btn.active{background:#1A3636;color:#F7F5F0;border:1px solid #1A3636}
.payment-modal-open #products{filter:blur(4px);opacity:.6;pointer-events:none}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pay-tab.active{border:1px solid #1A3636;color:#1A3636;background:transparent;font-weight:700}
.currency-btn.active-curr{background-color:#1A3636;color:white}
.input-error{border-color:#EF4444!important;background-color:#FEF2F2}

.hero-bg-fallback{background:#1A3636}
.about-bg-fallback{background:#234545}
.rate-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block}

.fancy-select{position:relative}
.fancy-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:white;border:1px solid #1A3636;box-shadow:2px 2px 0px 0px rgba(26,54,54,0.08);z-index:60;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;overflow:hidden; border-radius: 6px;} /* Softer Shadow */
.fancy-select.open .fancy-select-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.fancy-option{padding:8px 12px;font-size:.75rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid #E8E4DB;transition:all .15s}
.fancy-option:last-child{border-bottom:none}
.fancy-option:hover{background:#8A6E2F;color:white;padding-left:16px} /* Gold Hover */
.rotate-180{transform:rotate(180deg)}

@keyframes modalFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-enter{animation:modalFadeIn .3s ease-out forwards}
@keyframes slideInRight{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.toast-enter{animation:slideInRight .4s ease-out forwards}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
.toast-exit{animation:slideOutRight .3s ease-in forwards}
@keyframes slowSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.logo-spin{animation:slowSpin 10s linear infinite}
@keyframes successPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.success-pop{animation:successPop .5s ease-out forwards}
@keyframes stepPulse{0%,100%{opacity:.4}50%{opacity:1}}
.step-active{animation:stepPulse 1.2s ease-in-out infinite}
@keyframes progressStripe{0%{background-position:0 0}100%{background-position:40px 0}}
.progress-bar-animated{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px;animation:progressStripe 1s linear infinite}
@keyframes countdownBar{from{width:100%}to{width:0%}}
.countdown-bar{animation:countdownBar 5s linear forwards}

/* Trending Swiper */
.trendingSwiper { width: 100%; padding-top: 20px; padding-bottom: 60px; }
.trendingSwiper .swiper-slide { 
    background: #fff; 
    border: 1px solid #1A3636; 
    overflow: hidden; 
    width: 320px; 
    height: auto; 
    transition: all 0.2s ease; 
    box-shadow: 2px 2px 0px 0px rgba(26,54,54,0.08); 
    border-radius: 8px;
    cursor: pointer; /* <-- ADD THIS LINE */
}
.trendingSwiper .swiper-slide:hover { box-shadow: 3px 3px 0px 0px rgba(26,54,54,0.1); transform: translate(-2px, -2px); }
.trending-card-img { width: 100%; height: 320px; object-fit: cover; background: #f3f4f6; border-bottom: 1px solid #1A3636; }
.trending-card-content { padding: 24px; text-align: center; }
.trending-card-name { font-size: 18px; font-weight: 700; color: #1A3636; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Playfair Display', serif; }
.trending-card-price { font-size: 16px; font-weight: 800; color: #8A6E2F; } /* Gold Price */
.trending-badge { position: absolute; top: 16px; left: 16px; background: #8A6E2F; color: white; padding: 6px 14px; font-size: 12px; font-weight: 700; box-shadow: 1px 1px 0px 0px rgba(26,54,54,0.1); z-index: 10; display: flex; align-items: center; gap: 6px; border: 1px solid #1A3636; text-transform: uppercase; border-radius: 6px; } /* Gold Badge */
.swiper-pagination-bullet { background: #1A3636 !important; width: 10px; height: 10px; opacity: 0.4; }
.swiper-pagination-bullet-active { opacity: 1 !important; background: #8A6E2F !important; } /* Gold Bullet */

/* Hero image */
.fire-img { animation: fireScale 4s ease-in-out infinite; }
.fire-container { box-shadow: 3px 3px 0px 0px rgba(201,169,110,0.3); border: 1px solid #F7F5F0; border-radius: 12px; overflow: hidden;} /* Refined Border & Tinted Shadow */
@keyframes fireScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* AI Chat Widget */
#ai-chat-btn {
    position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: #8A6E2F; color: white; border: 1px solid #1A3636; box-shadow: 2px 2px 0px 0px rgba(26,54,54,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100; transition: all 0.2s; border-radius: 50%; /* Gold Button */
}
#ai-chat-btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0px 0px rgba(26,54,54,0.15); }

#ai-chat-box {
    position: fixed; bottom: 100px; right: 24px; width: 380px; max-height: 500px; background: #F7F5F0; border: 1px solid #1A3636; box-shadow: 3px 3px 0px 0px rgba(26,54,54,0.1); z-index: 100; display: none; flex-direction: column; font-family: 'Space Grotesk', sans-serif; border-radius: 12px; overflow: hidden; /* Refined Border & Shadow */
}
#ai-chat-box.open { display: flex; }

.chat-header { background: #1A3636; color: #F7F5F0; padding: 12px 16px; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; border-bottom: 1px solid #1A3636; display: flex; justify-content: space-between; align-items: center; }
.chat-close-btn { background: none; border: none; color: white; cursor: pointer; }

#chat-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-height: 350px; background: #FDFCF9; }
.msg { padding: 10px 14px; border: 1px solid #1A3636; max-width: 80%; font-size: 13px; line-height: 1.4; border-radius: 8px; }
.msg.user { align-self: flex-end; background: #1A3636; color: #F7F5F0; border-bottom-right-radius: 2px; }
.msg.bot { align-self: flex-start; background: #fff; color: #1A3636; border-bottom-left-radius: 2px; }

.chat-input-area { display: flex; border-top: 1px solid #1A3636; }
#chat-input { flex: 1; padding: 12px; border: none; font-family: inherit; font-size: 13px; outline: none; background: #fff; color: #1A3636; }
#chat-input::placeholder { color: #8FA898; }
#chat-send { background: #8A6E2F; color: white; border: none; border-left: 1px solid #1A3636; padding: 0 16px; font-weight: 700; cursor: pointer; text-transform: uppercase; } /* Gold Send */

.handoff-area { padding: 16px; border-top: 1px solid #1A3636; background: #FDFCF9; text-align: center; display: none; }
.handoff-area p { font-size: 12px; margin-bottom: 8px; font-weight: bold; text-transform: uppercase; color: #1A3636; }
.handoff-btn { background: #1A3636; color: #F7F5F0; padding: 8px 16px; border: 1px solid #1A3636; font-weight: 700; text-transform: uppercase; cursor: pointer; font-family: inherit; font-size: 12px; text-decoration: none; display: inline-block; box-shadow: 1px 1px 0px 0px rgba(26,54,54,0.1); border-radius: 6px; }
.handoff-btn:hover { background: #8A6E2F; border-color: #745C28; } /* Gold Hover */

/* ==========================================
   MOBILE COMPATIBILITY (Samsung, iPhone, Tablet)
   ========================================== */

/* Prevent iOS auto-zoom on input focus */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* iOS Safe Area (Notch & Home Bar) */
@supports (padding: max(0px)) {
  #navbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  #ai-chat-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
  #ai-chat-box {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
  }
  footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Very Small Phones (Samsung Fold closed ~274px, Older Galaxies 320px) */
@media (max-width: 360px) {
  .trendingSwiper .swiper-slide { width: 260px; }
  .trending-card-img { height: 220px; }
  .trending-card-name { font-size: 14px; }
  .trending-card-price { font-size: 14px; }
  .trending-card-content { padding: 16px; }
  
  .cat-btn { padding: 6px; border-width: 1px; }
  .cat-btn span { font-size: 8px; }
  .cat-btn .w-9 { width: 24px; height: 24px; }
  .cat-btn .w-9 i { width: 12px; height: 12px; }

  body, html {
    overflow-x: hidden;
    width: 100%;
  }

  #paymentModal > div {
    max-width: 100%;
    border-radius: 8px;
    margin: 4px;
  }

  .chat-input-area { flex-direction: column; }
  #chat-send { width: 100%; padding: 10px; }
}

/* Standard Mobile (360px - 414px) */
@media (min-width: 361px) and (max-width: 414px) {
  .trendingSwiper .swiper-slide { width: 290px; }
  .trending-card-img { height: 250px; }
}

/* Tablet adjustments (768px+) */
@media (min-width: 768px) {
  #ai-chat-box {
    width: 400px;
    max-height: 550px;
  }
}

/* Fix backdrop-filter fallback for older Samsung/Android browsers */
@supports not (backdrop-filter: blur(12px)) {
  #navbar {
    background-color: #F7F5F0; /* Solid color fallback */
  }
  #searchBar {
    background-color: #F7F5F0;
  }
}

@media (max-width: 768px) {
  #ai-chat-box { right: 10px; left: 10px; width: auto; bottom: 90px; max-height: 60vh; }
  #ai-chat-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}