/*
  TweetLife Design System (Base Web–inspired)
  File: components.css
  Purpose:
  - Shared component primitives (Button, Field, Card, Chip, Modal/Drawer)
  - App-like navigation primitives (Top bar + Bottom nav)
  - Keeps compatibility with existing class names in the project
*/

/* =====================
   Button
===================== */
.tl-btn,
button.tl-btn,
a.tl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--tl-radius-md);
  border: 1px solid var(--tl-border);
  background: var(--tl-surface);
  color: var(--tl-ink);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  line-height: 1;
  box-shadow: var(--tl-shadow-xs);
  transition: transform var(--tl-dur-2) var(--tl-ease-out), box-shadow var(--tl-dur-2) var(--tl-ease-out), background-color var(--tl-dur-2) var(--tl-ease-out), opacity var(--tl-dur-2) var(--tl-ease-out), border-color var(--tl-dur-2) var(--tl-ease-out);
}
.tl-btn:hover{ background: rgba(248,250,252,.98); box-shadow: var(--tl-shadow-sm); }
.tl-btn:active{ transform: translateY(1px); box-shadow: var(--tl-shadow-xs); }

.tl-btn--full{ width: 100%; }

.tl-btn--sm{ padding: 10px 12px; border-radius: var(--tl-radius-sm); font-size: 13px; }
.tl-btn--md{ padding: 12px 14px; font-size: 14px; }
.tl-btn--lg{ padding: 14px 16px; border-radius: var(--tl-radius-lg); font-size: 15px; min-height: 48px; }

