/* ============================================================
   style.css – Gadget Box Website
   White & Blue Professional Theme
   ============================================================

   TABLE OF CONTENTS
   ------------------
    1.  CSS Custom Properties (Design Tokens)
    2.  Base Reset & Typography
    3.  Navbar & Top Bar
    4.  Buttons
    5.  Section & Layout Utilities
    6.  Hero Section
    7.  Trust Bar
    8.  Device Categories
    9.  Service Cards
   10.  How It Works Section
   11.  Testimonial Cards
   12.  CTA Section
   13.  Contact Section
   14.  Forms
   15.  FAQ Accordion (Bootstrap override)
   16.  Map Section
   17.  Page Hero (inner pages)
   18.  About Page
   19.  Success Page
   20.  Footer
   21.  Alerts / Flash Messages
   22.  WhatsApp Float Button
   23.  Utility & Helper Classes
   24.  Scroll-Reveal Animation
   25.  Responsive Breakpoints
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
  --primary: #1a56db;
  --primary-dark: #1341b0;
  --primary-light: #3b82f6;
  --primary-xlight: #dbeafe;
  --accent: #0ea5e9;
  --accent-light: #e0f2fe;
  --white: #ffffff;
  --off-white: #f8fafc;
  --light-gray: #f1f5f9;
  --border: #e2e8f0;
  --text-dark: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow: 0 4px 16px rgba(26, 86, 219, .12);
  --shadow-lg: 0 10px 40px rgba(26, 86, 219, .18);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-body);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
  background: var(--white) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--primary);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.navbar-brand img {
  height: 45px;
  width: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.brand-tagline {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.3px;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--text-body) !important;
  padding: 1.6rem 0.9rem !important;
  font-size: 0.92rem;
  position: relative;
  transition: var(--transition);
  letter-spacing: 0.2px;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  transition: var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 80%;
}

.nav-cta {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  padding: 0.45rem 1.1rem !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: var(--transition) !important;
  box-shadow: 0 3px 12px rgba(26, 86, 219, .3);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26, 86, 219, .4) !important;
  color: var(--white) !important;
}

.nav-cta::after,
.nav-cta::before {
  display: none !important;
}

.navbar-toggler {
  border: 2px solid var(--primary);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a56db' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================
   TOP BAR
   ========================================== */
.top-bar {
  background: var(--primary);
  color: var(--white);
  padding: 8px 0;
  font-size: 0.82rem;
}

.top-bar a {
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  transition: var(--transition);
}

.top-bar a:hover {
  color: var(--white);
}

.top-bar .separator {
  color: rgba(255, 255, 255, .3);
  margin: 0 8px;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-section {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 40%, #dbeafe 100%);
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(26, 86, 219, .08) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(14, 165, 233, .07) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--primary-xlight);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-title .highlight {
  color: var(--primary);
  position: relative;
}

.hero-title .highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  opacity: 0.3;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 540px;
  line-height: 1.8;
}

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.hero-stat {
  text-align: center;
}

.hero-stat-number {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  display: block;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hero-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-phone-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  width: 100%;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.hero-device-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.device-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--light-gray);
  border-radius: 10px;
  padding: 12px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-body);
  transition: var(--transition);
  cursor: default;
}

.device-chip i {
  font-size: 1.2rem;
  color: var(--primary);
}

.device-chip:hover {
  background: var(--primary-xlight);
  color: var(--primary);
  transform: translateY(-2px);
}

.hero-repair-info {
  background: var(--primary);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--white);
  text-align: center;
}

.repair-price {
  font-size: 1.5rem;
  font-weight: 800;
  display: block;
}

