/* ===========================================
   components.css
   Specific page components
   للتكيف والتبريد (Cooling & Refrigeration)
   =========================================== */

/* ---------- SERVICE PAGE ---------- */
.service-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
  padding: 100px 0;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9rem;
  opacity: 0.9;
}
.breadcrumb a { color: var(--white); text-decoration: underline; }
.breadcrumb span { opacity: 0.7; }

/* Problems Grid */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.problem-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 25px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border-right: 4px solid transparent;
}
html[lang="en"] .problem-card {
  border-right: none;
  border-left: 4px solid transparent;
}
.problem-card:hover {
  box-shadow: var(--shadow-md);
  border-right-color: var(--primary);
}
html[lang="en"] .problem-card:hover {
  border-left-color: var(--primary);
}
.problem-card .icon { font-size: 2rem; margin-bottom: 12px; }
.problem-card h3 { font-size: 1.2rem; margin-bottom: 8px; }

/* Brands Section */
.brands-section {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.brand-pill {
  background: var(--gray-100);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
}
.brand-pill:hover {
  background: var(--primary);
  color: var(--white);
}

/* Process Steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  position: relative;
}
.step { text-align: center; position: relative; }
.step-number {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  margin: 0 auto 15px; position: relative; z-index: 2;
}
.step::after {
  content: '';
  position: absolute; top: 30px; width: 100%; height: 2px;
  border-top: 2px dashed var(--gray-200); z-index: 1;
}
.step:last-child::after { display: none; }
.step h4 { margin-bottom: 8px; }

/* Pricing Table (structure kept, but no pricing data used in HTML) */
.pricing-table {
  width: 100%; border-collapse: collapse;
  background: var(--white); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.pricing-table th, .pricing-table td {
  padding: 15px 20px; border-bottom: 1px solid var(--gray-200); text-align: start;
}
.pricing-table th { background: var(--secondary); color: var(--white); font-weight: 700; }
.pricing-table tbody tr:hover { background: var(--primary-light); }
.pricing-table tbody tr:last-child td { border-bottom: none; }

/* Tips Accordion */
.tips-accordion .accordion-item { border-bottom: 1px solid var(--gray-200); }
.accordion-question {
  width: 100%; padding: 18px 0; background: none; border: none;
  text-align: start; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; transition: var(--transition);
}
.accordion-question:hover { color: var(--primary); }
.accordion-question .icon { font-size: 1.5rem; transition: transform 0.3s; }
.accordion-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-item.open .accordion-answer { max-height: 500px; }
.accordion-item.open .icon { transform: rotate(45deg); }

/* ---------- FAQ PAGE ---------- */
.faq-categories { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; justify-content: center; }
.faq-cat-btn {
  padding: 10px 24px; border: 2px solid var(--gray-200);
  border-radius: 50px; background: var(--white); font-weight: 500; transition: var(--transition);
}
.faq-cat-btn.active, .faq-cat-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

.faq-item { border-bottom: 1px solid var(--gray-200); margin-bottom: 5px; }
.faq-question {
  padding: 20px 0; display: flex; justify-content: space-between;
  align-items: center; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.faq-question:hover { color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 500px; padding-bottom: 20px; }
.faq-item.open .faq-question .arrow { transform: rotate(180deg); }
.arrow { font-size: 1.2rem; transition: transform 0.3s; }

/* ---------- AREAS PAGE ---------- */
.area-card { border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); }
.area-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.area-card-header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 25px; color: var(--white); }
.area-card-body { padding: 25px; }
.area-map-pin { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--gray-600); }
.area-map-pin .pin-icon { font-size: 1.5rem; }

/* ---------- BLOG ---------- */
.blog-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { padding: 20px; }
.blog-meta { font-size: 0.85rem; color: var(--gray-600); display: flex; gap: 15px; margin-bottom: 10px; }
.blog-title { font-size: 1.3rem; margin-bottom: 12px; }
.blog-title a:hover { color: var(--primary); }
.blog-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--gray-600); }

.blog-article { max-width: 800px; margin-left: auto; margin-right: auto; }
.article-header { text-align: center; padding-bottom: 30px; border-bottom: 1px solid var(--gray-200); margin-bottom: 40px; }
.article-body h2 { margin: 40px 0 20px; }
.article-body p { margin-bottom: 20px; }
.article-toc { position: sticky; top: 90px; padding: 20px; background: var(--gray-50); border-radius: var(--radius-md); margin-bottom: 30px; }
.article-toc ol { padding: 0 20px; margin: 10px 0 0; }
.article-cta-box { background: var(--primary-light); padding: 25px; border-radius: var(--radius-md); border-right: 4px solid var(--primary); margin: 40px 0; }
html[lang="en"] .article-cta-box { border-right: none; border-left: 4px solid var(--primary); }

/* ---------- CONTACT PAGE ---------- */
.contact-form { background: var(--white); padding: 40px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: 700; margin-bottom: 8px; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 14px 18px; border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; transition: var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary); outline: none; }
.form-textarea { min-height: 150px; resize: vertical; }
.btn-submit {
  width: 100%; padding: 14px; font-size: 1.1rem; font-weight: 700;
  background: var(--primary); color: var(--white); border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition);
}
.btn-submit:hover { background: var(--primary-dark); }

.contact-info-card {
  display: flex; align-items: center; gap: 15px; padding: 20px;
  background: var(--gray-50); border-radius: var(--radius-md); margin-bottom: 15px;
}
.contact-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--primary); }
.map-container { border-radius: var(--radius-md); overflow: hidden; height: 400px; }
.map-container iframe { width: 100%; height: 100%; border: none; }

/* ---------- ABOUT PAGE ---------- */
.team-card { text-align: center; padding: 30px; }
.team-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; }
.stats-counter { font-size: 3rem; font-weight: 700; color: var(--primary); }

.timeline { position: relative; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gray-200); }
html[lang="ar"] .timeline::before { right: 20px; }
html[lang="en"] .timeline::before { left: 20px; }
.timeline-item { padding: 20px 40px; position: relative; margin-bottom: 30px; }
.timeline-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--primary); position: absolute; top: 25px; }
html[lang="ar"] .timeline-dot { right: 14px; }
html[lang="en"] .timeline-dot { left: 14px; }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; }
.value-card { text-align: center; padding: 30px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ---------- TRUST SECTION ---------- */
.review-card { background: var(--white); padding: 25px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.review-stars { color: var(--warning); font-size: 1.2rem; margin-bottom: 12px; }
.review-text { font-style: italic; margin-bottom: 15px; line-height: 1.6; }
.reviewer-name { font-weight: 700; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 15px; }
.trust-badge { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--gray-200); border-radius: 50px; font-weight: 500; }

/* ---------- EMERGENCY BANNER ---------- */
.emergency-banner { background: linear-gradient(135deg, var(--danger), var(--accent)); color: var(--white); text-align: center; padding: 60px 20px; border-radius: var(--radius-lg); }
.emergency-phone { font-size: 2.5rem; font-weight: 900; display: block; margin-top: 15px; }

/* ---------- RESPONSIVE OVERRIDES for components ---------- */
@media (max-width: 992px) {
  .process-steps::after { display: none; }
  .step::after { display: none; }
}
@media (max-width: 768px) {
  .contact-form { padding: 20px; }
  .map-container { height: 250px; }
  .emergency-phone { font-size: 1.8rem; }
}