.tl-btn--primary{ background: var(--tl-primary); border-color: rgba(34,47,117,.65); color:#fff; }
.tl-btn--primary:hover{ background: #1B245A; }

.tl-btn--secondary{ background: var(--tl-secondary); border-color: rgba(37,188,207,.70); color:#fff; }
.tl-btn--secondary:hover{ background: #1aa9bb; }

.tl-btn--minimal{ background: transparent; border-color: transparent; box-shadow: none; }
.tl-btn--minimal:hover{ background: rgba(248,250,252,.92); }

.tl-btn--danger{ background: var(--tl-color-error); border-color: rgba(225,29,72,.55); color:#fff; }
.tl-btn--danger:hover{ background: #BE123C; }

.tl-btn[disabled],
.tl-btn.is-disabled,
.tl-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state (works with Blade component OR manual markup) */
.tl-btn.is-loading,
.tl-btn[aria-busy="true"],
.tl-btn[data-loading="1"]{
  opacity: .8;
  pointer-events: none;
  position: relative;
}
.tl-btn.is-loading::after,
.tl-btn[aria-busy="true"]::after,
.tl-btn[data-loading="1"]::after{
  content:"";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  animation: tlSpin .8s linear infinite;
}
.tl-btn--minimal.is-loading::after,
.tl-btn--minimal[aria-busy="true"]::after,
.tl-btn--minimal[data-loading="1"]::after{
  border-color: rgba(2,6,23,.18);
  border-top-color: rgba(2,6,23,.65);
}
@keyframes tlSpin{ to{ transform: rotate(360deg); } }

/* Compatibility: map legacy buttons used across the project to DS */
.btn,
.btn-lite,
.btnx{
  /* Keep original class names working, but make them match DS */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:12px 14px;
  border-radius: var(--tl-radius-md);
  border:1px solid var(--tl-border);
  background:var(--tl-surface);
  color:var(--tl-ink);
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--tl-shadow-xs);
  transition: transform var(--tl-dur-2) var(--tl-ease-out), box-shadow var(--tl-dur-2) var(--tl-ease-out), background-color var(--tl-dur-2) var(--tl-ease-out), opacity var(--tl-dur-2) var(--tl-ease-out);
}
.btn:hover, .btn-lite:hover, .btnx:hover{ background: rgba(248,250,252,.98); box-shadow: var(--tl-shadow-sm); }
.btn:active, .btn-lite:active, .btnx:active{ transform: translateY(1px); }

/* Legacy variants used in property_ads/show */
.btn.primary{ background: var(--tl-primary) !important; border-color: rgba(34,47,117,.65) !important; color:#fff !important; }
.btn.primary:hover{ background: #1B245A !important; }

.btn.neutral{ background: #fff !important; }

.btn.wh{ background: linear-gradient(135deg, #075E54, #25D366) !important; border-color: rgba(255,255,255,.22) !important; color:#fff !important; }

.btn.office{ background: linear-gradient(135deg, rgba(225,186,65,.98), rgba(37,188,207,.86)) !important; color: #0B1220 !important; border-color: rgba(255,255,255,.55) !important; }

/* =====================
   Field (input/select/textarea)
===================== */
.tl-field{ display:block; }
.tl-label{ display:block; font-size: 12px; color: var(--tl-ink); margin-bottom: 6px; }
.tl-help{ margin-top: 8px; font-size: 12px; color: var(--tl-muted); line-height: 1.9; }

.tl-input,
.tl-select,
.tl-textarea,
.input{
  width: 100%;
  min-height: 44px;
  padding: 12px 12px;
  border-radius: var(--tl-radius-md);
  border: 1px solid rgba(148,163,184,.32);
  background: var(--tl-surface);
  outline: none;
  color: var(--tl-ink);
  transition: box-shadow var(--tl-dur-2) var(--tl-ease-out), border-color var(--tl-dur-2) var(--tl-ease-out), background-color var(--tl-dur-2) var(--tl-ease-out);
}
.tl-textarea,
textarea.input{ min-height: 120px; resize: vertical; }

.tl-input:focus,
.tl-select:focus,
.tl-textarea:focus,
.input:focus{
  border-color: rgba(37,188,207,.55);
  box-shadow: 0 0 0 3px rgba(37,188,207,.16);
}

.tl-input[disabled],
.tl-select[disabled],
.tl-textarea[disabled],
.input[disabled]{
  opacity: .7;
  background: rgba(241,245,249,.9);
  cursor: not-allowed;
}

/* Form error compatibility (used by tl_forms.css) */
.tl-invalid{ border-color: var(--tl-error-border) !important; background: var(--tl-error-bg) !important; box-shadow: 0 0 0 4px var(--tl-error-ring) !important; }
.tl-field-error{ margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--tl-error-ink); }

/* =====================
   Card
===================== */
.tl-card{
  background: var(--tl-surface);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: var(--tl-radius-xl);
  box-shadow: var(--tl-shadow-sm);


/* App-like press feedback for clickable cards */
a.tl-card,
button.tl-card{
  display:block;
  text-decoration:none;
  transition: transform var(--tl-dur-2) var(--tl-ease-out), box-shadow var(--tl-dur-2) var(--tl-ease-out);
  will-change: transform;
}
a.tl-card:active,
button.tl-card:active{
  transform: scale(.99);
  box-shadow: var(--tl-shadow-xs);
}
}

/* =====================
   Chip / Tag
===================== */
.tl-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(248,250,252,.92);
  color: var(--tl-ink);
}
.tl-chip .x{ opacity:.7; }

/* =====================
   Alert
===================== */
.tl-alert{
  border: 1px solid rgba(148,163,184,.28);
  border-radius: var(--tl-radius-lg);
  padding: 12px 14px;
  line-height: 1.9;
  background: rgba(248,250,252,.92);
  color: var(--tl-ink);
}
.tl-alert--success{ border-color: var(--tl-color-success-border); background: var(--tl-color-success-bg); color: #065F46; }
.tl-alert--error{ border-color: var(--tl-color-error-border); background: var(--tl-color-error-bg); color: #9F1239; }
.tl-alert--warning{ border-color: var(--tl-color-warning-border); background: var(--tl-color-warning-bg); color: #92400E; }
.tl-alert--info{ border-color: var(--tl-color-info-border); background: var(--tl-color-info-bg); color: #075985; }

/* =====================
   Modal / Drawer primitives
   (Reusable, and compatible with existing TL modals/sheets)
===================== */
.tl-backdrop,
.tl-modal-backdrop,
.tl-ss-backdrop{
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}

.tl-modal,
.tl-ss-modal{
  z-index: var(--tl-z-modal);
}

.tl-sheet,
.tl-ss-sheet{
  border-radius: 22px 22px 0 0;
}

/* =====================
   Top bar + Bottom nav (app-like)
===================== */
#tlSiteHeader.tl-topbar{
  position: sticky;
  top: 0;
  z-index: var(--tl-z-header);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#tlBottomNav.tl-bottom-nav{
  z-index: var(--tl-z-bottomnav);
}

/* Ensure bottom nav tap targets are >= 44px */
#tlBottomNav.tl-bottom-nav a,
#tlBottomNav.tl-bottom-nav button{
  min-height: 44px;
}

/* =====================
   Searchable Select (moved from layout inline CSS)
===================== */
.tl-ss-wrap{ position:relative; width:100%; }
.tl-ss-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tl-ss-btn .v{ font-weight:800; }
.tl-ss-btn .chev{ opacity:.6; }

select[data-ss-ready="1"]{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop dropdown panel */
.tl-ss-panel{
  position:absolute;
  inset-inline:0;
  top:calc(100% + .5rem);
  z-index:80;
  background:#fff;
  border:1px solid rgba(148,163,184,.30);
  border-radius: var(--tl-radius-lg);
  box-shadow: var(--tl-shadow-lg);
  overflow:hidden;
  display:none;
}
.tl-ss-panel.open{ display:block; }
.tl-ss-panel .head{ padding:.5rem; border-bottom:1px solid rgba(148,163,184,.20); }
.tl-ss-panel .head input{
  width:100%;
  padding:.7rem .75rem;
  border:1px solid rgba(148,163,184,.32);
  border-radius: var(--tl-radius-md);
  font-weight:700;
  outline:none;
}
.tl-ss-list{ max-height:360px; overflow:auto; padding:.4rem; }
.tl-ss-item{
  width:100%;
  text-align:right;
  padding:.75rem .75rem;
  border-radius: var(--tl-radius-md);
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.tl-ss-item:hover{ background:rgba(248,250,252,.92); }
.tl-ss-item.muted{ opacity:.6; font-weight:600; cursor:default; }
.tl-ss-empty{ padding:.8rem; text-align:center; opacity:.7; font-weight:700; }

/* Mobile bottom sheet */
.tl-ss-modal{ position:fixed; inset:0; display:none; }
.tl-ss-modal.show{ display:block; }
.tl-ss-backdrop{ position:absolute; inset:0; }

.tl-ss-sheet{
  position:absolute; left:0; right:0; bottom:0;
  height:92vh; max-height:92vh;
  background:#fff;
  border-top:1px solid rgba(148,163,184,.30);
  display:flex; flex-direction:column;
  transform:translateY(0);
  transition:transform var(--tl-dur-2) var(--tl-ease-out);
  will-change:transform;
}

.tl-ss-gripbar{ display:flex; justify-content:center; padding-top:10px; padding-bottom:6px; }
.tl-ss-gripbar .grip{ width:56px; height:6px; border-radius:999px; background:#e2e8f0; }

.tl-ss-top{
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.20);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tl-ss-title{ font-weight:800; }
.tl-ss-close{
  padding:10px 12px;
  border-radius: var(--tl-radius-md);
  border:1px solid rgba(148,163,184,.30);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.tl-ss-search{ padding:10px 12px; }
.tl-ss-search input{
  width:100%;
  padding:12px;
  border:1px solid rgba(148,163,184,.30);
  border-radius: var(--tl-radius-md);
  font-weight:700;
  outline:none;
}
.tl-ss-mobile-list{ overflow:auto; padding:8px; }
.tl-ss-mobile-item{
  padding:12px;
  border-radius: var(--tl-radius-md);
  font-weight:800;
  cursor:pointer;
}
.tl-ss-mobile-item:hover{ background:rgba(248,250,252,.92); }
.tl-ss-mobile-item.muted{ opacity:.6; font-weight:600; cursor:default; }
.tl-ss-mobile-empty{ padding:12px; text-align:center; opacity:.7; font-weight:700; }

/* =====================
   Page Navigation Loader (moved from layout inline CSS)
===================== */
#tlPageLoader{
  position:fixed;
  inset:0;
  z-index:2147483000;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--tl-dur-2) var(--tl-ease-out);
  background:transparent;
}
html.tl-nav-loading #tlPageLoader{ opacity:1; }

#tlPageLoader .tl-loader-desktop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:rgba(34,47,117,.08);
  overflow:hidden;
  display:block;
}
#tlPageLoader .tl-loader-desktop .bar{
  position:absolute;
  inset:0;
  left:-42%;
  width:42%;
  background:linear-gradient(90deg, rgba(37,188,207,0), rgba(37,188,207,.55), rgba(34,47,117,.95));
  box-shadow:0 0 18px rgba(34,47,117,.24);
  animation:tlLoaderIndeterminate .95s infinite ease-in-out;
}
@keyframes tlLoaderIndeterminate{ 0%{ transform:translateX(0); } 100%{ transform:translateX(340%); } }

#tlPageLoader .tl-loader-mobile{
  position:absolute;
  inset:0;
  display:none;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), rgba(245,248,252,.58) 58%, rgba(245,248,252,.72) 100%);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
#tlPageLoader .tl-loader-mobile .wrap{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  padding-top:calc(20px + var(--tl-safe-top));
  padding-bottom:calc(24px + var(--tl-safe-bottom));
}
#tlPageLoader .tl-loader-mobile .card{
  width:min(188px, calc(100vw - 40px));
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.90));
  border:1px solid rgba(226,232,240,.92);
  border-radius:28px;
  box-shadow:0 18px 42px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.82);
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(8px) scale(.975);
  transition:opacity 160ms var(--tl-ease-out) 90ms, transform 200ms var(--tl-ease-out) 90ms;
  will-change:transform, opacity;
}
html.tl-nav-loading #tlPageLoader .tl-loader-mobile .card{
  opacity:1;
  transform:translateY(0) scale(1);
}
#tlPageLoader .tl-loader-mobile .logo-shell{
  position:relative;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(234,248,252,.84));
  border:1px solid rgba(191,219,254,.28);
  box-shadow:0 12px 28px rgba(34,47,117,.08), inset 0 1px 0 rgba(255,255,255,.94);
}
#tlPageLoader .tl-loader-mobile .logo-shell::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:30px;
  background:radial-gradient(circle, rgba(37,188,207,.16), rgba(34,47,117,.08) 44%, rgba(34,47,117,0) 72%);
  z-index:-1;
}
#tlPageLoader .tl-loader-mobile .logo{
  width:56px;
  height:56px;
  border-radius:18px;
  object-fit:contain;
  background:transparent;
  border:0;
}
#tlPageLoader .tl-loader-mobile .spinner{
  position:relative;
  width:78px;
  height:4px;
  border-radius:999px;
  background:rgba(34,47,117,.10);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
}
#tlPageLoader .tl-loader-mobile .spinner > span{
  position:absolute;
  top:0;
  bottom:0;
  left:-38%;
  width:38%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(37,188,207,.92), rgba(34,47,117,.96));
  box-shadow:0 0 14px rgba(37,188,207,.24);
  animation:tlLoaderRail 1s infinite ease-in-out;
}
@keyframes tlLoaderRail{ 0%{ transform:translateX(0); } 100%{ transform:translateX(360%); } }
#tlPageLoader .tl-loader-mobile .text{
  font-size:12px;
  font-weight:900;
  color:rgba(34,47,117,.72);
  letter-spacing:0;
}