.repair-label {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Floating badges */
.float-badge {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}

.float-badge i {
  color: var(--primary);
  font-size: 1rem;
}

.float-badge-1 {
  top: 15%;
  left: -10px;
  animation: floatBadge1 3s ease-in-out infinite;
}

.float-badge-2 {
  bottom: 20%;
  right: -10px;
  animation: floatBadge2 3.5s ease-in-out infinite;
}

@keyframes floatBadge1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatBadge2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn-primary-custom {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(26, 86, 219, .35);
  cursor: pointer;
}

.btn-primary-custom:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26, 86, 219, .45);
  color: var(--white);
}

.btn-outline-custom {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 12px 26px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  cursor: pointer;
}

.btn-outline-custom:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 86, 219, .3);
}

.btn-white-custom {
  background: var(--white);
  color: var(--primary);
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.btn-white-custom:hover {
  background: var(--primary-xlight);
  transform: translateY(-2px);
  color: var(--primary);
  text-decoration: none;
}

/* ==========================================
   SECTION STYLES
   ========================================== */
.section-py {
  padding: 90px 0;
}

.section-py-sm {
  padding: 60px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-xlight);
  color: var(--primary);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ==========================================
   TRUST BAR
   ========================================== */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.trust-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-xlight);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  flex-shrink: 0;
}

.trust-text strong {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);
}

.trust-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================
   DEVICE CATEGORIES
   ========================================== */
.bg-light-blue {
  background: var(--off-white);
}

.category-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transition: var(--transition);
}

.category-card:hover {
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.category-card:hover::before {
  transform: scaleX(1);
}

.category-icon {
  width: 70px;
  height: 70px;
  background: var(--primary-xlight);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--primary);
  margin: 0 auto 16px;
  transition: var(--transition);
}

.category-card:hover .category-icon {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.1);
}

.category-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.category-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================
   SERVICE CARDS
   ========================================== */
.service-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transition: var(--transition);
}

.service-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-xlight);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 20px;
  transition: var(--transition);
}

.service-card:hover .service-icon {
  background: var(--primary);
  color: var(--white);
}

.service-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.service-description {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.service-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

/* ==========================================
   HOW IT WORKS
   ========================================== */
.how-works-section {
  background: var(--primary);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.how-works-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, .04);
  border-radius: 50%;
}

.how-works-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, .04);
  border-radius: 50%;
}

.step-card {
  text-align: center;
  position: relative;
  padding: 0 16px;
}

.step-number {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.step-card:hover .step-number {
  background: var(--white);
  color: var(--primary);
}

.step-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, .15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--white);
  margin: 0 auto 16px;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.step-description {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.7;
}

.steps-connector {
  display: flex;
  align-items: flex-start;
  padding-top: 35px;
}

.connector-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, .2);
  border-style: dashed;
  border-width: 0 0 2px 0;
  border-color: rgba(255, 255, 255, .3);
}

/* ==========================================
   TESTIMONIAL CARDS
   ========================================== */
.testimonial-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
  height: 100%;
}

.testimonial-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.testimonial-stars {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.testimonial-text {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 20px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-xlight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  flex-shrink: 0;
}

.author-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);
}

.author-device {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
  background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, .06);
  border-radius: 50%;
}

.cta-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}

.cta-subtitle {
  color: rgba(255, 255, 255, .8);
  font-size: 1.05rem;
  margin-bottom: 36px;
  line-height: 1.7;
}

/* ==========================================
   CONTACT SECTION
   ========================================== */
.contact-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: var(--transition);
  height: 100%;
}

.contact-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* WhatsApp variant: green icon background inside the contact-card */
.contact-icon--whatsapp {
  background: #e7faf0;
  color: #25d366;
}

/* Directions link: primary-coloured link within a .contact-label */
.contact-directions-link {
  color: var(--primary);
  font-weight: 500;
  font-size: 0.8rem;
  margin-top: 4px;
  display: inline-block;
  transition: var(--transition);
}

.contact-directions-link:hover {
  color: var(--primary-dark);
}

/* Thin bottom border utility for info bar sections */
.section-bottom-border {
  border-bottom: 1px solid var(--border);
}

