/* ===================== Checkout (lp2-checkout) =====================
   Uses the lp2 design language: marquee, flag bg, BarLev display + Assistant body,
   gold gradient CTA. Unlike lp.css, this page uses natural flow (no scaled-stage)
   because the form height is variable. Single column on mobile, single centered
   card on desktop. */

.co{position:relative;min-height:100vh;background:var(--c-dark-blue);overflow-x:hidden;}

/* ----- Backgrounds (sized to viewport) ----- */
.co__bg{position:fixed;inset:0;overflow:hidden;background:var(--c-sky);z-index:0;}
.co__bg-photo{position:absolute;inset:0;
  background:url('../images/hero-flag.png') no-repeat left center / cover;}
.co__bg-fade-mid{position:absolute;top:0;left:30%;width:30%;height:100%;
  background:linear-gradient(90.15deg, rgba(188,216,240,0) 2.48%, rgba(188,216,240,0.92) 66.71%);
  pointer-events:none;}
.co__bg-right-fade{position:absolute;top:0;right:18%;width:34%;height:100%;
  background:linear-gradient(90deg, rgba(16,67,124,0) 0%, var(--c-dark-blue) 100%);}
.co__bg-right{position:absolute;top:0;right:0;width:18%;height:100%;background:var(--c-dark-blue);}
.co__bg-bottom{position:absolute;left:0;bottom:0;width:100%;height:18%;
  background:var(--grad-fade-bottom);pointer-events:none;}

/* ----- Marquee bar (top) ----- */
.co__marquee{position:relative;width:100%;height:51px;background:var(--c-blue);
  overflow:hidden;display:flex;align-items:center;z-index:50;direction:ltr;}
.co__marquee-track{display:flex;flex-shrink:0;white-space:nowrap;animation:marquee 40s linear infinite;will-change:transform;}
.co__marquee-track span{flex-shrink:0;padding:0 1.2rem;
  font-family:var(--font-display);font-weight:700;font-size:32px;line-height:40px;letter-spacing:1.92px;color:#fff;
  direction:rtl;unicode-bidi:isolate;}

/* ----- Main container ----- */
.co__wrap{position:relative;z-index:10;display:flex;justify-content:center;
  padding:48px 24px 64px;}

/* ----- Card ----- */
.co__card{position:relative;width:100%;max-width:680px;background:#fff;border-radius:24px;
  box-shadow:var(--shadow-card);overflow:hidden;}
.co__card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.95;}
.co__card-inner{position:relative;z-index:2;padding:36px 44px 40px;}

/* ----- Header (avatar + title + sublogo) ----- */
.co__hdr{display:flex;flex-direction:column;align-items:center;gap:12px;}
.co__avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.25);}
.co__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.co__title{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1;
  color:var(--c-blue);text-align:center;margin:8px 0 0;letter-spacing:-0.6px;}
.co__sub{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0;}
/* Both spans use the same Likkud font; sub-text is bumped up so its glyph heights visually match
   "בליכוד" — the Likkud brand font draws letters like ב/ל/כ/ד much taller than ש/י, so equal px
   produces an unequal visual size. */
.co__sub-text,
.co__sub-likkud{font-family:'Likkud',var(--font-display);font-weight:700;line-height:1;letter-spacing:-0.5px;}
.co__sub-text{color:var(--c-text-navy-2);font-size:70px;}
.co__sub-likkud{color:var(--c-blue);font-size:54px;}

/* ----- Amount summary (blue strip, matches marquee/brand) ----- */
.co__amount{margin:22px 0 6px;background:var(--c-blue);border-radius:6px;
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;}
.co__amount-label{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-0.2px;}
.co__amount-value{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;letter-spacing:-0.4px;
  display:inline-flex;align-items:baseline;gap:2px;direction:ltr;}
.co__amount-value .ils{font-size:22px;line-height:22px;}
.co__amount-edit{font-family:var(--font-body);font-weight:600;font-size:14px;color:#fff;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:6px 14px;text-decoration:none;
  transition:background .15s ease,color .15s ease;}
.co__amount-edit:hover{background:#fff;color:var(--c-blue);}

/* ----- Secure-payment note (shown in place of card-field form) ----- */
.co__pay-note{display:flex;align-items:center;gap:10px;margin:0 0 18px;
  background:rgba(26,109,241,.06);border:1px solid rgba(26,109,241,.22);border-radius:10px;
  padding:12px 16px;font-family:var(--font-body);font-weight:600;font-size:14px;
  color:var(--c-text-navy);line-height:1.45;}
.co__pay-note-ico{flex:0 0 22px;width:22px;height:22px;color:var(--c-blue);}

/* ----- Payment method selector (5 across, icon-above-label) ----- */
.co__pmethods{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 18px;}
.co__pm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:2px solid var(--c-border);border-radius:10px;
  padding:12px 6px;min-height:72px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--c-text-navy);
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-align:center;line-height:1.15;}
.co__pm:hover{border-color:var(--c-blue);box-shadow:0 6px 14px rgba(26,109,241,.16);}
.co__pm:active{transform:translateY(1px) scale(.985);}
.co__pm.is-active{background:rgba(26,109,241,.08);border-color:var(--c-blue);
  box-shadow:0 8px 18px rgba(26,109,241,.22);color:var(--c-blue);}