@media ((min-width: 1024px) and (hover: hover) and (pointer: fine)), (min-width: 1367px){
  #tlPageLoader .tl-loader-desktop{ height:3px; background:rgba(34,47,117,.10); }
  html.tl-nav-loading{ cursor:progress; }
  html.tl-nav-loading body{ cursor:progress; }
}
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  #tlPageLoader{ background:transparent; }
  #tlPageLoader .tl-loader-mobile{ display:block; }
  html.tl-nav-loading #tlPageLoader{ pointer-events:auto; }
  html.tl-nav-loading, html.tl-nav-loading body{ overflow:hidden; }
}

@media (max-width:640px){
  #tlPageLoader .tl-loader-mobile .card{ width:min(176px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion:reduce){
  #tlPageLoader, #tlPageLoader *{ animation:none !important; transition:none !important; }
  #tlPageLoader .tl-loader-desktop .bar,
  #tlPageLoader .tl-loader-mobile .spinner > span{ left:0; width:100%; opacity:.72; }
}

@media print{ #tlPageLoader{ display:none !important; } }

/* =====================
   Auth pages (OTP) – app-like card layout
===================== */
.tl-auth{
  background: radial-gradient(1200px 520px at 12% 10%, rgba(37,188,207,.28), transparent 58%),
              radial-gradient(900px 420px at 90% 20%, rgba(225,186,65,.22), transparent 55%),
              linear-gradient(180deg, rgba(248,250,252,.95), rgba(248,247,242,.95));
  padding: 18px 0;
}
.tl-auth__container{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--tl-page-x);
}
.tl-auth__card{
  background: var(--tl-surface);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 28px;
  box-shadow: var(--tl-shadow-md);
  padding: 18px;
}
@media (min-width: 640px){
  .tl-auth{ padding: 26px 0; }
  .tl-auth__card{ padding: 22px; }
}