/* Divider line inside a card (e.g., above the Get Directions button) */
.card-divider-top {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}

.contact-icon {
  width: 52px;
  height: 52px;
  background: var(--primary-xlight);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary);
  flex-shrink: 0;
}

.contact-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.contact-value {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.contact-value a {
  color: var(--text-dark);
  transition: var(--transition);
}

.contact-value a:hover {
  color: var(--primary);
}

/* ==========================================
   FORMS
   ========================================== */
.form-section {
  background: var(--off-white);
  border-radius: var(--radius-xl);
  padding: 40px;
  border: 1.5px solid var(--border);
}

/* Sub-section headings inside the booking form (Personal Info, Device Info, etc.) */
.form-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-xlight);
}

/* Font weight 400 override – used for "(Optional)" label text */
.fw-400 {
  font-weight: 400 !important;
}

.form-group-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-dark);
  margin-bottom: 6px;
  display: block;
}

.form-control,
.form-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.92rem;
  color: var(--text-dark);
  transition: var(--transition);
  background: var(--white);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
  outline: none;
}

.form-control::placeholder {
  color: #a0aec0;
}

/* ==========================================
   FAQ ACCORDION
   ========================================== */
.accordion-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.accordion-button {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--white);
  padding: 18px 20px;
}

.accordion-button:not(.collapsed) {
  color: var(--primary);
  background: var(--primary-xlight);
  box-shadow: none;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a56db'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.8;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ==========================================
   MAP SECTION
   ========================================== */
.map-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  height: 380px;
}

/* ==========================================
   PAGE HERO
   ========================================== */
.page-hero {
  background: linear-gradient(135deg, #f0f7ff 0%, #dbeafe 100%);
  padding: 70px 0 60px;
  border-bottom: 1px solid var(--border);
}

.page-hero-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.page-hero-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 500px;
}

.breadcrumb {
  background: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 0.82rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: '›';
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--primary);
  font-weight: 500;
}

.breadcrumb-item.active {
  color: var(--text-muted);
}

/* ==========================================
   ABOUT PAGE
   ========================================== */
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.about-feature-icon {
  width: 46px;
  height: 46px;
  background: var(--primary-xlight);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  flex-shrink: 0;
}

.about-feature-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.about-feature-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.stat-counter-card {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  color: var(--white);
}

.stat-counter-number {
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.stat-counter-label {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Alternating bg for about section */
.about-highlight-box {
  background: var(--primary-xlight);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 24px 0;
}

/* ==========================================
   SUCCESS PAGE
   ========================================== */
.success-icon {
  width: 100px;
  height: 100px;
  background: var(--primary-xlight);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--primary);
  margin: 0 auto 28px;
  animation: successPop .5s cubic-bezier(.17, .67, .26, 1.5) both;
}

@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  background: #0f172a;
  color: rgba(255, 255, 255, .7);
  padding: 80px 0 0;
}

.footer-logo {
  margin-bottom: 16px;
}

.footer-brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
}

.footer-desc {
  font-size: 0.88rem;
  line-height: 1.8;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .6);
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .7);
  font-size: 0.9rem;
  transition: var(--transition);
}

.social-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-heading {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, .6);
  font-size: 0.88rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-links a::before {
  content: '›';
  color: var(--primary);
  font-size: 1.1rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, .65);
}

.footer-contact-item i {
  color: var(--primary-light);
  margin-top: 2px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.footer-contact-item a {
  color: rgba(255, 255, 255, .65);
  transition: var(--transition);
}

.footer-contact-item a:hover {
  color: var(--white);
}

.footer-bottom {
  background: rgba(0, 0, 0, .2);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 20px 0;
  margin-top: 60px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, .4);
}

/* ==========================================
   ALERTS / MESSAGES
   ========================================== */
.alert-custom-success {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  border-left: 4px solid var(--success);
  color: #065f46;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-weight: 500;
}

.alert-custom-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-left: 4px solid var(--danger);
  color: #991b1b;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-weight: 500;
}

