/* ============================================================================
   modules/contest2000/assets/css/letter.css
   „2000 მიზეზი“ — ვიდეო-კონკურსის ერთადერთი სტილის ფაილი.

   სამყარო: „წერილი სახლში“ / par avion.
   წითელი საჰაერო-ფოსტის კონვერტი, რომლიდანაც თეთრი წერილი ამოდის.
   მარკის ადგილას გენერალური სპონსორის ნიშანია — კონვერტზე სწორედ მარკა
   იხდის გზავნილის ფასს.

   სქოუპის კონტრაქტი (DESIGN.md-ის მოთხოვნა):
     - body.c2k-page — გვერდის ფონი
     - .c2k — ყველა ცვლადი მხოლოდ აქ ცხადდება, :root-ზე არასდროს
     - @font-face თავად ამ ფაილშია, სხვა სტილს არ ეყრდნობა
   ============================================================================ */

/* ---------- შრიფტები ---------- */
@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/firago-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/firago-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BPG Nino Mtavruli';
  src: url('../fonts/bpg-nino-mtavruli.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ---------- ტოკენები ---------- */
.c2k {
  /* მელანი და ქაღალდი */
  --red:        #b40000;
  --red-deep:   #7a0000;
  --red-bright: #c90000;
  --ink:        #1a202c;
  --ink-2:      #4a5568;
  --ink-3:      #616e80;          /* AA-ზე გამოსული „subtle“ (ძველი #718096 ვერ გადიოდა) */
  --paper:      #ffffff;
  --paper-2:    #f6f7f9;
  --rule:       #e2e8f0;
  --rule-2:     #c9d2dd;
  /* წითელ ველზე ტექსტის ტონები წითლიდანვეა აღებული, არა ნაცრისფრიდან.
     გაზომილი კონტრასტი #b40000-ზე: თეთრი 7.14:1 · on-red-2 5.49:1 · on-red-3 4.73:1
     (#ffb8b2 აქ 4.34:1-ს იძლეოდა და AA-ს ვერ გადიოდა — შეიცვალა). */
  --on-red:     #ffffff;
  --on-red-2:   #ffd9d5;
  --on-red-3:   #ffc4bf;

  /* ბადე */
  --shell:      1180px;
  --gutter:     clamp(18px, 5vw, 48px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ტიპოგრაფია */
  --f-text:    'FiraGO', 'Noto Sans Georgian', Helvetica, Arial, sans-serif;
  --f-display: 'BPG Nino Mtavruli', 'Noto Serif Georgian', Georgia, serif;
  --dw: 700;                       /* display weight */
  --t-micro: .6875rem;
  --t-xs:    .8125rem;
  --t-sm:    .9375rem;
  --t-base:  1.0625rem;
  --t-lg:    1.1875rem;
  --t-xl:    1.375rem;
  --t-2xl:   clamp(1.6rem, 4.4vw, 2.35rem);
  --t-display: clamp(2.05rem, 10vw, 5rem);

  /* ფორმა და სიღრმე — ქაღალდის სამყარო, ამიტომ მჭიდრო რადიუსები */
  --r1: 2px; --r2: 4px; --r3: 8px; --rp: 999px;
  --sh-rest:  0 1px 2px rgba(16, 24, 40, .06);
  --sh-lift:  0 10px 24px -10px rgba(16, 24, 40, .22), 0 2px 6px -2px rgba(16, 24, 40, .10);
  --sh-sheet: 0 -1px 0 rgba(122, 0, 0, .35), 0 28px 60px -28px rgba(0, 0, 0, .45);

  /* მოძრაობა — ერთი ease, ორი ხანგრძლივობა */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-state: 180ms;
  --dur-move:  540ms;
}

/* პოლონურსა და ინგლისურზე display როლი FiraGO Bold-ზე გადადის:
   BPG Nino Mtavruli-ს პოლონური დიაკრიტიკა (ą ć ę ł ń ó ś ź ż) საერთოდ არ აქვს
   და ერთი სიტყვა ორ შრიფტში დაიშლებოდა. ჩაწერილი წესია, არა გემოვნება. */
.c2k-page[data-lang='pl'] .c2k,
.c2k-page[data-lang='en'] .c2k {
  --f-display: 'FiraGO', 'Noto Sans Georgian', Helvetica, Arial, sans-serif;
  --dw: 700;
}

/* ---------- ბაზისი ---------- */
*, *::before, *::after { box-sizing: border-box; }

html.c2k-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.c2k-html { scroll-behavior: auto; } }

body.c2k-page {
  margin: 0;
  background: var(--red, #b40000);
  color: #1a202c;
  font-family: 'FiraGO', 'Noto Sans Georgian', Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ⚠️ ქვემოთ ბევრ ელემენტს აქვს display: grid/flex, რაც UA-ს `[hidden]`-ს
   სპეციფიკურობით ჯაბნის. ამის გარეშე არჩეული ფაილის პანელი და ცარიელი
   შეცდომის სტრიქონები ატვირთვამდეც ჩანდა. */
.c2k [hidden] { display: none !important; }

.c2k img, .c2k svg { max-width: 100%; }
.c2k p { margin: 0; }
.c2k h1, .c2k h2, .c2k h3 { margin: 0; font-weight: var(--dw); font-family: var(--f-display); }

.c2k-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.c2k-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ფოკუსი — ერთი წესი მთელ სამყაროზე */
.c2k :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--r1);
}
.c2k-face :is(a, button, input):focus-visible { outline-color: var(--on-red); }

.c2k-skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 40; background: var(--paper); color: var(--ink);
  padding: 10px 18px; border-radius: 0 0 var(--r2) var(--r2);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  transition: transform var(--dur-state) var(--ease);
}
.c2k-skip:focus { transform: translate(-50%, 0); }

