/*
 * SEOMasterz — UI Components (Buttons, Cards, Forms, etc.)
 * File: css/components.css
 * Author: Mehmood Gujjar
 */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .875rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
}
.btn--primary { background: var(--color-secondary); color: var(--color-white); border-color: var(--color-secondary); box-shadow: var(--shadow-secondary); }
.btn--primary:hover, .btn--primary:focus { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-white); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn--outline:hover { background: var(--color-white); color: var(--color-primary); }
.btn--outline-dark { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline-dark:hover { background: var(--color-primary); color: var(--color-white); }
.btn--sm  { padding: .625rem 1.5rem; font-size: var(--text-sm); }
.btn--lg  { padding: 1.125rem 2.5rem; font-size: var(--text-lg); }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: var(--space-xl); }

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.service-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-lg);
  color: white;
}
.service-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.service-card p  { font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.service-link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  display: inline-flex; align-items: center; gap: var(--space-xs);
  transition: gap var(--transition-fast);
}
.service-link:hover { gap: var(--space-sm); color: var(--color-secondary-dark); }

/* ============================================================
   FEATURE ITEMS
   ============================================================ */
.features-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}
.features-section h2, .features-section h3, .features-section h4 { color: var(--color-white); }
.features-section .section-label { color: var(--color-secondary-light); }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }

.feature-item { display: flex; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.feature-icon {
  width: 48px; height: 48px;
  background: rgba(232,104,26,.2);
  border: 1px solid rgba(232,104,26,.3);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--color-secondary-light);
  flex-shrink: 0;
}
.feature-text p { color: rgba(255,255,255,.65); font-size: var(--text-sm); margin-bottom: 0; }

.features-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.metric-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
}
.metric-card.featured { background: var(--color-secondary); border-color: var(--color-secondary); grid-column: 1 / -1; }
.metric-number { font-size: var(--text-4xl); font-weight: var(--font-weight-black); color: var(--color-white); line-height: 1; margin-bottom: var(--space-xs); }
.metric-label  { font-size: var(--text-sm); color: rgba(255,255,255,.7); }

/* ============================================================
   PACKAGES / PRICING CARDS
   ============================================================ */
.packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--space-xl); }

.package-card {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  position: relative;
  transition: all var(--transition-base);
}
.package-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.package-card.featured { border-color: var(--color-secondary); box-shadow: var(--shadow-secondary); }

.package-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-secondary); color: white;
  padding: .3rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.package-name  { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--space-sm); }
.package-price { font-size: var(--text-4xl); font-weight: var(--font-weight-black); color: var(--color-secondary); line-height: 1; margin-bottom: var(--space-xs); }
.package-price span { font-size: var(--text-lg); font-weight: var(--font-weight-regular); color: var(--color-gray-600); }
.package-desc  { font-size: var(--text-sm); color: var(--color-gray-600); margin-bottom: var(--space-xl); }
.package-features { margin-bottom: var(--space-xl); }
.package-features li {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-gray-700);
  padding: .4rem 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.check-icon { color: var(--color-secondary); font-weight: bold; flex-shrink: 0; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; }
.step-number {
  width: 80px; height: 80px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); font-weight: var(--font-weight-black);
  color: var(--color-white);
  margin: 0 auto var(--space-lg);
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-primary);
  transition: all var(--transition-base);
}
.process-step:hover .step-number { background: var(--color-secondary); transform: scale(1.1); }
.process-step h4 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.process-step p  { font-size: var(--text-sm); color: var(--color-gray-600); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: var(--color-off-white); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: var(--space-xl); }

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  transition: box-shadow var(--transition-base);
}
.testimonial-card:hover { box-shadow: var(--shadow-lg); }
.testimonial-stars { color: var(--color-secondary); font-size: var(--text-lg); letter-spacing: 2px; margin-bottom: var(--space-md); }
.testimonial-text {
  font-size: var(--text-base); color: var(--color-gray-700);
  font-style: italic; line-height: 1.8;
  margin-bottom: var(--space-lg);
  position: relative;
}
.testimonial-text::before { content: '"'; font-size: 4rem; color: var(--color-secondary); opacity: .2; position: absolute; top: -20px; left: -10px; line-height: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-gray-200); }
.author-avatar {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: var(--font-weight-bold); font-size: var(--text-lg); flex-shrink: 0;
}
.author-name  { font-weight: var(--font-weight-bold); color: var(--color-primary); font-size: var(--text-sm); }
.author-title { font-size: var(--text-xs); color: var(--color-gray-500); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: var(--color-white);
  text-align: center;
  padding-block: var(--space-5xl);
}
.cta-section h2 { color: var(--color-white); }
.cta-section p  { color: rgba(255,255,255,.85); font-size: var(--text-xl); margin-bottom: var(--space-2xl); }
.cta-actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }

