/* ==========================================================================
   iRefurbish — site styles
   Mirrors the look of staging.irefurbish.com (Angular + Bootstrap 5.3) in a
   plain static page. Loaded after css/bootstrap.min.css.
   ========================================================================== */

:root {
  --ir-blue: #335cb4;        /* brand blue: nav, buttons, links            */
  --ir-blue-dark: #274da0;   /* hover / active                             */
  --ir-navy: #0f2c49;        /* footer                                     */
  --ir-grad-start: #2b73d2;  /* card header gradient                       */
  --ir-grad-end: #1a55b0;
  --ir-heading: #2d3748;
  --ir-body: #4a5568;
  --ir-label: #5f6b78;
  --ir-divider: #a8c0d8;
  --ir-tint: #f7f9fc;        /* alternating section background             */
  --ir-pill: #eef3fc;
  --ir-rule: #f0f4f8;
  --ir-green: #3db86e;       /* checklist ticks                            */
  --ir-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}

html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 12px; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.site-nav {
  background-color: var(--ir-blue);
  font-family: sans-serif;
  --bs-navbar-color: #dbe4f5;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
}
.site-nav .navbar-brand img { display: block; width: 150px; height: 35px; }

/* Vertical "Contact" tab pinned to the right edge once the hero scrolls away */
.sticky-contact-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  transition: transform 0.35s ease;
  z-index: 1030;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background-color: var(--ir-blue);
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  padding: 18px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
}
.sticky-contact-btn:hover,
.sticky-contact-btn:focus-visible {
  background-color: var(--ir-blue-dark);
  color: #fff;
  outline: 3px solid #fff;
  outline-offset: -3px;
}
.sticky-contact-btn.visible { transform: translateY(-50%) translateX(0); }

/* --------------------------------------------------------------------------
   Hero (full-viewport video with a photo fallback)
   -------------------------------------------------------------------------- */
.hero {
  background-image: url(../img/laptop.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .container { position: relative; }
.hero-content {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
}
.hero-content h1 { color: var(--ir-heading); }
.hero-content .hero-tagline { color: var(--ir-body); margin-bottom: 4px; }
.hero-content .hero-address { color: var(--ir-label); font-size: 0.9rem; }
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hero-buttons .btn-outline-primary {
  --bs-btn-color: var(--ir-blue);
  --bs-btn-border-color: var(--ir-blue);
  --bs-btn-hover-bg: var(--ir-blue);
  --bs-btn-hover-border-color: var(--ir-blue);
  --bs-btn-active-bg: var(--ir-blue-dark);
  --bs-btn-active-border-color: var(--ir-blue-dark);
}

/* --------------------------------------------------------------------------
   Section headings: small label, heading, dotted divider
   -------------------------------------------------------------------------- */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ir-label);
  margin-bottom: 8px;
}
.section-heading {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ir-heading);
  margin-bottom: 0;
}
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px auto 32px;
}
.section-divider--start { margin-left: 0; justify-content: flex-start; }
.section-divider::before,
.section-divider::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ir-divider);
  border-radius: 1px;
}
.section-divider span {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--ir-divider);
  border-radius: 50%;
}

.section-light { background-color: #fff; }
.section-tint { background-color: var(--ir-tint); }

/* --------------------------------------------------------------------------
   Generic content sections
   -------------------------------------------------------------------------- */
.about { padding: 80px 20px; }
.about p { color: var(--ir-body); line-height: 1.8; margin-bottom: 16px; }
.about-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--ir-shadow);
}
.contact-label {
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: 28px;
  margin-bottom: 4px;
}
.contact-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ir-heading);
  font-style: normal;
  margin-bottom: 0;
}
.contact-value a { color: inherit; text-decoration: none; }
.contact-value a:hover { color: var(--ir-blue); }