.tl-auth__head{
  display:flex;
  align-items:center;
  gap: 12px;
}
.tl-auth__logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:#fff;
  border: 1px solid rgba(148,163,184,.25);
}
.tl-auth__title{ font-size: 20px; line-height: var(--tl-leading-snug); font-weight: 800; }
.tl-auth__sub{ margin-top: 4px; color: var(--tl-muted); font-size: 13px; line-height: 1.9; }

.tl-otp-box{
  width: 46px;
  height: 54px;
  text-align: center;
  border-radius: var(--tl-radius-md);
  border: 1px solid rgba(148,163,184,.32);
  background: #fff;
  outline: none;
}
.tl-otp-box:focus{
  border-color: rgba(37,188,207,.55);
  box-shadow: 0 0 0 4px rgba(37,188,207,.14);
}
@media (max-width: 420px){
  .tl-otp-box{ width: 42px; height: 52px; }
}

/* =====================
   Property show page (override internal styles without editing the Blade)
   We keep it scoped to .ad-wrap to avoid global conflicts.
===================== */
.ad-wrap .btn,
.ad-wrap .btn-lite,
.ad-wrap .btnx{
  box-shadow: var(--tl-shadow-xs) !important;
  border-radius: var(--tl-radius-md) !important;
  min-height: 44px !important;
}
.ad-wrap .input{
  border-radius: var(--tl-radius-md) !important;
  border-color: rgba(148,163,184,.32) !important;
}