/* ---------- საჰაერო ფოსტის ზოლი (par avion) ----------
   სამყაროს ხელმოწერა. ბრუნდება მხოლოდ სამ ადგილას: გვერდის ზედა კიდეზე,
   ფუტერის თავზე და ატვირთვის ინდიკატორში — ე.ი. მაშინ, როცა გზავნილი მართლა
   მოძრაობს. სამშვენისად არსად. */
.c2k-chevron {
  height: 13px;
  background: repeating-linear-gradient(
    115deg,
    var(--chev-a) 0 13px,
    var(--chev-b) 13px 26px
  );
}
.c2k-face > .c2k-chevron { --chev-a: var(--on-red); --chev-b: var(--red-deep); }
.c2k-foot > .c2k-chevron { --chev-a: var(--on-red); --chev-b: var(--red-deep); }

/* ============================================================
   I. კონვერტის პირი — წითელი ველი
   ============================================================ */
.c2k-face {
  position: relative;
  background: var(--red);
  color: var(--on-red);
  padding-bottom: clamp(64px, 13vw, 132px);
  isolation: isolate;
}

/* კონვერტის ნაკეცის ნაკერები — მასალა, არა დეკორი */
.c2k-face::before {
  content: '';
  position: absolute; inset: 13px 0 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(255,255,255,.085) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom left,  transparent calc(50% - .5px), rgba(255,255,255,.085) 50%, transparent calc(50% + .5px));
}
.c2k-face > .c2k-shell { position: relative; z-index: 1; }

