/* Brand Bringe portals: the homepage look (paper-white, off-black, one electric blue, Bricolage)
   applied on top of each portal's own styles. Loaded last in <head> so it wins; it changes looks
   and motion only, never layout logic, ids or behaviour. html[data-portal] = partner | brand | admin. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-var.woff2) format("woff2")}

:root{
  --bb-ground:#F2F4F7;--bb-card:#FFFFFF;--bb-ink:#121419;--bb-ink-2:#4E5460;--bb-ink-3:#8A909B;--bb-line:#E3E6EB;
  --bb-accent:#2B59FF;--bb-accent-press:#1D46E0;--bb-accent-tint:#E8EDFF;
  --bb-ease:cubic-bezier(.23,1,.32,1);
  /* partner portal token names */
  --sidebar:#121419;--sidebar-hover:#2A2E37;--accent:#2B59FF;--accent-dark:#1D46E0;--accent-light:#E8EDFF;--gold:#2B59FF;--champagne:#6F8BFF;
  --gray-50:#F7F8FA;--gray-100:#F2F4F7;--gray-200:#E3E6EB;--gray-300:#C9CED6;--gray-400:#8A909B;--gray-500:#6B7280;--gray-600:#4E5460;--gray-700:#3A3F48;--gray-800:#22262D;--gray-900:#121419;
  /* brand portal token names */
  --sidebar-bg:#121419;--text-primary:#121419;--text-secondary:#4E5460;--text-muted:#8A909B;--bg-page:#F2F4F7;--bg-card:#FFFFFF;--border:#E3E6EB;
  /* admin token names */
  --accent-d:#1D46E0;--text:#121419;--text-2:#4E5460;--text-3:#8A909B;--surface:#F2F4F7;--r:12px;--r-lg:16px;
  --shadow:0 1px 2px rgba(18,20,25,.06),0 1px 1px rgba(18,20,25,.04);
  --shadow-md:0 8px 20px -10px rgba(18,20,25,.18);
  --shadow-lg:0 28px 56px -20px rgba(18,20,25,.35);
}

/* ---------- Type ---------- */
html,body{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif!important;-webkit-font-smoothing:antialiased;background:var(--bb-ground)}
h1,h2,h3,h4,.page-header h1,.modal-header h2,.modal-title,.section-title,.card-title,.table-card-title{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif!important;letter-spacing:-.02em!important;font-weight:600}
.page-header h1{letter-spacing:-.03em!important}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--bb-accent);color:#fff}
:focus-visible{outline:2px solid var(--bb-accent);outline-offset:2px}

/* ---------- Login and change-password screens: real photos, card that fits every phone ---------- */
#login-overlay,#loginOverlay,#chpw-overlay{background-color:#121419!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
html[data-portal="partner"] #login-overlay,html[data-portal="partner"] #chpw-overlay{background-image:url(/assets/home/aud-seller-clients-1600.webp)!important}
html[data-portal="brand"] #loginOverlay{background-image:url(/assets/home/aud-brand-lobby-1600.webp)!important}
html[data-portal="admin"] #login-overlay{background-image:url(/assets/home/foot-horizon-1600.webp)!important}
html[data-portal="partner"] .login-bg{background:linear-gradient(180deg,rgba(18,20,25,.25),rgba(18,20,25,.6))!important;opacity:1!important}
html[data-portal="brand"] #loginOverlay::before,html[data-portal="admin"] #login-overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,25,.25),rgba(18,20,25,.6))}
.login-box{position:relative;z-index:1;width:min(440px,calc(100vw - 32px))!important;max-width:100%;border-radius:24px!important;padding:40px 36px!important;box-shadow:var(--shadow-lg)!important;animation:bbRise .7s var(--bb-ease) both}
.login-logo-icon{border-radius:12px!important;background:var(--bb-ink)!important}
.login-input,.form-group input,.form-group select,.form-group textarea{border-radius:12px!important;border:1.5px solid var(--bb-line)!important;background-color:#F7F8FA!important;min-height:48px;transition:border-color .2s var(--bb-ease),box-shadow .2s var(--bb-ease),background-color .2s var(--bb-ease)!important}
.form-group textarea{min-height:96px}
.login-input:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--bb-accent)!important;background-color:#fff!important;box-shadow:0 0 0 4px rgba(43,89,255,.14)!important;outline:none}
.login-btn,.btn-login{border-radius:999px!important;min-height:50px;background:var(--bb-accent)!important;letter-spacing:-.01em}
.login-btn:hover,.btn-login:hover{background:var(--bb-accent-press)!important}
/* "Forgot password?" link and reset panel links injected by bb-pwreset.js carry an inline green */
.login-box a[href="#"]{color:var(--bb-accent)!important;text-underline-offset:3px}
@media (max-width:480px){.login-box{padding:30px 22px!important;border-radius:20px!important}}