/* =====================
   Toast (global)
   Used by /js/tl_favorites.js (and safe to reuse elsewhere)
===================== */
.tl-toast-host{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Keep above any fixed app bars (bottom nav, ad CTA, etc.) */
  bottom: calc(
    var(--tl-bottom-nav-h, 0px)
    + var(--tl-adp-cta-h, 0px)
    + var(--tl-safe-bottom, 0px)
    + var(--tl-vv-bottom, 0px)
    + 14px
  );
  width: min(520px, calc(100vw - 24px));
  z-index: var(--tl-z-toast);
  display: grid;
  gap: 10px;
  pointer-events: none;
}

body.tl-inapp .tl-toast-host{
  bottom: calc(var(--tl-safe-bottom, 0px) + 14px);
}

.tl-toast{
  /* Modern mobile-app toast (dark surface) */
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.94);
  color: #fff;
  box-shadow: 0 18px 42px rgba(2,6,23,.28);
  backdrop-filter: blur(10px) saturate(120%);
  animation: tlToastIn .18s ease-out;
}

/* Toast content helpers (compatible with multiple JS implementations) */
.tl-toast .dot,
.tl-toast__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  flex: 0 0 auto;
}

.tl-toast.is-error .dot,
.tl-toast.is-error .tl-toast__dot,
.tl-toast--error .dot,
.tl-toast--error .tl-toast__dot{
  background: rgba(244,63,94,.92);
  box-shadow: 0 0 0 4px rgba(244,63,94,.18);
}

.tl-toast--warn .dot,
.tl-toast--warn .tl-toast__dot{
  background: rgba(245,158,11,.95);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}

.tl-toast--info .dot,
.tl-toast--info .tl-toast__dot{
  background: rgba(37,188,207,.95);
  box-shadow: 0 0 0 4px rgba(37,188,207,.16);
}

.tl-toast .title,
.tl-toast__title{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
}

.tl-toast .msg,
.tl-toast__msg{
  margin-top: 2px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 800;
  white-space: pre-line;
}

/* Optional action button */
.tl-toast__action,
.tl-toast button{
  flex: 0 0 auto;
}

.tl-toast__btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 999px;
  padding: 10px 12px;
  min-height: 40px;
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.tl-toast__btn:hover{ background: rgba(255,255,255,.14); }