/* — მასთჰედი — */
.c2k-mast {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-block: clamp(18px, 3.4vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
/* ბრენდის ლოქაპი — გამომგზავნის ბეჭდური იარლიყი კონვერტის ზედა მარცხენა კუთხეში.
   ლოგო წითელი მიკროფონია თეთრი „K“-თი, ე.ი. წითელ ველზე პირდაპირ ქრება;
   თეთრად შებრუნებაც კლავს — „K“ სხეულს შეერწყმებოდა. ამიტომ ლოგო თავის
   ნამდვილ ფერებში დგას თეთრ ფილაზე, გვერდით კი სახელწოდება. */
.c2k-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--on-red);
}
.c2k-brand__mark {
  display: grid; place-items: center; flex: none;
  width: clamp(38px, 7vw, 46px); aspect-ratio: 1;
  background: var(--paper); border-radius: var(--r2);
  padding: 4px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .45);
}
.c2k-brand__mark img { display: block; width: 100%; height: auto; }
.c2k-brand__name {
  font-size: clamp(1rem, 2.6vw, 1.1875rem); font-weight: 700;
  letter-spacing: -.015em; line-height: 1;
}
.c2k-brand__name span { color: var(--on-red-3); }

.c2k-mast__actions { display: flex; align-items: center; gap: clamp(8px, 1.8vw, 16px); }
.c2k-mast-fb {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 12px;
  color: var(--on-red); text-decoration: none;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r2);
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.c2k-mast-fb:hover {
  background: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}
.c2k-mast-fb svg { flex: none; }
@media (max-width: 480px) {
  .c2k-mast-fb__l { display: none; }
  .c2k-mast-fb { padding: 0 10px; min-width: 36px; justify-content: center; }
}

.c2k-langs { display: flex; gap: 2px; }
.c2k-langs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 36px; padding: 0 10px;
  color: var(--on-red-2); text-decoration: none;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em;
  border: 1px solid transparent; border-radius: var(--r2);
  transition: color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.c2k-langs a:hover { color: var(--on-red); border-color: rgba(255,255,255,.34); }
.c2k-langs a[aria-current='true'] { color: var(--red); background: var(--on-red); }

/* — კონვერტის სხეული: მისამართი + მარკის კუთხე — */
.c2k-body {
  display: grid;
  gap: clamp(30px, 5vw, 44px);
  padding-top: clamp(26px, 4.6vw, 46px);
}
@media (min-width: 900px) {
  .c2k-body {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: clamp(40px, 5vw, 72px);
  }
  .c2k-frank { grid-column: 2; grid-row: 1; }
  .c2k-addr  { grid-column: 1; grid-row: 1; }
}

/* მარკის კუთხე */
.c2k-frank {
  display: flex; align-items: center; gap: var(--s4);
  justify-content: flex-start;
}
@media (min-width: 900px) {
  .c2k-frank { flex-direction: column; align-items: flex-end; gap: var(--s5); }
}

.c2k-stamp-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.c2k-stamp {
  --stamp-ground: var(--red);
  position: relative;
  display: block;
  width: clamp(86px, 21vw, 116px);
  padding: 9px;
  background: var(--paper);
  border-radius: var(--r1);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
  transition: transform var(--dur-move) var(--ease);
}
.c2k-stamp img { display: block; width: 100%; height: auto; border-radius: var(--r1); }
/* პერფორაცია: კიდეებზე ფონის ფერით მოჭრილი ნახევარწრეები */
.c2k-stamp::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 4.5px at 7px 0,   var(--stamp-ground) 97%, transparent 100%) 0 0    / 14px 9px repeat-x,
    radial-gradient(circle 4.5px at 7px 9px, var(--stamp-ground) 97%, transparent 100%) 0 100% / 14px 9px repeat-x,
    radial-gradient(circle 4.5px at 0 7px,   var(--stamp-ground) 97%, transparent 100%) 0 0    / 9px 14px repeat-y,
    radial-gradient(circle 4.5px at 9px 7px, var(--stamp-ground) 97%, transparent 100%) 100% 0 / 9px 14px repeat-y;
}
a.c2k-stamp:hover { transform: rotate(-2.5deg) scale(1.03); }

.c2k-frank__label {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-red-2); text-align: center; line-height: 1.35;
}

