/* CMS admin screens (page builder, themes, navigation). Builds on the aa-* admin kit. */
.cms-admin .mw-200px { max-width: 200px; }
.cms-admin .mw-250px { max-width: 250px; }
.cms-admin .mw-300px { max-width: 300px; }
.cms-admin .w-150px { width: 150px; flex: 0 0 150px; }

.cms-stat-tile { transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; }
.cms-stat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.cms-stat-tile__icon, .cms-section-card__icon { width: 44px; height: 44px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--bs-primary-light, #e9f3ff); color: var(--bs-primary, #1b84ff); flex: 0 0 auto; }
.cms-stat-tile__icon .ki-duotone, .cms-section-card__icon .ki-duotone, .cms-stat-tile__icon i, .cms-section-card__icon i { color: inherit !important; }
.cms-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.cms-cover-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; }
.cms-field__thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bs-border-color); }

/* Page builder section cards */
.cms-section-card { border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); transition: box-shadow .15s ease, border-color .15s ease; }
.cms-section-card.is-open { border-color: var(--bs-primary); box-shadow: 0 10px 24px rgba(15, 23, 42, .07); }
.cms-section-card.is-hidden { opacity: .65; }
.cms-section-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; }
.cms-section-card__title { display: flex; align-items: center; gap: .75rem; background: none; border: 0; padding: 0; text-align: start; flex: 1; min-width: 0; }
.cms-section-card__title strong { display: block; color: var(--bs-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-section-card__title small { display: block; color: var(--bs-gray-600); font-size: .8rem; }
.cms-section-card__body { padding: 1rem 1.25rem 1.25rem; border-top: 1px dashed var(--bs-border-color); }
.cms-insert-row { display: flex; justify-content: center; padding: .4rem 0; opacity: .35; transition: opacity .15s; }
.cms-insert-row:hover, .cms-insert-row:focus-within { opacity: 1; }

.cms-list-editor { display: grid; gap: .75rem; }
.cms-list-editor__item { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: .75rem 1rem 0; background: var(--bs-gray-100); }
.cms-list-editor__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.cms-rte .ck-editor__editable { min-height: 180px; }
.cms-rte[dir="rtl"] .ck-editor__editable { direction: rtl; text-align: right; }

/* Block picker */
.cms-dialog-lg { width: min(920px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); overflow-y: auto; }
.cms-dialog-md { width: min(680px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); overflow-y: auto; }
.cms-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.cms-picker-item { display: grid; gap: .35rem; text-align: start; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); transition: border-color .15s, transform .15s; }
.cms-picker-item:hover, .cms-picker-item:focus-visible { border-color: var(--bs-primary); transform: translateY(-2px); }
.cms-picker-item small { color: var(--bs-gray-600); font-size: .8rem; line-height: 1.35; }
.cms-picker-item__icon { color: var(--bs-primary); }
.cms-picker-item.is-component { background: var(--bs-gray-100); }

/* Live previews */
/* Sticks under the fixed app header; the z-index keeps the editor cards (position: relative)
   from painting over it as they scroll past. Below the header's z-index (100) so menus stay on top. */
.cms-preview-panel { position: sticky; top: calc(var(--bs-app-header-height, 70px) + 1.25rem); z-index: 5; border: 1px solid var(--bs-border-color); border-radius: 12px; overflow: hidden; background: var(--bs-gray-200); }
/* Full-width previews (Header & Footer) sit above the form, so sticking would cover the fields being edited. */
.cms-preview-panel--static { position: relative; top: auto; z-index: auto; }
.cms-preview-panel__bar { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.cms-preview-panel__viewport { max-height: calc(100vh - 180px); overflow: auto; margin-inline: auto; background: #fff; transition: max-width .2s ease; container: cms-preview / inline-size; }
.cms-preview-panel__viewport--chrome { max-height: none; overflow: visible; }
.cms-preview-panel__viewport.is-desktop { max-width: 100%; }
.cms-preview-panel__viewport.is-mobile { max-width: 390px; }
.cms-site.cms-site--preview { min-height: 0; font-size: calc(var(--cms-font-size) * .9); }
.cms-site--preview .cms-header.is-sticky { position: relative; }
.cms-site--preview .cms-section { padding-block: calc(var(--cms-section-space) * .55); }
.cms-site--preview .cms-hero h1, .cms-site--preview .cms-hero__title { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.cms-preview-filler { padding: 2.5rem 1rem; text-align: center; color: var(--cms-muted); background: repeating-linear-gradient(45deg, var(--cms-bg), var(--cms-bg) 12px, var(--cms-surface) 12px, var(--cms-surface) 24px); }

/* The narrow preview does not trigger the site's media queries, so mirror the mobile rules. */
.is-mobile .cms-grid--2, .is-mobile .cms-grid--3, .is-mobile .cms-grid--4, .is-mobile .cms-hero__grid,
.is-mobile .cms-split, .is-mobile .cms-contact, .is-mobile .cms-featured-post, .is-mobile .cms-blog-layout { grid-template-columns: 1fr; }
.is-mobile .cms-hrow:not(.cms-hrow--mobile) { display: none; }
.is-mobile .cms-hrow--mobile { display: block; }
.is-mobile .cms-hrow--mobile .cms-hrow__inner { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; }
.is-mobile .cms-header.has-menu-drawer .cms-drawer { inset-inline: 0; width: auto; border-radius: 0; }
.is-mobile .cms-header.has-menu-drawer .cms-drawer .cms-header-search { display: flex; }
.is-mobile .cms-topstrip__text { display: none; }
.is-mobile .cms-frow, .is-mobile .cms-frow:has(> .cms-slot--center:empty) { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.is-mobile .cms-frow .cms-slot { justify-content: center; }
.is-mobile .cms-fcolumns { grid-template-columns: 1fr 1fr; }

/* Header/footer layout picker: real headers and footers rendered at desktop width, scaled down. */
.cms-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.cms-layout-card { display: grid; gap: .5rem; text-align: start; padding: .75rem; border: 2px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.cms-layout-card:hover, .cms-layout-card:focus-visible { border-color: var(--bs-primary); }
.cms-layout-card.is-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 18%, transparent); }
.cms-layout-card__frame { position: relative; height: var(--cms-thumb-height, 64px); overflow: hidden; border-radius: 8px; background: #e5e7eb; pointer-events: none; }
.cms-layout-card__frame > .cms-site { position: absolute; top: 0; inset-inline-start: 0; width: 1280px; min-height: 0; transform: scale(var(--cms-thumb-scale, .25)); transform-origin: top left; }
[dir="rtl"] .cms-layout-card__frame > .cms-site { transform-origin: top right; }
.cms-layout-card__name { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; color: var(--bs-gray-900); }
.cms-layout-card__name small { color: var(--bs-gray-500); font-weight: 600; }
.cms-layout-card__desc { color: var(--bs-gray-600); font-size: .82rem; line-height: 1.35; }
.cms-preview-panel__viewport .cms-hrow__inner { position: relative; }

/* Themes */
.cms-theme-card__swatch { height: 110px; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 1.25rem; }
.cms-theme-card__swatch span { font-size: 2rem; font-weight: 800; line-height: 1; }
.cms-theme-card__swatch i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); display: inline-block; }

/* Menus */
.cms-menu-editor { display: grid; gap: .75rem; }
.cms-menu-editor__item { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: .75rem; }
.cms-menu-editor__item.is-hidden { opacity: .6; }
.cms-menu-editor__children { margin-top: .5rem; padding-inline-start: 1.25rem; border-inline-start: 2px solid var(--bs-border-color); display: grid; gap: .5rem; }
.cms-menu-editor__child { background: var(--bs-gray-100); border-radius: 8px; padding: .5rem; }
.cms-menu-fields { display: grid; gap: .4rem; }
.cms-menu-fields__row { display: flex; gap: .5rem; align-items: center; }
.cms-menu-fields__row > input { flex: 1; min-width: 0; }
.cms-menu-fields__row--options { flex-wrap: wrap; gap: .5rem 1rem; }
.cms-menu-fields__icon { max-width: 120px; }
@media (max-width: 767px) { .cms-menu-fields__row { flex-wrap: wrap; } .cms-menu-fields__row > input { flex-basis: 100%; } }

/* SEO */
.cms-serp { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 1rem 1.25rem; background: #fff; font-family: Arial, sans-serif; }
.cms-serp__url { color: #202124; font-size: .82rem; margin-bottom: .2rem; }
.cms-serp__title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin-bottom: .25rem; }
.cms-serp__description { color: #4d5156; font-size: .88rem; line-height: 1.5; }

/* FAQs */
.cms-faq-row { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--bs-border-color); border-radius: 10px; }
.cms-faq-row.is-unpublished { background: var(--bs-gray-100); }

/* Full-page preview bar */
.cms-preview-bar { position: sticky; top: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; background: #111827; color: #fff; font-size: .9rem; }

/* Hero design picker: 1280px-wide heroes scaled into the cards. */
.cms-hero-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cms-hero-thumb > .cms-site { min-height: 0; }

/* The preview panel is narrower than the window, so the site's viewport media queries never fire
   there. These mirror the breakpoints of the home blocks and the live data widgets against the
   preview's own width. */
@container cms-preview (max-width: 1100px) {
  .soldi-home :is(.hero-grid, .api-demo-grid, .about-grid, .faq-layout, .services-grid, .platform-services-head) { grid-template-columns: 1fr; }
  .soldi-home .platform-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soldi-home .partner-logos div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soldi-home :is(.number-bar, .footer-grid, .plan-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cms-preview (max-width: 991px) {
  .cms-fx-converter-band__inner { grid-template-columns: 1fr; gap: 2rem; }
  .cms-grid--3, .cms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-fx-plan.is-highlighted, .cms-fx-plan.is-highlighted:hover { transform: none; }
}
@container cms-preview (max-width: 760px) {
  .soldi-home :is(.partner-logos div, .number-bar, .footer-grid, .convert-grid, .filters-card, .plan-grid, .platform-services-grid) { grid-template-columns: 1fr; }
  .soldi-home .hero-title { max-width: 100%; }
  .soldi-home .service-actions { flex-direction: column; }
  .soldi-home .platform-services-band { align-items: stretch; flex-direction: column; }
  .cms-grid--2, .cms-grid--3, .cms-grid--4 { grid-template-columns: 1fr; }
}
@container cms-preview (max-width: 560px) {
  .cms-fx-converter { padding: 1.15rem; }
  .cms-fx-pair { grid-template-columns: 1fr; }
  .cms-fx-swap { justify-self: center; transform: rotate(90deg); margin: 0; }
  .cms-fx-picker__menu, .cms-fx-pair .cms-fx-field:last-child .cms-fx-picker__menu { inset-inline: 0; width: auto; }
  .cms-fx-rates__toolbar { padding: 1rem; }
  .cms-fx-rates__refresh { margin-inline-start: 0; width: 100%; }
}