/* ---------- Surfaces ---------- */
.card,.stat-card,.table-card,.content-card,.earn-card,.social-card,.profile-sidebar-card,
.kpi-card,.act-kpi-card,.mk-cat-card,.step-card,.benefit-card,.success-card,.am-card,
.analytics-card,.chart-card,.stat-box,.resort-card,.wizard-panel,.review-block,.table-wrap{
  border-radius:16px!important;border-color:var(--bb-line)!important;box-shadow:0 1px 2px rgba(18,20,25,.05)!important}
@media (hover:hover){
  .content-card,.mk-cat-card,.resort-card,.kpi-card,.act-kpi-card,.stat-card,.earn-card,.social-card{transition:transform .35s var(--bb-ease),box-shadow .35s var(--bb-ease)!important}
  .content-card:hover,.mk-cat-card:hover,.resort-card:hover,.kpi-card:hover,.act-kpi-card:hover,.stat-card:hover,.earn-card:hover,.social-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(18,20,25,.28)!important}
}
.page-header h1{font-size:clamp(1.6rem,2.4vw,2.1rem)!important;font-weight:600!important}

/* ---------- Buttons, chips, badges ---------- */
.btn,.btn-primary,.btn-outline,.btn-accent,.btn-danger,.btn-sm,.btn-dl,.btn-dl-outline,.btn-submit,.btn-use,.btn-whatsapp,.btn-logout,
.modal-submit,.cf-btn,.period-btn,.mk-filter-btn,.snap-btn,.social-btn{
  border-radius:999px!important;transition:background-color .2s var(--bb-ease),color .2s var(--bb-ease),border-color .2s var(--bb-ease),box-shadow .2s var(--bb-ease),transform .16s var(--bb-ease)!important;-webkit-tap-highlight-color:transparent}
.btn:active,.btn-primary:active,.btn-outline:active,.btn-accent:active,.btn-danger:active,.btn-dl:active,.btn-dl-outline:active,.btn-submit:active,.btn-use:active,
.modal-submit:active,.cf-btn:active,.period-btn:active,.mk-filter-btn:active,.snap-btn:active,.social-btn:active,.login-btn:active,.btn-login:active{transform:scale(.97)}
.badge,.chip,.social-badge,.tier-badge,.ct-badge,.property-badge{border-radius:999px!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--bb-accent)}

/* ---------- Navigation ---------- */
.topbar-nav a,.nav-link,.sidebar-link,.sidebar-item{transition:background-color .2s var(--bb-ease),color .2s var(--bb-ease)!important}
.topbar-nav a{border-radius:999px!important}

/* ---------- Tables ---------- */
table tbody tr{transition:background-color .15s var(--bb-ease)}
@media (hover:hover){table tbody tr:hover{background-color:#F7F8FA}}

/* ---------- Modals and toasts ---------- */
.modal{border-radius:20px!important;box-shadow:var(--shadow-lg)!important}
.modal-backdrop.open,.modal-overlay.open,.modal-backdrop.visible{animation:bbFade .25s ease both}
.modal-backdrop.open .modal,.modal-overlay.open .modal,.modal-backdrop.visible .modal,.modal.open{animation:bbPop .45s var(--bb-ease) both}
.toast,#toast,.toast-item{border-radius:14px!important;animation:bbRise .45s var(--bb-ease) both}

/* ---------- Page changes: each section eases in, its cards follow in a short stagger ---------- */
.section.active{animation:bbIn .5s var(--bb-ease) both}
.section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card){animation:bbIn .55s var(--bb-ease) both}
.section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card):nth-child(2){animation-delay:.05s}
.section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card):nth-child(3){animation-delay:.1s}
.section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card):nth-child(4){animation-delay:.15s}
.section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card):nth-child(n+5){animation-delay:.2s}
.empty-state{animation:bbFade .5s ease both}

@keyframes bbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bbRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bbPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bbFade{from{opacity:0}to{opacity:1}}

/* Phones set to reduce motion still see gentle fades, never slides or pops */
@media (prefers-reduced-motion:reduce){
  .login-box,.section.active,.toast,#toast,.toast-item,
  .modal-backdrop.open .modal,.modal-overlay.open .modal,.modal-backdrop.visible .modal,.modal.open,
  .section.active :is(.kpi-card,.act-kpi-card,.stat-card,.earn-card,.content-card,.mk-cat-card,.step-card,.benefit-card,.analytics-card,.chart-card,.card,.table-card,.resort-card){animation-name:bbFade}
  .content-card:hover,.mk-cat-card:hover,.resort-card:hover,.kpi-card:hover,.act-kpi-card:hover,.stat-card:hover,.earn-card:hover,.social-card:hover{transform:none}
}