/* ღირებულებისა და მარშრუტის აღნიშვნები — მარკის გვერდით, კონვერტის კუთხეში */
.c2k-frank__marks {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; min-width: 0;
}
@media (min-width: 900px) { .c2k-frank__marks { align-items: flex-end; } }

/* ფრანკირების ღირებულების ველი */
.c2k-indicium {
  border: 1.5px solid rgba(255, 255, 255, .65);
  border-radius: var(--r2);
  padding: 9px 14px 10px;
  text-align: center;
  min-width: 108px;
}
.c2k-indicium__l {
  display: block;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-red-2);
}
/* თანხა ყოველთვის FiraGO-თი: „zł“-ის ł BPG Nino Mtavruli-ს არ აქვს და
   ბრაუზერი მას სხვა შრიფტიდან ჩასვამდა — ერთი სიტყვა ორ ხელწერაში. */
.c2k-indicium__v {
  display: block; margin-top: 3px;
  font-family: var(--f-text); font-weight: 700;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--on-red);
}

/* მარშრუტის ენდორსმენტი. სათაურის თავზე აღარ დგას — იქ ის eyebrow იყო;
   კონვერტის კუთხეში კი ის, რაც სინამდვილეშია: გზავნილის მიმართულება. */
.c2k-route {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, .65);
  border-radius: var(--r2);
  padding: 6px 12px;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-red);
  text-align: center;
}

/* — მისამართის ბლოკი — */
.c2k-q {
  margin-top: 0;
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.c2k-q span { display: block; }
.c2k-q__num {
  color: var(--on-red);
  font-variant-numeric: tabular-nums;
  position: relative;
  width: max-content;
  max-width: 100%;
}
/* ხაზგასმა ხელით გავლებული კალმის მსგავსად — ერთი წრფე ბაზისის ქვეშ */
.c2k-q__num::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: .04em;
  height: max(3px, .055em);
  background: var(--on-red-3);
  border-radius: var(--rp);
}

.c2k-lede {
  margin-top: clamp(18px, 3vw, 26px);
  max-width: 30ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--on-red-2);
}
@media (min-width: 700px) { .c2k-lede { max-width: 46ch; } }

.c2k-hero-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 34px);
}
.c2k-hero-acts .c2k-cta {
  margin-top: 0;
}

.c2k-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 0;
  min-height: 56px; padding: 0 26px;
  background: var(--paper); color: var(--red);
  border-radius: var(--r2); text-decoration: none;
  font-size: var(--t-base); font-weight: 700; letter-spacing: -.005em;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
  transition: transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.c2k-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55); }
.c2k-cta:active { transform: translateY(0); }
.c2k-cta svg { flex: none; transition: transform var(--dur-state) var(--ease); }
.c2k-cta:hover svg { transform: translateY(3px); }

.c2k-btn-fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-red);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r2);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -.005em;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3);
  transition: transform var(--dur-state) var(--ease), background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.c2k-btn-fb:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
}
.c2k-btn-fb:active {
  transform: translateY(0);
}
.c2k-btn-fb svg {
  flex: none;
}

/* ============================================================
   II. წერილის ფურცელი — თეთრი ველი, კონვერტიდან ამოწეული
   ============================================================ */
