/* ==========================================================
   ProLaundry Paros — Stylesheet
   Electric Blue · iPhone 17 style · SF Pro / Inter typography
   ========================================================== */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

:root {
  --blue: #007AFF;
  --blue-d: #0066FF;
  --black: #1c1c1e;
  --gray: #86868b;
  --gray-l: #F5F5F7;
  --white: #fff;
  --success: #059669;
  --warn: #F59E0B;
  --danger: #DC2626;
  --radius: 24px;
  --radius-lg: 40px;
  --shadow: 0 4px 32px rgba(0,0,0,.07);
  --shadow-blue: 0 8px 32px rgba(0,122,255,.3);
}

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
  background: var(--gray-l);
  color: var(--black);
  min-height: 100vh;
}

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

/* ── Layout ─────────────────────────────────────────────── */
.plp-wrap     { max-width: 960px; margin: 0 auto; padding: 48px 20px 80px; }
.plp-wrap-sm  { max-width: 700px; margin: 0 auto; padding: 48px 20px 60px; }
.plp-wrap-xs  { max-width: 480px; margin: 0 auto; padding: 48px 20px 60px; }

/* ── Typography ─────────────────────────────────────────── */
.plp-h {
  font-size: clamp(40px, 8vw, 76px);
  font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -3px;
  line-height: .92; color: #000;
  margin: 0 0 20px; text-align: center;
}
.plp-h-sm {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 900; letter-spacing: -1.5px;
  margin: 0 0 16px; color: #000;
}
.plp-label {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--gray); margin: 0 0 8px 4px;
  display: flex; align-items: center; gap: 6px;
}
.plp-step-tag {
  text-align: center;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--gray); margin-bottom: 8px;
}
.plp-muted { color: var(--gray); font-size: 13px; }

/* ── Pills ──────────────────────────────────────────────── */
.plp-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.plp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #000; color: #fff;
  padding: 8px 16px; border-radius: 100px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .15em;
}
.plp-pill.blue { background: var(--blue); }

/* ── Cards ──────────────────────────────────────────────── */
.plp-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

/* ── Form fields ────────────────────────────────────────── */
.plp-fw {
  display: flex; align-items: center;
  background: var(--gray-l);
  border-radius: 18px;
  padding: 4px 16px 4px 14px;
  transition: all .25s;
  border: 2px solid transparent;
}
.plp-fw:focus-within {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,122,255,.12);
}
.plp-fi-ico {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--gray);
}
.plp-fw:focus-within .plp-fi-ico { color: var(--blue); }
.plp-fi {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 14px 6px; color: var(--black); min-width: 0;
}
.plp-fi::placeholder { color: var(--gray); font-weight: 500; }
textarea.plp-fi { padding: 14px 6px; resize: vertical; min-height: 80px; font-size: 15px; font-weight: 500; }

select.plp-fi {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  padding-right: 32px;
}

.plp-field-group { margin-bottom: 16px; }
.plp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .plp-row { grid-template-columns: 1fr; } }

