/* =========================================================
   Qurikvoy — Guest Stories + Booking & Cancellation Policy
   ========================================================= */
.page-sp {
  --s-ink: #1c1b1b;
  --s-text: #414751;
  --s-muted: #717782;
  --s-blue: #005a9a;
  --s-rust: #bf4b0e;
  --s-badge: #d2e4ff;
  --s-cream: #fcf9f8;
  --s-sand: #f6f3f2;
  --s-chip: #f0eded;
  --s-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  /* tokens used by the shared article styles (blog-post.css) */
  --b-ink: #1c1b1b; --b-text: #414751; --b-muted: #717782; --b-blue: #005a9a; --b-rust: #bf4b0e; --b-chip: #f0eded; --b-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: var(--s-cream);
}
.page-sp [hidden] { display: none !important; }

.sp-sec { padding: 48px 0; }
.sp-sec--sand { background: var(--s-sand); }
.sp-sec--last { padding-bottom: 80px; }
.sp-kicker { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--s-rust); }
.sp-h2 { margin: 6px 0 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.6px; color: var(--s-ink); }
.sp-lead { max-width: 680px; font-size: 17px; line-height: 27px; color: var(--s-text); }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s; }
.sp-btn:hover { transform: translateY(-2px); }
.sp-btn:disabled { opacity: 0.65; transform: none; cursor: wait; }
.sp-btn--blue { background: linear-gradient(90deg, #005a9a, #2373ba); color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 90, 154, 0.7); }
.sp-btn--rust { background: linear-gradient(90deg, #bf4b0e, #9a3800); color: #fff; box-shadow: 0 12px 22px -10px rgba(191, 75, 14, 0.7); }
.sp-btn--wa { background: #25d366; color: #fff; }

/* ---------- hero ---------- */
.sp-hero { padding: 8px 0 40px; background: linear-gradient(180deg, var(--s-sand) 0%, var(--s-cream) 100%); }
.sp-crumbs { display: flex; gap: 8px; margin: 0; padding: 16px 0; list-style: none; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--s-text); }
.sp-crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--s-muted); }
.sp-crumbs a:hover { color: var(--s-blue); }
.sp-crumbs strong { font-weight: 600; color: var(--s-blue); }
.sp-hero__copy { display: flex; flex-direction: column; gap: 10px; max-width: 760px; padding-top: 12px; }
.sp-hero h1 { margin: 0; font-size: 46px; line-height: 54px; font-weight: 800; letter-spacing: -1.1px; color: var(--s-ink); }
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 28px 0 0; padding: 0; list-style: none; }
.sp-stats li { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: var(--s-shadow); }
.sp-stats strong { font-size: 28px; line-height: 34px; font-weight: 800; color: var(--s-blue); }
.sp-stats span { font-size: 13px; line-height: 18px; color: var(--s-text); }
.sp-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.sp-highlights li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); font-size: 13px; font-weight: 600; line-height: 18px; color: var(--s-ink); }

