/**
 * Xoro.pk — Custom CSS
 * All animations, custom styles & responsive overrides
 */

/* Base */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,sans-serif;background:#000;color:#fff;margin:0}
::selection{background:#D4AF37;color:#000}

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

/* Gold Shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.gold-shimmer{background:linear-gradient(90deg,#D4AF37 0%,#f5e6a3 50%,#D4AF37 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s ease-in-out infinite}

/* Notifications */
@keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
.notification-in{animation:slideInRight .4s ease-out forwards}
.notification-out{animation:slideOutRight .4s ease-in forwards}

/* Pulse */
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.4)}50%{box-shadow:0 0 0 10px rgba(212,175,55,0)}}
.pulse-gold{animation:pulse-gold 2s ease-in-out infinite}

/* Float */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-animation{animation:float 3s ease-in-out infinite}

/* Stock Bar */
@keyframes countdown{from{width:100%}to{width:0%}}
.stock-bar{animation:countdown 8s linear forwards}

/* WhatsApp Float */
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float{transition:transform .3s ease}

/* Product Card Hover */
.product-card:hover .product-image{transform:scale(1.08)}
.product-image{transition:transform .7s ease}

/* Collection Card */
.collection-card:hover .collection-overlay{opacity:1}
.collection-card:hover .collection-image{transform:scale(1.1)}
.collection-image{transition:transform .7s ease}
.collection-overlay{transition:opacity .5s ease}

/* Gallery */
.gallery-item:hover img{transform:scale(1.1)}

/* Line Clamp */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Form Elements */
input:focus,textarea:focus,select:focus{outline:none}

/* Toast Container */
.toast-container{pointer-events:none}
.toast-container>*{pointer-events:auto}

/* FAQ */
details[open] summary .faq-icon{transform:rotate(45deg)}
.faq-icon{transition:transform .3s ease}

/* Hero */
.hero-gradient{background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(192,192,192,.05) 0%,transparent 50%),linear-gradient(180deg,#0a0a0a 0%,#000 100%)}

/* Cards */
.card-gradient{background:linear-gradient(145deg,#1a1a1a 0%,#111 100%)}

/* Borders */
.gold-border-hover:hover{border-color:rgba(212,175,55,.5)}

/* UGC Scroll */
.ugc-scroll{scroll-snap-type:x mandatory}
.ugc-scroll>*{scroll-snap-align:start}

/* Thumbnail Buttons */
.thumb-btn{border:2px solid transparent;transition:all .2s}
.thumb-btn.active{border-color:#D4AF37}
.thumb-btn:hover{border-color:rgba(212,175,55,.5)}

/* Page Sections */
.page-section{display:none}
.page-section.active{display:block}

/* WooCommerce Overrides */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{background:#D4AF37;color:#000;border-radius:9999px;font-weight:700}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:#e8c84a;color:#000}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:#D4AF37}
.woocommerce .star-rating span::before{color:#D4AF37}
.woocommerce .woocommerce-breadcrumb{display:none}
.woocommerce-message{border-top-color:#D4AF37}
.woocommerce-message::before{color:#D4AF37}

/* Select dropdown styling */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}

/* Responsive */
@media (max-width:640px){
    .hero-gradient{padding-top:2rem}
    .product-card{font-size:.85rem}
    nav .text-3xl{font-size:1.5rem}
}