/* ── Buttons ────────────────────────────────────────────── */
.plp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff;
  border: none; border-radius: 100px;
  padding: 16px 32px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all .25s;
  box-shadow: var(--shadow-blue);
}
.plp-btn:hover { background: #000; transform: translateY(-1px); }
.plp-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.plp-btn.lg { padding: 20px 40px; font-size: 16px; }
.plp-btn.ghost { background: transparent; color: var(--black); box-shadow: none; border: 2px solid #e5e5ea; }
.plp-btn.ghost:hover { background: #f0f0f0; transform: none; }
.plp-btn.danger { background: var(--danger); box-shadow: 0 8px 32px rgba(220,38,38,.3); }
.plp-btn.success { background: var(--success); box-shadow: 0 8px 32px rgba(5,150,105,.3); }

.plp-btn-round {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--blue); border: none; color: #fff;
  cursor: pointer; margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,122,255,.35);
  transition: all .35s;
}
.plp-btn-round:hover { transform: scale(1.1); background: #000; }

/* ── Option cards (services, location, payment) ─────────── */
.plp-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.plp-opt {
  background: var(--gray-l);
  border: 3px solid transparent;
  border-radius: 28px;
  padding: 24px 18px;
  cursor: pointer;
  transition: all .35s cubic-bezier(.25,.8,.25,1);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: inherit; width: 100%;
}
.plp-opt[aria-pressed="true"] {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 6px 28px rgba(0,122,255,.18);
  transform: scale(1.02);
}
.plp-opt-title {
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--black);
}
.plp-opt-sub { font-size: 12px; color: var(--gray); }

/* ── Toggle ─────────────────────────────────────────────── */
.plp-toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gray-l); border-radius: 18px; padding: 16px;
  cursor: pointer; transition: all .25s; user-select: none;
}
.plp-toggle:hover { background: #ebebed; }
.plp-toggle-text { display: flex; flex-direction: column; }
.plp-toggle-text strong { font-size: 14px; font-weight: 800; }
.plp-toggle-text small { font-size: 12px; color: var(--gray); font-weight: 500; }
.plp-switch {
  width: 50px; height: 28px; background: #d1d1d6; border-radius: 100px;
  position: relative; transition: all .25s; flex-shrink: 0;
}
.plp-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; background: #fff; border-radius: 50%;
  transition: all .25s; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
input[type=checkbox]:checked + .plp-switch { background: var(--blue); }
input[type=checkbox]:checked + .plp-switch::after { left: 24px; }
.plp-toggle input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Counter ────────────────────────────────────────────── */
.plp-counter { display: flex; align-items: center; gap: 12px; background: var(--gray-l); border-radius: 18px; padding: 4px; }
.plp-counter button {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #fff; color: var(--blue);
  font-size: 24px; font-weight: 700; cursor: pointer;
  transition: all .2s; font-family: inherit;
}
.plp-counter button:hover { background: var(--blue); color: #fff; }
.plp-counter button:disabled { opacity: .3; cursor: not-allowed; background: #fff; color: var(--gray); }
.plp-counter-val { flex: 1; text-align: center; font-size: 22px; font-weight: 900; color: var(--black); }

/* ── Alerts ─────────────────────────────────────────────── */
.plp-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: 16px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 20px;
}
.plp-alert.err     { background: #FEE2E2; color: #991B1B; }
.plp-alert.success { background: #D1FAE5; color: #065F46; }
.plp-alert.info    { background: #DBEAFE; color: #1E40AF; }

/* ── Price summary ──────────────────────────────────────── */
.plp-price-box {
  background: #000; color: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  margin: 20px 0;
}
.plp-price-box .lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; opacity: .7; }
.plp-price-box .val { font-size: 32px; font-weight: 900; letter-spacing: -1px; }

/* ── Badge ──────────────────────────────────────────────── */
.plp-badge {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: var(--gray); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}

/* ── Tables (admin) ─────────────────────────────────────── */
.plp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.plp-table th { background: #fafafa; padding: 14px 18px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gray); border-bottom: 1px solid #e5e5ea; }
.plp-table td { padding: 14px 18px; border-bottom: 1px solid #f0f0f3; font-size: 14px; vertical-align: middle; }
.plp-table tr:last-child td { border-bottom: none; }
.plp-table tr:hover td { background: #fafafa; }
.plp-table a { font-weight: 600; }

/* ── Admin shell ────────────────────────────────────────── */
.plp-admin-header {
  background: #fff;
  padding: 0;
  display: flex; flex-direction: column;
  box-shadow: 1px 0 0 #e5e5ea;
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 240px; z-index: 50;
  overflow-y: auto;
}
.plp-admin-brand {
  font-size: 17px; font-weight: 900; color: var(--blue); letter-spacing: -.5px;
  padding: 20px 20px 14px; display: block;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.plp-admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; flex: 1; }
.plp-admin-nav a {
  padding: 9px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--black);
  transition: all .15s; white-space: nowrap;
}
.plp-admin-nav a:hover, .plp-admin-nav a.on { background: var(--gray-l); color: var(--blue); }
.plp-admin-user {
  font-size: 13px; color: var(--gray);
  padding: 14px 20px; border-top: 1px solid #f0f0f0;
  position: sticky; bottom: 0; background: #fff;
}
.plp-admin-user a { color: var(--blue); margin-left: 8px; }

/* Offset page content to the right of the sidebar */
.plp-admin-body { padding-left: 240px; }

/* Mobile hamburger + slide-in sidebar */
.plp-admin-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 44px; height: 44px; border-radius: 12px; border: none;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font-size: 20px; cursor: pointer; align-items: center; justify-content: center;
}
.plp-admin-backdrop {
  display: none; position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,.35);
}
@media (max-width: 900px) {
  .plp-admin-header { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .plp-admin-header.open { transform: translateX(0); }
  .plp-admin-body { padding-left: 0; }
  .plp-admin-toggle { display: flex; }
  .plp-admin-backdrop.open { display: block; }
  .plp-admin-body .plp-wrap,
  .plp-admin-body .plp-wrap-sm,
  .plp-admin-body .plp-wrap-xs { padding-top: 64px; }
}

/* ── Status flow (tracking page) ────────────────────────── */
.plp-flow {
  display: flex; align-items: stretch; gap: 8px;
  margin: 32px 0;
}
.plp-flow-step {
  flex: 1; padding: 16px 8px; border-radius: 16px;
  background: var(--gray-l); text-align: center;
  position: relative;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gray);
}
.plp-flow-step.done { background: var(--blue); color: #fff; }
.plp-flow-step.current { background: var(--black); color: #fff; }

/* ── Footer ─────────────────────────────────────────────── */
.plp-footer {
  text-align: center;
  padding: 32px 16px;
  color: var(--gray);
  font-size: 12px;
}
.plp-footer a { color: var(--blue); }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 540px) {
  .plp-card { padding: 20px; border-radius: 28px; }
  .plp-opt-grid { gap: 10px; }
  .plp-opt { padding: 18px 12px; border-radius: 20px; }
}

/* ==========================================================
   PUBLIC SITE — Top bar, header nav, marketing pages, footer
   ========================================================== */

/* ── Top bar ──────────────────────────────────────────── */
.plp-topbar {
  background: #000; color: #fff;
  font-size: 12px;
}
.plp-topbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.plp-topbar-left { display: flex; gap: 20px; flex-wrap: wrap; }
.plp-topbar-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-weight: 500; }
.plp-topbar-item:hover { color: #fff; }
.plp-topbar-right { display: flex; gap: 12px; align-items: center; }
.plp-topbar-phone { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; }
.plp-topbar-cta {
  background: var(--blue); color: #fff;
  padding: 6px 14px; border-radius: 100px;
  font-weight: 800; font-size: 11px;
  letter-spacing: .12em;
}
.plp-topbar-cta:hover { background: #fff; color: var(--blue); }

@media (max-width: 720px) {
  .plp-topbar { display: none; }
}

/* ── Main header ──────────────────────────────────────── */
.plp-header {
  background: #fff;
  box-shadow: 0 1px 0 #e5e5ea;
  position: sticky; top: 0; z-index: 100;
}
.plp-header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.plp-logo {
  font-size: 22px; font-weight: 900;
  color: var(--black); letter-spacing: -.5px;
  white-space: nowrap;
}
.plp-logo span { color: var(--blue); }
.plp-nav { display: flex; gap: 4px; align-items: center; }
.plp-nav a {
  padding: 10px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 700;
  color: var(--black); transition: all .2s;
  text-transform: uppercase; letter-spacing: .05em;
}
.plp-nav a:hover { background: var(--gray-l); }
.plp-nav a.on { background: var(--blue); color: #fff; }
.plp-burger { display: none; background: none; border: none; cursor: pointer; color: var(--black); }

@media (max-width: 880px) {
  .plp-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; box-shadow: 0 4px 32px rgba(0,0,0,.1);
    flex-direction: column; padding: 16px; gap: 4px;
  }
  .plp-nav.open { display: flex; }
  .plp-nav a { width: 100%; text-align: center; padding: 14px; }
  .plp-burger { display: flex; }
}

/* ── Hero (marketing homepage) ────────────────────────── */
.plp-hero {
  position: relative;
  padding: 80px 24px 100px;
  text-align: center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,122,255,.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0,122,255,.10), transparent 50%),
    var(--gray-l);
  overflow: hidden;
}
.plp-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.plp-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #000; color: #fff;
  padding: 10px 20px; border-radius: 100px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  margin-bottom: 24px;
}
.plp-hero-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.plp-hero h1 {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -3px;
  line-height: .92; color: #000;
  margin: 0 0 24px;
}
.plp-hero h1 .blue { color: var(--blue); }
.plp-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--gray);
  font-weight: 500;
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

/* ── Track widget in hero ─────────────────────────────── */
.plp-track-widget {
  background: #fff;
  border-radius: 100px;
  padding: 8px 8px 8px 24px;
  display: flex; align-items: center; gap: 12px;
  max-width: 480px; margin: 0 auto 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}
.plp-track-widget input {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-weight: 600;
  background: transparent;
  padding: 12px 0; min-width: 0;
  font-family: inherit;
}
.plp-track-widget button {
  background: #000; color: #fff;
  border: none; border-radius: 100px;
  padding: 12px 24px;
  font-weight: 800; font-size: 13px;
  cursor: pointer; letter-spacing: .1em;
  font-family: inherit;
  text-transform: uppercase;
}
.plp-track-widget button:hover { background: var(--blue); }

.plp-hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ── Stats strip ──────────────────────────────────────── */
.plp-stats {
  padding: 60px 24px;
  background: #000; color: #fff;
}
.plp-stats-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px; text-align: center;
}
.plp-stat-num {
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 900; font-style: italic;
  color: var(--blue); letter-spacing: -2px;
  line-height: 1;
}
.plp-stat-label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}

