/* Sitio web — pantallas del CRM (editor con vista previa, diseño, páginas y
   configuración). Usa las variables del CRM (main.css): --primary, --surface,
   --surface-2, --border, --text-muted… Al tocarlo hay que subir su `?v=` en
   index.html. */

/* El editor ocupa todo el alto disponible, sin el padding de `.page`. */
#app.sw-fullpage { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.sw-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a; font-size: .86rem;
}
.sw-banner span { flex: 1 1 260px; }
.sw-warn {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px;
  background: #fffbeb; color: #92400e; font-size: .82rem; margin-bottom: 12px;
}
.sw-hint-box { padding: 18px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: .86rem; text-align: center; margin-bottom: 10px; }
.sw-field-hint { color: var(--text-muted); font-size: .76rem; margin-top: 4px; line-height: 1.45; }
.sw-field-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.sw-inline-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; align-self: end; padding-bottom: 8px; }
.sw-inline-check.span2 { grid-column: 1 / -1; }

/* ── Lista de páginas y plantillas ───────────────────────────────────────── */
.sw-empty { padding: clamp(24px, 4vw, 48px); text-align: center; }
.sw-empty h2 { margin: 12px 0 6px; }
.sw-empty > p { color: var(--text-muted); max-width: 560px; margin: 0 auto 24px; }
.sw-empty-ico { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.sw-tpl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); text-align: left; }
.sw-tpl {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sw-tpl:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.35); }
.sw-tpl span:last-child { color: var(--text-muted); font-size: .8rem; line-height: 1.45; }
.sw-tpl-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* Menú */
.sw-menu-auto { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-chip { padding: 6px 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: .84rem; }
.sw-chip-cta { background: var(--primary); color: #fff; border-color: var(--primary); }
.sw-menu-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface-2); margin-bottom: 10px; }
.sw-menu-kids { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 2px solid var(--border); }
.sw-menu-kid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: start; }
.sw-row-tools { display: flex; gap: 2px; flex-shrink: 0; }
.sw-link { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sw-link select, .sw-link input { min-width: 0; }

/* ── Editor ──────────────────────────────────────────────────────────────── */
.sw-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sw-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
}
.sw-top-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 160px; }
.sw-top-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-dirty { font-size: .74rem; font-weight: 600; color: #b45309; background: #fffbeb; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.sw-devices { display: flex; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 2px; }
.sw-devices .btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.sw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
.sw-panel { border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; min-width: 0; }
.sw-panel-tabs { display: flex; position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border); }
.sw-panel-tabs button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 0;
  background: none; cursor: pointer; font: 600 .84rem/1 inherit; color: var(--text-muted); border-bottom: 2px solid transparent;
}
.sw-panel-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.sw-panel-body { padding: 14px 16px 40px; }
.sw-panel .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sw-stage { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 22px 22px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding: 16px; min-width: 0; }
.sw-frame-wrap { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 20px 50px -24px rgba(15,23,42,.45); background: #fff; }
.sw-frame-wrap iframe { border: 0; display: block; transform-origin: 0 0; background: #fff; }
/* El marco del dispositivo es una sombra y no un borde: un borde ocupa sitio
   dentro de la caja y recortaba 16 px de la página. */
.sw-frame-wrap[data-device="mobile"] { border-radius: 22px; box-shadow: 0 0 0 8px #111827, 0 20px 50px -24px rgba(15,23,42,.45); margin-top: 8px; }
.sw-frame-wrap[data-device="tablet"] { border-radius: 14px; box-shadow: 0 0 0 8px #1f2937, 0 20px 50px -24px rgba(15,23,42,.45); margin-top: 8px; }
.sw-only-narrow { display: none; }

/* Lista de secciones */
.sw-sec-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sw-sec-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 2px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.sw-sec-row:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sw-sec-row.sw-drop { border-color: var(--primary); box-shadow: 0 -3px 0 var(--primary); }
.sw-sec-row.sw-dragging { opacity: .5; }
.sw-sec-off { opacity: .6; }
.sw-grip { cursor: grab; color: var(--text-muted); padding: 6px 2px; display: flex; }
.sw-sec-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; text-align: left; padding: 6px 4px; color: inherit; font: inherit; }
.sw-sec-ico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.sw-sec-name { min-width: 0; display: flex; flex-direction: column; }
.sw-sec-name strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sec-name small { font-size: .74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-empty-tag { display: none; font-style: normal; color: #b45309; font-weight: 600; }
.sw-sec-empty .sw-empty-tag { display: inline; }
.sw-sec-empty .sw-sec-ico { background: #fffbeb; color: #b45309; }
.sw-add-btn { width: 100%; justify-content: center; }

/* Formulario de sección */
.sw-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sw-sec-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sw-desc { color: var(--text-muted); font-size: .8rem; margin-bottom: 12px; line-height: 1.45; }
.sw-block { border-top: 1px solid var(--border); padding: 14px 0 6px; }
.sw-block-t { font: 700 .74rem/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.sw-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sw-var {
  display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); font: 600 .74rem/1.2 inherit; color: var(--text); text-align: center;
}
.sw-var.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.sw-var-thumb, .sw-thumb {
  width: 100%; height: 44px; border-radius: 6px; background: var(--surface-2); position: relative; overflow: hidden; display: block;
}
.sw-var-thumb i, .sw-thumb i { position: absolute; background: color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 2px; }
.sw-var-thumb i:nth-child(1), .sw-thumb i:nth-child(1) { left: 18%; right: 18%; top: 22%; height: 7px; }
.sw-var-thumb i:nth-child(2), .sw-thumb i:nth-child(2) { left: 28%; right: 28%; top: 46%; height: 4px; opacity: .6; }
.sw-var-thumb i:nth-child(3), .sw-thumb i:nth-child(3) { left: 38%; right: 38%; top: 66%; height: 7px; background: var(--primary); }
/* Variantes «en dos columnas»: texto a un lado y bloque al otro. */
[class*="sw-vt-hero-split"] i:nth-child(1), [class*="sw-vt-text_image-right"] i:nth-child(1) { left: 8%; right: 56%; }
[class*="sw-vt-hero-split"] i:nth-child(2), [class*="sw-vt-text_image-right"] i:nth-child(2) { left: 8%; right: 60%; }
[class*="sw-vt-hero-split"] i:nth-child(3), [class*="sw-vt-text_image-right"] i:nth-child(3) { left: 54%; right: 8%; top: 18%; height: 64%; opacity: .55; }
[class*="sw-vt-text_image-left"] i:nth-child(1) { left: 56%; right: 8%; }
[class*="sw-vt-text_image-left"] i:nth-child(2) { left: 56%; right: 12%; }
[class*="sw-vt-text_image-left"] i:nth-child(3) { left: 8%; right: 54%; top: 18%; height: 64%; opacity: .55; }
.sw-vt-hero-fullscreen, .sw-vt-hero-slides, .sw-vt-cta-boxed { background: color-mix(in srgb, var(--primary) 70%, #000) !important; }
.sw-vt-hero-fullscreen i, .sw-vt-hero-slides i, .sw-vt-cta-boxed i { background: rgba(255,255,255,.75) !important; }
[class*="sw-vt-cards-"] i:nth-child(1) { left: 6%; right: 68%; top: 22%; height: 56%; }
[class*="sw-vt-cards-"] i:nth-child(2) { left: 36%; right: 36%; top: 22%; height: 56%; opacity: 1; }
[class*="sw-vt-cards-"] i:nth-child(3) { left: 68%; right: 6%; top: 22%; height: 56%; background: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.sw-vt-cards-list i { height: 10% !important; }
.sw-styles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sw-style { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: 600 .7rem/1.1 inherit; color: var(--text); }
.sw-style span { width: 100%; height: 22px; border-radius: 5px; border: 1px solid var(--border); }
.sw-style.active { border-color: var(--primary); color: var(--primary); }
.sw-style-plain span { background: #fff; }
.sw-style-soft span { background: #eef2f7; }
.sw-style-accent span { background: var(--primary); }
.sw-style-dark span { background: #111827; }
.sw-style-image span { background: linear-gradient(135deg, #64748b, #1e293b); }
.sw-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.sw-icon-opt { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); }
.sw-icon-opt.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.sw-img-field { display: flex; gap: 6px; align-items: center; }
.sw-img-prev { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.sw-items { display: flex; flex-direction: column; gap: 6px; }
.sw-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.sw-item summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; cursor: pointer; }
.sw-item summary::-webkit-details-marker { display: none; }
.sw-item[open] summary { border-bottom: 1px solid var(--border); }
.sw-item > .form-grid { padding: 10px 12px; }
.sw-item-n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sw-item-l { flex: 1; min-width: 0; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-slug { display: flex; align-items: center; gap: 4px; }
.sw-slug span { color: var(--text-muted); }
.sw-count { float: right; font-weight: 400; color: var(--text-muted); font-size: .74rem; }
.sw-serp { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); margin-bottom: 12px; font-family: Arial, sans-serif; }
.sw-serp-url { font-size: .76rem; color: #188038; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-serp-t { color: #1a0dab; font-size: 1.02rem; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-serp-d { color: #4d5156; font-size: .8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Galería de secciones */
.modal-box.sw-gallery { width: min(960px, 96vw); max-width: 96vw; align-items: stretch; gap: 0; max-height: calc(100vh - 48px); overflow-y: auto; text-align: left; }
.sw-gallery-intro { font-weight: 600; margin: 0 40px 12px 0; }
.sw-gal-group { margin-bottom: 18px; }
.sw-gal-gtitle { display: flex; align-items: center; gap: 6px; font: 700 .76rem/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.sw-gal-off { font-size: .8rem; color: var(--text-muted); margin: -4px 0 10px; }
.sw-gal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.sw-gal-item {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; transition: border-color .15s, transform .15s;
}
.sw-gal-item:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); }
.sw-gal-item:disabled { opacity: .45; cursor: not-allowed; }
.sw-gal-item strong { display: flex; align-items: center; gap: 6px; font-size: .86rem; }
.sw-gal-item span:last-child { color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
.sw-gal-item .sw-thumb { height: 64px; }
.sw-thumb-hero, .sw-thumb-cta { background: color-mix(in srgb, var(--primary) 70%, #000); }
.sw-thumb-hero i, .sw-thumb-cta i { background: rgba(255,255,255,.75) !important; }
.sw-thumb-cards i:nth-child(1), .sw-thumb-shop_payments i:nth-child(1), .sw-thumb-payment_methods i:nth-child(1), .sw-thumb-pricing i:nth-child(1), .sw-thumb-team i:nth-child(1), .sw-thumb-booking_services i:nth-child(1), .sw-thumb-shop_featured i:nth-child(1), .sw-thumb-shop_products i:nth-child(1), .sw-thumb-rental_items i:nth-child(1), .sw-thumb-gallery i:nth-child(1) { left: 6%; right: 68%; top: 18%; height: 64%; }
.sw-thumb-cards i:nth-child(2), .sw-thumb-shop_payments i:nth-child(2), .sw-thumb-payment_methods i:nth-child(2), .sw-thumb-pricing i:nth-child(2), .sw-thumb-team i:nth-child(2), .sw-thumb-booking_services i:nth-child(2), .sw-thumb-shop_featured i:nth-child(2), .sw-thumb-shop_products i:nth-child(2), .sw-thumb-rental_items i:nth-child(2), .sw-thumb-gallery i:nth-child(2) { left: 36%; right: 36%; top: 18%; height: 64%; opacity: 1; }
.sw-thumb-cards i:nth-child(3), .sw-thumb-shop_payments i:nth-child(3), .sw-thumb-payment_methods i:nth-child(3), .sw-thumb-pricing i:nth-child(3), .sw-thumb-team i:nth-child(3), .sw-thumb-booking_services i:nth-child(3), .sw-thumb-shop_featured i:nth-child(3), .sw-thumb-shop_products i:nth-child(3), .sw-thumb-rental_items i:nth-child(3), .sw-thumb-gallery i:nth-child(3) { left: 68%; right: 6%; top: 18%; height: 64%; background: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.sw-thumb-text_image i:nth-child(1) { left: 8%; right: 56%; }
.sw-thumb-text_image i:nth-child(2) { left: 8%; right: 60%; }
.sw-thumb-text_image i:nth-child(3) { left: 54%; right: 8%; top: 16%; height: 68%; opacity: .55; }
.sw-thumb-faq i, .sw-thumb-steps i, .sw-thumb-rich_text i { left: 12% !important; right: 12% !important; height: 6px !important; }
.sw-thumb-faq i:nth-child(1) { top: 20% !important; } .sw-thumb-faq i:nth-child(2) { top: 45% !important; opacity: 1 !important; } .sw-thumb-faq i:nth-child(3) { top: 70% !important; background: color-mix(in srgb, var(--primary) 35%, var(--border)) !important; }
.sw-thumb-spacer i { display: none; }
.sw-thumb-spacer::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px dashed var(--border); }

/* Diseño */
.sw-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.sw-theme { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.sw-theme.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.sw-theme strong { font-size: .8rem; }
.sw-theme small { font-size: .7rem; color: var(--text-muted); }
.sw-theme-sw { height: 38px; border-radius: 7px; border: 1px solid; display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.sw-theme-sw i { width: 14px; height: 14px; border-radius: 50%; }
.sw-color { display: flex; gap: 6px; align-items: center; }
.sw-color input[type="color"] { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; flex-shrink: 0; }

/* Configuración */
.sw-settings { display: flex; flex-direction: column; gap: 16px; }
.sw-card { padding: 20px; }
.sw-card h3 { margin-bottom: 12px; }
.sw-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; }
.sw-toggle-row .toggle-track { flex-shrink: 0; }
.sw-int { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); }
.sw-int-off { opacity: .8; }
.sw-int-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .sw-body { grid-template-columns: minmax(0, 1fr); }
  .sw-stage { display: none; }
  .sw-only-narrow { display: inline-flex; }
  .sw-editor.sw-show-preview .sw-stage { display: flex; }
  .sw-editor.sw-show-preview .sw-panel { display: none; }
  .sw-devices { display: none; }
  .sw-editor.sw-show-preview .sw-devices { display: flex; }
}
@media (max-width: 560px) {
  .sw-panel .form-grid { grid-template-columns: minmax(0, 1fr); }
  .sw-menu-kid { grid-template-columns: minmax(0, 1fr); }
  .sw-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Etapa 2: páginas de módulo, bloques de app e importar la tienda ─────── */
.sw-mod-badge { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
.sw-row-virtual td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.sw-row-virtual td:first-child a { opacity: .85; }
.sw-lock { display: inline-flex; align-items: center; padding: 6px 8px; color: var(--text-muted); }
.sw-sec-app .sw-sec-ico { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.sw-app-note, .sw-int-page, .sw-import-box {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; font-size: .84rem; margin-bottom: 12px;
}
.sw-app-note span, .sw-int-page span { flex: 1 1 200px; }
.sw-import-box { text-align: left; max-width: 720px; margin: 0 auto 22px; padding: 14px 16px; }
.sw-import-box > div { flex: 1 1 240px; }
.sw-gal-app .sw-thumb { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.sw-thumb-booking_app i:nth-child(1), .sw-thumb-rentals_app i:nth-child(1) { left: 8%; right: 8%; top: 14%; height: 18%; }
.sw-thumb-booking_app i:nth-child(2), .sw-thumb-rentals_app i:nth-child(2) { left: 8%; right: 52%; top: 40%; height: 46%; opacity: 1; }
.sw-thumb-booking_app i:nth-child(3), .sw-thumb-rentals_app i:nth-child(3) { left: 52%; right: 8%; top: 40%; height: 46%; }