.c2k-sheet {
  position: relative; z-index: 2;
  margin-top: clamp(-96px, -9vw, -44px);
  background: var(--paper);
  border-radius: var(--r3) var(--r3) 0 0;
  box-shadow: var(--sh-sheet);
  color: var(--ink-2);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.c2k-h2 {
  font-size: var(--t-2xl);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* — სამი ნაბიჯი: საფოსტო მარშრუტი, არა სამი ბარათი — */
.c2k-steps { padding-top: clamp(40px, 6vw, 72px); }
.c2k-steps__list {
  list-style: none; margin: clamp(24px, 3.6vw, 38px) 0 0; padding: 0;
  display: grid; gap: 0;
}
.c2k-step {
  position: relative;
  padding: 0 0 var(--s6) 52px;
}
.c2k-step:last-child { padding-bottom: 0; }
/* მარშრუტის წყვეტილი ხაზი */
.c2k-step::before {
  content: '';
  position: absolute; left: 17px; top: 34px; bottom: 6px;
  width: 0; border-left: 2px dashed var(--rule-2);
}
.c2k-step:last-child::before { display: none; }

.c2k-step__n {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1.5px solid var(--red);
  border-radius: var(--rp);
  color: var(--red);
  font-size: var(--t-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
}
.c2k-step__t {
  font-size: var(--t-xl); line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink);
  padding-top: 2px;
}
.c2k-step__d { margin-top: 6px; max-width: 56ch; font-size: var(--t-base); }

@media (min-width: 860px) {
  .c2k-steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .c2k-step { padding: 52px 0 0 0; }
  .c2k-step::before {
    left: 44px; right: calc(-1 * var(--s7)); top: 17px; bottom: auto;
    width: auto; height: 0;
    border-left: 0; border-top: 2px dashed var(--rule-2);
  }
  .c2k-step__d { max-width: 34ch; }
}

/* — გამგზავნის ბლოკი (ფორმა) — */
.c2k-send { padding-top: clamp(48px, 7vw, 88px); scroll-margin-top: 24px; }

.c2k-enclosure {
  margin-top: clamp(22px, 3.4vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  background: var(--paper);
  box-shadow: var(--sh-rest);
  overflow: hidden;
}
.c2k-enclosure__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 12px clamp(16px, 3vw, 28px);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.c2k-label {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.c2k-enclosure__body { padding: clamp(20px, 3.6vw, 34px) clamp(16px, 3vw, 34px) clamp(24px, 3.6vw, 36px); }

/* ⚠️ აქ ადრე :last-of-type ეწერა — ის ტიპზე მუშაობს, ამიტომ საკონტაქტო
   <fieldset>-ს (ერთადერთი fieldset ფორმაში) ცარიელ margin-ს აძლევდა და
   „ვიდეო“ ველი მას ეკვროდა. დაშორებას ახლა ყველა ველი თანაბრად იძლევა. */
.c2k-field { margin-bottom: var(--s6); border: 0; padding: 0; min-width: 0; }
.c2k-field > label, .c2k-field > legend {
  display: block; padding: 0;
  font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}
.c2k-hint { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 10px; }

.c2k-input {
  display: block; width: 100%;
  min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r2);
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.c2k-input::placeholder { color: var(--ink-3); }
.c2k-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(180, 0, 0, .18);
}
.c2k-input[aria-invalid='true'] { border-color: var(--red); }

.c2k-err {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 8px;
  font-size: var(--t-sm); font-weight: 700; color: var(--red);
}
.c2k-err svg { flex: none; margin-top: 3px; }
/* ფორმის საერთო შეცდომა (ქსელი, სერვერი) — ღილაკის ქვეშ, ცენტრში */
.c2k-err--block {
  justify-content: center; text-align: left;
  margin-top: var(--s4); font-size: var(--t-base);
}

/* არხის ჩიპები */
.c2k-routes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.c2k-chip { position: relative; }
.c2k-chip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.c2k-chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--rule-2); border-radius: var(--rp);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
  background: var(--paper);
  transition: all var(--dur-state) var(--ease);
}
.c2k-chip span svg { flex: none; }
.c2k-chip:hover span { border-color: var(--ink-3); color: var(--ink); }
.c2k-chip input:checked + span {
  background: var(--red); border-color: var(--red); color: var(--on-red);
}
.c2k-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

/* — ჩასადები: ვიდეოს ფანჯარა — */
.c2k-drop {
  position: relative;
  display: grid; place-items: center;
  gap: 10px;
  min-height: 190px;
  padding: var(--s5);
  text-align: center;
  border: 2px dashed var(--rule-2);
  border-radius: var(--r3);
  background: var(--paper-2);
  transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
  cursor: pointer;
}
.c2k-drop:hover { border-color: var(--ink-3); }
.c2k-drop.is-over { border-color: var(--red); background: #fff5f5; border-style: solid; }
.c2k-drop input[type='file'] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
/* ველი გამჭვირვალეა და მთელ ზონას ფარავს, ე.ი. საერთო :focus-visible
   კონტური მასზე უხილავია — ფოკუსს ზონა თვითონ აჩვენებს. */
.c2k-drop:has(input[type='file']:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-color: var(--ink);
}

/* ჩაგდება მხოლოდ კურსორთან ერთად არსებობს. სენსორულ ეკრანზე „ჩააგდე
   ვიდეო აქ“ ტყუილი ინსტრუქციაა, ამიტომ იქ პირდაპირ არჩევის ღილაკია. */
/* შედგენილი სელექტორები განზრახ: ერთკლასიანს ქვემოთ მდგომი
   `.c2k-drop__btn { display: inline-flex }` თანაბარი სპეციფიკურობით ჯაბნიდა
   და ორივე ღილაკი ერთდროულად ჩანდა. */
.c2k-drop .c2k-drop__t--drag,
.c2k-drop .c2k-drop__or,
.c2k-drop .c2k-drop__btn--drag { display: none; }
.c2k-drop .c2k-drop__btn--tap  { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .c2k-drop .c2k-drop__t--drag   { display: block; }
  .c2k-drop .c2k-drop__or        { display: block; }
  .c2k-drop .c2k-drop__btn--drag { display: inline-flex; }
  .c2k-drop .c2k-drop__btn--tap  { display: none; }
}
.c2k-drop__icon { color: var(--rule-2); }
.c2k-drop.is-over .c2k-drop__icon { color: var(--red); }
.c2k-drop__t { font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.c2k-drop__or { font-size: var(--t-sm); color: var(--ink-3); }
.c2k-drop__btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: var(--r2);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 700;
  pointer-events: none;                       /* კლიკს მთელი ზონა იჭერს */
}
.c2k-drop__meta { font-size: var(--t-xs); color: var(--ink-3); }

/* არჩეული ფაილი — კონვერტში ჩადებული ფოტო */
.c2k-picked {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  background: var(--paper);
}
.c2k-picked__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--ink);
  display: grid; place-items: center;
}
.c2k-picked__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c2k-picked__thumb svg { color: rgba(255,255,255,.55); }
.c2k-picked__name {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c2k-picked__meta {
  margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.c2k-picked__swap {
  margin-top: 8px;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--t-xs); font-weight: 700;
  color: var(--red); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* თანხმობა */
.c2k-consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--t-sm); color: var(--ink-2);
  cursor: pointer;
}
.c2k-consent input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--red); cursor: pointer;
}

