/* ========== Base variables ========== */
:root {
  --p: #1A3C6C;
  --s: #04A8E5;
  
  --bg: #F4F6F9;
  --r: 12px;
  --sh: 0 6px 18px rgba(0,0,0,.08);
  --pad: 28px;
  --font-body: 'Inter', sans-serif;
}

/* Reset wrappers */
.logo-wrap,
.title-wrap,
.subtitle-wrap {
  margin: 0;
  padding: 0;
}

.logo-wrap { margin-bottom: 16px; }
.title-wrap h1 { margin: 0 0 6px; }
.subtitle-wrap  { margin: 0; }

/* Global reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

/* ===== Page background fix ===== */
html{
  background: var(--bg) var(--bg-img) center/cover fixed; /* full-viewport background */
  /* Removed fixed height to allow the page to shrink naturally based on content.
     Setting height: 100% forces the page to fill the viewport and leaves blank
     space below the card when the content is short. */
  /* height: 100%; */
  scrollbar-gutter: stable;
}

body{
  margin: 0;
  padding: var(--pad);
  background: none;          /* background handled by html */
  /* Allow the body height to be determined by its children instead of the viewport
     height. This prevents a minimum page length and lets the card end precisely
     at the bottom of the last element. */
  min-height: auto;
}


.container{
  position: relative;
/
  width: calc(100% - var(--pad) * 2);
  margin-inline: auto;

  background: #fff var(--card-bg-img) center / cover;
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  box-sizing: border-box;

  /* kill any legacy offset rules */
  inset-inline: auto !important;
  transform: none !important;
}



/* ========== Header ========== */
header {
  text-align: center;
  padding: 34px 28px 22px;
}

.logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

h1 {
  color: var(--p);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.tagline {
  color: #5F6368;
  font-size: 1rem;
}

.benefits {
  margin-top: 10px;
  font-size: .95rem;
  color: #404448;
}

/* ========== Media grid ========== */
.media-section {
  padding: 0 var(--pad) 28px;
}

.media-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  user-select: none;
  justify-content: center;
}

.media-grid.dragging {
  cursor: grabbing;
}

.media-grid .mcard {
  flex: 0 0 var(--cardW);
  scroll-snap-align: start;
  border-radius: var(--galR, var(--r));
  overflow: hidden;
}

.media-grid img,
.media-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mcard video {
  background: #000;
}

@media (min-width: 1024px) {
  .media-grid {
    grid-auto-columns: calc(100% / var(--gal-cols-wide, 4)) !important;
  }
}

/* ========== Quick-action buttons ========== */
.actions {
  padding: 0 var(--pad) 32px;
  display: grid;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  border-radius: var(--r);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: .25s;
}

.btn i { font-size: 1.1rem; }