/* Outline call-to-action buttons used inside sections */
.section-cta,
.repairs-cta {
  --bs-btn-color: var(--ir-blue);
  --bs-btn-border-color: var(--ir-blue);
  --bs-btn-hover-bg: var(--ir-blue);
  --bs-btn-hover-border-color: var(--ir-blue);
  --bs-btn-active-bg: var(--ir-blue-dark);
  --bs-btn-active-border-color: var(--ir-blue-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 34px;
}
.section-cta { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Pricing section (photo background with a pale blue wash)
   -------------------------------------------------------------------------- */
.repairs {
  background-image: url(../img/pc-tech.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 80px 20px 100px;
}
.repairs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(235, 242, 252, 0.6);
  pointer-events: none;
}
.repairs .container { position: relative; }
.repairs .hero-content p { color: var(--ir-body); line-height: 1.8; margin-bottom: 0; }

.pricing-row { padding-bottom: 24px; }
.pricing-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--ir-shadow);
  overflow: hidden;
  height: 100%;
}
.pricing-card--featured {
  transform: translateY(-20px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
}
.pricing-card-header {
  background: linear-gradient(160deg, var(--ir-grad-start), var(--ir-grad-end));
  padding: 28px 24px 0;
  text-align: center;
}
.pricing-category {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pricing-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.pricing-price {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
}
/* Plain title variant (Why Us cards) */
.pricing-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.pricing-wave {
  display: block;
  width: calc(100% + 48px);
  margin-left: -24px;
  height: 40px;
}
.pricing-list {
  list-style: none;
  padding: 20px 24px 24px;
  margin: 0;
}
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ir-rule);
  color: var(--ir-body);
  font-size: 0.9rem;
  line-height: 1.4;
}
.pricing-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pricing-list li::before {
  content: "\2713";
  color: var(--ir-green);
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-list strong { display: block; color: var(--ir-heading); }
.pricing-list small { color: var(--ir-label); font-size: 0.85em; }
.pricing-card-text {
  padding: 20px 24px 24px;
  color: var(--ir-body);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .pricing-card--featured { transform: none; }
}

/* --------------------------------------------------------------------------
   Program cards (Buy, Services): gradient header with a round icon
   -------------------------------------------------------------------------- */
.program-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ir-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.program-card:hover,
.program-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(26, 85, 176, 0.22);
}
.program-card-header {
  position: relative;
  padding: 26px 24px 0;
  background: linear-gradient(160deg, var(--ir-grad-start), var(--ir-grad-end));
  text-align: center;
}
.program-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  padding: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background 0.18s ease, transform 0.18s ease;
}
.program-icon svg { display: block; width: 100%; height: 100%; }
.program-card:hover .program-icon,
.program-card:focus-within .program-icon {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}
/* White disc for third-party shop logos */
.program-icon--logo {
  width: 72px;
  height: 72px;
  padding: 14px;
  background: #fff;
  color: var(--ir-blue);
}
.program-icon--logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.program-icon--logo .program-icon-fallback { display: none; }
.program-icon--logo.is-missing .program-icon-fallback { display: block; }
.program-card:hover .program-icon--logo,
.program-card:focus-within .program-icon--logo { background: #fff; }
.program-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.program-text {
  flex: 1;
  padding: 20px 24px 24px;
  margin: 0;
  color: var(--ir-body);
  font-size: 0.9rem;
  line-height: 1.6;
}
.program-services {
  flex: 1;
  list-style: none;
  padding: 8px 12px 14px;
  margin: 0;
}
.program-services li + li { border-top: 1px solid var(--ir-rule); }
.program-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ir-blue);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.program-service::after {
  content: "\203A";
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  opacity: 0.5;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.program-service:hover,
.program-service:focus-visible {
  background: var(--ir-pill);
  color: var(--ir-grad-end);
}
.program-service:hover::after,
.program-service:focus-visible::after {
  transform: translateX(3px);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hours
   -------------------------------------------------------------------------- */
.hours { padding: 80px 20px; }
.hours-table { margin-top: 8px; width: 100%; }
.hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #eef1f6;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.hours-row:last-child { border-bottom: none; }
.hours-row:hover { background: #f5f8ff; }
.hours-day {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ir-body);
}
.hours-range {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ir-heading);
  background: var(--ir-pill);
  border-radius: 20px;
  padding: 4px 16px;
}
.hours-range--closed { background: #fef3e8; color: #b45309; }
/* Today (set by js/main.js) */
.hours-row.is-today { background: var(--ir-pill); }
.hours-row.is-today .hours-day { color: var(--ir-blue); }
.hours-row.is-today .hours-range { background: var(--ir-blue); color: #fff; }
.hours-row.is-today .hours-range--closed { background: #b45309; color: #fff; }
.hours-note { font-size: 0.85rem; color: var(--ir-label); margin: 20px 0 0; }

/* --------------------------------------------------------------------------
   Contact form (styled like the staging contact modal)
   -------------------------------------------------------------------------- */
.contact { padding: 80px 20px; }
.contact-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--ir-shadow);
  overflow: hidden;
}
.contact-card-header {
  background-color: var(--ir-blue);
  color: #fff;
  padding: 16px 24px;
}
.contact-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.contact-card-body { padding: 24px; font-family: sans-serif; }
.contact-card-body .form-control:focus {
  border-color: var(--ir-blue);
  box-shadow: 0 0 0 0.25rem rgba(51, 92, 180, 0.25);
}
.contact-send-btn {
  background-color: var(--ir-blue);
  border-color: var(--ir-blue);
  color: #fff;
}
.contact-send-btn:hover,
.contact-send-btn:focus {
  background-color: #2a4d9e;
  border-color: #2a4d9e;
  color: #fff;
}
.contact-send-btn:disabled {
  background-color: var(--ir-blue);
  border-color: var(--ir-blue);
  color: #fff;
  opacity: 0.65;
}
.contact-consent {
  font-size: 0.78rem;
  color: var(--ir-label);
  line-height: 1.6;
  margin: 16px 0 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ir-navy);
  color: #fff;
  padding: 20px;
}
.site-footer a { color: #fff; }
.site-footer .footer-social a { font-weight: 600; text-decoration: none; }
.site-footer .footer-social a:hover { text-decoration: underline; }
.site-footer .footer-credit {
  color: #9aa8b6;
  font-size: 0.78rem;
  text-decoration: none;
}
.site-footer .footer-credit:hover { color: #fff; }