/* ============================================
   شجاع للاتصالات - Extras (New Features)
   ============================================ */

/* ============ WHATSAPP FLOATING BUTTON ============ */
.whatsapp-float{
  position:fixed;bottom:30px;right:30px;z-index:998;
  display:flex;align-items:center;gap:12px;
}
.whatsapp-float .tooltip{
  background:#fff;color:#1e293b;padding:10px 18px;border-radius:12px;
  font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,0.15);
  opacity:0;transform:translateX(20px);transition:all .3s;pointer-events:none;
  white-space:nowrap;border:1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .whatsapp-float .tooltip{background:#1e293b;color:#fff;border-color:rgba(255,255,255,0.1)}
.whatsapp-float:hover .tooltip{opacity:1;transform:translateX(0)}
.whatsapp-btn{
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;font-size:28px;
  box-shadow:0 12px 30px rgba(37,211,102,0.5);transition:all .3s;
  animation:whatsappPulse 2s ease-in-out infinite;
}
.whatsapp-btn:hover{transform:scale(1.1) rotate(-10deg)}
@keyframes whatsappPulse{
  0%,100%{box-shadow:0 12px 30px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 12px 30px rgba(37,211,102,0.5),0 0 0 18px rgba(37,211,102,0)}
}

/* ============ LIVE CHAT WIDGET ============ */
.chat-widget{position:fixed;bottom:100px;right:30px;z-index:997}
.chat-toggle{
  width:54px;height:54px;border-radius:50%;background:var(--grad-1);color:#fff;
  display:grid;place-items:center;font-size:22px;
  box-shadow:0 12px 30px rgba(139,92,246,0.4);transition:all .3s;position:relative;
}
.chat-toggle:hover{transform:scale(1.08)}
.chat-badge{
  position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;
  background:#ef4444;color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid #fff;
  animation:chatBadge 1.5s ease-in-out infinite;
}
@keyframes chatBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.chat-window{
  position:absolute;bottom:70px;right:0;width:340px;height:460px;
  background:#fff;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,0.2);
  display:none;flex-direction:column;overflow:hidden;border:1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .chat-window{background:#1e293b;border-color:rgba(255,255,255,0.1)}
.chat-window.open{display:flex;animation:chatSlideUp .4s ease}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.chat-header{
  padding:16px;background:var(--grad-1);color:#fff;
  display:flex;align-items:center;gap:12px;
}
.chat-avatar{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.25);
  display:grid;place-items:center;font-size:20px;position:relative;
}
.chat-avatar::after{
  content:"";position:absolute;bottom:0;right:0;width:12px;height:12px;
  background:#10b981;border-radius:50%;border:2px solid #fff;
}
.chat-info{flex:1}
.chat-info h6{font-size:15px;font-weight:800;margin-bottom:2px}
.chat-info small{font-size:12px;opacity:.85}
.chat-close{
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.15);
  display:grid;place-items:center;font-size:14px;transition:background .2s;
}
.chat-close:hover{background:rgba(255,255,255,0.3)}
.chat-body{
  flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  background:var(--light);
}
[data-theme="dark"] .chat-body{background:#0f172a}
.chat-msg{
  max-width:80%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;
}
.chat-msg.bot{
  align-self:flex-start;background:#fff;color:#1e293b;border-bottom-right-radius:4px;
  border:1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .chat-msg.bot{background:#334155;color:#e2e8f0;border-color:rgba(255,255,255,0.1)}
.chat-msg.user{
  align-self:flex-end;background:var(--grad-1);color:#fff;
  border-bottom-left-radius:4px;
}
.chat-msg small{display:block;font-size:11px;opacity:.7;margin-top:4px}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chat-quick button{
  padding:6px 12px;border-radius:50px;background:rgba(139,92,246,0.1);
  color:#7c3aed;font-size:12px;font-weight:700;border:1px solid rgba(139,92,246,0.2);
}
.chat-quick button:hover{background:var(--grad-1);color:#fff}
.chat-input{pisplay:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid rgba(0,0,0,0.05)}
[data-theme="dark"] .chat-input{background:#1e293b;border-top-color:rgba(255,255,255,0.1)}
.chat-input input{
  flex:1;padding:10px 14px;border-radius:50px;border:1px solid rgba(0,0,0,0.1);
  background:var(--light);font-family:inherit;font-size:14px;outline:none;
}
[data-theme="dark"] .chat-input input{background:#0f172a;border-color:rgba(255,255,255,0.1);color:#fff}
.chat-input button{
  width:40px;height:40px;border-radius:50%;background:var(--grad-1);color:#fff;
  display:grid;place-items:center;
}
.chat-input button:hover{transform:scale(1.05)}

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  position:fixed;bottom:20px;left:20px;right:20px;max-width:480px;margin:0 auto;z-index:996;
  background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,0.05);display:flex;gap:14px;align-items:center;
  animation:cookieSlide .5s ease;
}
[data-theme="dark"] .cookie-banner{background:#1e293b;border-color:rgba(255,255,255,0.1)}
.cookie-banner.hide{display:none}
@keyframes cookieSlide{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.cookie-icon{
  width:46px;height:46px;border-radius:12px;background:var(--grad-4);
  display:grid;place-items:center;font-size:22px;color:#fff;flex-shrink:0;
}
.cookie-content{flex:1;font-size:13px;color:var(--text)}
.cookie-content strong{display:block;margin-bottom:4px;font-weight:800;color:var(--text)}
.cookie-actions{display:flex;gap:6px;flex-shrink:0}
.cookie-actions button{
  padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;transition:all .2s;
}
.cookie-accept{background:var(--grad-1);color:#fff}
.cookie-accept:hover{transform:translateY(-2px)}
.cookie-decline{background:rgba(0,0,0,0.05);color:var(--text)}
[data-theme="dark"] .cookie-decline{background:rgba(255,255,255,0.08);color:var(--text)}

/* ============ TESTIMONIALS CAROUSEL ============ */
.testimonials{background:linear-gradient(180deg,var(--light) 0%,#fdf4ff 100%);position:relative;overflow:hidden}
[data-theme="dark"] .testimonials{background:linear-gradient(180deg,var(--light) 0%,#1e1b4b 100%)}
.testimonials-track{position:relative;max-width:900px;margin:0 auto}
.testimonial-card{
  display:none;padding:40px;border-radius:24px;background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);text-align:center;
  animation:fadeIn .5s ease;
}
[data-theme="dark"] .testimonial-card{background:#1e293b}
.testimonial-card.active{display:block}
.testimonial-stars{
  color:#facc15;font-size:22px;margin-bottom:20px;
  display:flex;justify-content:center;gap:4px;
}
.testimonial-text{
  font-size:18px;line-height:1.8;color:var(--text);margin-bottom:24px;
  font-weight:500;position:relative;
}
.testimonial-text::before{
  content:"\f10d";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;top:-10px;right:-10px;font-size:50px;
  color:rgba(139,92,246,0.1);font-style:normal;
}
.testimonial-author{display:flex;align-items:center;gap:14px;justify-content:center}
.author-avatar{
  width:60px;height:60px;border-radius:50%;
  background-size:cover;background-position:center;border:3px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}
[data-theme="dark"] .author-avatar{border-color:#1e293b}
.author-info{text-align:right}
.author-info strong{display:block;font-size:16px;font-weight:800;color:var(--text)}
.author-info small{font-size:13px;color:var(--text-light)}
.testimonial-nav{
  display:flex;justify-content:center;gap:10px;margin-top:30px;align-items:center;
}
.testimonial-dot{
  width:10px;height:10px;border-radius:50%;background:rgba(139,92,246,0.3);
  cursor:pointer;transition:all .3s;
}
.testimonial-dot.active{background:#8b5cf6;width:30px;border-radius:50px}
.testimonial-arrow{
  width:42px;height:42px;border-radius:12px;background:#fff;color:#7c3aed;
  display:grid;place-items:center;font-size:14px;transition:all .3s;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);border:1px solid rgba(139,92,246,0.1);
}
[data-theme="dark"] .testimonial-arrow{background:#334155;color:#c4b5fd}
.testimonial-arrow:hover{background:var(--grad-1);color:#fff;transform:translateY(-3px)}

/* ============ FAQ ACCORDION ============ */
.faq{background:#fff}
[data-theme="dark"] .faq{background:var(--dark)}
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:var(--light);border-radius:18px;border:1px solid rgba(139,92,246,0.1);
  overflow:hidden;transition:all .3s;
}
.faq-item.open{border-color:#8b5cf6;box-shadow:0 10px 30px rgba(139,92,246,0.1)}
.faq-question{
  padding:20px 24px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-weight:700;color:var(--text);font-size:16px;gap:14px;
}
.faq-question i{
  width:36px;height:36px;border-radius:10px;background:var(--grad-1);color:#fff;
  display:grid;place-items:center;font-size:14px;transition:transform .3s;flex-shrink:0;
}
.faq-item.open .faq-question i{transform:rotate(45deg);background:var(--grad-2)}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;
  padding:0 24px;color:var(--text-light);font-size:15px;line-height:1.7;
}
.faq-item.open .faq-answer{max-height:300px;padding:0 24px 20px}

/* ============ VIDEO SECTION ============ */
.video-section{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#fff;position:relative;overflow:hidden}
.video-section::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(139,92,246,0.3),transparent 60%);
}
.video-wrap{
  max-width:900px;margin:0 auto;position:relative;z-index:2;
  border-radius:24px;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  display:grid;place-items:center;cursor:pointer;
  border:2px solid rgba(255,255,255,0.1);
  transition:transform .4s;
}
.video-wrap:hover{transform:scale(1.02)}
.video-poster{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1200&q=80') center/cover;
  opacity:.5;
}
.video-play{
  position:relative;z-index:2;width:90px;height:90px;border-radius:50%;
  background:var(--grad-1);display:grid;place-items:center;font-size:32px;color:#fff;
  box-shadow:0 20px 50px rgba(139,92,246,0.6);
  animation:videoPlay 2s ease-in-out infinite;
}
.video-play::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--grad-1);animation:videoRipple 2s ease-in-out infinite;
}
@keyframes videoPlay{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes videoRipple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.video-section .section-tag{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.2)}
.video-section .section-title{color:#fff}
.video-section .section-sub{color:rgba(255,255,255,0.7)}

/* ============ NEWSLETTER ============ */
.newsletter{
  background:var(--grad-1);color:#fff;position:relative;overflow:hidden;padding:60px 0;
}
.newsletter::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15), transparent 50%),
             radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1), transparent 50%);
}
.newsletter-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;z-index:2;
}
.newsletter-text h3{font-size:32px;font-weight:900;margin-bottom:12px;line-height:1.3}
.newsletter-text p{font-size:15px;opacity:.95}
.newsletter-form{
  display:flex;gap:10px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
  padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,0.25);
}
.newsletter-form input{
  flex:1;padding:14px 18px;border-radius:10px;border:none;
  background:#fff;color:#1e293b;font-family:inherit;font-size:15px;outline:none;
}
.newsletter-form button{
  padding:14px 26px;border-radius:10px;background:#0f172a;color:#fff;
  font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;
  transition:all .3s;
}
.newsletter-form button:hover{background:#020617;transform:translateX(-3px)}
.newsletter-features{
  display:flex;gap:18px;margin-top:18px;flex-wrap:wrap;
}
.newsletter-features span{font-size:13px;display:flex;align-items:center;gap:6px;opacity:.95}
.newsletter-features i{color:#facc15}

/* ============ REPAIR CALCULATOR ============ */
.calculator{background:var(--light)}
.calculator-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
  max-width:1000px;margin:0 auto;
}
.calculator-form{
  background:#fff;padding:30px;border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);border:1px solid rgba(139,92,246,0.1);
}
[data-theme="dark"] .calculator-form{background:#1e293b;border-color:rgba(255,255,255,0.08)}
.calc-field{margin-bottom:18px}
.calc-field label{
  display:block;font-weight:700;color:var(--text);margin-bottom:8px;font-size:14px;
}
.calc-field select,.calc-field input{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid rgba(139,92,246,0.15);
  background:var(--light);color:var(--text);font-family:inherit;font-size:15px;
  transition:all .3s;outline:none;
}
.calc-field select:focus,.calc-field input:focus{
  border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,0.1);
}
.calc-result{
  background:var(--grad-1);padding:30px;border-radius:22px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  position:relative;overflow:hidden;
}
.calc-result::before{
  content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,0.15);
}
.calc-result-label{font-size:14px;opacity:.9;margin-bottom:8px;position:relative;z-index:2}
.calc-result-price{
  font-size:54px;font-weight:900;line-height:1;margin-bottom:12px;
  text-shadow:0 4px 20px rgba(0,0,0,0.2);position:relative;z-index:2;
}
.calc-result-price small{font-size:20px;font-weight:700;margin-right:4px}
.calc-result-note{font-size:13px;opacity:.85;position:relative;z-index:2;margin-bottom:18px}
.calc-result-cta{
  background:#fff;color:#1e293b;padding:12px 24px;border-radius:12px;
  font-weight:800;display:inline-flex;align-items:center;gap:8px;
  position:relative;z-index:2;transition:all .3s;font-size:14px;
}
.calc-result-cta:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.2)}
.calc-features{
  display:flex;flex-direction:column;gap:10px;margin-top:20px;position:relative;z-index:2;text-align:right;
}
.calc-features span{
  display:flex;align-items:center;gap:8px;font-size:13px;opacity:.95;
}
.calc-features i{color:#facc15}

/* ============ BOOKING SYSTEM ============ */
.booking-section{background:linear-gradient(180deg,#fff 0%,var(--light) 100%)}
[data-theme="dark"] .booking-section{background:linear-gradient(180deg,var(--dark) 0%,var(--light) 100%)}
.booking-wrap{
  max-width:900px;margin:0 auto;background:#fff;border-radius:24px;padding:36px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);border:1px solid rgba(139,92,246,0.1);
}
[data-theme="dark"] .booking-wrap{background:#1e293b;border-color:rgba(255,255,255,0.08)}
.booking-steps{
  display:flex;justify-content:space-between;margin-bottom:30px;position:relative;
}
.booking-steps::before{
  content:"";position:absolute;top:18px;left:18px;right:18px;height:2px;
  background:rgba(139,92,246,0.2);z-index:0;
}
.booking-steps .step{
  display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:2;
  flex:1;
}
.booking-steps .step-num{
  width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid rgba(139,92,246,0.2);
  display:grid;place-items:center;font-weight:800;font-size:14px;color:#7c3aed;transition:all .3s;
}
[data-theme="dark"] .booking-steps .step-num{background:#1e293b}
.booking-steps .step.active .step-num{background:var(--grad-1);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(139,92,246,0.4)}
.booking-steps .step.completed .step-num{background:#10b981;color:#fff;border-color:transparent}
.booking-steps .step span{font-size:12px;color:var(--text-light);font-weight:600}
.booking-steps .step.active span{color:#7c3aed}
.booking-panel{display:none}
.booking-panel.active{display:block;animation:fadeIn .4s ease}
.booking-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.booking-option{
  padding:18px;border-radius:14px;border:2px solid rgba(139,92,246,0.15);
  background:var(--light);cursor:pointer;text-align:center;transition:all .3s;
}
.booking-option:hover{border-color:#8b5cf6;transform:translateY(-2px)}
.booking-option.selected{border-color:#8b5cf6;background:rgba(139,92,246,0.05);box-shadow:0 8px 20px rgba(139,92,246,0.1)}
.booking-option i{font-size:28px;color:#7c3aed;margin-bottom:8px;display:block}
.booking-option strong{font-size:14px;color:var(--text);display:block}
.booking-option small{font-size:12px;color:var(--text-light)}
.date-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.date-slot{
  padding:12px;border-radius:12px;border:2px solid rgba(139,92,246,0.15);
  background:var(--light);cursor:pointer;text-align:center;transition:all .3s;
}
.date-slot:hover{border-color:#8b5cf6}
.date-slot.selected{background:var(--grad-1);color:#fff;border-color:transparent}
.date-slot strong{display:block;font-size:14px;font-weight:800}
.date-slot small{font-size:12px;opacity:.8}
.time-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:10px}
.time-slot{
  padding:10px;border-radius:10px;border:2px solid rgba(139,92,246,0.15);
  background:var(--light);cursor:pointer;text-align:center;font-weight:700;font-size:13px;
  transition:all .3s;
}
.time-slot:hover{border-color:#8b5cf6}
.time-slot.selected{background:var(--grad-1);color:#fff;border-color:transparent}
.booking-nav{display:flex;justify-content:space-between;margin-top:24px;gap:10px}
.booking-nav button{
  padding:12px 24px;border-radius:12px;font-weight:800;font-size:14px;
  display:flex;align-items:center;gap:8px;transition:all .3s;
}
.btn-prev{background:rgba(0,0,0,0.05);color:var(--text)}
[data-theme="dark"] .btn-prev{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-next{background:var(--grad-1);color:#fff}
.btn-next:hover,.btn-prev:hover{transform:translateY(-2px)}

/* ============ COMPARISON TABLE ============ */
.comparison{background:#fff}
[data-theme="dark"] .comparison{background:var(--dark)}
.comparison-table{
  max-width:1000px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}
[data-theme="dark"] .comparison-table{background:#1e293b}
.comp-header{
  display:grid;grid-template-columns:1fr 1fr;background:var(--grad-1);color:#fff;
}
.comp-phone{padding:24px;text-align:center}
.comp-phone select{
  background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.3);
  padding:8px 12px;border-radius:10px;font-family:inherit;font-weight:700;
  margin-bottom:12px;cursor:pointer;outline:none;
}
.comp-phone select option{background:#1e293b;color:#fff}
.comp-phone-img{
  width:100px;height:140px;margin:0 auto 12px;border-radius:14px;
  background:rgba(255,255,255,0.15);display:grid;place-items:center;font-size:50px;color:#fff;
}
.comp-phone strong{font-size:16px;font-weight:800}
.comp-row{
  display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .comp-row{border-top-color:rgba(255,255,255,0.05)}
.comp-row > div{padding:14px 20px;font-size:14px}
.comp-row > div:first-child{font-weight:800;color:var(--text);background:rgba(139,92,246,0.04)}

/* ============ LOYALTY CARD ============ */
.loyalty{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 100%);color:#fff;position:relative;overflow:hidden}
.loyalty::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(236,72,153,0.3),transparent 50%),
             radial-gradient(circle at 70% 70%, rgba(249,115,22,0.2),transparent 50%);
}
.loyalty-card{
  max-width:600px;margin:0 auto;position:relative;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05));
  backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);
  border-radius:24px;padding:32px;
}
.loyalty-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.loyalty-icon{
  width:60px;height:60px;border-radius:18px;background:var(--grad-4);
  display:grid;place-items:center;font-size:28px;color:#1e293b;
}
.loyalty-head h4{font-size:22px;font-weight:900;margin-bottom:4px}
.loyalty-head small{opacity:.85;font-size:14px}
.loyalty-progress{margin-bottom:18px}
.loyalty-progress-bar{
  height:14px;border-radius:50px;background:rgba(255,255,255,0.15);
  overflow:hidden;position:relative;margin-bottom:8px;
}
.loyalty-progress-fill{
  height:100%;background:linear-gradient(90deg,#facc15,#f97316);
  border-radius:50px;width:65%;position:relative;
  box-shadow:0 0 20px rgba(250,204,21,0.5);
}
.loyalty-progress-info{display:flex;justify-content:space-between;font-size:13px;opacity:.95}
.loyalty-info{text-align:center;font-size:13px;opacity:.85;margin-top:8px}
.loyalty-rewards{display:flex;justify-content:space-around;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.15)}
.loyalty-reward{text-align:center}
.loyalty-reward i{font-size:24px;color:#facc15;margin-bottom:6px;display:block}
.loyalty-reward strong{font-size:18px;font-weight:900;display:block}
.loyalty-reward small{font-size:12px;opacity:.85}
.loyalty-cta{
  width:100%;margin-top:20px;padding:14px;background:#fff;color:#1e293b;
  border-radius:12px;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .3s;
}
.loyalty-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.3)}

/* ============ ORDER TRACKING ============ */
.tracking{background:var(--light)}
.tracking-wrap{
  max-width:700px;margin:0 auto;background:#fff;padding:30px;border-radius:22px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);border:1px solid rgba(139,92,246,0.1);
}
[data-theme="dark"] .tracking-wrap{background:#1e293b;border-color:rgba(255,255,255,0.08)}
.tracking-form{display:flex;gap:10px;margin-bottom:24px}
.tracking-form input{
  flex:1;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(139,92,246,0.15);
  background:var(--light);color:var(--text);font-family:inherit;font-size:15px;outline:none;
}
.tracking-form input:focus{border-color:#8b5cf6}
.tracking-form button{
  padding:14px 24px;background:var(--grad-1);color:#fff;border-radius:12px;
  font-weight:800;display:flex;align-items:center;gap:8px;transition:all .3s;
}
.tracking-form button:hover{transform:translateY(-2px)}
.tracking-result{display:none;padding-top:20px;border-top:1px solid rgba(0,0,0,0.05);animation:fadeIn .5s}
[data-theme="dark"] .tracking-result{border-top-color:rgba(255,255,255,0.1)}
.tracking-result.show{display:block}
.tracking-status{
  background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(59,130,246,0.1));
  padding:16px;border-radius:14px;margin-bottom:20px;
  display:flex;align-items:center;gap:14px;border:1px solid rgba(16,185,129,0.2);
}
.tracking-status-icon{
  width:48px;height:48px;border-radius:14px;background:#10b981;color:#fff;
  display:grid;place-items:center;font-size:22px;flex-shrink:0;
}
.tracking-status-info h5{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px}
.tracking-status-info p{font-size:13px;color:var(--text-light)}
.tracking-timeline{position:relative;padding-right:30px}
.tracking-timeline::before{
  content:"";position:absolute;top:0;bottom:0;right:11px;width:2px;background:rgba(139,92,246,0.2);
}
.timeline-item{
  position:relative;padding:14px 0;display:flex;align-items:center;gap:14px;
}
.timeline-item::before{
  content:"";position:absolute;right:-22px;width:14px;height:14px;border-radius:50%;
  background:var(--grad-1);border:3px solid #fff;box-shadow:0 0 0 2px #8b5cf6;
}
[data-theme="dark"] .timeline-item::before{border-color:#1e293b}
.timeline-item.pending::before{background:#cbd5e1;box-shadow:0 0 0 2px #cbd5e1}
.timeline-item.completed::before{background:#10b981;box-shadow:0 0 0 2px #10b981}
.timeline-item h6{font-size:14px;font-weight:800;color:var(--text);margin-bottom:2px}
.timeline-item small{font-size:12px;color:var(--text-light)}

/* ============ PRODUCT MODAL ============ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,0.7);backdrop-filter:blur(8px);
  z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;animation:fadeIn .3s ease}
.modal{
  background:#fff;border-radius:24px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;
  position:relative;animation:modalSlide .4s ease;
}
[data-theme="dark"] .modal{background:#1e293b}
@keyframes modalSlide{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{
  position:absolute;top:16px;left:16px;width:38px;height:38px;border-radius:12px;
  background:rgba(0,0,0,0.05);display:grid;place-items:center;font-size:16px;
  color:var(--text);transition:all .2s;z-index:10;
}
.modal-close:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.modal-body{padding:36px}
.modal-header{display:flex;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.modal-img{
  width:180px;height:180px;border-radius:20px;
  display:grid;place-items:center;font-size:70px;color:#fff;flex-shrink:0;
}
.modal-info{flex:1;min-width:200px}
.modal-info h3{font-size:26px;font-weight:900;color:var(--text);margin-bottom:8px}
.modal-info .stars{color:#facc15;margin-bottom:12px;font-size:14px}
.modal-info .price-tag{
  font-size:32px;font-weight:900;
  background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;
}
.modal-info p{color:var(--text-light);font-size:14px;margin-bottom:14px;line-height:1.7}
.modal-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.modal-features li{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;font-weight:600}
.modal-features li i{color:#10b981;font-size:14px;width:20px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============ TOAST ============ */
.toast{
  position:fixed;bottom:100px;left:30px;z-index:1200;
  background:#fff;border-radius:14px;padding:14px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.05);
  display:flex;align-items:center;gap:12px;max-width:340px;
  transform:translateX(-150%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] .toast{background:#1e293b;border-color:rgba(255,255,255,0.1);color:#fff}
.toast.show{transform:translateX(0)}
.toast-icon{
  width:38px;height:38px;border-radius:10px;background:#10b981;color:#fff;
  display:grid;place-items:center;font-size:16px;flex-shrink:0;
}
.toast.error .toast-icon{background:#ef4444}
.toast.info .toast-icon{background:#3b82f6}
.toast strong{font-size:14px;font-weight:800;display:block;margin-bottom:2px}
.toast small{font-size:12px;opacity:.7}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .newsletter-wrap,.calculator-wrap{grid-template-columns:1fr;gap:24px}
  .comp-header,.comp-row{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .whatsapp-float{bottom:20px;right:20px}
  .whatsapp-float .tooltip{display:none}
  .chat-widget{bottom:90px;right:20px}
  .chat-window{width:calc(100vw - 40px);height:70vh;right:-10px}
  .scroll-top{bottom:90px;left:20px}
  .testimonial-text{font-size:16px}
  .modal-body{padding:24px}
  .modal-header{flex-direction:column;text-align:center}
  .modal-img{margin:0 auto}
  .booking-wrap{padding:24px}
  .tracking-form{flex-direction:column}
  .cookie-banner{flex-direction:column;text-align:center;gap:10px}
  .newsletter-form{flex-direction:column}
}
@media (max-width:480px){
  .comp-header,.comp-row{grid-template-columns:1fr;font-size:13px}
  .comp-phone-img{width:80px;height:110px;font-size:36px}
  .calc-result-price{font-size:42px}
  .toast{left:20px;right:20px;bottom:90px;max-width:none}
}