.btn--tel      { background: var(--p); }
.btn--wa       { background: #25D366; }
.btn--sms      { background: #35A4E5; }
.btn--mail     { background: #EA4335; }
.btn--bit      { background: #E6175D; }
.btn--paybox   { background: #00C2F1; }
.btn--waze     { background: #2D8CFF; }
.btn--telegram { background: #229ED9; }
.btn--instagram{ background: #DD2A7B; }
.btn--facebook { background: #1877F2; }
.btn--credit   { background: var(--s); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

@media (min-width: 768px) {
  .media-grid {
    grid-auto-columns: calc(100% / 3);
  }
  .actions {
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .media-grid { grid-auto-columns: calc(100% / 4); }
}

@media (min-width: 1440px) {
  .media-grid { grid-auto-columns: calc(100% / 5); }
}

/* ========== Generic section ========== */
.section {
  padding: 0 var(--pad) 28px;
}

.section h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--p);
  margin-bottom: 14px;
}

/* ========== Simple pricing rows (legacy) ========== */
.pricing {
  margin: 32px 0;
  padding: 0 8px;
}

.pricing .price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 1.05rem;
}

.pricing .price-title { font-weight: 600; }
.pricing .price-amt {
  color: var(--c-primary, #1A3C6C);
  font-weight: 700;
}

/* ========== Custom objects container ========== */
.custom-objects img,
.custom-objects a,
.custom-objects div {
  align-self: center;
}

/* ========== Quill alignment & direction utilities ========== */
.ql-align-center   { text-align: center; }
.ql-align-right    { text-align: right; }
.ql-align-justify  { text-align: justify; }
.ql-direction-rtl  { direction: rtl; text-align: right; }
.ql-direction-ltr  { direction: ltr; text-align: left; }

/* ========== Lightbox ========== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-drag: none;
}

.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

/* ========== Reviews carousel ========== */
.reviews {
  padding: 0 var(--pad) 32px;
}

.rv-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: 2px;
}

.rv-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 16px 18px;
}

.rv-card .r-head {
  font-weight: 600;
  margin-bottom: 4px;
}

.rv-card .r-stars {
  display: flex;
  margin-bottom: 8px;
}

.rv-title {
  margin: 0 0 10px 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/* ========== Tables & details ========== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

th, td {
  padding: 12px 10px;
  border-bottom: 1px solid #E2E6EA;
  text-align: center;
}

th {
  background: var(--p);
  color: #fff;
}

td:first-child {
  text-align: right;
}

details {
  margin-top: 14px;
  border-bottom: 1px solid #E2E6EA;
  padding-bottom: 12px;
}

summary {
  font-weight: 600;
  cursor: pointer;
}

/* ========== Footer ========== */
footer {
  text-align: center;
  font-size: .8rem;
  color: #878C92;
  padding: 18px 0 26px;
}

/* ========== Drag-and-drop helpers ========== */
.dragging {
  outline: 3px solid var(--c-primary, #1A3C6C);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: .95 !important;
  z-index: 9999;
}

.drag-over {
  outline: 3px dashed var(--c-primary, #1A3C6C);
}

/*
 * Selected section highlight
 * When an element in the preview is clicked it becomes "selected".
 * This class draws a dashed outline around the element so the user
 * clearly sees which section is active. A higher z-index is used
 * so the border sits above other content without affecting layout.
 */
/* Show selection outline only in edit mode */
.edit-mode .selected {
  outline: 2px dashed var(--c-primary, #1A3C6C);
  position: relative;
  z-index: 2000;
}

/*
 * Responsive adjustments for pricing and footer spacing.
 *
 * On narrow screens the horizontal padding defined by the global
 * `--pad` (28px) can feel excessive for certain wide elements like
 * the pricing tables/cards and the footer. Without special handling
 * the margin may collapse on only one side due to RTL direction,
 * causing the content to appear pushed to the side. These rules
 * reduce the side padding by half on small viewports and enforce
 * equal left/right spacing so the elements remain centered. The
 * media query can be tuned as needed; 600px is a reasonable
 * threshold for typical mobile widths.
 */
@media (max-width: 600px) {
  /* Reduce side padding for pricing sections */
  .pricing,
  section[data-section="pricing"] {
    padding-left: calc(var(--pad) / 2) !important;
    padding-right: calc(var(--pad) / 2) !important;
  }
  /* Apply the same adjustment to the price box wrapper if present */
  section[data-section="pricing"] .price-box {
    padding-left: calc(var(--pad) / 2) !important;
    padding-right: calc(var(--pad) / 2) !important;
  }
  /* Reduce horizontal padding for footer and keep it centered */
  footer {
    padding-left: calc(var(--pad) / 2);
    padding-right: calc(var(--pad) / 2);
  }
}

/* Hover highlight for sections. When the user hovers over a section
   within the preview (within 20px of its edges) a dashed outline
   appears to indicate it can be moved or resized. */
/* Hover outline only in edit mode */
.edit-mode .hovered {
  outline: 2px dashed var(--c-primary, #1A3C6C);
  position: relative;
  z-index: 2000;
}

/* For custom objects (obj:) the outer section has horizontal padding
   that would otherwise cause the dashed outline to appear wider than
   the card itself. Override this by drawing the outline on the card
   directly and removing it from the outer wrapper. */
/* For custom objects draw outline only in edit mode and on the inner card */
.edit-mode [data-section^="obj:"].selected {
  outline: none;
}
.edit-mode [data-section^="obj:"].hovered {
  outline: none;
}
/* When selecting or hovering over a custom object in edit mode, draw
   the dashed outline on the inner card. The card may be the direct
   child of the section (no URL) or nested inside an <a> (URL case).
   Include selectors for both patterns. */
.edit-mode [data-section^="obj:"].selected > div:first-child,
.edit-mode [data-section^="obj:"].hovered > div:first-child,
.edit-mode [data-section^="obj:"].selected > a > div:first-child,
.edit-mode [data-section^="obj:"].hovered > a > div:first-child {
  outline: 2px dashed var(--c-primary, #1A3C6C);
  position: relative;
  z-index: 2000;
}

/* Small squares displayed at the corners of a selected custom object.
   These indicate that the element can be resized. They are only
   appended to custom objects (obj: tokens) when selected. */
/* Resize handles visible only in edit mode */
.edit-mode .resize-handle {
  width: 8px;
  height: 8px;
  border: 2px solid var(--c-primary, #1A3C6C);
  background: #fff;
  position: absolute;
  z-index: 4000;
  /* Handles must capture pointer events so resizing is possible */
  pointer-events: auto;
}
.resize-handle.tl { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle.tr { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
.resize-handle.br { bottom: -6px; right: -6px; cursor: nwse-resize; }

.resize-handle.tm { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.bm { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.ml { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.mr { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/*
 * Magnet guideline lines
 * These invisible lines are created dynamically by the preview
 * script to indicate snapping positions. When the user drags a
 * section near the centre of the page or a previously existing
 * spacing, the corresponding guideline becomes visible. They are
 * dashed and green to stand out from the rest of the design.
 */
.mag-line-v,
.mag-line-h {
  position: absolute;
  pointer-events: none;
  z-index: 3000;
  display: none;
}

.mag-line-v {
  width: 0;
  border-left: 1px dashed #4CAF50;
  top: 0;
  bottom: 0;
}

.mag-line-h {
  height: 0;
  border-top: 1px dashed #4CAF50;
  left: 0;
  right: 0;
}

/* Additional guidelines for equal spacing and size snapping. These red
   dashed lines appear only in edit mode to highlight gaps or matched
   dimensions. Horizontal lines indicate equal horizontal gaps; vertical
   lines indicate equal vertical gaps. Size lines show matched widths
   or heights inside reference objects. */
.edit-mode .gap-line-h,
.edit-mode .gap-line-v,
.edit-mode .size-line-h,
.edit-mode .size-line-v {
  position: absolute;
  pointer-events: none;
  z-index: 3000;
  border-color: #E53935;
  border-style: dashed;
}
.edit-mode .gap-line-v {
  width: 0;
  border-left-width: 1px;
}
.edit-mode .gap-line-h {
  height: 0;
  border-top-width: 1px;
}

/*
 * -------------------------------------------------------------------
 * Clickable custom objects
 *
 * When a custom object in the landing page has an associated URL, the
 * rendering script wraps its inner card in an <a> element and marks
 * the outer wrapper with data-has-url="1". These rules apply a
 * pointer cursor and a slight scaling/shadow effect on hover. Effects
 * are disabled in edit mode so that drag/resize interactions remain
 * unaffected. See card-core.js for the implementation details.
 */
body:not(.edit-mode) [data-section^="obj:"][data-has-url="1"] > a > div {
  cursor: pointer;
  transition: box-shadow .2s ease, filter .2s ease;
}

body:not(.edit-mode) [data-section^="obj:"][data-has-url="1"] > a > div:hover {
  /* Only add a subtle shadow and slightly brighten the card on hover.
     Avoid scaling the element so that dimensions and outlines remain
     stable during hover, even when editing nearby objects. */
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  filter: brightness(1.03);
}
.edit-mode .size-line-v {
  width: 0;
  border-left-width: 1px;
}
.edit-mode .size-line-h {
  height: 0;
  border-top-width: 1px;
}

/* ========== Fancy pricing table ========== */
.pricing {
  padding: 0 20px;
  margin: 34px 0;
}

.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #E0E4E8;
  border-radius: 12px;
  direction: rtl;
  font-size: 1rem;
}

.pricing-table thead tr {
  background: var(--p, #1A3C6C);
  color: #fff;
}

.pricing-table th {
  padding: 14px 12px;
  font-weight: 700;
  text-align: right;
}

.pricing-table td {
  padding: 12px 12px;
  border-top: 1px solid #E8EAED;
  background: #fff;
}

.pricing-table tbody tr:nth-child(odd) td {
  background: #F9FAFB;
}

.pricing-table th:nth-child(2) {
  text-align: center;
}

.p-title { font-weight: 600; }

.p-amt {
  text-align: center;
  color: var(--p, #1A3C6C);
  font-weight: 700;
  white-space: nowrap;
}

/* ========== Responsive pricing table ========== */
@media (max-width: 480px) {
  .pricing-table thead { display: none; }
  .pricing-table td {
    display: block;
    width: 100%;
    text-align: right;
    border: none;
    border-bottom: 1px solid #E2E6EA;
  }
  .pricing-table td::before {
    content: attr(data-label);
    font-weight: 700;
    margin-inline-end: 6px;
  }
  .pricing-table td.p-amt {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .pricing-table thead { display: none; }
  .pricing-table tr { display: block; }
  .pricing-table td {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
  }
  .pricing-table td.price-amt {
    color: var(--p);
    font-weight: 700;
    border: 0;
    margin: 0;
  }
}

/* ========== Price cards ========== */
.price-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.price-card {
  width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
  text-align: center;
  font-size: .95rem;
}

.price-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.price-card .p-title {
  padding: 10px 8px 2px;
  font-weight: 600;
}

.price-card .p-amt {
  padding-bottom: 12px;
  color: var(--p, #1A3C6C);
  font-weight: 700;
}

@media (max-width: 600px) {
  .price-cards {
    flex-direction: column;
    align-items: center;
  }
}

/* ========== Pricing wrapper ========== */
.price-box {
  overflow-x: auto;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

section[data-section="pricing"] {
  padding: 0 var(--pad) 32px !important;
}

section[data-section="pricing"] .price-box {
  padding-inline: 0 !important;
}

/* ========== Lead form ========== */
.lead-form {
  padding: 0 var(--pad) 32px;
}

.lead-form h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-primary, var(--p));
  margin: 0 0 14px 0;
}

.lf-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lf-box input,
.lf-box select {
  padding: 12px 10px;
  border: 1px solid #CCD0D5;
  border-radius: 8px;
  font-size: 1rem;
}

.lf-box button {
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background: var(--c-primary, var(--p));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.lead-form input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* ========== Floating order button ========== */
.order-btn {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--c-primary, var(--p));
  color: #fff;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  z-index: 1000;
  transition: .25s;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.order-btn.fb-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.order-btn.icon-only {
  gap: 0;
  padding: 14px;
  width: 56px;
}

.order-btn i { font-size: 1.2rem; }

/* Universal animation helpers */
[data-anim]{
  --dur: 800ms;
  --delay: 0ms;
  --iter: 1;
  opacity: 0;                       /* hidden until animation starts */
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  animation-iteration-count: var(--iter);
  animation-fill-mode: both;
}

/* Keyframes */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideInLeft{from{transform:translateX(-40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes slideInRight{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes slideInUp{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes slideInDown{from{transform:translateY(-40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes zoomIn{from{transform:scale(.8);opacity:0;}to{transform:none;opacity:1;}}
@keyframes flipInY{from{transform:rotateY(90deg);opacity:0;}to{transform:none;opacity:1;}}
@keyframes rotateIn{from{transform:rotate(-180deg);opacity:0;}to{transform:none;opacity:1;}}
@keyframes bounceIn{
  0%,20%,40%,60%,80%,100%{transition-timing-function:cubic-bezier(.215,.61,.355,1);}
  0%{opacity:0;transform:scale(.3);}
  20%{transform:scale(1.1);}
  40%{transform:scale(.9);}
  60%{opacity:1;transform:scale(1.03);}
  80%{transform:scale(.97);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}

/* Class mapping */
.anim-fade{animation-name:fadeIn;}
.anim-slide-left{animation-name:slideInLeft;}
.anim-slide-right{animation-name:slideInRight;}
.anim-slide-up{animation-name:slideInUp;}
.anim-slide-down{animation-name:slideInDown;}
.anim-zoom{animation-name:zoomIn;}
.anim-flip{animation-name:flipInY;backface-visibility:hidden;}
.anim-rotate{animation-name:rotateIn;}
.anim-bounce{animation-name:bounceIn;}
.anim-pulse{animation-name:pulse;}


/* ========== Inner-Voice bubbles ========== */
.iv-root { position: fixed; bottom: 24px; inset-inline-end: 20px; z-index: 1300; font-family: var(--font-body); }
.iv-bubble {
  max-width: 260px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border-radius: 16px 16px 0 16px;
  background: var(--iv-col, #1A3C6C);
  color: #fff;
  font-size: .9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  animation: fadeIn .35s ease;
  cursor: pointer;
}
.iv-bubble.typing { white-space: pre-wrap; }
.iv-thought {
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--iv-col, #1A3C6C);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.iv-thought.show {
  opacity: 1;
  transform: translateY(0);
}
.iv-thought::after {
  content: "\25B6";
  font-size: 10px;
  margin-inline-start: 6px;
  opacity: .4;
  animation: iv-pulse 1.2s ease-in-out infinite;
}
@keyframes iv-pulse {
  0%,100%{ opacity: .4; transform: translateX(0); }
  50%    { opacity: 1; transform: translateX(4px); }
}
.iv-answer {
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #F4F6F9;
  color: #000;
  font-size: .9rem;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.iv-answer.typing::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: #888;
  animation: blink .9s steps(1,end) infinite;
}
@keyframes blink { 50%{ opacity: 0; } }
.iv-ask {
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: .8rem;
  margin-top: 6px;
  cursor: pointer;
  text-align: center;
}
.iv-input {
  all: unset;
  flex: 1;
  padding: 2px 4px;
  direction: rtl;
}
.iv-send {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.iv-send i { font-size: .9rem; pointer-events: none; }
.iv-local { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:8px; }
.iv-query { display:flex; align-items:center; max-width:260px; padding:8px 10px; border-radius:16px; background:var(--iv-col,#1A3C6C); box-shadow:0 2px 8px rgba(0,0,0,.3); gap:6px; }
.iv-query input { flex:1 1 auto; border:none; background:transparent; color:#fff; font-size:.9rem; outline:none; }
.iv-query button { background:transparent; border:none; color:#fff; font-size:1rem; cursor:pointer; padding:4px 6px; }
.iv-inputrow { display:flex; gap:6px; margin-top:6px; }
.iv-inputrow input { flex:1; padding:8px 10px; border:1px solid #CCD0D5; border-radius:8px; font-size:.9rem; }
.iv-editable { display:flex; flex-direction:row-reverse; align-items:center; gap:8px; 
    
    /* ===== Responsive and performance improvements ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .media-grid {
    flex-direction: column;
  }
  .price-box table,
  .pricing-table {
    width: 100%;
  }
  .rv-track {
    flex-direction: column;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* horizontal snap guidelines – desktop preview only */
@media (min-width: 900px){
  [data-handle-x]::after{
    content:"";
    position:absolute;top:0;bottom:0;
    width:8px;
    background:transparent;
    cursor:col-resize;
  }
  [data-handle-x="right"]::after{right:-4px;}
  [data-handle-x="left"] ::after{left :-4px;}
}

.h-gap-line{display:none}

body.desk .h-gap-line{display:block}

/* vertical gap drag handle */
.gap-line{
  position:absolute;
  left:0;
  right:0;
  height:8px;
  cursor:row-resize;
  background:
    repeating-linear-gradient(
      90deg,
      var(--p,#1A3C6C) 0 8px,
      transparent      8px 16px);
  opacity:0;
  z-index:1000;
  transition:opacity .15s;
}

/* show the handle when the parent section is hovered */
.gap-target:hover .gap-line{opacity:1}

/* horizontal gap drag handle (if wanted) */
.h-gap-line{
  position:absolute;
  top:0;
  bottom:0;
  width:8px;
  cursor:col-resize;
  background:
    repeating-linear-gradient(
      0deg,
      var(--p,#1A3C6C) 0 8px,
      transparent      8px 16px);
  opacity:0;
  z-index:1000;
  transition:opacity .15s;
}

.gap-target:hover .h-gap-line{opacity:1}

/* let gap handles be visible outside the card */
.container{
  overflow:visible;
}

/* vertical handle */
.gap-line{
  position:absolute;
  left:0;
  right:0;
  height:8px;
  cursor:row-resize;
  background:
    repeating-linear-gradient(
      90deg,
      var(--p,#1A3C6C) 0 8px,
      transparent      8px 16px);
  opacity:0;
  transition:opacity .15s;
  z-index:1000;
  pointer-events:auto;           /* חיוני לקבלת :hover */
}

/* הצגה בעת ריחוף */
.gap-target:hover .gap-line,
.gap-line:hover{                 /* ← הוספנו */
  opacity:1;
}

body .container{
  overflow:visible !important;
}

/* desktop grid */
.container.desk-grid{
  display:grid;
  grid-template-columns:repeat(var(--page-cols,1),minmax(0,1fr));
  column-gap:var(--pad);
  row-gap:0;
  /* Stretch all items to fill their column */
  justify-items: stretch;
}

/* desktop grid: align header blocks to start */
@media (min-width: 900px){
  .container.desk-grid .logo-wrap,
  .container.desk-grid .title-wrap,
  .container.desk-grid .subtitle-wrap,
  .container.desk-grid .benefits-wrap{
    text-align: start;
  }
}

/* cancel implicit centering when the section doesn’t span all columns */
.col-narrow {
  text-align: start !important;
}
.col-narrow .media-grid      { justify-content: flex-start !important; }
.col-narrow .logo-wrap       { margin-inline: 0 !important; }
.col-narrow .price-cards,
.col-narrow .actions         { justify-content: flex-start !important; }

.container.desk-grid{
  display:grid;
  grid-template-columns:repeat(var(--page-cols,1),minmax(0,1fr));
  column-gap:var(--pad);
  row-gap:0;
  grid-auto-flow:row dense;
}

/* remove side–padding inside a grid cell */
@media (min-width:900px){
  .container.desk-grid > section{
    padding-inline:0;                 /* no left/right padding */
  }
}

/* desktop grid container */
.desk-grid{
  display:grid;
  grid-template-columns:repeat(var(--page-cols,1), 1fr);
  column-gap:var(--pad,28px);
  grid-auto-flow:row dense;
}

.container.desk-grid{
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(var(--page-cols,1),1fr);
  column-gap: var(--pad,28px);
  grid-auto-flow: row;          /* no “dense” */
}

/* Prevent margin collapsing between card sections */
#root > .container > [data-section] {
  display: flow-root;
}

/* Edit mode overrides. When edit mode is active all animations and
   transitions are disabled and interactive elements cannot be clicked.
   This ensures elements appear at their final state without motion. */
.edit-mode *, .edit-mode *::before, .edit-mode *::after {
  animation: none !important;
  animation-play-state: paused !important;
  transition: none !important;
}
.edit-mode a,
.edit-mode button,
.edit-mode input,
.edit-mode textarea,
.edit-mode select {
  pointer-events: none !important;
}

/* Elements marked for animation should appear fully visible in edit mode */
.edit-mode [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

/* Show elements waiting for scroll-triggered animation in edit mode */
.edit-mode [data-anim-scroll] {
  opacity: 1 !important;
  transform: none !important;
}

/* In edit mode show any elements that would normally animate. Force
   opacity and transform to final values and disable animation. This
   includes both data-driven animations and class-based animations. */
.edit-mode [data-anim],
.edit-mode [data-anim-scroll],
.edit-mode .anim-fade,
.edit-mode .anim-slide-left,
.edit-mode .anim-slide-right,
.edit-mode .anim-slide-up,
.edit-mode .anim-slide-down,
.edit-mode .anim-zoom,
.edit-mode .anim-flip,
.edit-mode .anim-rotate,
.edit-mode .anim-bounce,
.edit-mode .anim-pulse {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Catch-all: any class that contains "anim-" should reveal the element in
   edit mode. This ensures that unanticipated animation classes are also
   rendered in their final state. */
.edit-mode [class*="anim-"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/*
 * ---------------------------------------------------------------------------
 * Desktop mode overrides based on the `.desk` class
 *
 * The card-core library originally toggled between desktop and mobile layouts
 * using a fixed 900px breakpoint.  This stylesheet contained rules under
 * `@media (min-width: 900px)` that adjusted the layout (e.g. showing drag
 * handles, aligning headers to the start, removing padding from grid
 * sections).  However, the application now allows a configurable desktop
 * threshold via `minDeskWidth` in the card configuration, and the
 * JavaScript in index.php toggles the `.desk` class on `<body>` when the
 * current width crosses that threshold.  To decouple the CSS from the
 * hardcoded 900px value, we duplicate the most important 900px styles
 * below, guarded by `body.desk`.  These rules ensure that when the page
 * enters desktop mode (regardless of the exact width), the styling matches
 * what would otherwise happen at 900px.  The original `@media (min-width:
 * 900px)` rules remain as a fallback.
 */
body.desk [data-handle-x]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: transparent;
  cursor: col-resize;
}
body.desk [data-handle-x="right"]::after {
  right: -4px;
}
body.desk [data-handle-x="left"]::after {
  left: -4px;
}

/* Align header blocks to the start in desktop mode */
body.desk .container.desk-grid .logo-wrap,
body.desk .container.desk-grid .title-wrap,
body.desk .container.desk-grid .subtitle-wrap,
body.desk .container.desk-grid .benefits-wrap {
  text-align: start;
}

/* Remove horizontal padding inside grid cells in desktop mode */
body.desk .container.desk-grid > section {
  padding-inline: 0;
}