/* ── Section ──────────────────────────────────────────── */
.plp-section {
  padding: 80px 24px;
  max-width: 1200px; margin: 0 auto;
}
.plp-section-tag {
  text-align: center;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--blue); margin-bottom: 8px;
}
.plp-section-h {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -2px;
  line-height: .95; text-align: center;
  margin: 0 0 48px;
}

/* ── Services grid ────────────────────────────────────── */
.plp-services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.plp-service-card {
  background: #fff;
  border-radius: 32px;
  padding: 32px 28px;
  box-shadow: var(--shadow);
  border: 3px solid transparent;
  transition: all .35s;
  text-align: left;
}
.plp-service-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,122,255,.18);
}
.plp-service-icon {
  width: 56px; height: 56px;
  background: rgba(0,122,255,.1);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  margin-bottom: 16px;
}
.plp-service-title {
  font-size: 22px; font-weight: 900;
  letter-spacing: -.5px;
  margin-bottom: 8px;
}
.plp-service-desc {
  font-size: 14px; color: var(--gray);
  font-weight: 500; line-height: 1.5;
  margin-bottom: 16px;
}
.plp-service-price {
  display: inline-flex; align-items: center; gap: 6px;
  background: #000; color: #fff;
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em;
}

/* ── How it works ─────────────────────────────────────── */
.plp-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.plp-step {
  text-align: center;
  padding: 32px 24px;
}
.plp-step-num {
  width: 64px; height: 64px;
  background: var(--blue); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-blue);
  font-style: italic;
}
.plp-step h3 {
  font-size: 20px; font-weight: 900;
  letter-spacing: -.5px;
  margin-bottom: 8px;
}
.plp-step p {
  font-size: 14px; color: var(--gray);
  font-weight: 500; line-height: 1.5;
}