@keyframes tlToastIn{
  from{ transform: translateY(10px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.tl-toast__msg{
  min-width: 0;
  font-weight: 900;
  line-height: 1.6;
}

.tl-toast__action{
  flex: 0 0 auto;
}

/* ==========================================================
   TweetLife - Ad Details RTL/Grid Fix (2026-01-22)
   Fixes broken alignment/whitespace in Ad Details page.
   Scope: only inside .ad-wrap to avoid side effects.
   ========================================================== */

.ad-wrap{
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Force stable grid behavior regardless of RTL:
   Make the grid LTR (stable track ordering), then restore RTL inside children. */
.ad-wrap .grid-2{
  width: 100% !important;
  display: grid !important;
  direction: ltr !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr) !important;
  gap: 12px !important;
  align-items: start;
}

/* Restore RTL in all direct children */
.ad-wrap .grid-2 > *{
  direction: rtl !important;
  min-width: 0;
}

/* Responsive collapse */
@media (max-width: 980px){
  .ad-wrap .grid-2{
    grid-template-columns: 1fr !important;
  }
}

/* Optional: prevent accidental horizontal overflow that causes visual "shift" */
.ad-wrap,
.ad-wrap .ad-card,
.ad-wrap .grid-2{
  overflow-x: clip;
}

/* ============================================================
   TL_IOS_KEYBOARD_SAFE_CTA_V1 (2026-01-26)
   Keep fixed/sticky bottom CTAs visible on iPhone when the keyboard is open.

   How it works
   - JS (tl_dialogs.js) sets: --tl-vv-bottom (keyboard overlap) and toggles html.tl-kb-open
   - JS marks the CTA container with: .tl-kb-dodge
   - Optional: JS can also set html.tl-kb-suppress-nav to hide bottom nav while typing
   ============================================================ */

:root{
  /* Default (no keyboard overlap). Updated live by JS on iOS Safari. */
  --tl-vv-bottom: 0px;
}

html.tl-kb-open .tl-kb-dodge{
  /* Push the bar above keyboard + home indicator */
  bottom: calc(var(--tl-safe-bottom, 0px) + var(--tl-vv-bottom, 0px)) !important;
}

/* Hide the fixed bottom nav while keyboard is open (only when requested by JS) */
html.tl-kb-open.tl-kb-suppress-nav #tlBottomNav.tl-bottom-nav{
  transform: translateY(120%);
  pointer-events: none;
}

html #tlBottomNav.tl-bottom-nav{
  transition: transform var(--tl-dur-2) var(--tl-ease-out);
}



/* ============================================================
   TL_WIZARD_MOBILE_SAFETY_V2 (2026-01-26)
   Add/Edit Real Estate Wizard (Mobile‑First)
   - Prevent horizontal page pan caused by a single overflowing element (common with maps on iOS)
   - Dock the wizard footer (Prev/Next/Submit) above iOS browser UI + keyboard using --tl-vv-bottom
   - Respect iPhone safe area (home indicator)
   - Prevent iOS auto-zoom by enforcing 16px inputs inside the wizard
   ============================================================ */

html.tl-wizard-root,
html.tl-wizard-root body{
  overflow-x: hidden !important;
}

/* Keep the wizard navigation bar always visible on iOS:
   - bottom is raised by VisualViewport occlusion (toolbars + keyboard)
   - padding-bottom accounts for the home indicator safe area */
html.tl-wizard-root .wizard-nav{
  bottom: var(--tl-vv-bottom, 0px) !important;
  padding-bottom: calc(10px + var(--tl-safe-bottom, 0px)) !important;

  left: 0 !important;
  right: 0 !important;

  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Ensure inner wrap doesn't accidentally exceed viewport width */
html.tl-wizard-root .wizard-nav .wrap{
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
}

/* Spacer should include safe area, so the last content isn't hidden behind the fixed bar */
html.tl-wizard-root .wizard-spacer{
  height: calc(120px + var(--tl-safe-bottom, 0px)) !important;
}

/* iOS: prevent the well-known auto-zoom (font-size < 16px) that can "hide" fixed CTAs */
@supports (-webkit-touch-callout: none){
  body.tl-wizard-page #adWizard input,
  body.tl-wizard-page #adWizard select,
  body.tl-wizard-page #adWizard textarea,
  body.tl-wizard-page #adWizard .tl-input,
  body.tl-wizard-page #adWizard .tl-select,
  body.tl-wizard-page #adWizard .tl-textarea{
    font-size: 16px !important;
  }
}

/* Map containers: clamp widths defensively (Leaflet sometimes inserts wide control elements) */
html.tl-wizard-root #tlMap,
html.tl-wizard-root #tlMap *{
  max-width: 100%;
  box-sizing: border-box;
}