/* ============================================================
   BLOG POST CARDS
   ============================================================ */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }

.post-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-base);
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.post-thumbnail { height: 220px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); position: relative; overflow: hidden; }
.post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.post-category {
  position: absolute; top: var(--space-md); left: var(--space-md);
  background: var(--color-secondary); color: white;
  padding: .25rem .75rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
}
.post-body { padding: var(--space-xl); }
.post-meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-gray-500); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.post-card h2, .post-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.post-card h2 a, .post-card h3 a { color: var(--color-primary); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--color-secondary); }
.post-excerpt { font-size: var(--text-sm); margin-bottom: var(--space-lg); }

/* ============================================================
   PORTFOLIO GRID
   ============================================================ */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.portfolio-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,58,92,.9) 0%, rgba(26,58,92,.3) 50%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-xl); color: white;
  opacity: 0; transition: opacity var(--transition-base);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay h4  { color: white; margin-bottom: .25rem; }
.portfolio-overlay span { font-size: var(--text-sm); color: rgba(255,255,255,.7); }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-xl); }
.team-card {
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-base);
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.team-avatar {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-3xl); color: white; font-weight: var(--font-weight-bold);
}
.team-role { font-size: var(--text-sm); color: var(--color-secondary); font-weight: var(--font-weight-medium); margin-bottom: var(--space-sm); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list { max-width: 800px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.faq-question {
  width: 100%; text-align: left;
  background: none; border: none;
  padding: var(--space-xl);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  font-size: var(--text-base); font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-family: var(--font-main);
  transition: background var(--transition-fast);
}
.faq-question:hover { background: var(--color-off-white); }
.faq-icon {
  width: 28px; height: 28px;
  background: var(--color-secondary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  flex-shrink: 0; transition: transform var(--transition-base);
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer-inner { padding: 0 var(--space-xl) var(--space-xl); color: var(--color-gray-700); line-height: 1.8; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; font-weight: var(--font-weight-medium); color: var(--color-gray-700); margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.form-control {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--color-gray-800);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,58,92,.1); }
textarea.form-control { resize: vertical; min-height: 150px; }

.form-message { padding: .75rem 1.25rem; border-radius: var(--radius-md); margin-top: 1rem; font-size: var(--text-sm); display: none; }
.form-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-message.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ============================================================
   SEARCH FORM
   ============================================================ */
.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] {
  flex: 1;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  font-family: var(--font-main); font-size: var(--text-sm);
  outline: none;
}
.search-form input[type="search"]:focus { border-color: var(--color-primary); }
.search-form button {
  background: var(--color-secondary); color: white; border: none;
  padding: .75rem 1.25rem; border-radius: var(--radius-full);
  cursor: pointer; font-weight: 700; font-family: var(--font-main);
  transition: background var(--transition-fast);
}
.search-form button:hover { background: var(--color-secondary-dark); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-3xl); flex-wrap: wrap; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  border: 1.5px solid var(--color-gray-300);
  color: var(--color-gray-700);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.page-numbers:hover, .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: white; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 48px; height: 48px;
  background: var(--color-secondary); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl);
  box-shadow: var(--shadow-secondary);
  opacity: 0; visibility: hidden;
  transition: all var(--transition-base);
  z-index: 100; cursor: pointer; border: none;
}
.back-to-top.visible  { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-secondary-dark); transform: translateY(-3px); }