/* ── CTA banner ───────────────────────────────────────── */
.plp-cta-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff;
  padding: 80px 24px;
  text-align: center;
}
.plp-cta-banner h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -2px;
  line-height: .95;
  margin-bottom: 16px;
}
.plp-cta-banner p {
  font-size: 17px; opacity: .9;
  max-width: 600px; margin: 0 auto 32px;
  line-height: 1.5;
}
.plp-cta-banner .plp-btn {
  background: #fff; color: var(--blue);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.plp-cta-banner .plp-btn:hover { background: #000; color: #fff; transform: translateY(-2px); }

/* ── FAQ accordion ────────────────────────────────────── */
.plp-faq-list { max-width: 760px; margin: 0 auto; }
.plp-faq-item {
  background: #fff;
  border-radius: 20px;
  padding: 4px 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.plp-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 20px 0;
  font-size: 16px; font-weight: 800;
  display: flex; justify-content: space-between; align-items: center;
}
.plp-faq-item summary::-webkit-details-marker { display: none; }
.plp-faq-item summary::after {
  content: '+'; font-size: 24px; color: var(--blue);
  transition: transform .25s; font-weight: 400;
}
.plp-faq-item[open] summary::after { transform: rotate(45deg); }
.plp-faq-item p {
  color: var(--gray); line-height: 1.6;
  padding: 0 0 20px;
  margin: 0;
}

/* ── Site footer ──────────────────────────────────────── */
.plp-site-footer {
  background: #000; color: #fff;
  padding: 64px 24px 24px;
  margin-top: 0;
}
.plp-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.plp-footer-col h4 {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--blue);
  margin: 0 0 16px;
}
.plp-footer-col ul { list-style: none; padding: 0; margin: 0; }
.plp-footer-col li { margin-bottom: 10px; font-size: 14px; color: rgba(255,255,255,.7); }
.plp-footer-col li a { color: rgba(255,255,255,.7); }
.plp-footer-col li a:hover { color: #fff; }
.plp-footer-brand {
  font-size: 22px; font-weight: 900;
  margin-bottom: 16px; letter-spacing: -.5px;
}
.plp-footer-brand span { color: var(--blue); }
.plp-footer-mission {
  color: rgba(255,255,255,.7);
  font-size: 14px; line-height: 1.6;
  margin: 0 0 20px;
  max-width: 360px;
}
.plp-footer-social { display: flex; gap: 8px; }
.plp-footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.plp-footer-social a:hover { background: var(--blue); }

.plp-footer-bottom {
  max-width: 1200px; margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,.5);
  flex-wrap: wrap;
}
.plp-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.plp-footer-legal a { color: rgba(255,255,255,.5); }
.plp-footer-legal a:hover { color: #fff; }

@media (max-width: 880px) {
  .plp-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .plp-footer-inner { grid-template-columns: 1fr; }
  .plp-hero { padding: 60px 20px 80px; }
  .plp-section { padding: 60px 20px; }
}

/* ── Contact form ─────────────────────────────────────── */
.plp-contact-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
@media (max-width: 720px) { .plp-contact-grid { grid-template-columns: 1fr; } }
.plp-contact-info-card {
  background: #000; color: #fff;
  border-radius: 32px; padding: 40px;
}
.plp-contact-info-card h3 { color: var(--blue); font-size: 13px; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 20px; }
.plp-contact-info-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.plp-contact-info-item:last-child { border-bottom: none; }
.plp-contact-info-ico { width: 40px; height: 40px; background: rgba(0,122,255,.2); color: var(--blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plp-contact-info-text strong { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; font-weight: 700; }
.plp-contact-info-text a, .plp-contact-info-text span { color: #fff; font-weight: 600; }

/* ── Logo image styling ───────────────────────────────── */
.plp-logo-img {
  height: 48px;
  width: auto;
  display: block;
  max-width: 240px;
  object-fit: contain;
}
.plp-footer-logo {
  height: 56px;
  width: auto;
  display: block;
  max-width: 220px;
  margin-bottom: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* turn dark logos white in footer */
}
@media (max-width: 540px) {
  .plp-logo-img { height: 40px; max-width: 180px; }
}

/* ── Language switcher (in nav) ───────────────────────── */
.plp-lang-switcher {
  position: relative;
  margin-left: 8px;
}
.plp-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gray-l); border: none;
  padding: 8px 12px; border-radius: 100px;
  cursor: pointer; transition: all .2s;
  font-family: inherit; color: var(--black);
  font-size: 12px; font-weight: 800;
}
.plp-lang-btn:hover { background: #e5e5ea; }
.plp-lang-flag { font-size: 16px; line-height: 1; }
.plp-lang-code { letter-spacing: .08em; }
.plp-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  list-style: none; margin: 0; padding: 6px;
  min-width: 180px; z-index: 200;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: all .2s;
}
.plp-lang-switcher.open .plp-lang-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.plp-lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  text-decoration: none; color: var(--black);
  font-size: 14px; font-weight: 600;
  transition: background .15s;
}
.plp-lang-opt:hover { background: var(--gray-l); }
.plp-lang-opt.active { background: rgba(0,122,255,.08); color: var(--blue); font-weight: 800; }
.plp-lang-opt > span:nth-child(2) { flex: 1; }
@media (max-width: 880px) {
  .plp-lang-switcher { margin: 8px auto 0; }
  .plp-lang-menu { left: auto; right: 0; }
}

/* Blog auto internal-links — subtle, underlined on hover */
.plp-article-body a.plp-autolink{color:var(--blue,#0066FF);text-decoration:none;border-bottom:1px dotted rgba(0,102,255,.4)}
.plp-article-body a.plp-autolink:hover{border-bottom-style:solid}

/* ── Skip link ──────────────────────────────────────────────────────────
   Hidden until a keyboard user tabs to it, then it is the first thing they
   reach. Positioned off-canvas rather than display:none, because a hidden
   element cannot receive focus. */
.plp-skip{position:absolute;left:-9999px;top:0;z-index:100000;
  background:#0066FF;color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:800;text-decoration:none}
.plp-skip:focus{left:0}

/* ═══════════════════════════════════════════════════════════════════════
   ΣΕΛΙΔΕΣ ΥΠΗΡΕΣΙΩΝ ΚΑΙ ΠΕΡΙΟΧΩΝ  ·  .plp-area-*
   ═══════════════════════════════════════════════════════════════════════

   Δεκατρείς κλάσεις που χρησιμοποιούσαν το service.php και το area.php
   — και ΚΑΜΙΑ τους δεν υπήρχε σε αυτό το αρχείο.

   Αποτέλεσμα: 18 σελίδες υπηρεσιών + 16 σελίδες περιοχών, τριάντα τέσσερις
   συνολικά, εμφανίζονταν σαν γυμνό HTML του 1998. Ο κώδικας δεν ήταν λάθος·
   παρέπεμπε σε στυλ που δεν γράφτηκε ποτέ.

   Οι σελίδες αυτές έχουν μαύρο φόντο (ορίζεται inline στο <body>), οπότε
   τα χρώματα εδώ είναι για σκούρο θέμα. */

.plp-area{color:#fff}
.plp-area-wrap{max-width:1060px;margin:0 auto;padding:0 20px}

.plp-area-hero{padding:64px 0 52px;text-align:center}
/* Ο τίτλος. ΠΡΩΤΑ λευκός — και μόνο αν ο browser ξέρει να βάψει κείμενο με
   ντεγκραντέ, γίνεται διαφανής για να φανεί το ντεγκραντέ από κάτω.
   Χωρίς το @supports, ένας browser που δεν υποστηρίζει background-clip:text
   θα εφάρμοζε το `color:transparent` και τίποτε άλλο: **αόρατη επικεφαλίδα**.
   Το ρίσκο είναι μικρό αλλά η ζημιά ολική, και το κόστος τρεις γραμμές. */
.plp-area-hero h1{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-1.2px;
  line-height:1.1;margin:0 0 16px;color:#fff}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .plp-area-hero h1{background:linear-gradient(180deg,#fff 32%,#9db4d0);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

.plp-area-crumb{font-size:13px;color:#8E8E93;margin-bottom:22px}
.plp-area-crumb a{color:#4DA3FF;text-decoration:none}
.plp-area-crumb a:hover{text-decoration:underline}
.plp-area-crumb strong{color:#D1D1D6;font-weight:600}

.plp-area-sub{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#4DA3FF;margin:0 0 14px}
.plp-area-intro{font-size:17px;line-height:1.7;color:#A9AAB2;max-width:680px;
  margin:0 auto 30px}

.plp-area-cta{display:inline-block;background:#007AFF;color:#fff;text-decoration:none;
  font-weight:800;font-size:16px;padding:15px 34px;border-radius:999px;
  box-shadow:0 8px 26px rgba(0,122,255,.36);transition:transform .18s,box-shadow .18s}
.plp-area-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,122,255,.48)}

.plp-area-sec{padding:46px 0}
.plp-area-sec.alt{background:rgba(255,255,255,.032);border-block:1px solid rgba(255,255,255,.07)}
.plp-area-sec h2{font-size:clamp(21px,3.4vw,30px);font-weight:900;letter-spacing:-.5px;
  margin:0 0 24px;text-align:center}

/* Τιμές */
.plp-area-prices{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:640px;margin:0 auto}
.plp-area-price{background:rgba(28,28,32,.66);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:26px 22px;text-align:center;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.plp-area-price.feat{border-color:rgba(255,159,10,.42);background:rgba(255,159,10,.08)}
.plp-area-price-num{font-size:38px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.plp-area-price-num span{font-size:14px;font-weight:700;color:#8E8E93;letter-spacing:0;
  margin-left:4px}
.plp-area-price-lbl{font-size:14px;color:#A9AAB2;margin-top:9px;font-weight:600}

/* «Γιατί εμείς» */
.plp-area-why{list-style:none;padding:0;margin:0 auto;max-width:620px;
  display:grid;gap:11px}
.plp-area-why li{background:rgba(28,28,32,.6);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 17px;font-size:15px;line-height:1.55;color:#D1D1D6}

/* Σύνδεσμοι περιοχών / άλλων υπηρεσιών */
.plp-area-near{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.plp-area-near a{display:inline-block;background:rgba(28,28,32,.7);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 18px;
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
  transition:border-color .18s,background .18s,transform .18s}
.plp-area-near a:hover{border-color:rgba(0,122,255,.55);background:rgba(34,36,44,.86);
  transform:translateY(-2px)}

.plp-area-final{text-align:center}

@media (max-width:560px){
  .plp-area-hero{padding:40px 0 34px}
  .plp-area-sec{padding:34px 0}
  .plp-area-wrap{padding:0 16px}
  .plp-area-price-num{font-size:32px}
  .plp-area-near a{font-size:13.5px;padding:9px 15px}
}
@media (prefers-reduced-motion:reduce){
  .plp-area-cta,.plp-area-near a{transition:none}
  .plp-area-cta:hover,.plp-area-near a:hover{transform:none}
}

/* ── ΔΥΟ ΚΛΑΣΕΙΣ ΠΟΥ ΕΙΧΑ ΑΦΗΣΕΙ ΑΟΡΙΣΤΕΣ ──────────────────────────────
   Είχα γράψει ότι «34 σελίδες ήταν άστυλες». Ήταν οι 18 — το service.php
   δεν έχει δικό του <style>. Οι 16 σελίδες περιοχών είχαν ανέκαθεν πλήρες
   inline φύλλο μέσα στο area.php· δεν το είχα ελέγξει.
   Και μετά από όλα αυτά, δύο κλάσεις που χρησιμοποιεί το service.php
   έμειναν χωρίς ορισμό: το FAQ και τα βήματα. Δηλαδή σε κάθε μία από τις
   18 σελίδες υπηρεσιών, δύο ολόκληρα μπλοκ έβγαιναν γυμνά.
   Οι κανόνες παρακάτω ταιριάζουν με το ύφος του area.php, ώστε οι δύο
   τύποι σελίδας να μοιάζουν μεταξύ τους. */

.plp-area-faq{max-width:740px;margin:0 auto}
.plp-area-faq details{background:rgba(28,28,32,.62);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:2px 22px;margin-bottom:14px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.plp-area-faq summary{font-weight:700;font-size:16.5px;padding:17px 0;cursor:pointer;
  list-style:none;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:14px}
.plp-area-faq summary::-webkit-details-marker{display:none}
.plp-area-faq summary::after{content:'+';color:#4DA3FF;font-size:24px;font-weight:300;
  line-height:1;flex-shrink:0}
.plp-area-faq details[open] summary::after{content:'−'}
.plp-area-faq p{color:#A9AAB2;line-height:1.65;margin:0 0 18px;font-size:15px}

/* Τα βήματα «πώς δουλεύει». Αριθμημένη λίστα, αλλά οι αριθμοί του browser
   είναι μικροί και ξεχνιούνται — τους ξαναφτιάχνουμε ως μπλε κύκλους. */
.plp-area-how{list-style:none;counter-reset:plpstep;padding:0;margin:0 auto;
  max-width:640px;display:grid;gap:12px}
.plp-area-how li{counter-increment:plpstep;position:relative;
  background:rgba(28,28,32,.6);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:15px 18px 15px 60px;
  font-size:15px;line-height:1.55;color:#D1D1D6}
.plp-area-how li::before{content:counter(plpstep);position:absolute;left:16px;top:13px;
  width:30px;height:30px;border-radius:50%;background:#007AFF;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;box-shadow:0 0 14px rgba(0,122,255,.35)}

@media (max-width:560px){
  .plp-area-faq details{padding:2px 17px}
  .plp-area-how li{padding:14px 15px 14px 54px}
}