/* გაგზავნის ღილაკი */
.c2k-submit {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 60px; margin-top: var(--s2);
  padding: 0 24px;
  background: var(--red); color: var(--on-red);
  border: 0; border-radius: var(--r2);
  font: inherit; font-size: var(--t-lg); font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-rest);
  transition: background var(--dur-state) var(--ease), transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.c2k-submit:hover:not(:disabled) { background: var(--red-deep); transform: translateY(-2px); box-shadow: var(--sh-lift); }
.c2k-submit:active:not(:disabled) { transform: translateY(0); }
.c2k-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   III. გაგზავნის მომენტი — ერთადერთი დადგმული ანიმაცია
   ============================================================ */
.c2k-stage { position: relative; }

.c2k-sending { text-align: center; padding: var(--s5) 0 var(--s2); }
.c2k-sending__env {
  position: relative;
  width: min(280px, 76%);
  margin: 0 auto var(--s5);
  aspect-ratio: 5 / 3;
  border-radius: var(--r2);
  background: var(--red);
  box-shadow: var(--sh-lift);
  overflow: hidden;
  display: grid; place-items: center;
}
/* ნაკეცის ნაკერები აქაც */
.c2k-sending__env::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(255,255,255,.16) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom left,  transparent calc(50% - .5px), rgba(255,255,255,.16) 50%, transparent calc(50% + .5px));
}
.c2k-sending__env img {
  position: relative;
  width: 46%; border-radius: var(--r1);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.6);
  transform: rotate(-3deg);
}
.c2k-sending__env svg { position: relative; color: rgba(255,255,255,.7); }