/* ---------- story wall ---------- */
.sp-wall { columns: 3 320px; column-gap: 20px; }
.sp-story { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; padding: 24px; break-inside: avoid; border-radius: 20px; background: #fff; box-shadow: var(--s-shadow); }
.sp-story__stars { display: flex; gap: 2px; }
.sp-story blockquote { margin: 0; font-size: 15px; line-height: 25px; color: #2e333b; }
.sp-story figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--s-chip); }
.sp-story figcaption img, .sp-story figcaption > i { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sp-story figcaption > i { display: grid; place-items: center; background: var(--s-badge); font-size: 17px; font-style: normal; font-weight: 700; color: var(--s-blue); }
.sp-story figcaption > span { display: flex; flex-direction: column; min-width: 0; }
.sp-story strong { font-size: 14px; line-height: 19px; color: var(--s-ink); }
.sp-story small { font-size: 12px; line-height: 17px; color: var(--s-muted); }
.sp-story figcaption a, .sp-story figcaption em { font-size: 12px; font-style: normal; font-weight: 700; line-height: 17px; color: var(--s-blue); }
.sp-story figcaption a:hover { text-decoration: underline; }

/* ---------- share form ---------- */
.sp-share { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.sp-share__copy { display: flex; flex-direction: column; gap: 6px; }
.sp-form { padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 24px 48px -24px rgba(0, 29, 54, 0.3); }
.sp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-rating { margin: 0 0 18px; padding: 0; border: 0; }
.sp-rating legend { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--s-ink); }
.sp-rating div { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.sp-rating input { position: absolute; opacity: 0; pointer-events: none; }
.sp-rating label { cursor: pointer; }
.sp-rating label svg { width: 30px; height: 30px; transition: transform 0.2s var(--ease); }
.sp-rating label svg path { fill: #d9dde3; transition: fill 0.2s; }
.sp-rating input:checked ~ label svg path, .sp-rating label:hover svg path, .sp-rating label:hover ~ label svg path { fill: #f5a524; }
.sp-rating label:hover svg { transform: scale(1.12); }
.sp-rating input:focus-visible + label { outline: 2px solid var(--s-blue); outline-offset: 2px; border-radius: 4px; }
.sp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-field--full { grid-column: 1 / -1; }
.sp-field > span { font-size: 12px; font-weight: 700; color: var(--s-ink); }
.sp-field input, .sp-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid transparent; border-radius: 12px; background: var(--s-sand); font: inherit; font-size: 14px; color: var(--s-ink); resize: vertical; }
.sp-field input:focus, .sp-field textarea:focus { outline: none; border-color: rgba(0, 90, 154, 0.5); background: #fff; }
.sp-field.is-invalid input, .sp-field.is-invalid textarea { border-color: #d93025; background: #fff6f5; }
.sp-form__status { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 20px; }
.sp-form__status.is-ok { background: rgba(37, 211, 102, 0.12); color: #127a3a; }
.sp-form__status.is-error { background: #fdecea; color: #b3261e; }

.sp-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 36px 40px; border-radius: 24px; background: linear-gradient(135deg, #001d36 0%, #00497c 100%); }
.sp-cta h2 { margin: 0; font-size: 28px; line-height: 36px; color: #fff; }
.sp-cta p { max-width: 560px; margin-top: 6px; font-size: 15px; line-height: 24px; color: #9ecaff; }

/* ---------- policy ---------- */
.sp-policy { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.sp-toc > div { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: var(--s-shadow); }
.sp-native-sticky .sp-toc { position: sticky; top: var(--sp-top, 120px); }
.sp-toc > div { max-height: calc(100vh - var(--sp-top, 120px) - 20px); overflow-y: auto; overscroll-behavior: contain; }
.sp-toc p { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--s-muted); }
.sp-toc ol { margin: 0 0 6px; padding: 0; list-style: none; counter-reset: t; }
.sp-toc li { counter-increment: t; }
.sp-toc ol a { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--s-chip); font-size: 14px; font-weight: 600; line-height: 20px; color: var(--s-text); }
.sp-toc li:first-child a { border-top: 0; }
.sp-toc ol a::before { content: counter(t, decimal-leading-zero); flex: none; font-size: 11px; font-weight: 700; color: var(--s-rust); }
.sp-toc ol a:hover, .sp-toc ol a.is-active { color: var(--s-blue); }
.sp-policy__body { max-width: 780px; }
.sp-policy__sec { padding: 8px 0 20px; border-bottom: 1px solid var(--s-chip); scroll-margin-top: 140px; }
.sp-policy__sec + .sp-policy__sec { padding-top: 28px; }
.sp-policy__sec:last-child { border-bottom: 0; }
.page-sp .bp-body .sp-policy__sec h2 { display: flex; align-items: baseline; gap: 12px; margin-top: 0; }
.sp-policy__sec h2 span { font-size: 14px; font-weight: 800; color: var(--s-rust); }
.sp-policy__sec h3 { margin: 24px 0 10px; font-size: 19px; line-height: 1.4; color: var(--s-ink); }

@media (max-width: 1023px) {
  .sp-share { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sp-policy { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sp-native-sticky .sp-toc { position: static; }
  .sp-toc > div { max-height: none; overflow: visible; }
  .sp-toc ol { max-height: 360px; overflow-y: auto; }
  .sp-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .sp-sec { padding: 32px 0; }
  .sp-sec--last { padding-bottom: 56px; }
  .sp-hero h1 { font-size: 32px; line-height: 39px; letter-spacing: -0.7px; }
  .sp-lead { font-size: 15px; line-height: 24px; }
  .sp-h2 { font-size: 25px; line-height: 32px; }
  .sp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .sp-stats li { padding: 12px 10px; }
  .sp-stats strong { font-size: 19px; line-height: 24px; }
  .sp-stats span { font-size: 11px; line-height: 15px; }
  .sp-story { padding: 20px; }
  .sp-form { padding: 22px 16px; border-radius: 20px; }
  .sp-form__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-field input, .sp-field textarea { font-size: 16px; }
  .sp-form .sp-btn { width: 100%; }
  .sp-cta { padding: 28px 18px; border-radius: 20px; }
  .sp-cta h2 { font-size: 23px; line-height: 30px; }
  .sp-cta .sp-btn { width: 100%; }
  .sp-highlights li { font-size: 12px; }
}


/* Breadcrumbs removed: keep breathing room above the hero */
.sp-hero { padding-top: 40px; }
@media (max-width: 767px) { .sp-hero { padding-top: 24px; } }