/* ==========================================
   WHATSAPP FLOAT BUTTON
   ========================================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--white);
  box-shadow: 0 6px 24px rgba(37, 211, 102, .4);
  z-index: 999;
  transition: var(--transition);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 10px 30px rgba(37, 211, 102, .5);
  color: var(--white);
}

.whatsapp-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #25d366;
  border-radius: 50%;
  opacity: 0.6;
  animation: whatsapp-pulse 2s ease-out infinite;
}

@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ============================================================
   UTILITY & HELPER CLASSES
   Replaces all inline style="..." attributes in templates.
   Always add here rather than writing inline styles in HTML.
   ============================================================ */

/* ── Colour helpers ── */
.text-primary-custom {
  color: var(--primary) !important;
}

/* WhatsApp brand green – applied to fa-whatsapp icon elements */
.icon-whatsapp-green {
  color: #25d366 !important;
}

.text-muted-custom {
  color: var(--text-muted) !important;
}

.text-dark-custom {
  color: var(--text-dark) !important;
}

.text-body-custom {
  color: var(--text-body) !important;
}

.text-white-custom {
  color: var(--white) !important;
}

/* ── Background helpers ── */
.bg-primary-custom {
  background: var(--primary) !important;
}

.bg-accent-custom {
  background: var(--accent) !important;
}

.bg-primary-dark-custom {
  background: var(--primary-dark) !important;
}

.bg-dark-custom {
  background: #0f172a !important;
}

.bg-light-custom {
  background: var(--off-white) !important;
}

.bg-xlight-custom {
  background: var(--primary-xlight) !important;
}

/* ── Map embed helpers ── */
/* Wraps the Google Maps iframe with rounded corners and shadow */
.map-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Applied to the <iframe> element to remove browser default border */
.map-frame {
  border: 0;
  width: 100%;
  height: 340px;
  display: block;
}

/* ── Border & shape helpers ── */
.rounded-custom {
  border-radius: var(--radius) !important;
}

.shadow-custom {
  box-shadow: var(--shadow) !important;
}

/* ── Spacing & layout helpers ── */
/* Line height variants */
.lh-190 {
  line-height: 1.9;
}

.lh-180 {
  line-height: 1.8;
}

.lh-160 {
  line-height: 1.6;
}

/* Font size helpers (rem) */
.fs-078 {
  font-size: 0.78rem;
}

.fs-080 {
  font-size: 0.80rem;
}

.fs-082 {
  font-size: 0.82rem;
}

.fs-085 {
  font-size: 0.85rem;
}

.fs-088 {
  font-size: 0.88rem;
}

.fs-090 {
  font-size: 0.90rem;
}

.fs-095 {
  font-size: 0.95rem;
}

.fs-100 {
  font-size: 1.00rem;
}

.fs-140 {
  font-size: 1.40rem;
}

.fs-180 {
  font-size: 1.80rem;
}

/* Font weight helpers */
.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

/* Letter-spacing helpers */
.ls-05 {
  letter-spacing: 0.5px;
}

.ls-10 {
  letter-spacing: 1px;
}

