/* autoora-services.css
   Centralized styling for Service Detail pages
   Responsive: Desktop / Tablet / Mobile
*/

/* Reset-ish small */
.autoora-service-wrap, .autoora-service-wrap * { box-sizing: border-box; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Page container */
.autoora-service-wrap {
  max-width: 1200px;
  margin: 48px auto;
  padding: 24px;
  color: #111;
}

/* Breadcrumb / title */
.as-breadcrumb { color: #6b7280; font-size: 14px; margin-bottom: 12px; }
.as-title { font-family: "Georgia", serif; font-size: 40px; margin: 6px 0 24px; color:#0b1220; }

/* Main grid: left gallery, right meta */
.as-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
}

/* LEFT: gallery */
.as-gallery {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(11,17,20,0.06);
}
.as-main-img {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  position: relative;
}
.as-main-img::after{
  /* subtle gradient overlay for text readability */
  content: "";
  position: absolute; left:0;right:0;bottom:0;height:60%;
  background: linear-gradient(transparent, rgba(0,0,0,0.15));
  pointer-events:none;
}
.as-thumbs {
  display:flex; gap:10px; padding:14px; background:#fafafa; justify-content:flex-start; overflow:auto;
}
.as-thumb {
  width:96px; height:66px; flex:0 0 96px; background-size:cover; background-position:center;
  border-radius:6px; cursor:pointer; border:2px solid transparent; transition:transform .18s ease, border-color .18s;
}
.as-thumb.active { border-color:#0b66ff; transform:translateY(-3px); }

/* RIGHT: meta */
.as-meta {
  position: sticky;
  top:24px;
  align-self:start;
}
.as-price {
  font-size:18px; color:#6b7280; margin-bottom:8px;
}
.as-price strong { font-size:28px; color:#0b1220; display:block; }
.as-cta {
  display:flex; gap:12px; margin:18px 0;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600;
  cursor:pointer; border:2px solid transparent;
}
.btn-primary { background:#0b66ff; color:#fff; box-shadow: 0 8px 20px rgba(11,102,255,0.16); }
.btn-outline { background:transparent; color:#0b66ff; border-color:#0b66ff; }

/* small info list */
.as-info-list { font-size:14px; color:#374151; margin-bottom:18px; }
.as-info-list li { margin:6px 0; }

/* Included / Not included boxes */
.as-boxes { display:flex; gap:16px; margin:18px 0; flex-wrap:wrap; }
.as-box {
  flex:1 1 180px; background:#fff; border-radius:10px; padding:16px; box-shadow:0 6px 18px rgba(11,17,20,0.04);
}
.as-box h4 { margin:0 0 8px; font-size:16px; color:#0b1220; }
.as-box ul { margin:0; padding-left:18px; color:#374151; }

/* Specs table */
.as-specs { margin-top:20px; border-radius:10px; overflow:hidden; border:1px solid #eee; }
.as-specs table { width:100%; border-collapse:collapse; background:#fff; }
.as-specs th, .as-specs td { text-align:left; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
.as-specs th { width:220px; background:#fafafa; font-weight:600; color:#374151; }

/* Long description */
.as-desc { margin-top:22px; line-height:1.8; color:#374151; }

/* More details toggle */
.as-more-toggle { color:#0b66ff; cursor:pointer; text-decoration:underline; margin-top:10px; display:inline-block; }

/* Related services */
.as-related { margin-top:34px; }
.as-related h3 { font-size:20px; margin-bottom:12px; }
.as-related-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.as-related-card {
  background:#fff; border-radius:10px; padding:12px; box-shadow: 0 6px 18px rgba(11,17,20,0.04);
  transition:transform .25s ease, box-shadow .25s ease; overflow:hidden;
}
.as-related-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 18px 40px rgba(11,17,20,0.12); }
.as-related-card img { width:100%; height:140px; object-fit:cover; border-radius:8px; }
.as-related-card h4 { margin:10px 0 8px; font-size:16px; }
.as-related-card p { font-size:13px; color:#6b7280; }

/* Zoom gallery modal */
.as-modal {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;
  background:rgba(2,6,23,0.75);
}
.as-modal .modal-inner { max-width:1100px; width:90%; background:#fff; padding:18px; border-radius:10px; }
.as-modal img { width:100%; height:auto; display:block; }

/* Responsive */
@media (max-width: 1000px){
  .as-grid { grid-template-columns: 1fr 360px; gap:20px; }
  .as-main-img { height:360px; }
}
@media (max-width: 820px){
  .as-grid { grid-template-columns: 1fr; }
  .as-meta { position:relative; top:auto; }
  .as-main-img { height:300px; }
  .as-thumbs { gap:8px; }
  .as-related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px){
  .autoora-service-wrap { padding:16px; margin:20px auto; }
  .as-title { font-size:28px; text-align:left; }
  .as-main-img { height:220px; }
  .as-thumbs .as-thumb { width:70px; height:50px; flex:0 0 70px; }
  .as-related-grid { grid-template-columns: 1fr; }
  .as-related-card img { height:160px; }
  .as-related-card h4 { font-size:15px; }
  .btn { padding:10px 14px; border-radius:8px; font-size:14px; }
}

/* small helper */
.kv { color:#6b7280; font-size:13px; }