/* კონვერტი ოდნავ „სუნთქავს“ მხოლოდ გაგზავნის დროს — ეს პროცესის
   ინდიკატორია, არა უსაქმური მოძრაობა, და მთავრდება მაშინვე. */
@keyframes c2k-travel {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.c2k-sending__env { animation: c2k-travel 2.4s var(--ease) infinite; }

.c2k-bar {
  position: relative;
  height: 13px;
  border-radius: var(--rp);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
/* ზოლი მთელ სიგანეზეა დახატული და clip-path-ით იხსნება — არა width-ით.
   ორი მიზეზი: width-ის ანიმაცია layout-ს ხელახლა ათვლევინებს, და გაწელვა
   შევრონის ნახაზსაც დაამახინჯებდა. clip-path კომპოზიტორზე მუშაობს. */
.c2k-bar__fill {
  --chev-a: var(--red);
  --chev-b: var(--red-deep);
  height: 100%; width: 100%;
  background: repeating-linear-gradient(115deg, var(--chev-a) 0 13px, var(--chev-b) 13px 26px);
  background-size: 37px 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms linear;
  animation: c2k-slide 900ms linear infinite;
}
@keyframes c2k-slide { to { background-position: 37px 0; } }

.c2k-bar__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s3);
}
.c2k-bar__label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.c2k-bar__pct {
  font-family: var(--f-display); font-weight: var(--dw);
  font-size: 1.5rem; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.c2k-sending__note { margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-3); }

/* — მიღებულია: ბეჭდის დასმა — */
.c2k-done { text-align: center; padding: var(--s5) 0 var(--s2); }
.c2k-postmark { width: min(230px, 62%); margin: 0 auto var(--s5); color: var(--red); }
.c2k-postmark svg { display: block; width: 100%; height: auto; }

@keyframes c2k-stamp-down {
  0%   { opacity: 0; transform: scale(2.15) rotate(-16deg); filter: blur(4px); }
  58%  { opacity: 1; transform: scale(.945) rotate(-6deg);  filter: blur(0); }
  74%  { transform: scale(1.035) rotate(-8.5deg); }
  100% { transform: scale(1) rotate(-7deg); }
}
@keyframes c2k-jolt {
  0%, 100% { transform: translate(0, 0); }
  62%      { transform: translate(0, 3px); }
  70%      { transform: translate(-2px, -1px); }
  78%      { transform: translate(2px, 1px); }
  86%      { transform: translate(0, 0); }
}
.c2k-done.is-in .c2k-postmark { animation: c2k-stamp-down 720ms var(--ease) both; }
.c2k-done.is-in .c2k-done__inner { animation: c2k-jolt 720ms var(--ease) both; }

.c2k-done__t { font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.c2k-done__d { margin: var(--s4) auto 0; max-width: 52ch; font-size: var(--t-base); text-wrap: pretty; }

.c2k-done__acts {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s4); margin-top: var(--s6);
}

