/* ========== 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;
}

.container.template-container{
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 100%;
}



/* ========== 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-left     { text-align: left; }
.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;
  /* Position relative to anchor slider arrows absolutely */
  position: relative;
}

.rv-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* Disable scroll snapping by default; enable it only for mobile in
     a media query. This allows free dragging on desktop while
     snapping on mobile. */
  scroll-snap-type: none;
  /* Remove tap highlight on mobile/touch devices so no blue overlay
     appears when dragging the carousel. This also helps prevent
     inadvertent selection outlines on some browsers. */
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  padding-inline: 2px;
  /* No scrollbars visible across browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  /* Display a hand cursor to indicate the track can be dragged horizontally. */
  cursor: grab;
}

.rv-card {
  flex: 0 0 260px;
  /* Disable snap alignment by default for desktop. Mobile overrides
     these settings in a media query below. */
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
  /* Disable text selection on reviews to avoid accidental highlighting
     while dragging or scrolling. This is inherited by children. */
  user-select: none;
  /* Remove tap highlight on mobile/touch devices so no blue overlay
     appears when dragging the carousel cards. */
  -webkit-tap-highlight-color: transparent;
  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;
}

/* While dragging the review carousel show the grabbing cursor */
.rv-track.dragging {
  /* Override any global dragging styles that add outlines or shadows. */
  outline: none !important;
  box-shadow: none !important;
  cursor: grabbing;
}

/* Chrome/Safari (WebKit) scrollbar removal */
.rv-track::-webkit-scrollbar {
  display: none;
}

/*
 * Slider arrows for the reviews carousel. These controls appear on desktop
 * devices and allow manual navigation between cards without exposing a
 * scroll bar. The arrows are positioned vertically centred on either side
 * of the carousel. On mobile they are hidden and users swipe horizontally
 * to move between cards.
 */
.rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  transition: background 0.15s;
}
.rv-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}
.rv-arrow.rv-prev {
  left: 4px;
}
.rv-arrow.rv-next {
  right: 4px;
}

/* Hide arrows on narrow screens (mobile) where swipe navigation is used */
@media (max-width: 768px) {
  .rv-arrow {
    display: none;
  }
  /* On mobile restore scroll snap so swiping always lands on a single review */
  .rv-track {
    scroll-snap-type: x mandatory;
    /* Require the scroll operation to stop at each snap point. Without
       this, momentum scrolling can glide over multiple cards. */
    scroll-snap-stop: always;
  }
  .rv-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Remove any focus or active outlines on the reviews carousel and its cards.
   This prevents coloured halos or borders from appearing when tapping or
   dragging reviews on mobile devices. Apply to focus, focus-visible,
   focus-within and active states. */
.rv-track:focus,
.rv-track:focus-visible,
.rv-track:focus-within,
.rv-track:active,
.rv-card:focus,
.rv-card:focus-visible,
.rv-card:focus-within,
.rv-card:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ========== 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;
}

/* --- FAQ styling ----------------------------------------------------- */
/*
 * Style the native <details>/<summary> elements used for the FAQ so
 * that they look like professional expandable cards. Each FAQ item
 * stretches across the available width, with a subtle border and
 * rounded corners. The question appears as a flex row with a toggle
 * arrow on the left (RTL) to indicate it is clickable. A smooth
 * expand/collapse animation is achieved by animating the answer's
 * max-height property. These rules apply globally to any FAQ section
 * generated by card-core.js.
 */

/* FAQ-specific detail styles */
.faq-section details {
  /* separate FAQ items with a subtle border. Remove fixed width so
     items adapt to the grid container size. Do not apply a
     background colour; inherit the card background instead. */
  margin-top: 14px;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  padding: 0 14px;
  /* Allow answers to overlay without pushing down subsequent content. When
     a question is opened, the answer will be absolutely positioned
     below the summary. Therefore, we remove overflow:hidden to allow
     the overlay to be visible. */
  overflow: visible;
  /* Establish a positioning context so that the absolutely positioned
     answer (p element) can be placed relative to this details block. */
  position: relative;
  /* Smoothly animate the background colour when hovering. Keep
     the existing quick transition for subtle feedback. */
  /* Animate the background colour on hover. We removed the max-height
     transition and fixed collapsed height so that long questions are
     never clipped. The card will grow to fit the summary text. */
  transition: background-color .2s ease;

  /* Make the entire FAQ card clickable by showing a pointer cursor. This
     reinforces that clicking anywhere on the card (not just the summary)
     will toggle the answer. */
  cursor: pointer;

  /*
   * In a wrapping flexbox layout, give FAQ cards a flexible basis so
   * that multiple cards can appear side by side on wide screens but
   * wrap onto new lines on narrow screens. The flex shorthand
   * specifies: flex-grow: 1 (allow cards to fill available row
   * space), flex-shrink: 1 (allow cards to shrink below the basis if
   * necessary), and flex-basis: 200px (preferred minimum width).
   */
  flex: 1 1 200px;
}

