/* Isolated styles for services modals only */

#svc-modal.modal {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border: 0;
  background: transparent;
}

#svc-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  box-sizing: border-box;
}

#svc-modal .svc-modal {
  margin: 0;
  overflow-anchor: none;
  contain: layout paint style;
  will-change: transform;
}

#svc-modal-content {
  overflow-anchor: none;
}

#svc-modal-content .modal-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-700);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgb(var(--pp-red-rgb) / 12%);
  color: var(--brand2);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

#svc-modal-content .switcher-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; margin:8px 0 22px; }
#svc-modal-content .switcher-label { font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:#aaa; }
#svc-modal-content .switcher { display:inline-flex; background:#f0eeea; border-radius:100px; padding:3px; gap:2px; position:relative; }
#svc-modal-content .sw-btn { position:relative; z-index:1; padding:9px 20px; border-radius:100px; border:none; background:transparent; font-size:14px; font-weight:600; color:#888; cursor:pointer; transition:color .2s ease; white-space:nowrap; font-family:inherit; }
#svc-modal-content .sw-btn.active { color:#fff; }
#svc-modal-content .sw-pill { position:absolute; top:3px; left:3px; height:calc(100% - 6px); background:#e41b4a; border-radius:100px; box-shadow:0 2px 10px rgb(228 27 74 / 40%); transition:transform .3s cubic-bezier(.34,1.56,.64,1), width .3s ease; z-index:0; }
#svc-modal-content .sw-save-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; background:#EAF3DE; color:#3B6D11; opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease; }
#svc-modal-content .sw-save-badge.visible { opacity:1; transform:translateY(0); }

#svc-modal-content .modal-title { font-size:19px; font-weight:700; color:#1a1a1a; line-height:1.3; margin-bottom:6px; }
#svc-modal-content .modal-sub { font-size:13px; color:#777; line-height:1.6; margin-bottom:18px; }
#svc-modal-content .modal-label { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#aaa; margin-bottom:10px; }

#svc-modal-content .inc-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
#svc-modal-content .inc-row { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#444; line-height:1.5; }
#svc-modal-content .inc-icon { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
#svc-modal-content .inc-icon--yes { background:#EAF3DE; }
#svc-modal-content .inc-icon--no { background:#f0eeea; opacity:.45; }
#svc-modal-content .inc-row.dimmed .inc-text { opacity:.35; }

#svc-modal-content .payment-box {
  background: rgb(var(--pp-red-rgb) / 6%);
  border: 1px solid rgb(var(--pp-red-rgb) / 16%);
  border-radius: 10px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  margin-bottom: 14px;
}

#svc-modal-content .payment-row { display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-xs); font-weight:var(--fw-500); color:var(--muted); line-height:1.5; }
#svc-modal-content .payment-row + .payment-row { margin-top: 10px; }
#svc-modal-content .pay-badge { font-size:var(--fs-xxs); font-weight:var(--fw-800); background:#fff; border:1px solid rgb(var(--pp-red-rgb) / 28%); border-radius:var(--radius-xs); padding:2px 7px; color:var(--brand2); flex-shrink:0; margin-top:1px; }
#svc-modal-content .pay-badge--partial { background:#fff; color:var(--brand2); border-color:rgb(var(--pp-red-rgb) / 28%); }

#svc-modal-content .guarantee {
  min-height: 58px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 2px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.6;
}

#svc-modal-content .guarantee--full { background:#EAF3DE; color:#3B6D11; }
#svc-modal-content .guarantee--partial { background:#EAF3DE; color:#3B6D11; }

#svc-modal-content .price-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
#svc-modal-content .price-label { font-size:13px; color:#888; }
#svc-modal-content .price-val { font-size:30px; font-weight:700; color:#1a1a1a; line-height:1; transition:transform .2s ease,opacity .2s ease; }
#svc-modal-content .price-val span { font-size:13px; font-weight:400; color:#888; }
#svc-modal-content .price-val.animating { transform:translateY(-8px); opacity:0; }

#svc-modal-content .modal-cta { width:100%; padding:13px; border-radius:10px; background:#e41b4a; color:#fff; border:none; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .15s; }

@media (hover: hover) and (pointer: fine) {
  #svc-modal-content .modal-cta:hover { opacity:.88; }
}
#svc-modal-content .modal-cta-sub { text-align:center; font-size:11px; color:#aaa; margin-top:8px; }

#svc-modal-content .text-anim { animation: fadeSlideIn .3s ease forwards; }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

:root[data-theme='dark'] #svc-modal-content .switcher { background: rgb(255 255 255 / 8%); }
:root[data-theme='dark'] #svc-modal-content .modal-title { color:#f4f6fb; }

:root[data-theme='dark'] #svc-modal-content .modal-sub,
:root[data-theme='dark'] #svc-modal-content .inc-row,
:root[data-theme='dark'] #svc-modal-content .payment-row { color:rgb(255 255 255 / 82%); }

:root[data-theme='dark'] #svc-modal-content .payment-box {
  background: rgb(var(--pp-red-rgb) / 16%);
  border-color: rgb(var(--pp-red-rgb) / 42%);
}

:root[data-theme='dark'] #svc-modal-content .pay-badge,
:root[data-theme='dark'] #svc-modal-content .pay-badge--partial {
  background: rgb(var(--pp-red-rgb) / 22%);
  border-color: rgb(var(--pp-red-rgb) / 52%);
  color: #ffd9df;
}

:root[data-theme='dark'] #svc-modal-content .guarantee--partial,
:root[data-theme='dark'] #svc-modal-content .guarantee--full {
  background: rgb(94 170 43 / 20%);
  color: #b9eb93;
}