/* CocoaRise Theme — Custom Styles */
/* All layout/spacing handled by Tailwind. This file covers: animations, transitions, custom components. */

/* ── Keyframes ── */
@keyframes fadeUp{0%{opacity:0;transform:translateY(30px);filter:blur(5px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.5deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Utilities ── */
.animate-fade-up{opacity:0;animation:fadeUp 1s ease-out forwards}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-shimmer{background:linear-gradient(90deg,#e8772e 0%,#f4a261 25%,#e8772e 50%,#f4a261 75%,#e8772e 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite}
.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-500{animation-delay:.5s}.delay-700{animation-delay:.7s}
.hero-light-bg{background-image:radial-gradient(circle at 80% 20%,rgba(232,119,46,.06) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(15,27,51,.03) 0%,transparent 50%)}

/* ── Navigation ── */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#e8772e;transition:width .3s}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.mobile-menu-scroll::-webkit-scrollbar{display:none}.mobile-menu-scroll{-ms-overflow-style:none;scrollbar-width:none}

/* ── Hero Slider ── */
.hero-slider-track{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.slider-dot{transition:all .3s}
.slider-dot.active{background:#e8772e !important;width:24px;border-radius:6px}

/* ── Lightbox ── */
.lightbox{opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.active{opacity:1;pointer-events:all}
.lightbox.active .lightbox-img{animation:scaleIn .3s ease-out forwards}

/* ── Toast ── */
.toast-anim{animation:slideDown .4s ease-out forwards}

/* ── Product Cards ── */
.product-card{transition:all .5s cubic-bezier(.4,0,.2,1)}
.product-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px -12px rgba(232,119,46,.15),0 0 0 1px rgba(232,119,46,.06)}
.product-card:hover .product-img{transform:scale(1.05)}
.product-img{transition:transform .7s cubic-bezier(.4,0,.2,1)}

/* ── Gallery ── */
.gallery-item{transition:all .5s ease}
.gallery-item:hover{transform:scale(1.03);z-index:10}
.gallery-item:hover .gallery-overlay{opacity:1}

/* ── Filter Buttons ── */
.filter-btn{transition:all .3s}
.filter-btn.active{background:#0f1b33 !important;color:#fff !important;border-color:#0f1b33 !important;box-shadow:0 4px 15px rgba(15,27,51,.3)}
.filter-btn:not(.active):hover{border-color:#e8772e;color:#e8772e;background:rgba(232,119,46,.05)}

/* ── Shop Cards ── */
.shop-card{opacity:0}

/* ── Cart Badge ── */
#cart-badge{transition:transform .2s}

/* ── Form Inputs ── */
.checkout-input{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid #e2e8f0;outline:none;transition:all .2s;font-size:.875rem;font-family:Inter,sans-serif}
.checkout-input:focus{border-color:#e8772e;box-shadow:0 0 0 3px rgba(232,119,46,.12)}
.checkout-input::placeholder{color:#94a3b8}
.checkout-label{display:block;font-size:.875rem;font-weight:500;color:#334155;margin-bottom:.375rem}

/* ── Payment Options ── */
.payment-option{cursor:pointer;transition:all .2s}
.payment-option:hover{border-color:#e8772e}
.payment-option.selected{border-color:#e8772e;background:rgba(232,119,46,.03);box-shadow:0 0 0 3px rgba(232,119,46,.1)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#fefcf9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#e8772e}

/* ── WooCommerce Overrides ── */
.woocommerce .woocommerce-ordering select{border-radius:.75rem;padding:.5rem 1rem;border:1px solid #e2e8f0;font-size:.875rem}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:#e8772e;color:#fff;border-radius:.75rem;padding:.75rem 1.5rem;font-weight:500;transition:all .2s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:#f4a261;box-shadow:0 4px 15px rgba(232,119,46,.3)}
.woocommerce .quantity .qty{border-radius:.75rem;border:1px solid #e2e8f0;padding:.5rem}
.woocommerce table.shop_table{border-radius:1rem;overflow:hidden;border:1px solid #f1f5f9}
.woocommerce table.shop_table th{background:#f8fafc;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.woocommerce .cart_totals h2{font-family:'Playfair Display',serif;color:#0f1b33}
.woocommerce .woocommerce-breadcrumb{font-size:.875rem}
.woocommerce .woocommerce-info{border-top-color:#e8772e;border-radius:.75rem;background:rgba(232,119,46,.05)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border-radius:.75rem;border:1px solid #e2e8f0;padding:.75rem 1rem}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{border-color:#e8772e;box-shadow:0 0 0 3px rgba(232,119,46,.12);outline:none}
.woocommerce #payment{background:#fff;border-radius:1rem;border:1px solid #f1f5f9;padding:1.5rem}
.woocommerce #payment div.payment_box{background:#fdf6ee;border-radius:.75rem}
.woocommerce #payment ul.payment_methods li{border-bottom:1px solid #f1f5f9;padding:1rem}
.woocommerce #payment ul.payment_methods li label{font-weight:500;color:#0f1b33}
.woocommerce .select2-container--default .select2-selection--single{border-radius:.75rem;border:1px solid #e2e8f0;padding:.5rem 1rem;height:44px}

/* ── Prose overrides for WordPress content ── */
.prose img{border-radius:1rem}
.prose blockquote{border-left-color:#e8772e;font-style:italic}