/* add spacing below each FAQ item except the last */
.faq-section details:not(:last-child) {
  margin-bottom: 12px;
}

.faq-section summary {
  /* Make the summary a flex container. Position the arrow before the
     question text by using a ::before pseudo-element. Do not
     reverse the row order; flex-start aligns children in RTL. */
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* hide default disclosure marker */
  position: relative;

  /* Use the primary colour for the question text to improve
     contrast and signal that this is an interactive element */
  color: var(--p);

  /* Prevent text selection on the FAQ question. This avoids the
     accidental highlighting that can occur when users click to
     expand/collapse the question. Include vendor prefixes for
     broader browser support. */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Arrow indicator for the FAQ summary. Using a pseudo-element
   allows us to rotate the arrow when the item is open. The arrow
   appears on the appropriate side for RTL layouts. */
/* Arrow indicator: place before the question text. Use a pseudo-element
   instead of the default disclosure marker. The arrow rotates 90°
   on open. In RTL, the arrow appears on the right side. */
/* Arrow indicator: place before the question text in FAQ summaries. */
/* Provide a custom arrow on FAQ summaries. We hide the default
   disclosure triangle and insert our own arrow at the start of
   each question. In RTL context, ::before appears on the right
   (the start of the line). When a question is opened the arrow
   rotates downward (90°) via transform. */

/* Hide the native disclosure marker so only our custom arrow is visible */
/* Hide the native disclosure marker so only our custom arrow is visible.
   Use both the WebKit-specific and generic ::marker selectors. */
.faq-section summary::-webkit-details-marker,
.faq-section summary::marker {
  display: none;
}

/* Arrow pseudo-element: right-pointing arrow by default (▸). It sits
   at the start of the summary (right side in RTL). margin-inline-end
   creates space between the arrow and the text regardless of
   direction. */
.faq-section summary::before {
  content: '\25B8'; /* ▸ */
  display: inline-block;
  /* Slow down the arrow rotation to match the longer answer animation */
  transition: transform .5s ease;
  margin-inline-end: 8px;
}

/* Rotate arrow downward when the summary has the 'open' class. We avoid
   relying on the native details[open] selector because we prevent
   default toggling in JavaScript. */
.faq-section summary.open::before {
  transform: rotate(90deg);
}

/* Rotate arrow downward when the FAQ item is open */
/* Remove the native arrow rotation based on [open] because we handle
   rotation via the 'open' class. */
.faq-section details[open] summary::before {
  /* no rotation here; see .faq-section summary.open::before */
}

/* Answer paragraph is initially collapsed via max-height. A large
   upper bound is used so that the transition does not clip longer
   answers. overflow:hidden ensures content is hidden during the
   transition. */
/* Answer paragraph sliding animation: scale from 0 to 1 in the Y
   direction. Use transform rather than max-height so the content
   appears to slide down smoothly. transform-origin ensures the top
   edge remains fixed. */
/* Animate the FAQ answers using a scale transform. Only apply this
   animation within the FAQ section to avoid interfering with other
   <details> elements elsewhere on the card. */
/* FAQ answers default styling. The answer paragraphs simply sit below the
   summary and expand naturally when the <details> element is opened.
   Do not use absolute positioning or opacity transitions here, as
   pushing subsequent content is desired by default. */
.faq-section details p {
  margin: 0;
  padding: 0 0 14px;
  max-height: none;
  overflow: visible;
  display: block;
}


/* By default only change the cursor on hover. Do not apply a
   persistent background on focus so that the highlight disappears
   when the mouse leaves. The full card background is handled on
   the <details> element below. */
.faq-section summary:hover {
  /* no background here; highlight is applied to the parent details */
}

/* Highlight the entire FAQ card on hover (both the question and the
   answer area) to draw attention to the interactive element. This
   removes the need to style the summary individually and prevents
   the highlight from persisting when the element is focused after
   a click. */
.faq-section details:hover {
  background: #F0F4FA;
}

/* Layout the FAQ section as a responsive grid. Each FAQ item
   (details element) will occupy a column of at least 280px and
   expand to fill the available width. On wider screens multiple
   columns appear side by side; on narrow screens items wrap onto
   new lines. The section heading spans all columns so it always
   appears full width. */
/*
 * FAQ layout
 *
 * Use a flexbox container instead of CSS grid for the FAQ items. A
 * grid row forces all items in the same row to share the tallest
 * height, which causes neighbouring FAQ cards to stretch when one
 * answer expands. Flexbox with wrapping allows each FAQ card to
 * expand independently without affecting its siblings. Align
 * children to the flex-start so items do not stretch vertically.
 * The gap property provides consistent spacing between cards. The
 * heading spans the full width by giving it a 100% flex-basis.
 */
.faq-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-items: flex-start;
}

