/**
 * Welcome Page - Clean CSS (Final Optimization)
 * Last Updated: October 19, 2025
 * Contains only CSS used by welcome.blade.php
 */

:root {
  --header-total-offset: 240px;
  --header-total-mobile: 155px;
  --color-primary: #212529;
  --color-dark: #000;
  --color-light: #fff;
  --color-gray: #f8f9fa;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --accent: #ff6b6b;
  --secondary: #4ecdc4;
  --tertiary: #45b7d1;
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* UNIFIED MAIN CONTENT SPACING (from main-content.css) */
main.main-content,
main {
  padding-bottom: 0 !important;
  min-height: auto;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--color-primary); padding-top: var(--header-total-offset); overflow-x: hidden; }
@media (max-width: 768px) { body { padding-top: var(--header-total-mobile); } }

.welcome-page-wrapper { padding: 0 !important; margin: 0 !important; width: 100%; overflow-x: hidden; position: relative; z-index: 1; }
.container, .container-fluid { width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; }

main, section { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* HERO SLIDER SECTION */
.hero-slider-section { position: relative; width: 100%; height: 60vh; min-height: 500px; overflow: hidden; background: #000; padding: 0; }
.hero-slider-container, .hero-slider-track { position: relative; width: 100%; height: 100%; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; }
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide-image, .hero-overlay { position: absolute; inset: 0; }
.hero-slide-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.6)); }
.hero-slide-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.hero-content-inner { text-align: center; color: white; max-width: 800px; position: relative; }
.hero-slider-section .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-slider-section .hero-description { font-size: 1.25rem; margin-bottom: 2rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.hero-slider-section .hero-btn { display: inline-block; padding: 15px 40px; background: #000; color: white; border: 2px solid #000; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; transition: all 0.3s ease; }
.hero-slider-section .hero-btn:hover { background: #333; border-color: #333; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; }
.hero-nav:hover { background: white; transform: translateY(-50%) scale(1.1); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.hero-prev { left: 30px; }
.hero-next { right: 30px; }
.hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.hero-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; background: transparent; cursor: pointer; transition: all 0.3s ease; }
.hero-dot.active { background: white; transform: scale(1.2); }

/* COMING SOON SECTION */
.coming-soon-section { background: #ffffff; margin-top: 0; margin-bottom: 0; padding: 40px 0 !important; }
.coming-soon-container { max-width: 900px; }
.coming-soon-content { text-align: center !important; padding: 60px 0 !important; }
.coming-soon-title { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; color: #000000; margin: 0 0 30px 0; letter-spacing: -1px; line-height: 1.2; }
.coming-soon-message { font-size: 1.125rem; color: #666666; line-height: 1.8; margin: 0 auto; max-width: 650px; font-weight: 300; }

/* PRODUCTS SECTION */
.products-section { padding: 60px 0 !important; background: #ffffff !important; position: relative; }

.slider-track { display: flex !important; align-items: stretch !important; gap: 30px; transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); }
.slider-track .product-card { flex: 0 0 calc(33.333% - 20px); min-width: calc(33.333% - 20px); }

.product-card { background: white; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; border-radius: 0 !important; }
.product-image-container { position: relative !important; width: 100% !important; height: 200px !important; overflow: hidden !important; background: #f8f9fa !important; }
.product-image-container img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.badge-sale { position: absolute; top: 15px; right: 15px; padding: 8px 15px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: white; border-radius: 20px; background: linear-gradient(135deg, #ff4757, #ff3742); box-shadow: 0 4px 15px rgba(255,71,87,0.4); }

.product-content { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.product-content p { margin: 0 !important; padding: 0 !important; }
.product-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: auto !important; width: 100% !important; }
.btn-view-product, .btn-add-to-cart { display: block !important; padding: 12px 16px !important; background: #000 !important; color: white !important; font-weight: 600 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; cursor: pointer !important; border: 1px solid #000 !important; height: 44px !important; width: 100% !important; transition: all 0.3s ease !important; box-sizing: border-box !important; text-align: center !important; line-height: 20px !important; flex-shrink: 0 !important; }
.btn-view-product i, .btn-add-to-cart i { display: inline-block !important; }
.btn-view-product:hover, .btn-add-to-cart:hover { background: #000 !important; color: white !important; }
.btn-add-to-cart:disabled { background: #6c757d !important; border-color: #6c757d !important; opacity: 0.7 !important; cursor: not-allowed !important; }

.btn-view-all { display: inline-block !important; padding: 14px 45px !important; background: #000 !important; color: white !important; font-weight: 600 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: 2px solid #000 !important; }

.section-header { text-align: center !important; margin-bottom: 10px !important; }
.section-subtitle { font-size: 18px; color: #666; margin: 0; }

/* NEWSLETTER SECTION */
.newsletter-section { padding: 80px 0 !important; background: #212529 !important; position: relative !important; overflow: hidden; }
.newsletter-content { text-align: center !important; max-width: 800px; margin: 0 auto; padding: 0 20px; }
.newsletter-title { font-size: 48px; font-weight: 700; color: white; margin-bottom: 10px !important; letter-spacing: -1px; text-align: center !important; }
.newsletter-subtitle { font-size: 20px; color: white; margin-bottom: 30px !important; opacity: 0.9; text-align: center !important; }

.newsletter-message { display: none; }

.newsletter-form { display: flex; max-width: 600px; margin: 0 auto 30px; }
.newsletter-input { flex: 1; border: 2px solid white; padding: 15px 20px; background: transparent; color: white; font-size: 16px; outline: none; }
.newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-input:focus { border-color: white; }
.newsletter-button { background: white; color: #000; border: 2px solid white; padding: 15px 35px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; }
.newsletter-button:hover { background: #000; color: white; }

.newsletter-features { display: flex !important; justify-content: center !important; gap: 40px !important; margin-top: 30px !important; flex-wrap: wrap !important; }
.newsletter-feature { display: flex !important; align-items: center !important; gap: 8px !important; color: white !important; font-size: 16px; }
.newsletter-feature i { color: white; font-size: 18px; }
.newsletter-feature span { font-size: 14px; }

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
[data-animation="fade-up"] { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
[data-animation="fade-up"].in-view { opacity: 1; transform: translateY(0); }
.hero-slide.active [data-animation="fadeInUp"] { animation: fadeInUp 1s ease forwards; }
.hero-slide.active [data-animation="fadeInUp"][data-delay="200"] { animation-delay: 0.5s; }
.hero-slide.active [data-animation="fadeInUp"][data-delay="400"] { animation-delay: 0.7s; }

/* SLIDER STYLES */
.slider-container { position: relative; width: 100%; overflow: hidden; padding: 0 80px; }
.slider-wrapper { overflow: hidden; margin: 0 auto; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #000; color: white; border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; }
.slider-arrow:hover:not(:disabled) { background: #333; transform: translateY(-50%) scale(1.1); }
.slider-prev { left: 15px; }
.slider-next { right: 15px; }
.slider-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .hero-slider-section { height: 50vh; min-height: 350px; }
  .hero-slider-section .hero-title { font-size: 2.5rem; }
  .hero-slider-section .hero-description { font-size: 1.1rem; }
  .hero-nav { width: 45px; height: 45px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); max-width: 100% !important; }
  .slider-container { padding: 0 !important; overflow: visible !important; max-width: 100% !important; }
  .slider-track { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; transform: none !important; transition: none !important; max-width: 100% !important; }
  .slider-track .product-card { flex: none !important; width: 100% !important; min-width: 100% !important; }
  .product-card { width: 100% !important; max-width: 100% !important; }
  .slider-arrow { display: none !important; }
  .product-card .product-image-container { height: 180px !important; }
  .product-card .product-content { padding: 12px !important; }

  /* Coming Soon Section - Tablet */
  .coming-soon-section { padding: 30px 0 !important; margin-top: 40px !important; }
  .coming-soon-content { padding: 40px 0 !important; }

  /* Newsletter Section - Tablet */
  .newsletter-section { padding: 60px 0 !important; }
  .newsletter-title { font-size: 36px; }
  .newsletter-subtitle { font-size: 18px; }
  .newsletter-form { flex-wrap: wrap; }
  .newsletter-input, .newsletter-button { font-size: 14px; padding: 12px 15px; }
}

@media (max-width: 768px) {
  body, html { width: 100vw !important; overflow-x: hidden !important; }
  .container, .container-fluid { width: 100% !important; padding: 0 !important; margin: 0 !important; }

  .hero-slider-section { height: 50vh; min-height: 400px; }
  .hero-slider-section .hero-title { font-size: 2rem; margin-bottom: 1rem; }
  .hero-slider-section .hero-description { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-slider-section .hero-btn { padding: 12px 30px; font-size: 1rem; }

  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; max-width: 100% !important; }
  .slider-container { padding: 0 !important; overflow: visible !important; max-width: 100% !important; }
  .slider-track { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; transform: none !important; transition: none !important; max-width: 100% !important; }
  .slider-track .product-card { flex: none !important; width: 100% !important; min-width: 100% !important; }

  .newsletter-title { font-size: 36px; }
  .product-card { height: auto !important; width: 100% !important; max-width: 100% !important; }
  .product-card .product-image-container { height: 180px !important; }
  .product-card .product-content { padding: 12px !important; }

  .btn-view-product, .btn-add-to-cart { font-size: 11px !important; padding: 10px 12px !important; }

  .products-section, .newsletter-section { padding-left: 10px !important; padding-right: 10px !important; }

  /* Coming Soon Section - Mobile (768px) */
  .coming-soon-section { padding: 20px 10px !important; margin-top: 20px !important; }
  .coming-soon-content { padding: 30px 0 !important; }
  .coming-soon-title { font-size: clamp(2rem, 5vw, 2.5rem); }

  /* Newsletter Section - Mobile (768px) */
  .newsletter-section { padding: 50px 10px !important; }
  .newsletter-content { padding: 0 10px; }
  .newsletter-title { font-size: 32px; margin-bottom: 15px !important; }
  .newsletter-subtitle { font-size: 16px; margin-bottom: 20px !important; }
  .newsletter-form { max-width: 100%; flex-direction: column; gap: 10px; }
  .newsletter-input { width: 100%; padding: 12px 15px; }
  .newsletter-button { width: 100%; padding: 12px 15px; }
  .newsletter-features { gap: 20px !important; }
  .newsletter-feature { font-size: 14px; }
}

@media (max-width: 480px) {
  .container, .container-fluid { width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .hero-slider-section { height: 40vh; min-height: 280px; }
  .hero-slider-section .hero-title { font-size: 1.5rem; }
  .hero-slider-section .hero-description { font-size: 0.9rem; }

  .newsletter-feature { font-size: 14px; }
  .section-title { font-size: 24px; }

  .slider-container { padding: 0 !important; overflow: visible !important; max-width: 100% !important; }
  .slider-track { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; transform: none !important; transition: none !important; max-width: 100% !important; }
  .slider-track .product-card { flex: none !important; width: 100% !important; min-width: 100% !important; }

  .product-card { height: auto !important; width: 100% !important; max-width: 100% !important; }
  .product-card .product-image-container { height: 180px !important; }
  .product-card .product-content { padding: 12px !important; }

  .btn-view-product, .btn-add-to-cart { font-size: 11px !important; padding: 10px 12px !important; }

  /* Coming Soon Section - Mobile Phone (480px) */
  .coming-soon-section { padding: 20px 10px !important; margin-top: 10px !important; }
  .coming-soon-content { padding: 20px 0 !important; }
  .coming-soon-title { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 20px !important; }
  .coming-soon-message { font-size: 1rem; }

  /* Newsletter Section - Mobile Phone (480px) */
  .newsletter-section { padding: 40px 10px !important; }
  .newsletter-content { padding: 0 5px; }
  .newsletter-title { font-size: 24px; margin-bottom: 10px !important; }
  .newsletter-subtitle { font-size: 14px; margin-bottom: 15px !important; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { width: 100%; padding: 10px 12px; font-size: 14px; }
  .newsletter-button { width: 100%; padding: 10px 12px; font-size: 12px; }
  .newsletter-features { gap: 15px !important; flex-direction: column; }
  .newsletter-feature { font-size: 12px; justify-content: flex-start; }
}
/* UTILITY CLASSES */
.no-products-message {
  text-align: center;
  width: 100%;
  color: #666;
}

.section-actions {
  text-align: center;
  margin-top: 10px;
}

/* RTL SUPPORT */
[dir="rtl"] .badge-sale { right: auto; left: 15px; }
[dir="rtl"] .product-actions { flex-direction: column; }
[dir="rtl"] .btn-view-product, [dir="rtl"] .btn-add-to-cart { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }
[dir="rtl"] .btn-view-product i, [dir="rtl"] .btn-add-to-cart i { display: inline-block !important; }