/* These styles are generated from project.scss. */

/* ── BRAND ─────────────────────────────────────────────────────────────────
   Greens sampled from static/images/logo.png — the fotomark.pl wordmark is a
   gradient running from #0a5502 (bottom) to #15a90a (top).

   The brightest logo green only reaches 3.2:1 against white text, so --brand
   is the slightly deeper #0f8a06 (4.5:1, WCAG AA) for filled surfaces, and
   the bright green is kept as --brand-light for borders/focus/accents.

   Bootstrap comes from the CDN and its own variants (primary, success, …) are
   left untouched: `brand` is an ADDITIONAL variant, built out of the same
   --bs-btn-* custom properties Bootstrap 5.2 uses, so .btn-brand inherits all
   the sizing, focus and disabled behaviour of .btn. Use these classes for
   brand identity; keep success/danger/warning for status meaning. */
:root {
  --brand: #0f8a06;
  --brand-rgb: 15, 138, 6;
  --brand-deep: #0d7a05;
  --brand-dark: #0d6b04;
  --brand-darker: #0a5502;
  --brand-light: #13a709;
  /* Desaturated green for small metadata icons. L* 47 vs Bootstrap's grey
     text-secondary L* 49, so it carries the same visual weight and keeps the
     hierarchy below .text-brand — greenish, not a brand accent. 5:1 on white. */
  --brand-muted: #4f7a4a;
  --brand-subtle: rgba(15, 138, 6, 0.08);

  /* Site look — see the SITE LOOK section below. */
  --paper: #f6f4ee;
  --ink: #18201a;
  --ink-soft: #4e564c;
  --line: #e3dfd4;
  --bs-body-font-family: Manrope, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
}

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-brand {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* Colour utilities mirroring Bootstrap's naming, so `bg-brand bg-opacity-10`
   works as usual. Opacity is read with a var() fallback, never declared: this
   file loads after Bootstrap, so declaring --bs-bg-opacity here would beat
   every .bg-opacity-* utility and pin the colour to full strength. */
.text-brand {
  color: rgba(var(--brand-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-brand-muted {
  color: var(--brand-muted) !important;
}

.bg-brand {
  background-color: rgba(var(--brand-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Card headers and other filled bars that used the grey bg-secondary.
   One notch deeper than --brand (ΔL* ≈ 5.6) so a header and a .btn-brand
   sitting in the same card read as related but not identical — the button
   stays the lighter, more saturated element and keeps the eye. 5.5:1 with
   white text. */
.bg-brand-deep {
  background-color: var(--brand-deep) !important;
}

/* Darkest point of the logo gradient. 9:1 against white text. */
.bg-brand-dark {
  background-color: var(--brand-darker) !important;
}

/* Tinted panel — icon circles, callout boxes, the order total. Named after
   Bootstrap 5.3's `bg-primary-subtle` so it upgrades cleanly. */
.bg-brand-subtle {
  background-color: var(--brand-subtle) !important;
}

.border-brand-subtle {
  border-color: rgba(var(--brand-rgb), 0.25) !important;
}

.border-brand {
  border-color: rgba(var(--brand-rgb), var(--bs-border-opacity, 1)) !important;
}

.link-brand {
  color: var(--brand);
}

.link-brand:hover,
.link-brand:focus {
  color: var(--brand-dark);
}

/* Secondary links that are still real navigation — top-bar contact, footer.
   Bootstrap's `text-muted` is the colour of disabled text; these read as live
   links instead. Same base colour as .nav-brand .nav-link. */
.link-quiet {
  color: #3a4148;
  transition: color 0.15s ease;
}

.link-quiet:hover,
.link-quiet:focus-visible {
  color: var(--brand-dark);
}

/* Input focus + checked states. These are built-in Bootstrap states rather
   than variants, so there is no new class to add — they are restated here so
   form controls pick up the brand instead of Bootstrap's blue (orders.css
   previously did the same thing with a teal). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* ── UPLOAD / DROP ZONE ────────────────────────────────────────────────────
   Shared by both pickers; lives here because photo_upload.html doesn't load
   orders.css. Visual only — each app keeps its own JS, and only orders adds
   .cursor-pointer. Border is a plain shorthand, not `.border border-2`: that
   utility's !important beat the hover rule, `border-dashed` was never a
   Bootstrap utility, and staying un-!important lets .border-danger win. */
.upload-area {
  border: 2px dashed #b9cdb4;
  background-color: #f7faf6;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.upload-area:hover {
  background-color: #f1f6ef;
  border-color: var(--brand);
}

/* Drag-over. Both apps add .bg-light, whose grey would otherwise win on
   !important — restate it as a brand tint at higher specificity. */
.upload-area.bg-light {
  background-color: rgba(var(--brand-rgb), 0.07) !important;
  border-color: var(--brand) !important;
}

/* Only the cloud glyph floats — scoped to its own class so the Browse button
   and file-preview icons in the photo_docs zone stay still. */
.upload-area__icon {
  animation: float 3s ease infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload-area__icon {
    animation: none;
  }
}

/* ── SITE LOOK ─────────────────────────────────────────────────────────────
   Warm paper ground, dark ink, the brand green as the only accent. Bootstrap
   5.2 reads body font/background/colour from these custom properties, so
   restating them here (this file loads after the CDN build) reskins every
   page without touching Bootstrap itself. The tokens live in the :root
   block at the top of this file. */

/* Bootstrap's grey text-muted drops to ~4.2:1 on the paper ground. */
.text-muted {
  color: var(--ink-soft) !important;
}

/* Page titles only — body copy and UI stay in Manrope. */
.font-display {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card {
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
}

.btn {
  --bs-btn-border-radius: 0.625rem;
  --bs-btn-font-weight: 600;
}

.btn-lg {
  --bs-btn-border-radius: 0.75rem;
  --bs-btn-font-weight: 700;
}

.form-control,
.form-select {
  border-radius: 0.625rem;
}

/* ── HEADER ────────────────────────────────────────────────────────────────
   One bar: logo, the two product links, contact, language. On phones the
   product links wrap onto their own full-width row and become two always-
   visible tabs, so there is no hamburger to open. */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.75rem;
  padding: 0.5rem 1rem 0;
}

.site-header__logo {
  height: 34px;
  width: auto;
}

.product-tabs {
  order: 3;
  flex: 0 0 calc(100% + 2rem);
  margin: 0.5rem -1rem 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.product-tabs__link {
  padding: 0.8rem 0.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.product-tabs__link:hover,
.product-tabs__link:focus-visible,
.product-tabs__link.active {
  color: var(--brand-darker);
}

.product-tabs__link.active {
  border-bottom-color: var(--brand);
}

/* 44px touch targets for the two header controls on phones. */
.header-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background-color: var(--brand-subtle);
  color: var(--brand-darker);
}

.lang-switch .btn {
  min-width: 44px;
  min-height: 44px;
  --bs-btn-font-weight: 700;
}

@media (min-width: 992px) {
  .site-header__inner {
    column-gap: 2rem;
    padding: 0.75rem 2rem;
  }

  .site-header__logo {
    height: 40px;
  }

  .product-tabs {
    order: 0;
    flex: 0 0 auto;
    margin: 0 auto 0 0;
    display: flex;
    gap: 2rem;
    border-top: 0;
  }

  .product-tabs__link {
    padding: 0.5rem 0;
    border-bottom-width: 2px;
  }

  .lang-switch .btn {
    min-width: 0;
    min-height: 0;
  }
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--ink);
  color: #c9cfc6;
}

.site-footer a {
  color: #c9cfc6;
  text-decoration: none;
  display: inline-block;
  padding: 0.35rem 0;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer a.site-footer__main {
  color: #fff;
}

.site-footer__rule {
  border-top: 1px solid #2e3830;
}

/* ── CHOICE CARDS ──────────────────────────────────────────────────────────
   A radio and its label drawn as one tappable card (service type, delivery
   method). The input stays a real radio inside the <label>; Bootstrap has no
   parent-state utility for "card whose radio is checked", hence :has(). */
.choice-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem;
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.choice-card:has(input:checked) {
  border-color: var(--brand);
  background-color: #f1f6ef;
}

.choice-card .form-check-input,
.choice-card input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}

/* ── PRICE LIST ────────────────────────────────────────────────────────────
   Rendered from PricingTier on the home page. */
.price-tier {
  background-color: var(--paper);
  border-radius: 0.625rem;
  padding: 0.45rem 0.65rem;
  line-height: 1.3;
}

.price-tier--best {
  background-color: #e8f3e6;
  color: var(--brand-darker);
}

/* ── ORDER FORM ────────────────────────────────────────────────────────────
   Selected-files list: fixed-height scroll box so 200 files don't push the
   rest of the form off screen. */
#photoList {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.25rem 0.75rem;
}

#photoList li:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  #photoList {
    max-height: 250px;
  }
}

/* iOS zooms the page when a focused control is under 16px. */
@media (max-width: 768px) {
  .form-control,
  .form-select {
    font-size: 16px;
  }
}

/* The footer link column only needs its top rule while stacked on phones. */
@media (min-width: 992px) {
  .site-footer .border-lg-0 {
    border-top: 0;
  }
}

.site-footer__links {
  column-gap: 1.5rem;
}

/* ── SMALL LAYOUT HELPERS ──────────────────────────────────────────────────
   Things Bootstrap 5.2 has no utility for. They live here so templates stay
   free of inline styles. */

/* Page width caps: the chooser is a narrow column, the order form a wide one. */
.page-narrow {
  max-width: 960px;
}

.page-wide {
  max-width: 1200px;
}

/* Square tinted box behind a product icon. */
.icon-tile {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Lets a flex child shrink below its content so .text-truncate can work. */
.min-w-0 {
  min-width: 0;
}

/* The InPost map needs a real height; the widget fills whatever it is given. */
.inpost-map-body {
  height: 70vh;
  min-height: 400px;
}