.faq-section > h3 {
  /* Force the section heading to take the full row so it spans
     across all FAQ columns. Using flex-basis:100% ensures the
     heading occupies an entire line within the wrapping flex
     container. */
  flex: 1 0 100%;
  margin-bottom: 8px;
}

/* Ensure FAQ question and answer text wrap nicely across the width.
   Inherit the responsive wrapping rules from earlier definitions.
   Override display:block from earlier rule to maintain flex layout
   on summary. */
details summary,
details p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-overflow: unset !important;
  max-width: 100%;
}

/* ========== 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;
}

/* -----------------------------------------------------------------------
   FAQ responsiveness
   On very narrow screens the summary and answer text within <details>
   elements (used for the FAQ section) could overflow the card container.
   Allow the text to wrap onto multiple lines and break long words so
   that questions and answers never extend beyond the card’s width. This
   applies to all details/summary pairs across the card, ensuring
   consistent behaviour for both mobile and desktop layouts.  We avoid
   using nowrap on these elements and explicitly enable wrapping and
   breaking to prevent horizontal scrolling. */
details summary,
details p {
  /* Allow the FAQ question/answer text to wrap onto multiple lines instead of being forced to a single line. */
  white-space: normal !important;
  /* Break long words or URLs that lack spaces */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  /* Prevent automatic clipping and ellipsis on overflowing text */
  text-overflow: unset !important;
  overflow: visible !important;
  /* Ensure the content respects the available width */
  max-width: 100%;
  /* Force block layout so the disclosure marker does not cause shrink-to-fit width */
  display: block;
}

.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; }

/* Removed debug helper that drew circular origin markers on each
   [data-section] element. To restore normal behaviour, no pseudo
   elements are applied here. */

/*
 * 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;
  /* Stretch all child cards to the same height so that the auto
     margin on the price element effectively pushes it to the
     bottom in every card. Without this, cards with less content
     would not have extra vertical space for the price to occupy.
     Note: In narrow viewports the media query below overrides
     `flex-direction` and reverts centring behaviour; the height
     stretching still applies. */
  align-items: stretch;
}

.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;
  /*
   * Make the card a vertical flex container so that the price can be
   * anchored to the bottom via an automatic top margin. Without
   * specifying flex, the card height is determined solely by its
   * content and the price will follow directly after the title. Using
   * flex-column allows us to push the price to the bottom while the
   * title occupies the remaining space.
   */
  display: flex;
  flex-direction: column;
}

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

.price-card .p-title {
  padding: 10px 8px 2px;
  font-weight: 600;
  /* Allow the legacy title element to expand and fill available
     space. This ensures the price, with its auto margin, will be
     pushed to the bottom of the card. */
  flex-grow: 1;
}

.price-card .p-amt {
  padding-bottom: 12px;
  color: var(--p, #1A3C6C);
  font-weight: 700;
  /* Push the legacy price element to the bottom of the card. The
     auto top margin consumes remaining space below the title. */
  margin-top: auto;
}

/* When price cards are rendered by card-core.js the title and
   amount elements use the class names .price-ttl and .price-amt
   respectively. Those elements previously had no padding defined,
   causing the text to sit flush against the card edges. Mirror
   the padding and styling from the legacy .p-title/.p-amt rules
   to ensure consistent spacing and appearance. */
.price-card .price-ttl {
  /* Horizontal and top/bottom padding matching the old .p-title */
  padding: 10px 8px 2px;
  font-weight: 600;
  /* Allow the price-ttl to expand and occupy space so the price can
     align to the bottom of the card via an auto margin. */
  flex-grow: 1;
}
.price-card .price-amt {
  /* Provide bottom padding and inherit primary colour and weight */
  padding-bottom: 12px;
  color: var(--p, #1A3C6C);
  font-weight: 700;
  /* Push the price element to the bottom of the card. The auto
     top margin consumes remaining space below the title. */
  margin-top: auto;
}

/* Ensure lists inside price cards display bullets and numbers properly.
   Quill outputs plain <ul> and <ol> elements for lists but does not
   include its snow theme CSS in the published page.  Without list
   styles the bullets disappear and ordered lists show squares instead
   of numbers.  These rules restore sensible list styles and indenting
   while respecting RTL layouts via logical properties. */
/* Adjust list styling within price cards to ensure that when list items
   wrap onto multiple lines, the subsequent lines align with the start
   of the text on the first line rather than hugging the edge. Use
   logical padding properties to account for both RTL and LTR text
   directions. Placing the bullets outside the content box and
   providing inline-start padding preserves consistent indentation for
   wrapped lines. */
.price-card ul,
.price-card ol {
  list-style-position: outside;
  margin: 0;
  padding-inline-start: 1.2em;
}
.price-card ul {
  list-style-type: disc;
}
.price-card ol {
  list-style-type: decimal;
}
.price-card li {
  /* Add vertical spacing between list items for readability. */
  margin-block-end: 0.25em;
  /* Ensure wrapped lines align under the first character of the text. */
  text-indent: 0;
}

@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;
}