/* ── CTA button outline on dark/coloured backgrounds ── */
/* Used in CTA section and How It Works where background is blue */
.btn-outline-white {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

/* ── Stat counter card colour variants ── */
/* Each variant gives a different background to the 4-stat grid on the About page */
.stat-counter-card--accent {
  background: var(--accent);
}

.stat-counter-card--dark {
  background: var(--primary-dark);
}

.stat-counter-card--midnight {
  background: #0f172a;
}

/* ── Step number badge (booking_success.html) ── */
/* Circular numbered badges used in the "What Happens Next" list */
.step-badge {
  width: 28px;
  height: 28px;
  min-width: 28px;
  /* prevents shrinking in flex containers */
  background: var(--primary-xlight);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

/* ── Section tag variant: white background for dark sections ── */
.section-tag--white {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

/* ── How It Works – Step number circle (large, used with text prefix like "01") ── */
/* Previously defined as internal <style> block on how_it_works.html */
.step-number-large {
  width: 80px;
  height: 80px;
  background: var(--primary-xlight);
  border: 3px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-number-large span {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

/* ── Feature visual card variants ──
   Used on the right column in each "How It Works" step.
   Base class sets common padding/radius; modifiers set background. */
.feature-visual-card {
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
}

.feature-visual-card--light {
  background: var(--primary-xlight);
}

.feature-visual-card--gradient {
  background: linear-gradient(135deg, #f0f7ff, #dbeafe);
}

.feature-visual-card--primary {
  background: var(--primary);
}

.feature-visual-card--success {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

/* Large icon inside feature-visual-card */
.feature-visual-card .big-icon {
  font-size: 5rem;
  display: block;
  margin-bottom: 20px;
}

.feature-visual-card--light .big-icon {
  color: var(--primary);
}

.feature-visual-card--gradient .big-icon {
  color: var(--primary);
}

.feature-visual-card--primary .big-icon {
  color: rgba(255, 255, 255, .9);
}

.feature-visual-card--success .big-icon {
  color: var(--success);
}

/* Heading inside feature-visual-card */
.feature-visual-card h4 {
  font-weight: 700;
  margin-bottom: 16px;
}

.feature-visual-card--light h4 {
  color: var(--primary);
}

.feature-visual-card--gradient h4 {
  color: var(--primary);
  margin-bottom: 20px;
}

.feature-visual-card--primary h4 {
  color: var(--white);
}

.feature-visual-card--success h4 {
  color: var(--success);
  margin-bottom: 20px;
}

/* ── Pill badge variants ── */
/* Used in the "What We Check" list — white background, bordered pills */
.badge-pill-outline {
  background: var(--white);
  color: var(--text-dark);
  border: 1.5px solid var(--border);
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  display: inline-block;
}

/* Used in the "Devices We Repair" list — ghost white pills on blue background */
.badge-pill-ghost {
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  display: inline-block;
}

/* ── Success check list items (What You Get) ── */
.success-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.success-check-item:last-child {
  margin-bottom: 0;
}

.success-check-item .check-icon-success {
  color: var(--success);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.success-check-item span {
  font-weight: 500;
}

/* ── Opening hours table cell helpers ── */
/* Applied to <td> elements inside opening-hours tables */
.hours-label {
  color: var(--text-muted);
  padding: 6px 0;
}

.hours-value {
  font-weight: 600;
  text-align: right;
  padding: 6px 0;
}

/* ── Booking form disclaimer box ── */
/* Reuses .about-highlight-box but needs a distinct class for semantic clarity */
.info-notice-box {
  background: var(--primary-xlight);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Service name heading inside sidebar cards ── */
.sidebar-card-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

/* ── Footer contact items inside white sidebar ── */
/* Same layout as .footer-contact-item but on white background */
.sidebar-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--text-body);
}

.sidebar-contact-item:last-child {
  margin-bottom: 0;
}

.sidebar-contact-item .label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sidebar-contact-item .value {
  font-weight: 600;
  color: var(--text-dark);
}

.sidebar-contact-item .value a {
  color: var(--text-dark);
  transition: var(--transition);
}

.sidebar-contact-item .value a:hover {
  color: var(--primary);
}

/* ── "Why book with us" check-list items ── */
.check-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.check-list-item:last-child {
  margin-bottom: 0;
}

.check-list-item .check-icon {
  color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Services Page Utilities ── */

/* Filter bar section – thin border below the sticky filter buttons */
.section-filter-bar {
  border-bottom: 1px solid var(--border);
}

/* section-py-sm: smaller padding variant used on filter bars and info strips */
.section-py-sm {
  padding: 32px 0;
}

/* Duration badge on service cards – replaces repeated inline badge styles */
.badge-duration {
  background: var(--primary-xlight);
  color: var(--primary);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Category group header icon (larger than standard service-icon) */
.service-group-icon {
  width: 50px;
  height: 50px;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: var(--primary-xlight);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

/* Category group name heading (h2 inside a group header) */
.service-group-heading {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 2px;
  color: var(--text-dark);
}

/* Subtitle under the group heading (e.g. "All models from iPhone 6…") */
.service-group-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Bottom CTA box on the services page */
.services-cta-box {
  background: var(--primary-xlight);
  border-radius: var(--radius-xl);
  padding: 3rem;
  text-align: center;
}

.services-cta-box h3 {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.services-cta-box p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Filter buttons on the Services page */
.filter-btn {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ── How It Works Page Utilities ── */

/* Section divider line between page sections */
.section-divider-bottom {
  border-bottom: 1px solid var(--border);
}

/* Large visual icon panel on the right column of how-it-works intro */
.how-works-visual-box {
  background: var(--primary-xlight);
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
}

.how-works-visual-box .big-icon {
  font-size: 5rem;
  color: var(--primary);
  display: block;
  margin-bottom: 20px;
}

.how-works-visual-box h4 {
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Compact contact cards used inside the how-it-works booking options panel */
.contact-card--compact {
  padding: 14px;
}

.contact-icon--compact {
  width: 38px;
  height: 38px;
}

/* ── CTA section content on dark bg ── */
.cta-subtitle--white {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
}

/* ── Divider ── */
.divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  margin: 12px auto 24px;
}

.divider-left {
  margin-left: 0;
}

/* ============================================================
   SCROLL-REVEAL ANIMATION
   Elements with class .reveal-on-scroll start invisible.
   main.js IntersectionObserver adds .visible when they enter
   the viewport, triggering this CSS transition.
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay variants – add to child elements for cascading effect */
.reveal-delay-1 {
  transition-delay: 0.10s;
}

.reveal-delay-2 {
  transition-delay: 0.20s;
}

.reveal-delay-3 {
  transition-delay: 0.30s;
}

.reveal-delay-4 {
  transition-delay: 0.40s;
}

.reveal-delay-5 {
  transition-delay: 0.50s;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 991.98px) {
  .hero-section {
    padding: 60px 0;
  }

  .hero-stats {
    gap: 20px;
  }

  .hero-phone-card {
    margin-top: 40px;
  }

  .float-badge {
    display: none;
  }

  .section-py {
    padding: 60px 0;
  }

  .steps-connector {
    display: none;
  }
}

/* ── Tablet and below (≤ 767px) ── */
@media (max-width: 767.98px) {

  /* Hide the top contact bar to save vertical space */
  .top-bar {
    display: none;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-device-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Reduce form padding on small screens */
  .form-section {
    padding: 24px;
  }

  .trust-item {
    flex-direction: column;
    text-align: center;
  }

  .cta-section {
    padding: 60px 0;
  }

  /* Reduce stat card padding on mobile */
  .stat-counter-card {
    padding: 20px;
  }

  /* Stack sidebar contact items on mobile */
  .sidebar-contact-item {
    font-size: 0.82rem;
  }

  /* Map height on smaller screens */
  .map-wrapper iframe {
    height: 260px;
  }

  /* About page stats grid: smaller numbers */
  .stat-counter-number {
    font-size: 1.8rem;
  }
}

/* ── Small phones (≤ 415px) ── */
@media (max-width: 415px) {

  /* Drop the brand tagline on very narrow viewports */
  .brand-tagline {
    display: none;
  }

  /* Further reduce form section padding */
  .form-section {
    padding: 16px;
  }

  /* Full-width buttons on very small screens */
  .hero-section .d-flex {
    flex-direction: column;
  }

  .hero-section .btn-primary-custom,
  .hero-section .btn-outline-custom {
    width: 100%;
    justify-content: center;
  }
}