/* Keep wizard CTA buttons readable even if the bar is portaled outside #adWizard */
body.tl-wizard-page .wizard-nav button{
  font-weight: 800 !important;
}



/* ============================================================
   TL_WIZARD_IMAGES_GRID_V2 (2026-01-27)
   Add/Edit Wizard - Images Step
   - Cleaner, more predictable tile layout on mobile and desktop
   - Avoids button overlaps and horizontal overflow
   - Preserves existing JS behavior (drag, primary, move, delete)
   ============================================================ */

body.tl-wizard-page #adWizard .img-grid{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.tl-wizard-page #adWizard .img-tile,
body.tl-wizard-page #adWizard .img-tile *{
  box-sizing: border-box !important;
  max-width: 100% !important;
}

body.tl-wizard-page #adWizard .img-tile{
  display: grid !important;
  position: relative !important;
  grid-template-rows: auto auto auto !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-content: start !important;
  gap: 0 !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--tl-color-surface, #fff) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;
  cursor: grab !important;
}

body.tl-wizard-page #adWizard .img-tile.dragging{
  cursor: grabbing !important;
}

body.tl-wizard-page #adWizard .img-tile.is-primary{
  outline: 3px solid rgba(25,135,84,.32) !important;
}

body.tl-wizard-page #adWizard .img-tile.drag-over{
  outline: 3px solid rgba(37,188,207,.40) !important;
}

body.tl-wizard-page #adWizard .img-tile img{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 640px){
  body.tl-wizard-page #adWizard .img-tile img{height: 140px !important;}
}
@media (min-width: 980px){
  body.tl-wizard-page #adWizard .img-tile img{height: 165px !important;}
}

body.tl-wizard-page #adWizard .img-overlay{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  pointer-events: none !important;
  background: linear-gradient(to top, rgba(2,6,23,.50), rgba(2,6,23,0)) !important;
  opacity: .55 !important;
}

body.tl-wizard-page #adWizard .img-state{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 10px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: var(--tl-color-text, #0b1220) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  backdrop-filter: blur(10px);
}

body.tl-wizard-page #adWizard .img-del{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: start !important;
  align-self: start !important;
  margin: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  min-height: 34px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  color: #fff !important;
  background: rgba(34,47,117,.92) !important;
  cursor: pointer !important;
}

body.tl-wizard-page #adWizard .img-note{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: center !important;
  align-self: end !important;
  margin: 0 12px 18px 12px !important;
  text-align: center !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
  pointer-events: none !important;
}

body.tl-wizard-page #adWizard .img-progress{
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: stretch !important;
  align-self: end !important;
  margin: 0 12px 10px 12px !important;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.26) !important;
}

body.tl-wizard-page #adWizard .img-progress > div{
  height: 100% !important;
  background: var(--tl-color-primary, #0d6efd) !important;
}

/* Action row (create wizard only): move buttons + primary button */
body.tl-wizard-page #adWizard .img-move{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    display:flex !important;
    gap: 8px !important;
  }

  body.tl-wizard-page #adWizard .img-move-btn{
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  body.tl-wizard-page #adWizard .img-title{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 2px !important;
  }

  body.tl-wizard-page #adWizard .img-state{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  body.tl-wizard-page #adWizard .img-del{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    min-height: 34px !important;
  }

  body.tl-wizard-page #adWizard .img-main-btn{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    max-width: calc(100% - 92px) !important;
  }

  body.tl-wizard-page #adWizard .img-move{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: end !important;
    padding: 0 !important;
    margin-top: 8px !important;
    display:none !important;
  }

  body.tl-wizard-page #adWizard .img-progress{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: stretch !important;
    align-self: end !important;
    margin: 0 !important;
    height: 7px !important;
  }

  body.tl-wizard-page #adWizard .img-tile.is-primary::before{
    top: 10px !important;
    right: 104px !important;
  }
}