/* public/assets/css/service.css
   Вынесённые и отрефакторенные стили из service.php
*/

/* --- Minimal reset --- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#f3f6f9;
  color:#0f1724;
  line-height:1.4;
}

/* Theme variables */
:root{
  --bg:#f3f6f9;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b57a4;
  --radius:12px;
  --glass: rgba(255,255,255,0.85);
  --shadow: 0 10px 30px rgba(12,20,30,0.06);
  --max-width:1200px;
}

/* Basic elements */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max-width);margin:28px auto;padding:18px}

/* Layout grid: left - center - right.
   center column made flexible with minmax(0,1fr) to avoid overflow */
.svc-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}
/* allow children to shrink (prevents overflowing the grid) */
.svc-grid > * { min-width: 0; }
main { min-width: 0; overflow-wrap: break-word; }

/* mobile: column layout, sidebars after main */
@media(max-width:1120px) {
  .svc-grid { grid-template-columns: 1fr; }
  aside.card { order: 2 }
  main { order: 1 }
}

/* card */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(10,25,50,0.04);
}

/* LEFT */
.logo{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.04);
  background:linear-gradient(180deg,#ffffff,#fafcff);
  display:block;
}
.logo--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height:180px;
  border-radius:10px;
  background:linear-gradient(180deg,#fbfdff,#f7fbff);
  color:#9aa3af;
  font-weight:700;
  border:1px dashed rgba(11,87,164,0.08);
}
h1.title{margin:12px 0 6px;font-size:1.25rem;color:var(--accent);letter-spacing:-0.2px}
.contact-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;font-size:0.96rem;color:var(--muted)}
.contact-list strong{color:#111;font-weight:700}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:0;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(11,87,164,0.12);
  background:transparent;
  color:var(--accent);
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.btn-wide{width:100%;justify-content:center}

.prices{margin-top:14px;padding:12px;background:linear-gradient(180deg,#fff,#fbfdff)}
.price-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(10,25,50,0.03)}

/* MIDDLE */
main .card > h2.section-title{margin:0 0 8px 0;font-size:1rem;color:#0f1724}
.description{color:#112;white-space:pre-wrap}

.map-card{height:280px;border-radius:10px;overflow:hidden;border:1px solid rgba(10,25,50,0.04);background:linear-gradient(180deg,#fbfcff,#f7fbff);display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Thumbnails grid */
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:12px}
.thumb{width:100%;height:110px;overflow:hidden;border-radius:10px;border:1px solid rgba(10,25,50,0.03);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Rating summary */
.rating-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.avg-num{font-size:1.5rem;font-weight:800;color:var(--accent)}
.avg-meta{color:var(--muted);font-size:0.95rem}

/* Generic star band used for avg and staff rating */
/* Stars: keep within container and scale slightly larger */
.stars{
  position: relative;
  display: inline-block;
  font-size: 24px;      /* увеличил размер звёзд для средней оценки */
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
.stars::before,
.stars::after {
  content: '★★★★★';
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
}
.stars::before { color: #e5e7eb; }
.stars::after {
  color: #fbbf24;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--percent, 0%);
  overflow: hidden;
}

/* Reviews */
.review-card{background:linear-gradient(180deg,#fff,#fcfeff);border-radius:10px;padding:12px;border:1px solid rgba(10,25,50,0.04);margin-bottom:10px;min-width:0;word-break:break-word}
.review-meta{display:flex;align-items:center;gap:10px}
.review-name{font-weight:800}
.review-time{color:var(--muted);font-size:0.88rem;margin-left:6px}
.review-comment{margin-top:8px;color:#111}
.review-actions{margin-left:auto;display:flex;gap:8px}
.btn-small{padding:6px 8px;border-radius:8px;background:#fff;border:1px solid rgba(10,25,50,0.04);cursor:pointer;font-weight:700;white-space:nowrap}

/* Reply indicator - inline and nowrap by default */
.reply-indicator{
  font-size:0.95rem;
  color:var(--muted);
  margin-bottom:8px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}
.reply-indicator button{white-space:nowrap}

/* Form inputs */
.input{width:100%;border:1px solid rgba(10,25,50,0.06);border-radius:10px;padding:10px 12px;font-size:14px;box-sizing:border-box}
textarea.input{min-height:90px;max-height:220px;line-height:1.4;resize:vertical}

/* Lightbox (legacy image only kept for compatibility) */
.lb-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.7);display:none;align-items:center;justify-content:center;z-index:1200;padding:20px}
.lb-overlay.active{display:flex}
.lb-img{max-width:calc(100% - 40px);max-height:calc(100% - 40px);box-shadow:0 12px 50px rgba(2,6,23,0.6);border-radius:8px}
.lb-close{position:absolute;top:18px;right:18px;background:#fff;border-radius:6px;padding:8px 10px;cursor:pointer;font-weight:700;border:0}

/* ---------- 10-star picker (UI 1..10) ---------- */
/* Picker wrapper: center and stack buttons below */
.rating-pick-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 0;
}

/* Picker itself (the stars) */
#ten-star-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 2px;
  direction: ltr !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* larger click targets for stars */
#ten-star-picker label {
  font-size: 30px;            /* увеличены звезды в pickere */
  line-height: 1;
  cursor: pointer;
  color: #e5e7eb;
  transition: color .12s ease, transform .06s ease;
  display: inline-block;
  transform-origin: center;
  user-select: none;
  padding: 2px;
}
#ten-star-picker label:hover,
#ten-star-picker label.preview { color: #ffd966; transform: translateY(-3px) scale(1.06); }
#ten-star-picker label.active { color: #fbbf24; transform: translateY(-1px); text-shadow: 0 2px 6px rgba(251,191,36,0.12); }

/* keep radios hidden but keyboard-focusable */
#ten-star-picker input[type="radio"]{ position: absolute; left: -9999px; }

/* Buttons area (centered under stars) */
.rating-pick-actions {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
}
#ten-star-apply, #ten-star-send-rating {
  --btn-bg: #0b57a4;
  --btn-bg-hover: #094a88;
  --btn-color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  min-height:36px;
  border-radius:10px;
  border:1px solid rgba(2,6,23,0.08);
  background:var(--btn-bg);
  color:var(--btn-color);
  font-weight:700;
  cursor:pointer;
  transition:background .12s ease, transform .06s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(11,87,164,0.08);
  white-space:nowrap;
  min-width:140px;
  box-sizing:border-box;
}
#ten-star-apply:hover, #ten-star-send-rating:hover { background:var(--btn-bg-hover); transform:translateY(-1px); box-shadow: 0 10px 24px rgba(11,87,164,0.12); }
#ten-star-apply:active, #ten-star-send-rating:active { transform: translateY(0); }
#ten-star-apply:focus, #ten-star-send-rating:focus { outline: 3px solid rgba(11,87,164,0.14); outline-offset: 3px; }

@media (max-width:420px) {
  .rating-pick-actions { flex-direction: column; gap:8px; align-items:stretch; }
  #ten-star-apply, #ten-star-send-rating { width:100%; min-width:0; }
}

/* 5-star (adjacent to average) */
#service-star-input { display:flex; gap:6px; align-items:center; direction:ltr !important; }
#service-star-input .srv-star { font-size: 22px; cursor: pointer; color: #e5e7eb; transition: color .12s ease, transform .06s ease; user-select: none; }
#service-star-input .srv-star:hover { color: #ffd966; transform: translateY(-2px) scale(1.02); }
#service-star-input input[type="radio"]{ display:none; }
#service-star-input input[type="radio"]:checked + .srv-star, #service-star-input .srv-star.active { color: #fbbf24; transform: translateY(-1px); }

/* average rating styling (bigger) */
#avgStars { font-size: 26px; display:inline-block; vertical-align:middle; margin-right:8px; }
#avgNum { font-size: 1.45rem; font-weight:800; color: #0b57a4; }
#avgMeta { color: #6b7280; font-size: .92rem; }

/* review stars near author name slightly larger */
.review-stars { display:inline-block; vertical-align:middle; font-size:1.05rem; line-height:1; margin-left:8px; }
.review-stars .star { font-family: inherit; font-style:normal; color:#cfd8dc; margin-right:2px; }
.review-stars .star.filled { color:#f5b301; }
.review-rating-value { margin-left:8px; font-weight:700; color:#222; font-size:0.95rem; vertical-align:middle; }

/* Avatar / staff list */
.staff-photo {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(10,25,50,0.04) !important;
  background: linear-gradient(180deg,#fff,#fafcff);
  display: block !important;
  box-shadow: 0 4px 10px rgba(2,6,23,0.03) inset;
}
.staff-name { font-weight: 800; font-size: 1rem; color: #0f1724; line-height: 1.05; word-break: break-word; }
.staff-pos { color: var(--muted); font-size: 0.92rem; margin-top: 2px; }

/* small wrapper if needed */
.review-stars-wrap { display:inline-flex; align-items:center; gap:6px; }

/* Footer */
footer.site-footer{padding:20px;text-align:center;color:var(--muted);font-size:0.9rem;margin-top:20px}

/* media gallery, main video, lightbox */
.media-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.media-thumb { width:160px; height:110px; border-radius:8px; overflow:hidden; background:#000; position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.media-thumb img, .media-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.media-thumb .play-ind { position:absolute; left:8px; top:8px; background:rgba(0,0,0,0.5); color:#fff; padding:6px 8px; border-radius:8px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; }

/* main video */
.main-video { margin-top:14px; border-radius:12px; overflow:hidden; background:#000; position:relative; }
.main-video video { width:100%; height:auto; display:block; max-height:640px; background:#000; }
.mv-overlay { position:absolute; inset:0; pointer-events:none; }
.mv-controls { position:absolute; bottom:12px; left:12px; right:12px; display:flex; gap:8px; align-items:center; pointer-events:auto; }
.mv-btn { background:rgba(255,255,255,0.08); border:0; color:#fff; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:700; }
.mv-progress { flex:1; height:6px; background:rgba(255,255,255,0.12); border-radius:6px; overflow:hidden; cursor:pointer; }
.mv-progress > div { height:100%; width:0; background:linear-gradient(90deg,#0f74d6,#0b57a4); transition:width .08s linear; }

/* lightbox */
.media-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; z-index:2000; }
.media-lightbox[hidden]{ display:none; }
.ml-content { max-width:1100px; max-height:92vh; width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.ml-inner { max-width:100%; max-height:100%; width:auto; height:auto; display:flex; align-items:center; justify-content:center; }
.ml-img { max-width:100%; max-height:92vh; border-radius:8px; box-shadow:0 18px 60px rgba(2,6,23,0.6); }
.ml-video { max-width:100%; max-height:92vh; border-radius:8px; box-shadow:0 18px 60px rgba(2,6,23,0.6); background:#000; outline:none; }
.ml-close { position:absolute; top:18px; right:18px; background:transparent; color:#fff; border:0; font-size:30px; cursor:pointer; padding:6px 10px; }
.ml-nav { position:absolute; left:12px; right:12px; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.ml-btn { pointer-events:auto; background:rgba(255,255,255,0.06); color:#fff; border:0; width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; }
.ml-counter { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-weight:700; background:rgba(0,0,0,0.3); padding:6px 10px; border-radius:8px; font-size:14px; }
.ml-controls { position:absolute; bottom:18px; left:18px; right:18px; display:flex; align-items:center; gap:8px; pointer-events:auto; }
.ml-control-btn { background:rgba(255,255,255,0.06); border:0; color:#fff; padding:8px 10px; border-radius:8px; cursor:pointer; }

/* Accessibility / focus outlines for keyboard users */
button:focus, a:focus, input:focus, textarea:focus { outline: 3px solid rgba(11,87,164,0.12); outline-offset: 3px; }

/* Prevent button text from breaking (esp. for Russian words) */
.btn, .btn-ghost, .btn-small, .rating-pick-actions button, .reply-indicator button {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Small-screen safety for reply-indicator */
@media (max-width: 360px) {
  .reply-indicator { flex-wrap: wrap; gap:6px; }
  .reply-indicator button { width: auto; }
}