/* ═══════════════════════════════════════════════════════ OTA Price Pro — Frontend Widget All colors via CSS custom properties set inline by PHP. High specificity selectors to beat Elementor/theme CSS. ═══════════════════════════════════════════════════════ */ /* ── MODAL: teleported to by JS ── */ body .ota-modal { display: none; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; } body .ota-modal.is-open { display: flex !important; } body .ota-modal__overlay { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.72) !important; backdrop-filter: blur(5px) !important; cursor: pointer !important; margin: 0 !important; } body .ota-modal__box { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: 560px !important; margin: 16px !important; background: var(--ota-modal-bg, #1a1f2e) !important; border-radius: 16px !important; padding: 28px 24px !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; border: 1px solid rgba(255,255,255,.08) !important; max-height: 88vh !important; overflow-y: auto !important; box-sizing: border-box !important; } body .ota-modal__close { position: absolute !important; top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,.12) !important; color: var(--ota-text, #fff) !important; border: none !important; cursor: pointer !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transition: background .15s !important; } body .ota-modal__close:hover { background: rgba(255,255,255,.22) !important; } /* Animations */ body .ota-modal[data-anim="slide-up"].is-open .ota-modal__box { animation: otaSlideUp .28s cubic-bezier(.34,1.56,.64,1) both !important; } body .ota-modal[data-anim="fade"].is-open .ota-modal__box { animation: otaFade .22s ease both !important; } body .ota-modal[data-anim="scale"].is-open .ota-modal__box { animation: otaScale .25s cubic-bezier(.34,1.56,.64,1) both !important; } @keyframes otaSlideUp { from { opacity:0; transform:translateY(44px); } to { opacity:1; transform:translateY(0); } } @keyframes otaFade { from { opacity:0; } to { opacity:1; } } @keyframes otaScale { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:scale(1); } } /* ── HEADER ── */ body .ota-header { margin-bottom: 18px !important; } body .ota-title { font-size: 21px !important; font-weight: 700 !important; margin: 0 0 5px !important; line-height: 1.25 !important; color: var(--ota-text, #ffffff) !important; font-family: inherit !important; } body .ota-subtitle { font-size: 13px !important; margin: 0 0 10px !important; color: var(--ota-text, #fff) !important; opacity: .6 !important; font-family: inherit !important; } body .ota-nights-badge { display: inline-block !important; padding: 3px 12px !important; border-radius: 20px !important; background: var(--ota-btn, #f59e0b) !important; color: var(--ota-btn-text, #fff) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important; } /* ── TABLE ── */ body .ota-table { display: flex !important; flex-direction: column !important; gap: 8px !important; } body .ota-table--empty { padding: 20px !important; text-align: center !important; opacity: .5 !important; } /* ── CHANNEL ROW ── */ body .ota-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 13px 16px !important; border-radius: 10px !important; background: var(--ota-row-bg, #242b3d) !important; border: 1.5px solid transparent !important; text-decoration: none !important; color: var(--ota-text, #ffffff) !important; cursor: pointer !important; transition: transform .15s, box-shadow .15s, border-color .15s !important; animation: otaRowIn .35s ease both !important; animation-delay: var(--delay, 0ms) !important; box-sizing: border-box !important; } body .ota-row:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; border-color: var(--ota-accent, #1a6cff) !important; text-decoration: none !important; color: var(--ota-text, #fff) !important; } body .ota-row--best { background: var(--ota-row-bg-best, #1e3a5f) !important; border-color: var(--ota-accent, #1a6cff) !important; box-shadow: 0 0 0 1px var(--ota-accent, #1a6cff) !important; } body .ota-row--direct { border-color: #059669 !important; } @keyframes otaRowIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } } /* ── LOGO ── */ body .ota-row__logo { width: 94px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; } body .ota-logo-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 5px 9px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap !important; line-height: 1 !important; letter-spacing: -.01em !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; text-decoration: none !important; } /* ── INFO ── */ body .ota-row__info { flex: 1 !important; min-width: 0 !important; } body .ota-row__name { display: block !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 3px !important; color: var(--ota-text, #fff) !important; } body .ota-row__badge { display: inline-block !important; padding: 2px 8px !important; border-radius: 4px !important; background: var(--ota-accent, #1a6cff) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; margin-right: 4px !important; } body .ota-row__badge--best { background: #059669 !important; } body .ota-row__save { display: block !important; font-size: 11px !important; color: #34d399 !important; font-weight: 500 !important; margin-top: 2px !important; } /* ── PRICE ── */ body .ota-row__price-wrap { text-align: right !important; flex-shrink: 0 !important; min-width: 90px !important; } body .ota-row__from { display: block !important; font-size: 10px !important; color: var(--ota-text, #fff) !important; opacity: .45 !important; text-transform: uppercase !important; letter-spacing: .06em !important; line-height: 1 !important; margin-bottom: 1px !important; } body .ota-row__price { display: block !important; font-size: 20px !important; font-weight: 800 !important; color: var(--ota-price, #f59e0b) !important; line-height: 1.1 !important; white-space: nowrap !important; } body .ota-row__per-night { display: block !important; font-size: 10px !important; color: var(--ota-text, #fff) !important; opacity: .45 !important; margin-top: 1px !important; white-space: nowrap !important; } body .ota-row__cta { display: block !important; font-size: 11px !important; color: var(--ota-text, #fff) !important; opacity: .55 !important; margin-top: 5px !important; white-space: nowrap !important; } body .ota-row--best .ota-row__cta { color: var(--ota-accent, #1a6cff) !important; opacity: 1 !important; } body .ota-row__live-dot { display: block !important; color: #34d399 !important; font-size: 9px !important; margin-top: 2px !important; } /* ── SYNC NOTE ── */ body .ota-sync-note { font-size: 11px !important; text-align: right !important; margin: 6px 0 0 !important; opacity: .35 !important; color: var(--ota-text, #fff) !important; } /* ── TRIGGER BUTTON (inline mode only) ── */ body .ota-trigger-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 13px 26px !important; border-radius: 50px !important; background: var(--ota-btn, #f59e0b) !important; color: var(--ota-btn-text, #fff) !important; font-weight: 700 !important; font-size: 15px !important; cursor: pointer !important; border: none !important; box-shadow: 0 4px 18px rgba(0,0,0,.2) !important; transition: transform .15s, box-shadow .15s !important; text-decoration: none !important; } body .ota-trigger-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(0,0,0,.3) !important; } /* ── STICKY FAB ── */ body .ota-sticky-fab { position: fixed !important; z-index: 99998 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 13px 22px !important; border-radius: 50px !important; background: var(--ota-btn, #f59e0b) !important; color: var(--ota-btn-text, #fff) !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; border: none !important; box-shadow: 0 4px 20px rgba(0,0,0,.35) !important; transition: transform .15s, box-shadow .15s !important; font-family: inherit !important; } body .ota-sticky-fab:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 32px rgba(0,0,0,.45) !important; } body .ota-sticky-fab--bottom-right { bottom: 24px !important; right: 24px !important; } body .ota-sticky-fab--bottom-left { bottom: 24px !important; left: 24px !important; } body .ota-sticky-fab--bottom-center { bottom: 24px !important; left: 50% !important; transform: translateX(-50%) !important; } body .ota-sticky-fab--bottom-center:hover { transform: translateX(-50%) translateY(-3px) !important; } /* ── INLINE WRAP ── */ body .ota-inline-wrap { max-width: 560px !important; background: var(--ota-modal-bg, #1a1f2e) !important; border-radius: 16px !important; padding: 24px !important; box-sizing: border-box !important; } /* ── STICKY BAR ── */ body .ota-sticky-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99990 !important; background: var(--ota-modal-bg, #1a1f2e) !important; border-top: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.3) !important; padding: 10px 20px !important; } body .ota-sticky-bar__inner { display: flex !important; align-items: center !important; gap: 16px !important; max-width: 960px !important; margin: 0 auto !important; } body .ota-sticky-bar__title { font-size: 13px !important; font-weight: 700 !important; color: var(--ota-text, #fff) !important; white-space: nowrap !important; } body .ota-sticky-bar__channels { display: flex !important; gap: 12px !important; flex: 1 !important; overflow: hidden !important; } body .ota-sticky-bar__item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ota-text, #fff) !important; } body .ota-sticky-bar__item.is-lowest strong { color: var(--ota-price, #f59e0b) !important; } body .ota-sticky-bar__cta { padding: 8px 18px !important; border-radius: 8px !important; white-space: nowrap !important; } /* ── WATERMARK ── */ body .ota-watermark { display: block !important; text-align: center !important; font-size: 10px !important; margin-top: 10px !important; opacity: .35 !important; } body .ota-watermark a { color: inherit !important; text-decoration: none !important; } /* ── RESPONSIVE ── */ @media (max-width: 500px) { body .ota-modal__box { padding: 18px 14px !important; margin: 8px !important; } body .ota-row { padding: 11px 12px !important; gap: 8px !important; } body .ota-row__logo { width: 70px !important; } body .ota-logo-badge { font-size: 10px !important; padding: 4px 7px !important; } body .ota-row__price { font-size: 17px !important; } body .ota-sticky-fab { font-size: 13px !important; padding: 11px 16px !important; } body .ota-sticky-bar__channels { display: none !important; } }