.c2k-ref {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 26px;
  border: 1.5px dashed var(--rule-2); border-radius: var(--r2);
}
.c2k-ref__l {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.c2k-ref__v {
  font-family: var(--f-display); font-weight: var(--dw);
  font-size: 1.6rem; letter-spacing: .02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.c2k-share {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--ink); border-radius: var(--r2);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.c2k-share:hover { background: var(--ink); color: var(--paper); }

/* — დახურული მიღება — */
.c2k-closed {
  text-align: center;
  padding: clamp(32px, 5vw, 52px) var(--s5);
  border: 1.5px dashed var(--rule-2);
  border-radius: var(--r3);
  margin-top: clamp(22px, 3.4vw, 32px);
}
.c2k-closed__t { font-size: var(--t-xl); color: var(--ink); }
.c2k-closed__d { margin: var(--s3) auto 0; max-width: 48ch; }

/* ============================================================
   IV. წვრილი შრიფტი — საბაჟო დეკლარაციის ფურცელი
   ============================================================ */
.c2k-slip { padding-top: clamp(48px, 7vw, 88px); }
.c2k-slip__card {
  margin-top: clamp(22px, 3.4vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  background: var(--paper-2);
  padding: clamp(20px, 3.6vw, 34px);
}
.c2k-rows { margin: 0; }
/* ⚠️ dt-ს ადრე `flex: none` ჰქონდა. მოკლე ლეიბლებზე ეს მუშაობდა, მაგრამ
   გრძელმა („ორგანიზატორი და მონაცემთა კონტროლიორი“) მნიშვნელობა ეკრანს
   გარეთ გაიყვანა და გვერდს 63px ჰორიზონტალური გადავსება მისცა.
   ახლა რიგი საჭიროებისას ორ ხაზზე იშლება. */
.c2k-rows > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3);
  padding: 11px 0;
  border-bottom: 1px dotted var(--rule-2);
}
.c2k-rows > div:first-child { padding-top: 0; }
.c2k-rows dt {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.c2k-rows dd {
  margin: 0 0 0 auto; text-align: right;
  font-size: var(--t-base); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.c2k-tbd {
  color: var(--red);
  background: #fff0f0;
  border-radius: var(--r1);
  padding: 1px 6px;
  font-weight: 700;
}

.c2k-rules { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 10px; }
.c2k-rules li {
  position: relative; padding-left: 26px;
  font-size: var(--t-sm); color: var(--ink-2);
}
.c2k-rules li::before {
  content: ''; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border: 1.5px solid var(--red); border-radius: var(--rp);
}
/* პერსონალური მონაცემები — დეკლარაციის მეორე ნახევარი */
.c2k-privacy {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--ink-2);
  display: grid; gap: var(--s3);
}
.c2k-privacy__t {
  font-family: var(--f-text); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.c2k-privacy a { color: var(--red); font-weight: 700; }
.c2k-rows--tight > div { padding: 8px 0; }
.c2k-rows--tight dd { font-size: var(--t-sm); }

.c2k-note {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-3);
}
.c2k-note a { color: var(--red); font-weight: 700; }

.c2k-consent a { color: var(--red); font-weight: 700; text-underline-offset: 3px; }

/* ============================================================
   V. ფუტერი
   ============================================================ */
.c2k-foot { background: var(--red); color: var(--on-red-2); }
.c2k-foot__in {
  display: grid; gap: var(--s6);
  padding-block: clamp(34px, 5vw, 56px);
}
@media (min-width: 760px) {
  .c2k-foot__in { grid-template-columns: 1fr auto; align-items: center; }
}
.c2k-foot__party { display: flex; align-items: center; gap: var(--s4); margin-top: 12px; }
.c2k-foot__party .c2k-stamp { width: 74px; }
.c2k-foot__l {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-red-3);
}
.c2k-foot__parties { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); }
.c2k-foot__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--t-xs); color: var(--on-red-3); }
@media (min-width: 760px) {
  .c2k-foot__meta { align-items: flex-end; text-align: right; }
}
.c2k-foot-fb {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--on-red); text-decoration: none;
  font-size: var(--t-xs); font-weight: 700;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r2);
  transition: all var(--dur-state) var(--ease);
}
.c2k-foot-fb:hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.c2k-foot__copy { margin: 0; }
.c2k-foot__copy a { color: var(--on-red); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   მოძრაობის შემცირება
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .c2k *, .c2k *::before, .c2k *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}