.co__pm-icon{width:28px;height:28px;flex:0 0 28px;display:block;}
.co__pm[data-pm="apple"] .co__pm-icon{color:#000;}
.co__pm.is-active[data-pm="apple"] .co__pm-icon{color:var(--c-blue);}

/* ----- Section heading ----- */
.co__section-title{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.2;
  color:var(--c-text-navy);margin:24px 0 12px;letter-spacing:-0.2px;}

/* ----- Form grid ----- */
.co__form{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;}
.co__form--3col{grid-template-columns:repeat(3,1fr);}
.co__field{display:flex;flex-direction:column;gap:6px;}
.co__field--full{grid-column:1 / -1;}
.co__field--span2{grid-column:span 2;}
.co__label{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--c-text-navy);
  display:flex;align-items:center;gap:4px;}
.co__label .req{color:var(--c-red);}
.co__input{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--c-text-navy);
  padding:12px 14px;border:2px solid var(--c-border);border-radius:8px;background:#fff;outline:none;
  width:100%;box-sizing:border-box;direction:rtl;
  transition:border-color .15s ease,box-shadow .15s ease;}
.co__input::placeholder{color:#9aa3b2;font-weight:500;}
.co__input:focus{border-color:var(--c-gold-light);box-shadow:0 0 0 4px rgba(224,169,46,.18);}
.co__input--ltr{direction:ltr;text-align:right;letter-spacing:1px;}
.co__input.is-invalid{border-color:var(--c-red);box-shadow:0 0 0 4px rgba(217,27,30,.12);}

/* Card row: number takes 2/3, expiry + cvv split */
.co__cardrow{grid-column:1 / -1;display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;}

/* Checkbox row (outside .co__form grid now) */
.co__check{display:flex;align-items:flex-start;gap:10px;margin:18px 0 6px;
  font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--c-text-navy);line-height:1.45;}
.co__check input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 20px;width:20px;height:20px;
  border:2px solid var(--c-border);border-radius:5px;background:#fff;cursor:pointer;position:relative;
  transition:border-color .15s ease,background .15s ease;}
.co__check input:checked{background:var(--c-gold-light);border-color:var(--c-gold-light);}
.co__check input:checked::after{content:"";position:absolute;top:2px;right:5px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.co__check a{color:var(--c-blue);text-decoration:underline;}

/* CTA — full width, outside .co__form grid */
.co__cta{display:flex;width:100%;height:72px;margin:14px 0 0;border-radius:8px;background:var(--grad-gold-btn);
  filter:drop-shadow(var(--shadow-gold));border:0;cursor:pointer;
  align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-0.2px;
  color:#fff;text-shadow:var(--shadow-text);
  transition:transform .12s ease, filter .15s ease;}
.co__cta-label{display:inline-flex;align-items:baseline;gap:2px;}
/* ₪ on the LEFT of "1,000" inside the CTA, smaller than digits (matches the upper amount-strip
   ratio ≈ 22/38 ≈ 58%). Assistant font is used because BarLev lacks the ₪ glyph. */
.co__cta-ils{font-family:var(--font-body);font-weight:700;font-size:22px;line-height:1;}
.co__cta:hover{filter:drop-shadow(0 16px 22px rgba(224,169,46,.5));}
.co__cta:active{transform:translateY(2px) scale(.99);}
.co__cta:disabled{opacity:.55;cursor:wait;filter:none;}

/* Trust row (outside .co__form grid now) */
.co__trust{margin:16px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--c-text-gray);line-height:1.2;
  text-align:center;}
.co__trust .pay{display:inline-flex;align-items:center;gap:6px;}
.co__trust .pay img{width:14px;height:14px;display:block;}
.co__trust .sep{width:4px;height:4px;border-radius:50%;background:var(--c-text-gray);}

/* Footer */
.co__copyright{position:relative;z-index:10;padding:10px 24px 28px;text-align:center;
  font-family:var(--font-body);font-weight:400;font-size:16px;color:var(--c-footer);}

/* ===================== Mobile (≤640px) ===================== */
@media (max-width:640px){
  .co__marquee{height:40px;}
  .co__marquee-track{animation-duration:22s;}
  .co__marquee-track span{font-size:23px;line-height:40px;letter-spacing:0.92px;padding:0 .6rem;}

  .co__wrap{padding:24px 14px 36px;}
  .co__card{border-radius:16px;}
  .co__card-inner{padding:24px 20px 28px;}

  .co__avatar{width:92px;height:92px;}
  .co__title{font-size:34px;letter-spacing:-0.4px;}
  .co__sub-text{font-size:46px;}
  .co__sub-likkud{font-size:36px;}

  .co__amount{padding:11px 14px;border-radius:5px;}
  .co__amount-label{font-size:22px;}
  .co__amount-value{font-size:28px;}
  .co__amount-value .ils{font-size:16px;line-height:16px;}
  .co__amount-edit{font-size:12px;padding:4px 10px;}

  .co__section-title{font-size:21px;margin:18px 0 10px;}

  .co__form{grid-template-columns:1fr;gap:12px;}
  .co__field--span2{grid-column:auto;}
  .co__cardrow{grid-template-columns:1fr 1fr;gap:12px;}
  .co__cardrow > :first-child{grid-column:1 / -1;}

  .co__input{font-size:16px;padding:11px 12px;} /* 16px = iOS no-zoom */

  .co__pmethods{grid-template-columns:repeat(3,1fr);gap:8px;}
  .co__pm{padding:10px 4px;min-height:62px;font-size:12px;gap:5px;}
  .co__pm-icon{width:24px;height:24px;flex:0 0 24px;}

  .co__check{margin:14px 0 4px;}
  .co__cta{height:60px;font-size:24px;border-radius:6px;margin-top:10px;}
  .co__trust{font-size:12px;gap:6px;}
}