/* Safaroka | Editorial refinement, 29 October 2026.
   Visual-only rules. Existing routes, forms, approval, JS state, image ratios
   and data bindings remain unchanged. Loaded after the legacy stylesheets. */
:root {
  --sf-ink: #18372f;
  --sf-ink-soft: #577067;
  --sf-border: #dce5df;
  --sf-surface: #ffffff;
  --sf-surface-soft: #f7f9f6;
  --sf-accent: #0b5c49;
  --sf-accent-hover: #084936;
  --sf-focus: #a88245;
  --sf-radius-sm: 9px;
  --sf-radius-md: 14px;
  --sf-radius-lg: 18px;
  --sf-shadow-rest: 0 4px 17px rgba(23, 51, 40, .045);
  --sf-shadow-hover: 0 10px 26px rgba(23, 51, 40, .085);
}

/* Meaningful typography, calmer buttons, predictable keyboard focus. */
body { color: var(--sf-ink); }
:where(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--sf-focus);
  outline-offset: 3px;
}
:where(.btn, button) { -webkit-tap-highlight-color: transparent; }
.btn { letter-spacing: -.008em; font-weight: 700; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn-primary { background: var(--sf-accent); box-shadow: none; }
.btn-primary:hover { background: var(--sf-accent-hover); box-shadow: none; }
.btn-outline { border-color: #b8cfc3; box-shadow: none; }

/* Website publik: paper-and-ink hierarchy, not floating gradients everywhere. */
body[data-pwa-app="user"] .site-header { box-shadow: 0 1px 0 rgba(14, 62, 47, .10); }
body[data-pwa-app="user"] .section-head,
body[data-pwa-app="user"] .promo-showcase-head,
body[data-pwa-app="user"] .catalog-results-head { align-items: flex-end; }
body[data-pwa-app="user"] .section-head h2,
body[data-pwa-app="user"] .partner-rail-head h2,
body[data-pwa-app="user"] .promo-showcase-head h2,
body[data-pwa-app="user"] .catalog-results-head h2 {
  color: var(--sf-ink);
  letter-spacing: -.035em;
  font-weight: 700;
  line-height: 1.19;
}
body[data-pwa-app="user"] .section-head > div > span,
body[data-pwa-app="user"] .catalog-kicker,
body[data-pwa-app="user"] .catalog-results-head > div > span,
body[data-pwa-app="user"] .promo-showcase-head > div > span {
  color: #477364;
  letter-spacing: .115em;
  font-size: 11px;
  font-weight: 750;
}
body[data-pwa-app="user"] .section-head a,
body[data-pwa-app="user"] .promo-showcase-head a,
body[data-pwa-app="user"] .partner-rail-head a {
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 3px;
}
body[data-pwa-app="user"] .home-package-list-intro,
body[data-pwa-app="user"] .catalog-hero-copy-block p,
body[data-pwa-app="user"] .promo-showcase-head p {
  color: var(--sf-ink-soft);
  line-height: 1.6;
  max-width: 61ch;
}
body[data-pwa-app="user"] .home-promo-section .home-promo-head h2::after { content: none !important; display: none !important; }

/* Package cards: a single visual focal point, with no gaudy shadows or floating ornament. */
body[data-pwa-app="user"] .package-card,
body[data-pwa-app="user"] .package-card-catalog {
  background: #fff !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-lg) !important;
  box-shadow: var(--sf-shadow-rest) !important;
  transition: box-shadow .18s ease, border-color .18s ease !important;
}
body[data-pwa-app="user"] .package-card:hover,
body[data-pwa-app="user"] .package-card-catalog:hover {
  border-color: #c3d7cb !important;
  box-shadow: var(--sf-shadow-hover) !important;
  transform: none !important;
}
body[data-pwa-app="user"] .package-card .package-media {
  border-bottom: 1px solid #e5e9e3 !important;
}
body[data-pwa-app="user"] .package-card .package-poster-frame {
  border-color: #e1e7df !important;
  box-shadow: 0 2px 8px rgba(18, 50, 37, .04) !important;
}
body[data-pwa-app="user"] .package-card .package-body {
  padding: clamp(14px, 1.45vw, 20px) !important;
  color: var(--sf-ink);
}
body[data-pwa-app="user"] .package-card .package-body h3 {
  color: #153d31 !important;
  font-weight: 750 !important;
  font-size: clamp(16px, 1.55vw, 19px) !important;
  line-height: 1.42 !important;
  letter-spacing: -.026em !important;
}
body[data-pwa-app="user"] .package-card .package-media-footer .package-badge {
  background: #eef5f0 !important;
  color: #135b46 !important;
  border: 1px solid #dbe9df !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
body[data-pwa-app="user"] .package-card .package-media-footer .package-badge::before { opacity: .65; }
body[data-pwa-app="user"] .package-card .package-trip-row,
body[data-pwa-app="user"] .package-card .package-flight-line small,
body[data-pwa-app="user"] .package-card .package-freshness { color: var(--sf-ink-soft); }
body[data-pwa-app="user"] .package-card .hotel-mini-item {
  box-shadow: none !important;
  border-color: #e3e9e3 !important;
  background: #fafbf9 !important;
}
body[data-pwa-app="user"] .package-card .package-actions > .btn {
  background: var(--sf-accent) !important;
  border-color: var(--sf-accent) !important;
  color: #fff !important;
  min-height: 43px;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body[data-pwa-app="user"] .package-card .package-actions > .btn:hover {
  background: var(--sf-accent-hover) !important;
  border-color: var(--sf-accent-hover) !important;
}
body[data-pwa-app="user"] .package-plus-chip {
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Catalog controls stay visually subordinate to the packages. */
body[data-pwa-app="user"] .catalog-hero h1 { color: var(--sf-ink); letter-spacing: -.045em; }
body[data-pwa-app="user"] .theme-filter-panel,
body[data-pwa-app="user"] .smart-catalog-search {
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-lg) !important;
  box-shadow: none !important;
}
body[data-pwa-app="user"] .theme-chip { box-shadow: none !important; }
body[data-pwa-app="user"] .smart-filter-grid label > span {
  color: #526f63;
  letter-spacing: .04em;
  font-weight: 700;
}
body[data-pwa-app="user"] .smart-filter-grid :is(input,select) {
  border-color: #ccdcd2;
  background: #fff;
  border-radius: var(--sf-radius-sm);
}
body[data-pwa-app="user"] .catalog-main [data-catalog-pagination] button {
  box-shadow: none !important;
  border-radius: 9px;
  font-weight: 700;
}
body[data-pwa-app="user"] .catalog-main [data-catalog-pagination] button[aria-current="page"] {
  box-shadow: none !important;
}
body[data-pwa-app="user"] .guide-mini,
body[data-pwa-app="user"] .partner-logo-card {
  box-shadow: none !important;
  border-color: var(--sf-border) !important;
}
body[data-pwa-app="user"] .footer-links a { line-height: 1.6; }

/* Partner and Admin: practical workspace styling; decor does not compete with data. */
body[data-pwa-app="partner"] .partner-page,
body[data-pwa-app="admin"] .admin-page {
  background: #f5f7f5 !important;
}
body[data-pwa-app="partner"] .partner-content::before,
body[data-pwa-app="admin"] .admin-content::before { display: none !important; }
body[data-pwa-app="partner"] .partner-nav::before,
body[data-pwa-app="admin"] .admin-nav.admin-nav-pro::before {
  opacity: 0 !important;
}
body[data-pwa-app="partner"] .partner-nav,
body[data-pwa-app="admin"] .admin-nav.admin-nav-pro {
  background: #07493c !important;
  box-shadow: inset -1px 0 rgba(255,255,255,.07) !important;
}
body[data-pwa-app="partner"] .partner-head,
body[data-pwa-app="admin"] .admin-head-premium,
body[data-pwa-app="admin"] .admin-content > .admin-head {
  background: #fff !important;
  border: 1px solid var(--sf-border) !important;
  border-left: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-lg) !important;
  box-shadow: var(--sf-shadow-rest) !important;
}
body[data-pwa-app="partner"] .partner-head h1,
body[data-pwa-app="admin"] .admin-head h1 { letter-spacing: -.035em; line-height: 1.18; }
body[data-pwa-app="partner"] .partner-head p,
body[data-pwa-app="admin"] .admin-head p { color: var(--sf-ink-soft); line-height: 1.6; }
body[data-pwa-app="partner"] :is(.partner-panel,.partner-package-workspace,.partner-package-card-v1999,.partner-detail-panel,.partner-review-history-panel),
body[data-pwa-app="admin"] :is(.admin-panel,.admin-kpi,.partner-new-package-review-card,.safaroka-review-decision) {
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-md) !important;
  background: #fff !important;
  box-shadow: var(--sf-shadow-rest) !important;
}
body[data-pwa-app="partner"] .partner-package-kpis article { border-top: 1px solid var(--sf-border) !important; }
body[data-pwa-app="admin"] .safaroka-review-decision {
  background: #f8faf8 !important;
  box-shadow: none !important;
}
body[data-pwa-app="admin"] .safaroka-review-info dl > div {
  background: #f8faf8;
  border-color: #e4ebe6;
}
body[data-pwa-app="partner"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]),
body[data-pwa-app="admin"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) {
  accent-color: var(--sf-accent);
}
body[data-pwa-app="partner"] :is(input,select,textarea):focus,
body[data-pwa-app="admin"] :is(input,select,textarea):focus {
  outline-color: #a1bfb0;
}
body[data-pwa-app="partner"] .btn-primary,
body[data-pwa-app="admin"] .btn-primary {
  background: var(--sf-accent) !important;
  box-shadow: none !important;
}
body[data-pwa-app="partner"] .btn-primary:hover,
body[data-pwa-app="admin"] .btn-primary:hover { background: var(--sf-accent-hover) !important; }

/* Reduce motion without hiding interactive feedback or affecting carousel mechanics. */
@media (prefers-reduced-motion: reduce) {
  body[data-pwa-app="user"] .package-card,
  body[data-pwa-app="user"] .package-card * ,
  .btn { transition: none !important; }
}
@media (max-width: 700px) {
  body[data-pwa-app="user"] .package-card .package-body { padding: 14px !important; }
  body[data-pwa-app="user"] .section-head h2 { line-height: 1.23; }
  body[data-pwa-app="user"] .catalog-main [data-catalog-grid] > .package-card-catalog { border-radius: 15px !important; }
  body[data-pwa-app="partner"] .partner-head,
  body[data-pwa-app="admin"] .admin-head { border-radius: 14px !important; }
}