@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

/* ANTERIOR - INICIO */

/* =========================================================================
   ESTILOS GERAIS DA PÁGINA (Layout Base & Reset)
   ========================================================================= */
@tailwind components;@tailwind utilities;body:has(.fatal-page),body:has(.jumbotron-cover-user),html:has(.fatal-page),html:has(.jumbotron-cover-user){min-height:100%;background:#1A0C2D!important}
body:has(.fatal-page),body:has(.jumbotron-cover-user){min-height:100vh;--fatal-header-offset:82px;--fatal-mobile-header-offset:112px}
body:has(.fatal-page) main[role=main],body:has(.jumbotron-cover-user) main[role=main]{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 12% 8%,rgba(212, 175, 152, 0.15),transparent 28rem),radial-gradient(circle at 86% 2%,rgba(212, 175, 152, 0.08),transparent 24rem),linear-gradient(135deg,#1A0C2D,#1A0C2D 48%,#1A0C2D)}
/* CSS variables for color scheme */
:root {
  --color-magenta:       #870f6c;   /* bronze principal (#87540f) */
  --color-magenta-light: #b61391;   /* bronze claro (#996827) */
  --color-magenta-mid:   #740d5c;   /* bronze medio (#996827) */
  --color-magenta-dark:  #580b47;   /* bronze escuro (#87540f) */
  --color-text-hover:   #FFFFFF;   /* cor do texto hover (#fdea9f) */
  --color-purple:       #6B46C1;   /* roxo escuro */
  --color-white:        #FFFFFF;   /* branco puro (#FFF) */
  --color-shadow-magenta: rgba(135, 15, 108, 0.26);
  --color-shadow-magenta-hover: rgba(135, 15, 108, 0.38);
  --color-icon-white:   #FFFFFF;   /* cor dos ícones */
  --color-phone-bg:     #2a541a;   /* verde Ver Telefone */
  --color-phone-border: #2a541a;
  --color-phone-hover-bg: #346820;   /* levemente mais claro */
  --color-phone-hover-border: #346820;
  --color-phone-shadow: rgba(42, 84, 26, 0.28);
  --color-phone-hover-shadow: rgba(52, 104, 32, 0.42);
  --color-profile-bg:   #151614;   /* cinza escuro Ver Perfil */
  --color-profile-border: #151614;
  --color-profile-hover-bg: #252724;   /* levemente mais claro */
  --color-profile-hover-border: #252724;
  --color-profile-shadow: rgba(21, 22, 20, 0.28);
  --color-profile-hover-shadow: rgba(37, 39, 36, 0.42);
  --color-share-hover-bg: #870f6c;   /* magenta para compartilhar */
  --color-msg-bg:       #fdea9f;   /* amarelo claro / gold */
  --color-msg-hover-bg: #ffefa8;   /* amarelo claro hover */
  
  /* Hero Fold gradient text colors (more vibrant / eye-catching) */
  --color-hero-grad-start: #FFE5D9;  /* soft glowing light gold */
  --color-hero-grad-mid:   #E29578;  /* warm copper */
  --color-hero-grad-end:   #C57B57;  /* rich vibrant bronze */
  --color-kicker-text:     #FFE5D9;
  --color-kicker-dot:      #E29578;
}

body:has(.fatal-page) main[role=main]>.fatal-page,body:has(.jumbotron-cover-user) main[role=main]>.jumbotron-cover-user{flex:1 0 auto}
body:has(.fatal-page) main[role=main]>div.py-4:has(>footer.container),body:has(.fatal-page) main[role=main]>footer,body:has(.jumbotron-cover-user) main[role=main]>div.py-4:has(>footer.container),body:has(.jumbotron-cover-user) main[role=main]>footer{margin-top:auto;flex-shrink:0}
.fatal-page{background:radial-gradient(circle at 12% 8%,rgba(212, 175, 152, 0.15),transparent 28rem),radial-gradient(circle at 86% 2%,rgba(212, 175, 152, 0.1),transparent 24rem),radial-gradient(circle at 50% 42%,rgba(212, 175, 152, 0.07),transparent 34rem),linear-gradient(135deg,#1A0C2D,#1A0C2D 48%,#1A0C2D);color:var(--color-white);overflow:hidden}
.fatal-shell{position:relative;}
.fatal-hero-fold{align-items:center;padding:32px 0}
.fatal-kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid rgba(248, 240, 240, 0.14);border-radius:999px;background:rgba(248, 240, 240, 0.07);background:linear-gradient(100deg,var(--color-hero-grad-end),var(--color-hero-grad-mid) 48%,var(--color-hero-grad-start));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;transition:color .3s ease}
.fatal-kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--color-kicker-dot)!important;box-shadow:0 0 22px rgba(226, 149, 120, 0.9)!important}
.fatal-title{max-width:780px;margin:18px 0 0;color:var(--color-white);font-size:clamp(2.25rem,4.8vw,5rem);font-weight:950;line-height:.98;letter-spacing:0}
.fatal-gradient-text{background:linear-gradient(100deg,var(--color-hero-grad-end),var(--color-hero-grad-mid) 48%,var(--color-hero-grad-start))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.fatal-lead{max-width:680px;margin-top:18px;color:rgba(248, 240, 240, 0.72);font-size:1.02rem;line-height:1.65}
.fatal-glass{border:1px solid rgba(248, 240, 240, 0.13);background:linear-gradient(145deg,rgba(248, 240, 240, 0.11),rgba(248, 240, 240, 0.04));box-shadow:0 24px 80px rgba(26, 12, 45, 0.34);backdrop-filter:blur(18px)}
.fatal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:680px;margin-top:24px}
.fatal-stat{border-radius:8px;padding:14px 16px}
.fatal-stat strong{display:block;color:var(--color-white);font-size:1.55rem;font-weight:950}
.fatal-stat span{display:block;margin-top:2px;color:rgba(248, 240, 240, 0.52);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.fatal-search{position:relative;display:flex;align-items:center;gap:10px;max-width:720px;margin-top:24px;padding:8px;border-radius:8px}
.fatal-search-icon,.fatal-search button{width:52px;height:52px;flex:0 0 52px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.fatal-search-icon{background:rgba(248, 240, 240, 0.09);color:var(--color-white)}
.fatal-search input{min-width:0;height:52px;flex:1;border:1px solid rgba(248, 240, 240, 0.14);border-radius:6px;background:rgba(248, 240, 240, 0.08);color:var(--color-white);padding:0 16px;font-weight:800;outline:0}
.fatal-search input::placeholder{color:rgba(248, 240, 240, 0.58)}
.fatal-search input:focus{border-color:rgba(232, 197, 175, 0.72);box-shadow:0 0 0 4px rgba(232, 197, 175, 0.11)}
.fatal-button{border:1px solid rgba(160, 114, 90, 0.47)!important;border-radius:6px!important;background:var(--color-magenta)!important;background-image:var(--color-magenta)!important;color:var(--color-white)!important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26)!important;text-decoration:none!important}
.btn-arrow,.btn-main,.btn-primary,.fatal-action-main,body:has(.fatal-page) #alertAdult .btn-primary,body:has(.fatal-page) .showBanner .btn-primary{border:1px solid rgba(160, 114, 90, 0.47)!important;border-radius:6px!important;background:var(--color-magenta)!important;background-image:var(--color-magenta)!important;color:var(--color-white)!important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26)!important}
.fatal-hero-media{position:relative;max-width:640px;margin-left:-34px;margin-right:-36px}
.fatal-hero-media:before{content:none}
.fatal-hero-media-inner{position:relative;overflow:visible;border-radius:0;padding:0}
.fatal-hero-media img{width:100%;height:min(66vh,610px);min-height:520px;object-fit:contain;object-position:center bottom;border-radius:0;filter:drop-shadow(0 36px 70px rgba(26, 12, 45, 0.42))}
.fatal-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:48px 0 24px}
.fatal-showcase{background:var(--fatal-panel-gradient);color:#1A0C2D;padding:58px 0 96px}
.fatal-showcase .fatal-section-head{margin-top:0}
.fatal-showcase .fatal-section-title{color:#1A0C2D}
.fatal-showcase .fatal-eyebrow{color:var(--color-magenta)}
body:has(.fatal-page) .navbar.p-nav{min-height:78px;border-bottom:1px solid rgba(160, 114, 90, 0.42)!important;background:radial-gradient(circle at top right,rgba(212, 175, 152, 0.15) 0,rgba(35, 18, 56, 0.43) 35%,rgba(26, 12, 45, 0.58) 70%,rgba(26, 12, 45, 0.61) 100%)!important;color:var(--color-white)!important;box-shadow:0 18px 54px rgba(26, 12, 45, 0.32)!important;backdrop-filter:blur(18px)}
body:has(.fatal-page) .navbar.p-nav:after{display:none}
body:has(.fatal-page) .navbar-brand{display:inline-flex;align-items:center;min-height:52px;padding-top:0;padding-bottom:0}
body:has(.fatal-page) .navbar-brand img{display:block;height:auto!important;max-height:44px;width:auto!important;max-width:152px!important;filter:drop-shadow(0 10px 24px rgba(248, 240, 240, 0.1))}
.navbar-brand .fatal-brand-logo{display:block;height:auto!important;max-height:44px;width:auto!important;max-width:152px!important;object-fit:contain}
body:has(.fatal-page) .navbar-brand .fatal-brand-logo{object-fit:contain;transform:none}
body:has(.fatal-page) .header-search-premium{margin-left:clamp(14px,2vw,30px);margin-right:clamp(10px,1.4vw,22px)}
body:has(.fatal-page) .search-pill-header{position:relative;display:flex;align-items:center;gap:2px;width:clamp(220px,24vw,318px);min-width:220px;max-width:318px;min-height:46px;padding:5px 6px 5px 14px!important;border:1px solid rgba(232, 197, 175, 0.26);border-radius:5px;background:linear-gradient(135deg,rgba(248, 240, 240, 0.12),rgba(248, 240, 240, 0.035)),rgba(26, 12, 45, 0.28);box-shadow:0 14px 34px rgba(26, 12, 45, 0.26),inset 0 0 0 1px rgba(248, 240, 240, 0.045);backdrop-filter:blur(16px)}
body:has(.fatal-page) .search-pill-header:before{content:"\f3c5";font-family:Font Awesome\ 5 Free;font-weight:900;display:inline-flex;align-items:center;justify-content:center;width:16px;min-width:16px;color:var(--color-white);font-size:13px;opacity:.92}
body:has(.fatal-page) .search-pill-header.city-active{border-color:rgba(35, 18, 56, 0.81);background:linear-gradient(135deg,rgba(232, 197, 175, 0.12),rgba(160, 114, 90, 0.1)),rgba(26, 12, 45, 0.3)}
body:has(.fatal-page) .search-input-header{min-width:0;flex:1;height:34px;border:0!important;outline:0!important;background:transparent!important;color:var(--color-white)!important;font-size:13px;font-weight:800;padding-left:1px!important;padding-right:2px!important;box-shadow:none!important;border-radius:5px!important}
body:has(.fatal-page) .search-input-header::placeholder{color:rgba(248, 240, 240, 0.58)}
body:has(.fatal-page) .btn-clear-city,body:has(.fatal-page) .btn-header-search{width:36px;height:36px;flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:999px}
body:has(.fatal-page) .btn-header-search{border:1px solid var(--color-magenta) !important;border-radius:6px !important;background:var(--color-magenta) !important;background-image:var(--color-magenta) !important;color:var(--color-white) !important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26) !important}
body:has(.fatal-page) .btn-clear-city{background:rgba(248, 240, 240, 0.1)!important;color:var(--color-white)!important}
body:has(.fatal-page) .btn-clear-city i{color:var(--color-white)!important}
body:has(.fatal-page) #dropdownCreators{top:54px!important;overflow:hidden;border:1px solid rgba(232, 197, 175, 0.2);border-radius:8px!important;background:rgba(26, 12, 45, 0.96);box-shadow:0 22px 54px rgba(26, 12, 45, 0.42);backdrop-filter:blur(18px)}
body:has(.fatal-page) #dropdownCreators .list-group-item{border-color:rgba(248, 240, 240, 0.08);background:transparent;color:rgba(248, 240, 240, 0.82)}
body:has(.fatal-page) #dropdownCreators .list-group-item:hover{background:rgba(160, 114, 90, 0.16);color:var(--color-white)}
body:has(.fatal-page) .header-search-premium,body:has(.jumbotron-cover-user) .header-search-premium{position:static!important}
body:has(.fatal-page) .header-search-premium,body:has(.jumbotron-cover-user) .header-search-premium{position:relative!important;width:max-content;max-width:100%}
body:has(.fatal-page) #dropdownCreators,body:has(.jumbotron-cover-user) #dropdownCreators{position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:auto!important;width:100%!important;max-width:100%!important;max-height:min(58vh,420px);overflow-y:auto!important;border-radius:8px!important;z-index:2140!important}
body:has(.fatal-page) .navbar.p-nav .nav-link{color:rgba(248, 240, 240, 0.86)!important;font-weight:850}
body:has(.fatal-page) .navbar.p-nav .nav-link:hover{color:var(--color-magenta-light)!important}
body:has(.fatal-page) .navbar.p-nav .btn-light,
body:has(.fatal-page) .navbar.p-nav .btn-main,
body:has(.fatal-page) .navbar.p-nav .btn-primary{
  border:1px solid var(--color-magenta) !important;
  border-radius:6px !important;
  background:var(--color-magenta) !important;
  background-image:var(--color-magenta) !important;
  color:var(--color-white) !important;
  box-shadow:0 14px 36px rgba(160,114,90,.26) !important;
  font-weight:900;
}
body:has(.fatal-page) .navbar-toggler{color:var(--color-white)!important}
body:has(.fatal-page) .footer_background_color,body:has(.fatal-page) footer{border-bottom:1px solid rgba(160, 114, 90, 0.42)!important;background:radial-gradient(circle at top right, rgba(26, 12, 45, 0.49) 0, rgba(26, 12, 45, 0.43) 35%, rgba(26, 12, 45, 0.58) 70%, rgba(26, 12, 45, 0.61) 100%)!important;color:var(--color-white)!important;backdrop-filter:blur(18px)}
body:has(.fatal-page) div.py-4:has(>footer.container){padding:34px 0 28px!important;border-top:1px solid rgba(160, 114, 90, 0.42)!important;background:radial-gradient(circle at top right,rgba(212, 175, 152, 0.15) 0,rgba(35, 18, 56, 0.43) 35%,rgba(26, 12, 45, 0.58) 70%,rgba(26, 12, 45, 0.61) 100%)!important;box-shadow:0 -18px 54px rgba(26, 12, 45, 0.34)}
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container{min-height:0;display:block}
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row{width:100%;display:grid;grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(130px,.65fr));align-items:start;gap:24px;margin:0}
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container .col-md-3{display:block;flex:none;max-width:none;width:100%;padding:0;margin:0!important}
/*body:has(.fatal-page) div.py-4:has(>footer.container) footer.container .col-md-3:first-child{border:1px solid rgba(248, 240, 240, 0.12);border-radius:8px;background:rgba(26, 12, 45, 0.18);padding:18px;box-shadow:0 18px 45px rgba(26, 12, 45, 0.2)}*/
body:has(.fatal-page) footer.container{position:relative}
body:has(.fatal-page) footer.container:before{display:none}
body:has(.fatal-page) footer h6{color:var(--color-white)!important;font-size:11px;font-weight:950;letter-spacing:.14em;margin-bottom:10px}
body:has(.fatal-page) .copyright,body:has(.fatal-page) .footer-tiny,body:has(.fatal-page) .link-footer,body:has(.fatal-page) footer small{color:rgba(248, 240, 240, 0.7)!important}
body:has(.fatal-page) .footer-tiny:hover,body:has(.fatal-page) .link-footer:hover{color:var(--color-magenta-light)!important;text-decoration:none}
body:has(.fatal-page) footer .list-unstyled{margin-bottom:0}
body:has(.fatal-page) footer .list-unstyled li{margin-bottom:7px;line-height:1.25}
body:has(.fatal-page) .link-footer{font-size:13px}
body:has(.fatal-page) div.py-4:has(>footer.container) .w-100{width:100%!important;display:block;margin-top:14px}
body:has(.fatal-page) div.py-4:has(>footer.container) .w-100>span{display:block;color:rgba(248, 240, 240, 0.64);font-size:12px;margin-bottom:8px}
body:has(.fatal-page) div.py-4:has(>footer.container) .list-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body:has(.fatal-page) .ico-social{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(248, 240, 240, 0.14);border-radius:999px;background:rgba(248, 240, 240, 0.08);color:var(--color-white)!important;transition:transform .2s ease,background .2s ease,border-color .2s ease}
body:has(.fatal-page) .ico-social:hover{transform:translateY(-2px);border-color:rgba(232, 197, 175, 0.38);background:rgba(248, 240, 240, 0.14)}
body:has(.fatal-page) footer img{max-height:58px;width:auto;filter:drop-shadow(0 14px 24px rgba(26, 12, 45, 0.22))}
body:has(.fatal-page) footer.text-center{padding-top:14px;padding-bottom:14px;border-top:1px solid rgba(248, 240, 240, 0.1);background:rgba(26, 12, 45, 0.2)!important}
body:has(.fatal-page) .copyright{font-size:12px}
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row{grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row{grid-template-columns:1fr}
.fatal-hero-fold{min-height:100vh;padding:24px 0}
.fatal-title{font-size:clamp(2.2rem,4.35vw,4.65rem)}
.fatal-kicker{padding:8px 14px}
.fatal-hero-media img{height:500px;min-height:0}
.fatal-eyebrow{color:var(--color-magenta-mid);font-size:11px;font-weight:950;letter-spacing:.22em;text-transform:uppercase}
.fatal-section-title{margin:8px 0 0;color:var(--color-white);font-size:clamp(1.8rem,3vw,3rem);font-weight:950}
.fatal-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),340px));justify-content:center;align-items:start;gap:24px}
.fatal-card{position:relative;width:min(100%,340px);max-width:340px;height:auto;justify-self:center;display:flex;flex-direction:column;overflow:visible;border-radius:8px;border:1px solid rgba(248, 240, 240, 0.14);background:radial-gradient(circle at 16% 0,rgba(212, 175, 152, 0.15),transparent 34%),linear-gradient(180deg,#1A0C2D,#1A0C2D 58%,#1A0C2D);color:var(--color-white);box-shadow:0 26px 78px rgba(26, 12, 45, 0.26);isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease}
.fatal-card:before{inset:-1px;border-radius:8px;background:linear-gradient(135deg,rgba(160, 114, 90, 0.3),transparent 34%,rgba(160, 114, 90, 0.34));opacity:.58;z-index:-1}
.fatal-card:after,.fatal-card:before{content:"";position:absolute;pointer-events:none}
.fatal-card:after{inset:auto 18px -18px;height:38px;border-radius:999px;background:linear-gradient(90deg,rgba(160, 114, 90, 0.22),rgba(160, 114, 90, 0.18));filter:blur(22px);opacity:.74;z-index:-2}
.fatal-card:hover{transform:translateY(-6px);border-color:rgba(160, 114, 90, 0.58);box-shadow:0 34px 96px rgba(160, 114, 90, 0.18);filter:saturate(1.04)}
.fatal-card:has(.fatal-rate-menu[open]){z-index:40}
.fatal-card-premium{border-color:rgba(160, 114, 90, 0.92);background:radial-gradient(circle at 15% 0,rgba(212, 175, 152, 0.15),transparent 30%),radial-gradient(circle at 92% 4%,rgba(212, 175, 152, 0.15),transparent 36%),linear-gradient(165deg,#231238,#1A0C2D 33%,#1A0C2D 66%,#1A0C2D);box-shadow:0 34px 92px rgba(160, 114, 90, 0.38),inset 0 0 0 1px rgba(232, 197, 175, 0.2),0 0 64px rgba(160, 114, 90, 0.18)}
.fatal-card-premium:before{background:linear-gradient(135deg,rgba(232, 197, 175, 0.62),transparent 24%,rgba(160, 114, 90, 0.62) 56%,rgba(160, 114, 90, 0.58));opacity:.74}
.fatal-card-premium:after{inset:auto 10px -22px;height:48px;background:linear-gradient(90deg,rgba(212, 175, 152, 0.34),rgba(160, 114, 90, 0.42),rgba(35, 18, 56, 0.26));opacity:1}
.fatal-card-premium:hover{border-color:rgba(212, 175, 152, 0.95);box-shadow:0 42px 108px rgba(160, 114, 90, 0.44),inset 0 0 0 1px rgba(232, 197, 175, 0.28),0 0 72px rgba(212, 175, 152, 0.22)}
.fatal-card-premium .fatal-card-media:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent,rgba(248, 240, 240, 0.18) 42%,transparent 54%);transform:translateX(-130%);animation:fatal-premium-sweep 5.4s ease-in-out infinite;pointer-events:none}
.fatal-card-media{position:relative;flex:0 0 clamp(270px,24vw,320px);height:clamp(270px,24vw,320px);overflow:hidden;border-radius:8px 8px 0 0;background:#1A0C2D}
.fatal-card-media img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.fatal-card-media:after{content:"";position:absolute;inset:auto 0 0;height:25%;background:linear-gradient(180deg,#00000000 0%,rgb(26 12 45 / 39%) 18%,rgb(26 12 45 / 79%) 100%);pointer-events:none;z-index:3}
.fatal-badge-row{position:absolute;left:14px;right:14px;top:14px;z-index:5;display:flex;justify-content:space-between;gap:8px}
.fatal-badge{display:inline-flex;align-items:center;gap:5px;min-height:28px;border-radius:999px;padding:6px 10px;background:rgba(26, 12, 45, 0.52);color:var(--color-white);font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.fatal-badge.vip{position:relative;border:1px solid rgba(232, 197, 175, 0.72);background:linear-gradient(135deg,var(--color-white),var(--color-magenta) 46%,var(--color-magenta));color:#1A0C2D;box-shadow:0 10px 28px rgba(232, 197, 175, 0.24);overflow:hidden}
.fatal-badge.vip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(248, 240, 240, 0.46),transparent);transform:translateX(-140%) skewX(-18deg);animation:fatal-vip-badge-shine 3.2s ease-in-out infinite}
.fatal-badge.online{background:var(--color-magenta-light);color:#1A0C2D}
.fatal-card-name{position:absolute;left:18px;right:18px;bottom:16px;z-index:5}
.fatal-card-name h3{margin:0;color:var(--color-white);font-size:1.36rem;font-weight:950;line-height:1.1}
.fatal-card-name h3,.fatal-location{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fatal-location{margin-top:7px;color:rgba(248, 240, 240, 0.72);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fatal-card-body{position:relative;overflow:visible;flex:0 0 auto;display:flex;flex-direction:column;padding:15px 16px 17px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,rgba(248, 240, 240, 0.035),transparent 44%),rgba(26, 12, 45, 0.94)}
.fatal-card-premium .fatal-card-body{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(232, 197, 175, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(212, 175, 152, 0.18) 0%, transparent 44%),
    linear-gradient(180deg,
      rgba(56, 36, 18, 0.98) 0%,
      rgba(40, 24, 10, 0.98) 40%,
      rgba(20, 12, 5, 1) 100%
    ) !important;
  box-shadow: inset 0 1px 0 rgba(232, 197, 175, 0.28), inset 0 -1px 0 rgba(160, 114, 90, 0.08) !important;
}
.fatal-card-premium .fatal-card-media{background:#1A0C2D}
.fatal-card-premium .fatal-card-media:after{background:linear-gradient(180deg,#00000000 0%,rgb(26 12 45 / 39%) 18%,rgb(26 12 45 / 79%) 100%)}
.fatal-card-premium .fatal-card-text,.fatal-card-premium .fatal-location,.fatal-card-premium .fatal-visited{color:rgba(248, 240, 240, 0.72)}
.fatal-card-premium .fatal-card-name h3{color:var(--color-white);text-shadow:0 2px 18px rgba(160, 114, 90, 0.72)}
.fatal-price-line{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:8px;min-height:0;margin:0 0 13px}
.fatal-card-price-float{position:absolute;left:16px;bottom:72px;z-index:8;max-width:calc(100% - 32px)}
.fatal-price-button{display:block;min-width:132px;border:1px solid rgba(160, 114, 90, 0.54);border-radius:8px;background:linear-gradient(180deg,rgba(26, 12, 45, 0.92),rgba(26, 12, 45, 0.88)),rgba(160, 114, 90, 0.1);color:var(--color-white);padding:10px 12px;text-align:left;backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(26, 12, 45, 0.34),inset 0 0 0 1px rgba(248, 240, 240, 0.05)}
.fatal-rate-wrap{position:relative;min-width:0;flex:1;z-index:20}
.fatal-rate-menu{position:relative;z-index:30}
.fatal-rate-menu[open]{z-index:90}
.fatal-rate-menu summary{cursor:pointer;list-style:none}
.fatal-rate-menu summary::-webkit-details-marker{display:none}
.fatal-rate-options{position:absolute;top:calc(100% + 8px);left:0;z-index:100;width:246px;max-width:calc(100vw - 48px);max-height:220px;overflow-y:auto;border:1px solid rgba(248, 240, 240, 0.12);border-radius:8px;background:rgba(26, 12, 45, 0.98);padding:8px;box-shadow:0 22px 54px rgba(26, 12, 45, 0.58);backdrop-filter:blur(18px)}
.fatal-card-price-float .fatal-rate-options{top:auto;bottom:calc(100% + 8px)}
.fatal-card-body .fatal-rate-options{position:absolute;width:min(246px,calc(100vw - 48px));max-width:none;max-height:220px;margin-top:0;box-shadow:0 24px 64px rgba(26, 12, 45, 0.66),inset 0 0 0 1px rgba(248, 240, 240, 0.04)}
.fatal-card-premium .fatal-price-button{border-color:rgba(212, 175, 152, 0.68);background:radial-gradient(circle at 90% 0, rgba(212, 175, 152, 0.15), transparent 48%), linear-gradient(180deg, rgb(56 36 18 / 96%), rgb(71 48 11 / 96%)) !important;box-shadow:0 16px 38px rgba(160, 114, 90, 0.28),inset 0 0 0 1px rgba(232, 197, 175, 0.12)}
.fatal-card-premium .fatal-rate-options{border-color:rgba(232, 197, 175, 0.36);background:radial-gradient(circle at 0 0,rgba(212, 175, 152, 0.14),transparent 44%),rgba(26, 12, 45, 0.98)}
.fatal-rate-option{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:6px;padding:8px 9px;color:rgba(248, 240, 240, 0.82);font-size:12px;font-weight:800}
.fatal-rate-option:hover{background:rgba(248, 240, 240, 0.07)}
.fatal-rate-option b{color:var(--color-magenta-light);white-space:nowrap}
.fatal-price-button small{display:block;color:rgba(248, 240, 240, 0.62);font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.fatal-price-prefix{font-size:8px;font-weight:950;letter-spacing:.06em;opacity:.74}
.fatal-price-button strong{display:block;color:var(--color-magenta-light);font-size:1rem;font-weight:950}
.fatal-price-button strong.fatal-price-consult{font-size:.84rem;line-height:2.8;letter-spacing:.02em;text-transform:uppercase}
.fatal-price-side{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(22px,1fr);gap:4px;align-self:stretch;min-width:84px;max-width:32%}
.fatal-mini-pill{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:100%;border:1px solid rgba(248, 240, 240, 0.12);border-radius:5px;background:rgba(248, 240, 240, 0.09);color:rgba(248, 240, 240, 0.84);padding:6px 5px;font-size:10px;font-weight:900;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fatal-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:13px}
.fatal-info-grid span{border:1px solid rgba(248, 240, 240, 0.12);border-radius:6px;background:linear-gradient(180deg,rgba(248, 240, 240, 0.09),rgba(248, 240, 240, 0.045));padding:8px 4px;color:rgba(248, 240, 240, 0.82);font-size:11px;font-weight:850;text-align:center}
.fatal-card-text{height:97px;margin:0 0 12px;color:rgba(248, 240, 240, 0.64);font-size:12.5px;line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;text-overflow:ellipsis}
#containerWrapCreators .fatal-card .fatal-card-text,.fatal-featured-grid .fatal-card .fatal-card-text{height:97px!important;max-height:97px!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;text-overflow:ellipsis}
.fatal-actions{display:flex;align-items:center;gap:9px}
.fatal-action-icon,.fatal-action-main{min-height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:950;text-decoration:none!important}
.fatal-action-main{flex:1;padding:0 16px;font-size:13.5px;box-shadow:0 14px 28px rgba(160, 114, 90, 0.2)}
.fatal-action-icon{width:46px;flex:0 0 46px;color:var(--color-white)!important;border:1px solid rgba(248, 240, 240, 0.1);transition:transform .18s ease,background .18s ease}
.fatal-action-icon.whatsapp{background:var(--color-magenta);color:#1A0C2D!important;box-shadow:0 12px 26px rgba(160, 114, 90, 0.2)}
.fatal-action-icon:hover{transform:translateY(-2px);background:rgba(248, 240, 240, 0.17)}
body:has(.fatal-page) #alertAdult .modal-dialog{max-width:520px}
body:has(.fatal-page) #alertAdult .modal-content{overflow:hidden;border:1px solid rgba(232, 197, 175, 0.22);border-radius:8px;background:radial-gradient(circle at top right,rgba(212, 175, 152, 0.15),transparent 50%),linear-gradient(135deg,#1A0C2D,#1A0C2D 70%);color:var(--color-white);box-shadow:0 32px 90px rgba(26, 12, 45, 0.54)}
body:has(.fatal-page) #alertAdult .modal-body{padding:30px 30px 12px!important}
body:has(.fatal-page) #alertAdult .modal-body p{margin:0;color:rgba(248, 240, 240, 0.82);font-size:15px;line-height:1.65}
body:has(.fatal-page) #alertAdult .modal-footer{padding:12px 30px 30px!important;align-items:center}
body:has(.fatal-page) #alertAdult .btn-primary{border:1px solid rgba(160, 114, 90, 0.47)!important;border-radius:6px;padding:12px 20px;background:var(--color-magenta)!important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26)!important;font-weight:900}
body:has(.fatal-page) #alertAdult a{color:rgba(248, 240, 240, 0.68)!important}
body:has(.fatal-page) .showBanner{position:fixed!important;z-index:9998;left:50%;bottom:18px;width:min(760px,calc(100vw - 28px));transform:translateX(-50%);border:1px solid rgba(232, 197, 175, 0.2);border-radius:8px;background:rgba(26, 12, 45, 0.86)!important;color:rgba(248, 240, 240, 0.82);box-shadow:0 22px 56px rgba(26, 12, 45, 0.42);backdrop-filter:blur(18px)}
body:has(.fatal-page) .showBanner .btn-primary{border:1px solid rgba(160, 114, 90, 0.47)!important;border-radius:6px;background:var(--color-magenta)!important;color:var(--color-white)!important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26)!important;font-weight:900}
.fatal-hero-fold{padding:92px 0 42px}
.fatal-stats{grid-template-columns:1fr}
.fatal-search{flex-wrap:wrap}
.fatal-search input{flex-basis:calc(100% - 62px)}
.fatal-section-head{align-items:flex-start;flex-direction:column}
.fatal-card{width:min(100%,340px);max-width:340px}
body:has(.jumbotron-cover-user) .search-pill-header{width:clamp(220px,24vw,318px);min-width:220px;max-width:318px;gap:2px;padding-left:14px!important;border:1px solid rgba(232, 197, 175, 0.26);border-radius:5px;background:linear-gradient(135deg,rgba(248, 240, 240, 0.12),rgba(248, 240, 240, 0.035)),rgba(26, 12, 45, 0.28)!important;box-shadow:0 14px 34px rgba(26, 12, 45, 0.26),inset 0 0 0 1px rgba(248, 240, 240, 0.045);backdrop-filter:blur(16px)}
body:has(.jumbotron-cover-user) .search-input-header{background:transparent!important;color:var(--color-white)!important}
body:has(.jumbotron-cover-user) .search-input-header::placeholder{color:rgba(248, 240, 240, 0.58)}
body:has(.jumbotron-cover-user) .btn-header-search{border:1px solid rgba(160, 114, 90, 0.47)!important;border-radius:6px!important;background:var(--color-magenta)!important;color:var(--color-white)!important;box-shadow:0 14px 36px rgba(160, 114, 90, 0.26)!important}
.fatal-hero-fold{min-height:100vh;display:flex;flex-direction:column}
body:has(.fatal-page),body:has(.jumbotron-cover-user){--fatal-mobile-header-offset:116px}
body:has(.fatal-page) .fatal-hero-fold{padding-top:var(--fatal-mobile-header-offset)!important}
body:has(.fatal-page) .fatal-creators-page{padding-top:var(--fatal-mobile-header-offset)!important}
body:not(:has(.fatal-page)):not(:has(.jumbotron-cover-user)) main[role=main]:not(.h-100){padding-top:94px}
body:has(.fatal-page),body:has(.jumbotron-cover-user){--fatal-mobile-header-offset:124px}
body:not(:has(.fatal-page)):not(:has(.jumbotron-cover-user)) main[role=main]:not(.h-100){padding-top:104px}
.fatal-page .fatal-shell{overflow-x:hidden}
.fatal-page .fatal-hero-fold{box-sizing:border-box;display:flex;align-items:center;padding:18px 0 max(30px,env(safe-area-inset-bottom))!important}
.fatal-page .fatal-hero-fold .container{width:100%}
.fatal-page .fatal-kicker{width:max-content;max-width:100%;margin-bottom:18px;font-size:11px;letter-spacing:.16em}
.fatal-page .fatal-title{font-size:clamp(36px,11vw,52px)!important;line-height:.98!important;margin-bottom:16px!important;max-width:100%}
.fatal-page .fatal-lead{font-size:15px!important;line-height:1.55!important;margin-bottom:18px!important}
.fatal-page .fatal-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:14px!important}
.fatal-page .fatal-stat{min-height:74px!important;padding:12px 10px!important;border-radius:8px!important}
.fatal-page .fatal-stat strong{font-size:clamp(20px,6vw,30px)!important;white-space:nowrap}
.fatal-page .fatal-stat span{font-size:8px!important;letter-spacing:.1em!important;line-height:1.15!important}
.fatal-page .fatal-search{display:grid!important;grid-template-columns:46px minmax(0,1fr) 52px!important;align-items:center!important;gap:8px!important;width:100%!important;padding:8px!important;border-radius:8px!important}
.fatal-page .fatal-search-icon{width:46px!important;height:46px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.fatal-page .fatal-search input{min-width:0!important;height:46px!important;padding:0 8px!important;font-size:14px!important}
.fatal-page #btn-buscar,.fatal-page #btn-clear-search{width:52px!important;height:46px!important;min-width:52px!important;margin:0!important;border-radius:7px!important;position:static!important}
.fatal-page .fatal-showcase{padding-top:42px!important}
.fatal-page .fatal-section-head{align-items:flex-start!important;gap:16px!important}





.fatal-scroll-footer {
  position: fixed;
  right: 22px;
  bottom: 75px;
  z-index: 1040;
  height: 46px;
  width: 46px;
  border: 0;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26);
  cursor: pointer;
  line-height: 1;
}

html body .fatal-scroll-footer,
html body button.fatal-scroll-footer {
  border-radius: 999px !important;
}

.fatal-scroll-footer i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  transform: translateY(0);
}

.fatal-scroll-footer span {
  display: none;
}

.fatal-scroll-footer:hover {
  transform: translateY(-2px);
}



/* Mantém o footer no final da página */
body:has(.fatal-page) main[role=main]>div.py-4:has(>footer.container),
body:has(.fatal-page) main[role=main]>footer,
body:has(.jumbotron-cover-user) main[role=main]>div.py-4:has(>footer.container),
body:has(.jumbotron-cover-user) main[role=main]>footer {
    margin-top: auto;
    flex-shrink: 0;
}



/* Container externo */
body:has(.fatal-page) div.py-4:has(>footer.container) {
    padding: 34px 0 28px!important;
    border-top: 1px solid rgba(160, 114, 90, 0.42)!important;
    background: radial-gradient(
        circle at top right,
        rgba(212, 175, 152, 0.15) 0,
        rgba(35, 18, 56, 0.43) 35%,
        rgba(26, 12, 45, 0.58) 70%,
        rgba(26, 12, 45, 0.61) 100%
    )!important;
    box-shadow: 0 -18px 54px rgba(26, 12, 45, 0.34);
}

body:has(.fatal-page) div.py-4:has(>footer.container) footer.container {
    min-height: 0;
    display: block;
}

/* Grid principal */
body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(240px,1.35fr) repeat(3,minmax(130px,.65fr));
    align-items: start;
    gap: 24px;
    margin: 0;
}

body:has(.fatal-page) div.py-4:has(>footer.container) footer.container .col-md-3 {
    display: block;
    flex: none;
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0!important;
}



body:has(.fatal-page) footer.container {
    position: relative;
}

body:has(.fatal-page) footer.container:before {
    display: none;
}

/* Títulos */
body:has(.fatal-page) footer h6 {
    color: var(--color-white)!important;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .14em;
    margin-bottom: 10px;
}

/* Links e textos */
body:has(.fatal-page) .copyright,
body:has(.fatal-page) .footer-tiny,
body:has(.fatal-page) .link-footer,
body:has(.fatal-page) footer small {
    color: rgba(248, 240, 240, 0.7)!important;
}

body:has(.fatal-page) .footer-tiny:hover,
body:has(.fatal-page) .link-footer:hover {
    color: var(--color-magenta-light)!important;
    text-decoration: none;
}

body:has(.fatal-page) footer .list-unstyled {
    margin-bottom: 0;
}

body:has(.fatal-page) footer .list-unstyled li {
    margin-bottom: 7px;
    line-height: 1.25;
}

body:has(.fatal-page) .link-footer {
    font-size: 13px;
}

/* Redes sociais */
body:has(.fatal-page) div.py-4:has(>footer.container) .w-100 {
    width: 100%!important;
    display: block;
    margin-top: 14px;
}

body:has(.fatal-page) div.py-4:has(>footer.container) .w-100>span {
    display: block;
    color: rgba(248, 240, 240, 0.64);
    font-size: 12px;
    margin-bottom: 8px;
}

body:has(.fatal-page) div.py-4:has(>footer.container) .list-social {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Logo */
body:has(.fatal-page) footer img {
    max-height: 58px;
    width: auto;
    filter: drop-shadow(0 14px 24px rgba(26, 12, 45, 0.22));
}

/* Rodapé inferior */
body:has(.fatal-page) footer.text-center {
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 1px solid rgba(248, 240, 240, 0.1);
    background: rgba(26, 12, 45, 0.2)!important;
}

/* Responsivo */
@media (max-width: 991px) {
    body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .menu_card_profile{
        display: flex !important;
    }

}

@media (max-width: 768px) {
    body:has(.fatal-page) div.py-4:has(>footer.container) footer.container>.row {
        grid-template-columns: 1fr;
    }

}


body:has(.fatal-page) footer.container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

.dropdown .btn {
    color: var(--color-white) !important;
    background-color: rgba(35, 18, 56, 0.471) !important;
    border-color: rgba(212, 175, 152, 0.369) !important;
}

body:has(.fatal-page) footer.text-center {
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 1px solid rgba(248, 240, 240, 0.1);
    background:  radial-gradient(circle at top right, rgba(26, 12, 45, 0.49) 0, rgba(26, 12, 45, 0.43) 35%, rgba(26, 12, 45, 0.58) 70%, rgba(26, 12, 45, 0.61) 100%) !important;
}

 
.dropdown.show .dropdown-menu, .dropdown-menu.open {
    background: rgba(35, 18, 56, 0.941);
}

/* ANTERIOR - FIM */




@layer components {
  /* O container principal da bolinha com o gradiente */
  .story-avatar-wrap {
    @apply relative inline-flex items-center justify-center rounded-full;
    width: 132px;
    height: 132px;
    background: linear-gradient(#1A0C2D, #1A0C2D) padding-box,
                linear-gradient(135deg, var(--color-magenta) 0%, var(--color-magenta) 42%, var(--color-magenta) 72%, var(--color-magenta-light) 100%) border-box;
    border: 3px solid transparent;
    box-shadow: 0 0 0 5px rgba(160, 114, 90, 0.16),
                0 24px 48px rgba(26, 12, 45, 0.36),
                0 0 38px rgba(160, 114, 90, 0.22);
  }

  /* O efeito de borda interna */
  .story-avatar-wrap::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(212, 175, 152, 0.22);
    border-radius: 999px;
    pointer-events: none;
  }
}

@layer utilities {
  .animate-premium-sweep {
    animation: fatal-premium-sweep 5.4s ease-in-out infinite;
  }

  @keyframes fatal-premium-sweep {
    0%, 58% { transform: translateX(-130%); opacity: 0; }
    70% { opacity: .55; }
    100% { transform: translateX(130%); opacity: 0; }
  }
}

 

#zuck-modal-content {
    position: relative !important;
}

 
/* Garante que os botões dentro dele sejam clicáveis */

.fatal-side-menu button {
    pointer-events: auto;
}

.fatal-side-menu button:hover {
    background: rgba(26, 12, 45, 0.4);
    transform: scale(1.1);
}

 
 /* 1. Mantemos o container como o Zuck espera (block) */
#zuck-modal-content .slides-pointers {
    position: absolute !important;
    bottom: 15px !important; /* Distância do fundo */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 10px !important; /* Margem lateral */
    z-index: 9999 !important;
}

/* 2. O container da barra: forçamos apenas a altura e o arredondamento */
#zuck-modal-content .slides-pointers .progress {
    height: 8px !important;
    background: rgba(26, 12, 45, 0.4) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: block !important; /* Mantido como block */
}

/* 3. O preenchimento com Gradiente */
/* O preenchimento com Gradiente Forçado */
#zuck-modal-content .slides-pointers .progress > span {
    display: block !important;
    height: 100% !important;
    width: 0% !important; 
    /* Adicionamos uma cor sólida caso o gradiente falhe */
    background-color: var(--color-magenta) !important; 
    /* O gradiente agora com maior contraste */
    background: var(--color-magenta) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 12px var(--color-magenta) !important;
    
    /* FORÇANDO A OPACIDADE */
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}


#zuck-modal-content .story-viewer .slides-pointers>*>.seen {
   background: var(--color-magenta) !important;

}

#zuck-modal-content .story-viewer .slides-pointers .progress {
   background: var(--color-magenta) !important;

}

 
/* 4. A animação aplicada no estado ativo */
#zuck-modal-content .slides-pointers .active .progress > span {
    animation: fatalStoryProgress 10s linear forwards !important;
}

@keyframes fatalStoryProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}








/* Ajuste para o Card de Stories */
.panel {
    background: #1A0C2D; /* Ajuste para a cor de fundo do seu tema */
    border-radius: 12px;
    color: var(--color-white);
}

.panel-heading {
    color: var(--color-white);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Garante que as bolinhas fiquem bem organizadas dentro do card */
#stories.stories.list {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    overflow-x: auto; /* Permite scroll horizontal se tiver muitos stories */
    padding-bottom: 10px !important;
}

/* Remove a classe 'fatal-hidden-stories-source' que escondia o conteúdo */
/* Certifique-se de que o seu script JS não dependa dessa classe para esconder o container */



/* 1. Container Pai: Transforma a lista em flexbox horizontal */
#stories.list {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px !important;
    align-items: center !important;
    padding: 0px;
}

/* 2. Ajuste individual de cada story */
#stories.list .story {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important; /* Deixa o tamanho automático */
    margin: 0 !important;   /* Remove margens extras da skin */
	    cursor: pointer;
}

/* 3. Garante que o link ocupe o espaço correto */
#stories.list .story .item-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* 4. Esconde o bloco de info (como você pediu) */
#stories.list .story .item-link .info {
    display: none !important;
}

/* Oculta o texto e informações nas bolinhas da lista */
.stories.list .story .item-link .info {
    display: none !important;
}

/* Opcional: Garante que o layout não fique "quebrado" com a ausência do texto */
.stories.list .story .item-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* =========================================================================
   CSS FINAL: CÍRCULO PERFEITO (Forçado)
   ========================================================================= */



/* =========================================================================
   CSS À PROVA DE DISTORÇÃO: Forçando Circularidade 80px
   ========================================================================= */

/* 1. O container da bolinha: Agora forçamos o tamanho absoluto */
/* 1. O container que mantém a estrutura fixa */
#stories.stories.snapssenger .story .item-link .item-preview {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 50% !important;
    position: relative !important; /* Essencial para o posicionamento do ::before */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    background: transparent !important; /* Fundo transparente */
}

/* 2. O pseudo-elemento que contém a borda giratória */
#stories.stories.snapssenger .story .item-link .item-preview::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: var(--color-magenta) !important;
    animation: rotate-border 3s linear infinite !important;
    z-index: 0 !important;
}

/* 3. A imagem: Fica parada por cima da borda */
#stories.stories.snapssenger .story .item-link .item-preview img {
    width: 74px !important; /* Levemente menor para mostrar a borda */
    height: 74px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #1A0C2D !important; /* Cor de fundo do site */
    position: relative !important;
    z-index: 1 !important; /* Fica acima da borda */
    display: block !important;
}

 

/* 5. Ajustes adicionais para manter o alinhamento */
#stories.stories.snapssenger .story .item-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    width: 80px !important;
}

#stories.stories.snapssenger .story .item-link .info {
    width: 90px !important;
    text-align: center !important;
    margin-top: 8px !important;
}

#stories.stories.snapssenger .story .item-link .info .name {
    font-size: 12px !important;
    color: var(--color-white) !important;
    display: block !important;
}





/* Container do botão */
.story-add-container {
    display: inline-block;
    text-align: center;
    width: 80px;
}

/* O preview do seu próprio story */
.story-add-container .item-preview {
    width: 80px !important;
    height: 80px !important;
    position: relative !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Ícone de + (Posicionado no canto) */
.story-add-container .plus-icon {
    position: absolute !important;
    bottom: 0px !important;
    right: 0px !important;
    background: var(--color-magenta) !important; /* Cor do botão */
    color: var(--color-white) !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid rgba(248, 240, 240, 0.92) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    z-index: 2 !important;
}

/* Imagem do usuário no botão */
.story-add-container .item-preview img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}



/* Container que terá a borda */
.fatal-sidebar-story-avatar-wrap {
    position: relative !important;
    display: inline-block !important;
    padding: 3px !important; /* Espessura da borda */
    border-radius: 50% !important;
}

/* Container Pai: Garante que tudo fique circular e alinhado */
.fatal-sidebar-story-avatar-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 66px; /* Tamanho final da bolinha (imagem + borda) */
    height: 66px;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    background: transparent !important;
    padding: 3px !important; /* Espessura da borda fina */
}

 

/* A borda animada (Fica ATRÁS da imagem) */
.fatal-sidebar-story-avatar-wrap.has-stories::before {
    content: "" !important;
    position: absolute !important;
    /* Centraliza perfeitamente sem precisar de margem negativa */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    
    background: var(--color-magenta) border-box !important;
    
    -webkit-mask: var(--color-white) content-box, var(--color-white) !important;
    mask: var(--color-white) content-box, var(--color-white) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    
    animation: rotate-border 3s linear infinite !important;
    z-index: 0 !important;
	padding: 2px;
}

/* A IMAGEM (Fica à FRENTE da borda) */
.fatal-sidebar-story-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    
    /* Adiciona uma pequena borda de cor do fundo para "separar" a foto da borda animada */
    border: 3px solid #1A0C2D !important; /* Use a cor exata do seu fundo */
    
    /* Z-INDEX MAIOR: Garante que fique na frente da animação */
    position: relative !important;
    z-index: 1 !important;
	margin-top: 0px !important;
}

@keyframes rotate-border {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}







.fatal-sidebar-story-add {
  position: absolute;
    right: -5px;
    bottom: 1px;
    z-index: 5;
    width: 25px;
    height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid rgba(248, 240, 240, 0.88);
  border-radius: 50%;
  background: var(--color-magenta) !important;
  color: var(--color-white);
  box-shadow: 0 14px 28px rgba(160, 114, 90, 0.28);
}

.fatal-sidebar-story-add i {
  font-size: 15px;
  line-height: 1;
}

.fatal-sidebar-story-add:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
 
 
 .zuck-nav-layer { pointer-events: none; }
.nav-trigger-left, .nav-trigger-right { pointer-events: auto; }





/* =====================================================
   STORIES ACTIONS PREMIUM (ESTILO CONCORRÊNCIA)
   ===================================================== */

.story-viewer{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;

    width:420px!important;
    max-width:420px!important;

    overflow:visible!important; /* importante */
}

 

.fatal-side-menu button i{
    font-size:28px !important;
    color:var(--color-white) !important;

    text-shadow:
        0 2px 8px rgba(26, 12, 45, 0.8),
        0 0 20px rgba(26, 12, 45, 0.5);
}

 

#story_like_count{
    margin-top:4px;
    color:var(--color-white);
    font-size:12px;
    font-weight:700;

    text-shadow:
        0 1px 4px rgba(26, 12, 45, 0.9);
}

/* =====================================================
   DROPDOWN SHARE
   ===================================================== */

.fatal-share-dropdown{
    position:absolute;
    right:100% !important;
    margin-right:12px !important;
    transform:translateY(-50%);
    display:none;
    flex-direction:column;
    gap:8px;
    min-width:180px;
    padding:12px;
    border-radius:12px;
    background: rgba(26, 12, 45, 0.75) !important;
    backdrop-filter:blur(40px) !important;
    box-shadow: 0 15px 40px rgba(26, 12, 45, 0.45);
    z-index:100001;
	top:50%!important;

}
 
.fatal-share-dropdown a{
    display:flex;
    align-items:center;
    gap:8px;

    color:var(--color-white);
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:.15s ease;
}

.fatal-share-dropdown a:hover{
    color:var(--color-magenta);
    transform:translateX(3px);
}

/* =====================================================
   POSIÇÃO MOBILE
   ===================================================== */

@media (max-width:768px){

    .fatal-side-menu{
        right:8px;
        gap:14px;
    }

    .fatal-side-menu button i{
        font-size:30px !important;
    }

    #story_like_button i{
        font-size:34px !important;
    }
}

/* ============================
   CENTRALIZAÇÃO REAL DO ZUCK
   ============================ */

#zuck-modal{
    position:fixed!important;
    inset:0!important;
    margin:0!important;
    padding:0!important;
    width:100vw!important;
    height:100vh!important;
    background:#1A0C2D!important;
}

#zuck-modal-content{
    position:relative!important;
    width:100vw!important;
    height:100vh!important;
}

/* viewer */

 .zuck_next_trigger,
.zuck_prev_trigger{
    z-index:100 !important;
}

.fatal-side-menu{
    z-index:999999999 !important;
}

/* menu lateral */

.fatal-side-menu{
    position:absolute !important;

    left:calc(48% + 190px) !important;
    top:80% !important;

    transform:translateY(-50%) !important;

    z-index:999999999 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
}

.fatal-side-menu button{
    width:30px !important;
    height:30px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    cursor:pointer !important;
    background:transparent !important;
    border:none !important;
    flex:0 0 55px !important;
}

.fatal-side-menu button i{
    display:block !important;
    line-height:1 !important;
}

#story_like_count{
    display:block !important;
    margin-top:4px !important;
}

.fatal-side-menu,
.fatal-side-menu *{
   /*  background:transparent!important; 
    border:none!important; */
}

/* dropdown */



/* mobile */

@media(max-width:768px){

    .fatal-side-menu{

    position:absolute !important;

    left:calc(48% + 170px) !important;
    top:80% !important;

    transform:translateY(-50%) !important;

    z-index:999999999 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
	
    }

}

/* CONTADOR */
#story_like_count{
    margin-top:5px !important;
    color:var(--color-white) !important;
    font-size:14px !important;
    font-weight:700 !important;
}

/* ESCONDE BACK */
.story-viewer .back{
    display:none !important;
}

/* DROPDOWN SHARE */

.story-viewer{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;

    width:420px!important;
    max-width:420px!important;
    height:100vh!important;

    overflow:hidden!important;
    background:#1A0C2D!important;
}

/* REMOVE posicionamentos herdados do slider */
/* FIX DEFINITIVO DO VIEWER */

.story-viewer .slides{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    left:0 !important;
}

.story-viewer .item{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;
}

.story-viewer .item:not(.active){
    display:none !important;
}

.story-viewer .media{
    position:absolute !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    transform:none !important;
    margin:0 !important;
}


#zuck-modal{
 background: radial-gradient(circle at 12% 8%,rgba(212, 175, 152, 0.15),transparent 28rem),radial-gradient(circle at 86% 2%,rgba(212, 175, 152, 0.08),transparent 24rem),linear-gradient(135deg,#1A0C2D,#1A0C2D 48%,#1A0C2D)!important
}






@media (max-width: 1024px) {

  /* 🔥 força header virar layout fixo */
  #zuck-modal-content .story-viewer .head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: normal !important;
  }

  /* 🔥 impede o Zuck de esconder o close */
  #zuck-modal-content .story-viewer .head .right .close {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 🔥 impede o Zuck de mover time pro lado errado */
  #zuck-modal-content .story-viewer .head .right .time {
    display: none !important;
  }

  /* 🔥 força o time voltar pro fluxo normal */
  #zuck-modal-content .story-viewer .head .time {
    display: inline-block !important;
    max-width: 60% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 🔥 evita que left quebre layout */
  #zuck-modal-content .story-viewer .head .left {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #zuck-modal-content .story-viewer .head .right {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

.story-viewer .head {
  height: 60px !important;
}

.zuck-nav-layer {
  top: 60px !important;
  bottom: 60px !important;
}




/* storys cards */


/* =====================================================
   STORIES ROW (HORIZONTAL SCROLL / GRID LINEAR)
   ===================================================== */

.fatal-stories-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    align-items: stretch;

    /* comportamento tipo “lista de cards de usuários” */
    justify-content: flex-start;

    padding: 10px 0;
}

/* =========================
   CARD PRINCIPAL
========================= */
.fatal-story-row-card {
    position: relative;

    min-width: 300px;
    max-width: 320px;
    width: 100%;

    height: 500px;

    border-radius: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    text-decoration: none;

    border: 1px solid rgba(248, 240, 240, 0.14);

    background:
        radial-gradient(circle at 16% 0, rgba(212, 175, 152, 0.15), transparent 40%),
        linear-gradient(180deg, #1A0C2D, #1A0C2D 60%, #1A0C2D);

    box-shadow: 0 26px 70px rgba(26, 12, 45, 0.26);

    scroll-snap-align: start;

    transition: .22s ease;

    flex: 1 1 300px; /* 👈 isso faz adaptar igual cards de usuário */
}

/* hover */
.fatal-story-row-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 40px 90px rgba(26, 12, 45, 0.4);
}

/* =========================
   IMAGEM PRINCIPAL
========================= */
.fatal-story-row-media {
    height: 380px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.fatal-story-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* leve overlay pra dar contraste */
.fatal-story-row-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 12, 45, 0.05),
        rgba(26, 12, 45, 0.35)
    );
}

/* =========================
   ÁREA INFERIOR
========================= */
.fatal-story-row-body {
    height: 120px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    background: rgba(26, 12, 45, 0.25);
    backdrop-filter: blur(8px);

    border-top: 1px solid rgba(248, 240, 240, 0.06);
}

/* =========================
   AVATAR
========================= */
.fatal-story-row-avatar img {
    width: 44px;
    height: 44px;

    border-radius: 50%;
    object-fit: cover;

    border: 2px solid rgba(248, 240, 240, 0.2);
}

/* =========================
   TEXTO
========================= */
.fatal-story-row-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.fatal-story-row-info strong {
    font-size: 14px;
    color: var(--color-white);
}

.fatal-story-row-info span {
    font-size: 12px;
    color: rgba(248, 240, 240, 0.6);
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 1024px) {
    .fatal-story-row-card {
        min-width: 260px;
        height: 460px;
    }

    .fatal-story-row-media {
        height: 340px;
    }
}

@media (max-width: 768px) {
    .fatal-stories-row {
        gap: 12px;
    }

    .fatal-story-row-card {
        min-width: 220px;
        height: 420px;
    }

    .fatal-story-row-media {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .fatal-story-row-card {
        min-width: 100%;
        height: 420px;
    }
}


.fatal-copy-alert{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 18px;
    border-radius:8px;
    background:#1A0C2D;
    color:var(--color-white);
    z-index:9999;
		display:none;

}


/* --- Base Layout --- */
.fatal-profile-facts { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 16px; }
.fatal-profile-fact { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid rgba(232, 197, 175, 0.12); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(212, 175, 152, 0.15), transparent 52%), rgba(248, 240, 240, 0.035); }
.fatal-profile-fact > span, .fatal-side-card-title > span { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(160, 114, 90, 0.35); border-radius: 7px; background: linear-gradient(135deg, rgba(160, 114, 90, 0.84), rgba(160, 114, 90, 0.92)); color: var(--color-white); box-shadow: 0 14px 28px rgba(160, 114, 90, 0.16); }
.fatal-profile-fact small { display: block; color: rgba(232, 197, 175, 0.62); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fatal-profile-fact strong { display: block; color: var(--color-white); font-size: 14px; line-height: 1.25; }

/* --- Cards e Sidebars --- */
.fatal-profile-side-card { overflow: hidden; border-color: rgba(232, 197, 175, 0.15) !important; background: radial-gradient(circle at 18% 0%, rgba(212, 175, 152, 0.15), transparent 34%), radial-gradient(circle at 100% 6%, rgba(212, 175, 152, 0.08), transparent 30%), rgba(26, 12, 45, 0.92) !important; }
.fatal-side-card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fatal-side-card-title h6 { margin: 0; font-size: 15px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }

/* --- Valores (Rates) --- */
.fatal-profile-rates { display: grid; gap: 9px; }
.fatal-profile-rate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(248, 240, 240, 0.09); border-radius: 8px; background: rgba(26, 12, 45, 0.24); }
.fatal-profile-rate strong { color: #ffd400; font-size: 15px; font-weight: 950; white-space: nowrap; }

/* --- Serviços --- */
.fatal-service-category { margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(248, 240, 240, 0.08); }
.fatal-service-category > h6 { margin: 0 0 10px; color: var(--color-magenta-light) !important; font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.fatal-service-list { display: grid; gap: 8px; }
.fatal-service-item { border: 1px solid rgba(248, 240, 240, 0.09); border-radius: 8px; background: rgba(26, 12, 45, 0.22); }
.fatal-service-item summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.fatal-service-item summary::-webkit-details-marker { display: none; }
.fatal-service-item summary strong { color: var(--color-white); font-size: 13px; font-weight: 900; }
.fatal-service-item p { margin: 0; padding: 0 12px 12px 36px; color: rgba(248, 240, 240, 0.62); font-size: 13px; line-height: 1.55; }

/* --- Estados (Disponível/Indisponível) --- */
.fatal-service-item.is-available { border-color: rgba(232, 197, 175, 0.22); }
.fatal-service-item.is-unavailable { opacity: .62; }
.fatal-service-item.is-unavailable summary strong { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(160, 114, 90, 0.9); }

/* --- Elementos extras --- */
.fatal-verification-empty { text-align: center; padding: 20px; color: rgba(248, 240, 240, 0.6); font-size: 13px; }
.fatal-verification-empty i { display: block; font-size: 2rem; margin-bottom: 10px; color: var(--color-white); }
.footer-tiny { font-size: 12px; color: rgba(248, 240, 240, 0.7); }
.link-footer { text-decoration: none; }
.truncated { font-size: 14px; margin-bottom: 10px; }

.menu_card_profile{  display: none;}

@media (max-width: 991.98px) {
      .btn-google, 
     .btn-facebook, 
     .btn-instagram, 
     .btn-twitter, 
     .btn-whatsapp, 
     .btn-profile {
        width: 45px !important;
        height: 45px !important;
        text-align: center !important;
        align-items: center !important;
        padding: 0 !important;
    }
}

/* CODEX CSS CENTRALIZATION 2026-06-20
   Static Blade <style> blocks consolidated conservatively.
   Dynamic, email, admin and standalone-document CSS intentionally excluded.
*/
/* =========================================================================
   Migrated from resources/views/reviews/escort-review.blade.php
   ========================================================================= */
.fatal-review-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.64) 35%, rgba(26, 12, 45, 0.84) 70%, #1A0C2D 100%);
    color: var(--color-white);
  }

  .fatal-review-card {
    width: min(540px, 100%);
    border: 1px solid rgba(160, 114, 90, 0.42);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 240, 240, 0.08), rgba(248, 240, 240, 0.03)), rgba(26, 12, 45, 0.86);
    box-shadow: 0 28px 90px rgba(26, 12, 45, 0.48);
    overflow: hidden;
  }

  .fatal-review-card-header {
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid rgba(248, 240, 240, 0.1);
  }

  .fatal-review-card-header img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border: 3px solid var(--color-magenta);
    border-radius: 50%;
    box-shadow: 0 12px 34px rgba(160, 114, 90, 0.28);
  }

  .fatal-review-card-header h1 {
    margin: 14px 0 4px;
    font-size: 25px;
    font-weight: 900;
  }

  .fatal-review-card-header p {
    margin: 0;
    color: rgba(248, 240, 240, 0.68);
  }

  .fatal-review-form {
    padding: 24px;
  }

  .fatal-rating-picker {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 22px;
  }

  .fatal-rating-picker input {
    display: none;
  }

  .fatal-rating-picker label {
    margin: 0;
    color: rgba(248, 240, 240, 0.24);
    font-size: 40px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
  }

  .fatal-review-form textarea {
    min-height: 128px;
    border: 1px solid rgba(248, 240, 240, 0.14);
    border-radius: 8px;
    background: rgba(248, 240, 240, 0.06);
    color: var(--color-white);
    resize: vertical;
  }

  .fatal-review-form textarea:focus {
    border-color: rgba(212, 175, 152, 0.5);
    background: rgba(248, 240, 240, 0.08);
    color: var(--color-white);
    box-shadow: 0 0 0 .2rem rgba(160, 114, 90, 0.12);
  }

  .fatal-review-submit {
    min-height: 48px;
    border: 1px solid rgba(160, 114, 90, 0.47);
    border-radius: 6px;
    background: var(--color-magenta);
    color: var(--color-white);
    font-weight: 900;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26);
  }

  .fatal-review-state {
    padding: 26px;
    text-align: center;
  }

  .fatal-review-state i {
    display: block;
    margin-bottom: 10px;
    color: var(--color-white);
    font-size: 42px;
  }

/* =========================================================================
   Migrated from resources/views/index/creators.blade.php
   ========================================================================= */
/* ========================= MODAL FILTROS – DARK PREMIUM MAGENTA ========================= */ .modal-filters-sandbox.modal { overflow: hidden; } .modal-filters-sandbox .modal-dialog { max-width: 380px; } .modal-filters-sandbox .modal-content { max-height: 85vh; border-radius: 26px; border: none; display: flex; flex-direction: column; background: var(--fatal-panel-gradient); box-shadow: 0 30px 60px rgba(26, 12, 45, 0.3); } .modal-filters-sandbox .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--color-white); } .modal-filters-sandbox .modal-title { font-size: 16px; font-weight: 900; color: #311B4B; /* Título neutro para destacar os filtros ativos */ } /* ABAS (NAVS) - INATIVO BERINJELA / ATIVO MAGENTA */ .modal-nav-compact { display: flex; background: var(--fatal-panel-gradient); border-bottom: 1px solid var(--color-white); } .modal-nav-compact .nav-link { flex: 1; text-align: center; padding: 12px 0; font-size: 11px; font-weight: 800; color: var(--color-magenta-mid); /* INATIVO: BERINJELA */ text-transform: uppercase; border-bottom: 3px solid transparent; transition: all 0.3s; } .modal-nav-compact .nav-link.active { color: var(--color-magenta) !important; /* ATIVO: MAGENTA */ background: var(--fatal-panel-gradient); border-bottom-color: var(--color-magenta) !important; } .modal-filters-sandbox .modal-body { padding: 30px 22px; overflow-y: auto; } /* COMPONENTES DE FILTRO */ .filter-group { margin-bottom: 22px; } .filter-label { font-size: 11px !important; font-weight: 900 !important; display: block; width: 100%; margin-top: 15px; color: #311B4B; border-bottom: 2px solid var(--color-white); padding-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } /* INPUTS DE TEXTO */ .form-control-premium { background: var(--fatal-panel-gradient); border: 1px solid var(--color-white); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 13px; color: #311B4B; transition: all 0.2s; } .form-control-premium:focus { border-color: var(--color-magenta); background: var(--fatal-panel-gradient); box-shadow: 0 0 0 3px rgba(160, 114, 90, 0.1); } /* SLIDERS (TRILHA BERINJELA, CONECTOR MAGENTA) */ .noUi-target { height: 6px; background: var(--fatal-panel-gradient); /* INATIVO: BERINJELA */ border-radius: 10px; border: none; margin-top: 15px; margin-bottom: 25px; } .noUi-connect { background: var(--color-magenta); } /* ATIVO: MAGENTA */ .noUi-horizontal .noUi-handle { width: 22px !important; height: 22px !important; border-radius: 50%; background: var(--color-magenta); border: 3px solid var(--color-white); box-shadow: 0 3px 8px rgba(26, 12, 45, 0.2); top: -9px !important; cursor: pointer; } .range-values { color: var(--color-white); font-weight: 800; font-size: 0.7rem; float: right; background: var(--color-magenta); /* Valor destacado */ padding: 2px 10px; border-radius: 50px; } /* PILLS / CHECKBOXES - DIFERENÇA CLARA */ .pill-checkbox input { display: none; } .pill-checkbox span { padding: 8px 14px; border-radius: 50px; font-size: 10px; font-weight: 800; background: var(--fatal-panel-gradient); /* INATIVO: BERINJELA */ border: 1px solid var(--color-white); cursor: pointer; margin: 3px; color: var(--color-magenta); /* INATIVO: TEXTO APAGADO */ display: inline-block; transition: all 0.2s; } .pill-checkbox input:checked + span { background: var(--color-magenta); /* ATIVO: MAGENTA */ color: var(--color-white) !important; /* TEXTO CREME PARA CONTRASTE */ border-color: var(--color-magenta); box-shadow: 0 4px 10px rgba(160, 114, 90, 0.3); } /* STATUS ONLINE (ESPECIAL) */ .btn-online-status { background: var(--fatal-panel-gradient) !important; color: var(--color-magenta-mid) !important; } input:checked + .btn-online-status { background: var(--color-magenta) !important; /* Magenta quando ativo */ color: var(--color-white) !important; } /* FOOTER */ .modal-filters-sandbox .modal-footer { padding: 16px 22px; border-top: 1px solid var(--color-white); display: flex; gap: 12px; } .btn-clear-filters { flex: 1; background: var(--fatal-panel-gradient); border-radius: 50px; font-size: 11px; font-weight: 800; color: #311B4B; text-align: center; padding: 12px; border: 1px solid var(--color-white); text-decoration: none; } .btn-apply-compact { flex: 2; border-radius: 50px; background: var(--color-magenta); color: var(--color-white); border: none; font-size: 12px; font-weight: 900; } /* CATEGORIAS (LARGURA FIXA) */ .category-fixed-container { margin: 0 auto; padding: 10px 0; } .category-btn {
    display: inline-flex;
    padding: 5px 20px;
    background: var(--fatal-panel-gradient);
    border: 1px solid var(--color-white);
    border-radius: 50px;
    color: var(--color-magenta);
    font-weight: 700;
    align-items: baseline;
    margin: 5px;
} .category-btn.active { background: var(--fatal-panel-gradient); border-color: var(--color-magenta); border-width: 2px; color: var(--color-magenta) !important; /* ATIVO */ box-shadow: 0 4px 10px rgba(160, 114, 90, 0.1); }


.modal-filters-sandbox.modal {
    padding-right: 0 !important;
}

.modal-filters-sandbox .modal-dialog {
    width: min(960px, calc(100vw - 28px));
    max-width: min(960px, calc(100vw - 28px));
    margin-left: auto;
    margin-right: auto;
}

.modal-filters-sandbox .modal-content {
    max-height: 90vh;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(160, 114, 90, 0.18);
    background:
        radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.15), transparent 45%),
        linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9));
    box-shadow: 0 30px 90px rgba(26, 12, 45, 0.34);
}

.modal-filters-sandbox .modal-header {
    min-height: 74px;
    padding: 20px 28px;
    border: 0;
    background:
        linear-gradient(135deg, #1A0C2D 0%, #231238 58%, #1A0C2D 100%);
    color: var(--color-white);
}

.modal-filters-sandbox .modal-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

.modal-filters-sandbox .close {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(248, 240, 240, 0.11);
    color: var(--color-white);
    opacity: 1;
    text-shadow: none;
}

.modal-nav-compact {
    gap: 8px;
    padding: 12px 18px;
    background: var(--fatal-panel-gradient);
    border-bottom: 1px solid rgba(212, 175, 152, 0.14);
}

.modal-nav-compact .nav-link {
    border: 1px solid rgba(212, 175, 152, 0.14);
    border-radius: 999px;
    padding: 11px 14px;
    color: rgba(248, 240, 240, 0.7);
    background: var(--fatal-panel-gradient);
    font-size: 11px;
    letter-spacing: .04em;
}

.modal-nav-compact .nav-link.active {
    color: var(--color-white) !important;
    border-color: rgba(160, 114, 90, 0.47) !important;
    background: var(--color-magenta) !important;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
}

.modal-filters-sandbox .modal-body {
    padding: 26px 28px 22px;
    background: linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9));
}

.modal-filters-sandbox #filterForm .tab-pane.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px 22px;
}

.modal-filters-sandbox #tab-servicos-full.active {
    grid-template-columns: 1fr;
}

.modal-filters-sandbox #tab-precos.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-filters-sandbox .filter-group,
.modal-filters-sandbox #tab-perfil > .pill-checkbox,
.modal-filters-sandbox #tab-perfil > .filter-label,
.modal-filters-sandbox #tab-corpo > .filter-label,
.modal-filters-sandbox #tab-precos > .filter-label {
    min-width: 0;
    margin-bottom: 0;
}

.modal-filters-sandbox .filter-group[style] {
    width: 100% !important;
    max-width: none !important;
}

.filter-label,
.modal-filters-sandbox .small.text-muted,
.filter-subtitle {
    color: #1A0C2D !important;
    border-bottom: 0;
    margin: 0 0 10px;
    padding: 0;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
}

.filter-subtitle {
    margin-top: 10px;
}

.form-control-premium,
.modal-filters-sandbox .select2-container--default .select2-selection--multiple {
    min-height: 48px;
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 152, 0.14) !important;
    background: var(--fatal-panel-gradient) !important;
    color: var(--color-white) !important;
    box-shadow: 0 8px 22px rgba(26, 12, 45, 0.045);
}

.form-control-premium {
    padding: 12px 14px;
    font-size: 13px;
}

.modal-filters-sandbox .select2-container {
    max-width: none !important;
}

.modal-filters-sandbox .select2-container--default .select2-selection--multiple {
    padding: 4px 8px;
}

.modal-filters-sandbox .select2-container--default.select2-container--focus .select2-selection--multiple,
.form-control-premium:focus {
    border-color: rgba(160, 114, 90, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(160, 114, 90, 0.1);
}

.modal-filters-sandbox .noUi-target {
    height: 8px;
    margin: 18px 10px 30px;
    background: var(--fatal-panel-gradient);
}

.modal-filters-sandbox .noUi-connect {
    background: var(--color-magenta);
}

.modal-filters-sandbox .noUi-horizontal .noUi-handle {
    width: 24px !important;
    height: 24px !important;
    top: -8px !important;
    background: var(--fatal-panel-gradient);
    border: 5px solid var(--color-magenta);
    box-shadow: 0 8px 18px rgba(160, 114, 90, 0.24);
}

.range-values {
    float: none;
    margin-left: 8px;
    background: #1A0C2D;
    color: var(--color-white);
    padding: 4px 10px;
}

.pill-checkbox span {
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--fatal-panel-gradient);
    border: 1px solid rgba(212, 175, 152, 0.14);
    color: rgba(248, 240, 240, 0.7);
    box-shadow: 0 8px 20px rgba(26, 12, 45, 0.045);
}

.pill-checkbox input:checked + span {
    border-color: rgba(160, 114, 90, 0.47);
    background: var(--color-magenta);
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.22);
}

.btn-online-status {
    background: #1A0C2D !important;
    color: var(--color-white) !important;
}

input:checked + .btn-online-status {
    background: linear-gradient(135deg, var(--color-magenta), var(--color-magenta-mid)) !important;
    color: #1A0C2D !important;
}

.modal-filters-sandbox .modal-footer {
    padding: 16px 28px;
    border-top: 1px solid rgba(212, 175, 152, 0.14);
    background: var(--fatal-panel-gradient);
    backdrop-filter: blur(14px);
}

.btn-clear-filters,
.btn-apply-compact {
    min-height: 48px;
    border-radius: 999px;
}

.btn-clear-filters {
    background: var(--fatal-panel-gradient);
    color: var(--color-white);
    border: 1px solid rgba(212, 175, 152, 0.14);
}

.btn-apply-compact {
    background: var(--color-magenta);
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26);
}

@media (max-width: 767.98px) {
    .modal-filters-sandbox .modal-dialog {
        width: calc(100vw - 14px);
        max-width: calc(100vw - 14px);
        margin: 7px auto;
    }

    .modal-filters-sandbox .modal-header,
    .modal-filters-sandbox .modal-body,
    .modal-filters-sandbox .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-nav-compact {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .modal-nav-compact .nav-link {
        flex: 0 0 auto;
        min-width: 116px;
    }

    .modal-filters-sandbox #filterForm .tab-pane.active,
    .modal-filters-sandbox #tab-precos.active {
        grid-template-columns: 1fr;
    }
}

.modal-filters-sandbox.modal {
    background: rgba(26, 12, 45, 0.74);
    backdrop-filter: blur(12px);
}

.modal-filters-sandbox .modal-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-width: min(1040px, calc(100vw - 32px));
}

.modal-filters-sandbox .modal-content {
    border: 1px solid rgba(232, 197, 175, 0.18) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(212, 175, 152, 0.15), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(35, 18, 56, 0.32), transparent 32%),
        linear-gradient(145deg, rgba(26, 12, 45, 0.98), rgba(26, 12, 45, 0.98)) !important;
    box-shadow: 0 34px 110px rgba(26, 12, 45, 0.58), 0 0 0 1px rgba(248, 240, 240, 0.04) inset !important;
}

.modal-filters-sandbox .modal-header {
    min-height: 78px;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.43) 35%, rgba(26, 12, 45, 0.58) 70%, rgba(26, 12, 45, 0.61) 100%) !important;
    border-bottom: 1px solid rgba(160, 114, 90, 0.42) !important;
}

.modal-filters-sandbox .modal-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--color-magenta);
    box-shadow: 0 0 18px rgba(160, 114, 90, 0.85);
}

.modal-filters-sandbox .close {
    border: 1px solid rgba(248, 240, 240, 0.14);
    background: rgba(248, 240, 240, 0.08) !important;
}

.modal-filters-sandbox .close:hover {
    background: rgba(160, 114, 90, 0.22) !important;
}

.modal-nav-compact {
    gap: 10px;
    padding: 14px 20px;
    background: rgba(26, 12, 45, 0.24) !important;
    border-bottom: 1px solid rgba(248, 240, 240, 0.08) !important;
}

.modal-nav-compact .nav-link {
    border-radius: 6px !important;
    border: 1px solid rgba(248, 240, 240, 0.11) !important;
    background: rgba(248, 240, 240, 0.055) !important;
    color: rgba(248, 240, 240, 0.72) !important;
    box-shadow: none;
}

.modal-nav-compact .nav-link:hover {
    color: var(--color-white) !important;
    background: rgba(135, 15, 108, 0.16) !important;
}

.modal-nav-compact .nav-link.active {
    color: var(--color-white) !important;
    background: var(--color-magenta) !important;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
}

.modal-filters-sandbox .modal-body {
    background:
        radial-gradient(circle at 8% 0%, rgba(212, 175, 152, 0.12), transparent 28rem),
        linear-gradient(180deg, rgba(248, 240, 240, 0.035), rgba(248, 240, 240, 0.015)) !important;
    color: var(--color-white);
}

.modal-filters-sandbox #filterForm .tab-pane.active {
    gap: 20px 24px;
}

.filter-label,
.modal-filters-sandbox .small.text-muted,
.filter-subtitle {
    color: rgba(248, 240, 240, 0.82) !important;
}

.form-control-premium,
.modal-filters-sandbox .select2-container--default .select2-selection--multiple,
.modal-filters-sandbox .select2-container--default .select2-selection--single,
.modal-filters-sandbox .form-control,
.modal-filters-sandbox .custom-select {
    border: 1px solid rgba(248, 240, 240, 0.13) !important;
    border-radius: 5px !important;
    background: rgba(248, 240, 240, 0.075) !important;
    color: var(--color-white) !important;
    box-shadow: inset 0 1px 0 rgba(248, 240, 240, 0.05), 0 14px 32px rgba(26, 12, 45, 0.16) !important;
}

.form-control-premium::placeholder,
.modal-filters-sandbox .form-control::placeholder {
    color: rgba(248, 240, 240, 0.48) !important;
}

.modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid rgba(248, 240, 240, 0.16) !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, rgba(160, 114, 90, 0.82), rgba(212, 175, 152, 0.46)) !important;
    color: var(--color-white) !important;
}

.modal-filters-sandbox .select2-dropdown {
    border: 1px solid rgba(248, 240, 240, 0.12) !important;
    background: #1A0C2D !important;
    color: var(--color-white) !important;
}

.modal-filters-sandbox .noUi-target {
    background: rgba(248, 240, 240, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(248, 240, 240, 0.08);
}

.modal-filters-sandbox .noUi-horizontal .noUi-handle {
    background: #1A0C2D !important;
    border: 4px solid var(--color-magenta) !important;
}

.range-values {
    border: 1px solid rgba(248, 240, 240, 0.12);
    border-radius: 5px;
    background: rgba(248, 240, 240, 0.08) !important;
}

.pill-checkbox span {
    border-radius: 6px !important;
    border: 1px solid rgba(248, 240, 240, 0.12) !important;
    background: rgba(248, 240, 240, 0.065) !important;
    color: rgba(248, 240, 240, 0.76) !important;
    box-shadow: none !important;
}

.pill-checkbox span:hover {
    border-color: rgba(160, 114, 90, 0.42) !important;
    color: var(--color-white) !important;
    background: rgba(160, 114, 90, 0.14) !important;
}

.pill-checkbox input:checked + span {
    border-color: rgba(160, 114, 90, 0.47) !important;
    background: var(--color-magenta) !important;
    color: var(--color-white) !important;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
}

.btn-online-status {
    background: rgba(248, 240, 240, 0.065) !important;
    color: rgba(248, 240, 240, 0.78) !important;
}

input:checked + .btn-online-status {
    background: linear-gradient(135deg, var(--color-magenta), var(--color-magenta-mid)) !important;
    color: var(--color-magenta-mid) !important;
}

.modal-filters-sandbox .modal-footer {
    border-top: 1px solid rgba(248, 240, 240, 0.08) !important;
    background: rgba(26, 12, 45, 0.24) !important;
}

.btn-clear-filters,
.btn-apply-compact {
    border-radius: 6px !important;
    font-weight: 950;
}

.btn-clear-filters {
    border: 1px solid rgba(248, 240, 240, 0.12) !important;
    background: rgba(248, 240, 240, 0.07) !important;
    color: rgba(248, 240, 240, 0.78) !important;
}

.btn-clear-filters:hover {
    color: var(--color-white) !important;
    background: rgba(135, 15, 108, 0.16) !important;
}

.btn-apply-compact {
    border: 1px solid rgba(160, 114, 90, 0.47) !important;
    background: var(--color-magenta) !important;
    color: var(--color-white) !important;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
}


/* Forçar a exibição do container que o Select2 cria */
    .select2-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-magenta) !important;
    border: 1px solid var(--color-magenta) !important;
    color: var(--color-white) !important;
    padding: 4px 10px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border: none !important;
    border-radius: 20px !important;
    width: 20px !important;
    height: 20px !important;
    position: relative !important;
    top: 0 !important;
    line-height: 0 !important;
    font-size: 30px !important;
    color: var(--color-magenta) !important;
    float: right;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--color-magenta) !important;
        background: none !important;
    }

    .category-btn i {
    margin-right: 8px; /* Espaço fixo entre ícone e texto */
}

/* Aproveitando sua regra de largura fixa, caso precise travar esses botões */
.category-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    padding: 10px 15px;
    /* width: 150px; <-- Exemplo de largura fixa se desejar padronizar */
}


/* Container Principal do Story (Largura Fixa) */
.stories.snapssenger.carousel .story {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 100px !important;
    box-sizing: border-box;
    border-radius: 50% !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    overflow: hidden;
    margin-right: 10px; /* Espaço entre os stories */
}

/* O gradiente giratório */
.stories.snapssenger.carousel .story::before {
    content: '';
    position: absolute;
    z-index: -2;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg, var(--color-magenta), var(--color-magenta-mid), var(--color-magenta));
    animation: rotate-gradient 2s linear infinite;
}

/* O fundo branco interno (Máscara da borda) */
.stories.snapssenger.carousel .story::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: transparent;
    border: 2px solid #1A0C2D;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.stories.snapssenger.carousel .story > .item-link > .info {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 99;
    background: rgba(26, 12, 45, 0.6);
    border-radius: 0px;
    padding: 2px 10px 10px;
    text-align: center;
    color: var(--color-white);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Garante que o nome e a foto interna não sejam cortados pelo overflow do pai */
.stories.snapssenger.carousel .story > .item-link {
    position: relative;
    display: grid !important;
    width: calc(100% - 8px) !important;
    min-width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    min-height: calc(100% - 8px) !important;
    max-height: calc(100% - 8px) !important;
    aspect-ratio: 1 / 1 !important;
    place-items: center;
    border-radius: 50% !important;
    overflow: hidden !important;
    z-index: 1;
}

.stories.snapssenger.carousel .story .item-preview {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box;
    border-radius: 50% !important;
    overflow: hidden;
    display: block;
    position: relative;
}

.stories.snapssenger.carousel .story .item-preview img,
.stories.snapssenger.carousel .story .item-preview video,
.stories.snapssenger.carousel .story .img-wrapper img,
.stories.snapssenger.carousel .story .img-wrapper video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

/* Informações sobrepostas (Nome/Tempo Online) */
.stories.snapssenger.carousel .story > .item-link > .info {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 95px;
    z-index: 99;
    background: rgba(26, 12, 45, 0.6);
    border-radius: 0;
    padding: 1px 7px 7px;
    text-align: center;
    color: var(--color-white);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#stories > div > a > span.info > img {
    display: none;
}

@keyframes rotate-gradient {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#stories.storiesWrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto; /* Permite scroll horizontal se houver muitos */
    white-space: nowrap;
    align-items: flex-start;
}

#stories.storiesWrapper .story,
#stories.storiesWrapper .item-link,
#stories.storiesWrapper .item-preview,
#stories.storiesWrapper .img-wrapper {
    box-sizing: border-box !important;
}

#stories.stories.storiesWrapper.snapssenger.carousel,
#stories.storiesWrapper.snapssenger.carousel,
#stories.storiesWrapper {
    gap: 10px !important;
}

#stories.stories.storiesWrapper.snapssenger.carousel .story,
#stories.list .story,
#stories.storiesWrapper .story {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    flex: 0 0 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

#stories.storiesWrapper .story::after,
#stories.stories.storiesWrapper.snapssenger.carousel .story::after {
    display: none !important;
}

#stories.stories.storiesWrapper.snapssenger.carousel .story .item-link,
#stories.stories.snapssenger .story .item-link,
#stories.storiesWrapper .story .item-link {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

#stories.stories.storiesWrapper.snapssenger.carousel .story .item-link .item-preview,
#stories.stories.snapssenger .story .item-link .item-preview,
#stories.storiesWrapper .story .item-preview {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    border-radius: 50% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
}

#stories.storiesWrapper .story .item-preview img,
#stories.storiesWrapper .story .item-preview video,
#stories.stories.snapssenger .story .item-link .item-preview img,
#stories.stories.snapssenger .story .item-link .item-preview video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
  

  


/* Ajuste para os itens que caírem dentro do dropdown */
#dropdownItems .category-btn {
    display: flex;
    width: calc(100% - 10px);
    margin: 5px;
    justify-content: flex-start;
}

#moreDropdown {
    flex: 0 0 auto;
    position: relative;
}

#moreDropdown > .category-btn {
    min-width: 50px;
    padding-inline: 12px !important;
}

#dropdownItems.dropdown-menu {
    min-width: 218px;
    padding: 8px;
    border: 1px solid rgba(232, 197, 175, 0.18) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 46%),
        linear-gradient(135deg, rgba(26, 12, 45, 0.98), rgba(26, 12, 45, 0.98)) !important;
    box-shadow: 0 22px 54px rgba(26, 12, 45, 0.48) !important;
    backdrop-filter: blur(16px);
}

#dropdownItems .category-btn {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 6px !important;
}

#dropdownItems .category-btn:last-child {
    margin-bottom: 0 !important;
}

/* Garante que o container de itens visíveis não quebre linha antes do cálculo do JS */
#visibleCats {
    display: flex;
    flex-direction: row;
    flex: 2;
    min-width: 0;
    gap: 8px;
     align-items: center;
    overflow: hidden;
    white-space: nowrap;
    justify-content: center;
    flex-wrap: nowrap;	
	
}

#catWrapper {
    width: 100%;
    justify-content: center !important;
}

#visibleCats > .category-btn {
    margin: 0 !important;
}

/* Opcional: Cor de destaque se o item ativo estiver dentro do dropdown */
#moreDropdown.has-active .category-btn {
    border-color: var(--color-magenta);
    color: var(--color-magenta);
}

#containerWrapCreators {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important;
    gap: 24px !important;
    align-content: start !important;
    justify-content: stretch !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fatal-creators-page .category-fixed-container {
    max-width: 980px !important;
    margin: 0 auto 24px !important;
}

.fatal-creators-page .category-flex-wrapper {
    gap: 18px;
    justify-content: center !important;
}

.fatal-creators-page .category-btn {
    position: relative;
    min-width: 154px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px !important;
    padding: 14px 22px !important;
    border: 1px solid rgba(248, 240, 240, 0.12) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 58%),
        linear-gradient(135deg, rgba(26, 12, 45, 0.8), rgba(35, 18, 56, 0.58)) !important;
    color: rgba(248, 240, 240, 0.82) !important;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 14px 32px rgba(26, 12, 45, 0.24), inset 0 1px 0 rgba(248, 240, 240, 0.08);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}



.fatal-creators-page .category-btn > *,
.fatal-creators-page .category-btn i {
    position: relative;
    z-index: 1;
}

.fatal-creators-page .category-btn:hover,
.fatal-creators-page .category-btn.active {
    border-color: rgba(212, 175, 152, 0.44) !important;
    color: var(--color-white) !important;
    box-shadow: 0 20px 42px rgba(160, 114, 90, 0.3), inset 0 1px 0 rgba(248, 240, 240, 0.16);
}



.fatal-creators-page .category-btn:hover {
    border-color: rgba(212, 175, 152, 0.52) !important;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 54%),
        linear-gradient(135deg, rgba(35, 18, 56, 0.8), rgba(26, 12, 45, 0.86)) !important;
    box-shadow: 0 16px 34px rgba(160, 114, 90, 0.14), inset 0 1px 0 rgba(248, 240, 240, 0.15);
}

.fatal-creators-page .category-btn:hover::before {
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 48%),
        linear-gradient(135deg, rgba(160, 114, 90, 0.58), rgba(26, 12, 45, 0.82));
}

.fatal-creators-page .category-btn.active {
    border-color: rgba(160, 114, 90, 0.7) !important;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 46%),
        linear-gradient(135deg, rgba(160, 114, 90, 0.82), rgba(160, 114, 90, 0.92) 52%, rgba(26, 12, 45, 0.94)) !important;
    box-shadow: 0 18px 42px rgba(160, 114, 90, 0.26), inset 0 1px 0 rgba(248, 240, 240, 0.18);
}

.fatal-creators-page #moreDropdown.has-active .category-btn {
    border-color: rgba(160, 114, 90, 0.7) !important;
    color: var(--color-white) !important;
}

.fatal-creators-page .category-btn i {
    color: var(--color-white);
    box-shadow: 0 0 18px rgba(160, 114, 90, 0.1);
}

.fatal-creators-page .category-btn i::before {
    font-size: inherit !important;
    line-height: 1 !important;
}

@media (max-width: 575.98px) {
    .category-fixed-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #catWrapper {
        gap: 5px !important;
    }

    #visibleCats {
        flex: 0 1 auto !important;
        gap: 5px !important;
        justify-content: center !important;
    }

    .fatal-creators-page .category-btn {
        min-width: 0 !important;
        min-height: 42px !important;
        gap: 5px !important;
        padding: 9px 10px !important;
        font-size: 10px !important;
        letter-spacing: .035em !important;
        border-radius: 6px !important;
    }

    .fatal-creators-page .category-btn i {
        margin-right: 2px !important;
        font-size: 10px !important;
    }

    #moreDropdown > .category-btn {
        min-width: 40px !important;
        width: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 380px) {
    #catWrapper,
    #visibleCats {
        gap: 4px !important;
    }

    .fatal-creators-page .category-btn {
        padding: 8px 8px !important;
        font-size: 9px !important;
        letter-spacing: .02em !important;
    }

    #moreDropdown > .category-btn {
        min-width: 36px !important;
        width: 36px !important;
    }
}

.fatal-creators-page .category-btn.active i,
.fatal-creators-page .category-btn:hover i {
    background: rgba(248, 240, 240, 0.16);
    color: var(--color-white);
}

.fatal-creators-page button[data-target="#modalFiltros"] {
    min-height: 46px;
    border: 1px solid rgba(160, 114, 90, 0.47) !important;
    border-radius: 6px !important;
    background: var(--color-magenta) !important;
    color: var(--color-white) !important;
    padding: 11px 22px !important;
    font-size: 11px;
    font-weight: 950 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fatal-creators-page button[data-target="#modalFiltros"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(160, 114, 90, 0.32), 0 0 0 1px rgba(248, 240, 240, 0.14) inset !important;
}

.fatal-list-toolbar {
    position: relative;
    gap: 18px;
    margin-top: 4px;
    padding: 24px 26px;
    border: 1px solid rgba(248, 240, 240, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(248, 240, 240, 0.075), rgba(248, 240, 240, 0.025)),
        rgba(26, 12, 45, 0.2);
    box-shadow: 0 22px 58px rgba(26, 12, 45, 0.26);
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.fatal-list-toolbar::before {
    content: "";
    position: absolute;
    inset: -80px auto auto -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 152, 0.15), transparent 64%);
    pointer-events: none;
}

.fatal-list-toolbar::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -42px;
    width: 180px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 152, 0.15), transparent 68%);
    filter: blur(8px);
    pointer-events: none;
}

.fatal-list-heading {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.fatal-list-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    background: linear-gradient(100deg, #ffffff 0%, #f0eaff 55%, #c8b4f8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .20em;
    text-transform: uppercase;
}

@keyframes fatal-online-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.75), 0 0 8px rgba(74, 222, 128, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(74, 222, 128, 0), 0 0 22px rgba(74, 222, 128, 0.35);
        transform: scale(1.15);
    }
}

.fatal-list-eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #86efac, #22c55e);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8), 0 0 4px rgba(34, 197, 94, 0.5);
    animation: fatal-online-pulse 1.8s ease-in-out infinite;
}

.fatal-list-title {
    position: relative;
    margin: 0;
    color: var(--color-white);
    display: grid;
    gap: 2px;
    font-size: clamp(1.8rem, 4vw, 3.45rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: 0;
    text-shadow: 0 18px 42px rgba(26, 12, 45, 0.32);
}

.fatal-list-title .fatal-title-prefix {
    color: rgba(248, 240, 240, 0.88);
    font-size: .58em;
    font-weight: 850;
    line-height: 1;
}

.fatal-list-title .fatal-title-main {
    background: linear-gradient(100deg, #ffffff 0%, #f0eaff 40%, #ddd0ff 75%, #c8b4f8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 4px 18px rgba(168, 85, 247, 0.18));
}

.fatal-list-title strong,
.fatal-list-title b,
.fatal-list-title em {
    background: linear-gradient(100deg, #ffffff 0%, #f0eaff 40%, #ddd0ff 75%, #c8b4f8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-style: normal;
}

.fatal-list-title::first-letter {
    color: #f0eaff;
    text-shadow: 0 0 24px rgba(200, 180, 248, 0.4);
}

@media (max-width: 767.98px) {
    .fatal-list-toolbar {
        align-items: stretch !important;
        flex-direction: column;
        padding: 18px;
    }

    .fatal-list-title {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .fatal-creators-page button[data-target="#modalFiltros"] {
        width: 100%;
    }
}

/* =========================================================================
   Migrated from resources/views/index/home-session.blade.php
   ========================================================================= */
.fatal-story-overlay-trigger {
      cursor: pointer;
    }

    .fatal-post-story-avatar-wrap {
      position: relative;
      display: inline-flex;
      flex: 0 0 auto;
      width: 60px;
      height: 60px;
    }

    .fatal-post-story-avatar-wrap.has-stories {
      padding: 1.2px;
      background: linear-gradient(145deg, var(--color-magenta-light), var(--color-magenta) 56%, var(--color-magenta));
      box-shadow: 0 10px 26px rgba(160, 114, 90, 0.18);
 
    }

    .fatal-post-story-avatar-wrap .avatarUser {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      border: 2px solid rgba(248, 240, 240, 0.88);
    }

    .fatal-post-story-add {
      position: absolute;
      right: -5px;
      bottom: -4px;
      z-index: 3;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 2px solid #1A0C2D;
      border-radius: 50%;
      background: var(--color-magenta);
      color: var(--color-white);
      box-shadow: 0 8px 20px rgba(160, 114, 90, 0.28);
      cursor: pointer;
    }

    .fatal-post-story-add i {
      font-size: 10px;
      line-height: 1;
    }

/* =========================================================================
   Migrated from resources/views/users/create-story.blade.php
   ========================================================================= */
.fatal-story-page {
    min-height: calc(100vh - 82px);
    padding: 34px 0 52px;
    background:
      radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.15), transparent 28rem),
      radial-gradient(circle at 92% 8%, rgba(212, 175, 152, 0.1), transparent 24rem),
      linear-gradient(135deg, #1A0C2D 0%, #1A0C2D 52%, #1A0C2D 100%);
    color: var(--color-white);
  }

  .fatal-story-shell {
    display: grid;
    grid-template-columns: minmax(280px, 410px) minmax(300px, 1fr);
    gap: 24px;
    align-items: start;
  }

  .fatal-story-panel,
  .fatal-story-preview-card {
    border: 1px solid rgba(232, 197, 175, 0.14);
    border-radius: 10px;
    background:
      radial-gradient(circle at 18% 0%, rgba(212, 175, 152, 0.15), transparent 34%),
      rgba(26, 12, 45, 0.88);
    box-shadow: 0 28px 80px rgba(26, 12, 45, 0.34);
    backdrop-filter: blur(18px);
  }

  .fatal-story-panel {
    padding: 18px;
  }

  .fatal-story-title {
    margin-bottom: 17px;
  }

  .fatal-story-title small {
    display: block;
    color: var(--color-magenta-light);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .fatal-story-title h2 {
    margin: 4px 0 0;
    color: var(--color-white);
    font-size: 28px;
    font-weight: 950;
  }

  .fatal-story-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }

  .fatal-story-tab,
  .fatal-story-action {
    min-height: 42px;
    border: 1px solid rgba(248, 240, 240, 0.1);
    border-radius: 7px;
    background: rgba(248, 240, 240, 0.045);
    color: rgba(248, 240, 240, 0.78);
    font-weight: 900;
    cursor: pointer;
  }

  .fatal-story-tab.active,
  .fatal-story-action.primary {
    border: 1px solid rgba(160, 114, 90, 0.47) !important;
    background: var(--color-magenta) !important;
    color: var(--color-white) !important;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.22) !important;
  }

  .fatal-story-group {
    display: none;
  }

  .fatal-story-group.active {
    display: block;
  }

  .fatal-story-label {
    display: block;
    margin: 14px 0 8px;
    color: rgba(232, 197, 175, 0.72);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .fatal-story-panel input,
  .fatal-story-panel textarea,
  .fatal-story-panel select {
    width: 100%;
    border: 1px solid rgba(232, 197, 175, 0.16);
    border-radius: 7px;
    background: rgba(26, 12, 45, 0.34);
    color: var(--color-white);
    padding: 11px 12px;
  }

  .fatal-story-panel textarea {
    min-height: 104px;
    resize: vertical;
  }

  .fatal-story-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 9px;
  }

  .fatal-story-bg,
  .fatal-story-color {
    height: 64px;
    border: 1px solid rgba(248, 240, 240, 0.12);
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
  }

  .fatal-story-bg.active,
  .fatal-story-color.active {
    outline: 2px solid var(--color-magenta-light);
    outline-offset: 2px;
  }

  .fatal-story-range {
    display: grid;
    grid-template-columns: 98px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    color: rgba(248, 240, 240, 0.7);
    font-size: 12px;
    font-weight: 850;
  }

  .fatal-story-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .fatal-story-preview-card {
    padding: 18px;
  }

  .fatal-story-phone {
    width: min(100%, 390px);
    margin: 0 auto;
    padding: 10px;
    border: 1px solid rgba(232, 197, 175, 0.22);
    border-radius: 26px;
    background: #1A0C2D;
    box-shadow: 0 30px 90px rgba(26, 12, 45, 0.45), 0 0 58px rgba(160, 114, 90, 0.18);
  }

  #fatalStoryCanvas {
    width: 100%;
    aspect-ratio: 9 / 16;
    display: block;
    border-radius: 18px;
    background: #1A0C2D;
  }

  .fatal-story-hint {
    margin: 12px 0 0;
    color: rgba(248, 240, 240, 0.58);
    font-size: 12px;
    text-align: center;
  }

  .fatal-story-error {
    display: none;
    margin-top: 14px;
    border: 1px solid rgba(160, 114, 90, 0.36);
    border-radius: 7px;
    background: rgba(160, 114, 90, 0.18);
    color: var(--color-white);
    padding: 10px 12px;
  }

  @media (max-width: 991.98px) {
    .fatal-story-shell {
      grid-template-columns: 1fr;
    }

    .fatal-story-preview-card {
      order: -1;
    }
  }

/* =========================================================================
   Migrated from resources/views/users/profile.blade.php
   ========================================================================= */
.fatal-profile-verification-card {
      border: 1px solid rgba(160, 114, 90, 0.42) !important;
      background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.35) 38%, rgba(26, 12, 45, 0.88) 100%) !important;
      color: var(--color-white);
    }
    .fatal-verification-video-frame {
      overflow: hidden;
      border: 1px solid rgba(232, 197, 175, 0.22);
      border-radius: 8px;
      background: #1A0C2D;
      box-shadow: 0 18px 44px rgba(26, 12, 45, 0.3);
    }
    .fatal-verification-video-frame video {
      display: block;
      width: 100%;
      max-height: 320px;
      object-fit: cover;
      background: #1A0C2D;
    }
    .fatal-verification-copy,
    .fatal-verification-owner p {
      color: rgba(248, 240, 240, 0.7);
      font-size: 13px;
      line-height: 1.55;
    }
    .fatal-verification-empty {
      display: grid;
      gap: 8px;
      place-items: center;
      padding: 24px 18px;
      border: 1px dashed rgba(248, 240, 240, 0.16);
      border-radius: 8px;
      color: rgba(248, 240, 240, 0.72);
      text-align: center;
      background: rgba(26, 12, 45, 0.22);
    }
    .fatal-verification-empty i {
      color: rgba(248, 240, 240, 0.44);
      font-size: 30px;
    }
    .fatal-verification-empty strong {
      color: var(--color-white);
    }
    .fatal-verification-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid rgba(248, 240, 240, 0.12);
      background: rgba(26, 12, 45, 0.25);
    }
    .fatal-verification-status span {
      color: rgba(248, 240, 240, 0.58);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .fatal-verification-status strong {
      color: var(--color-magenta-light);
    }
    .fatal-verification-status.status-approved strong {
      color: var(--color-white);
    }
    .fatal-verification-status.status-rejected strong {
      color: var(--color-magenta-mid);
    }
    .fatal-verification-upload {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      margin: 0;
      border: 1px solid rgba(232, 197, 175, 0.28);
      border-radius: 8px;
      background: rgba(248, 240, 240, 0.06);
      color: var(--color-white);
      cursor: pointer;
      font-weight: 800;
    }
    .fatal-verification-upload input {
      display: none;
    }
    #escortVerificationVideoHint {
      color: rgba(248, 240, 240, 0.58);
      font-size: 12px;
    }

    .img-profile-user .fatal-profile-actions {
      display: flex !important;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: min(100%, 980px);
      margin: 0 auto 12px !important;
    }

    /* Main profile avatar and its two independent controls. */
    .img-profile-user .fatal-profile-avatar-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 150px;
      min-height: 150px;
      margin: 0 auto 8px;
      overflow: visible !important;
      border-radius: 50%;
      background: transparent;
      vertical-align: top;
    }
    .img-profile-user .fatal-profile-avatar-shell > .avatarUser,
    .img-profile-user .fatal-profile-avatar-shell > .fatal-profile-story-avatar .avatarUser {
      display: block;
      width: 150px !important;
      height: 150px !important;
      max-width: 150px !important;
      margin: 0 !important;
      object-fit: cover !important;
      object-position: center center !important;
    }
    .img-profile-user .fatal-profile-avatar-control {
      position: absolute;
      top: auto !important;
      bottom: 2px !important;
      z-index: 8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px !important;
      height: 38px;
      padding: 0 !important;
      border: 2px solid rgba(248, 240, 240, 0.88);
      border-radius: 50%;
      background: rgba(26, 12, 45, 0.88) !important;
      color: var(--color-white) !important;
      box-shadow: 0 8px 22px rgba(26, 12, 45, 0.42);
      line-height: 1;
      text-decoration: none !important;
    }
    .img-profile-user .fatal-profile-avatar-camera {
      right: auto !important;
      left: 2px !important;
    }
    .img-profile-user .fatal-profile-avatar-story-add {
      right: 2px !important;
      left: auto !important;
      background: var(--color-magenta) !important;
    }
    .img-profile-user .fatal-profile-avatar-control:hover {
      background: var(--color-magenta) !important;
      color: var(--color-white) !important;
      transform: translateY(-1px);
    }
    .img-profile-user .fatal-profile-avatar-control i {
      margin: 0 !important;
      font-size: 16px;
      line-height: 1;
    }

    .fatal-profile-story-avatar {
      position: relative;
      display: inline-flex;
      padding: 4px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--color-magenta-light), var(--color-magenta) 55%, var(--color-magenta));
      box-shadow: 0 16px 38px rgba(26, 12, 45, 0.34);
      cursor: pointer;
    }

    .fatal-profile-story-avatar::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 3px solid #1A0C2D;
      border-radius: 50%;
      pointer-events: none;
    }

    .fatal-profile-story-avatar .avatarUser {
      display: block;
      margin-bottom: 0 !important;
      object-fit: cover;
    }

    .fatal-profile-story-avatar:hover {
      text-decoration: none;
      filter: brightness(1.08);
    }

    #formUpdateCreate .fatal-post-story-avatar-wrap {
      position: relative !important;
      display: inline-flex !important;
      flex: 0 0 60px !important;
      width: 60px !important;
      height: 60px !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      overflow: visible !important;
    }

    #formUpdateCreate .fatal-post-story-avatar-wrap.has-stories {
      padding: 1.2px !important;
      background: linear-gradient(145deg, var(--color-magenta-light), var(--color-magenta) 56%, var(--color-magenta)) !important;
      box-shadow: 0 10px 26px rgba(160, 114, 90, 0.18) !important;
    }

    #formUpdateCreate .fatal-post-story-avatar-wrap .avatarUser {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      object-fit: cover !important;
      object-position: center center !important;
      display: block !important;
    }

    #formUpdateCreate .fatal-post-story-avatar-wrap .fatal-post-story-add {
      right: -4px !important;
      bottom: -4px !important;
    }

    #formUpdateCreate .media-body.position-relative {
      position: relative !important;
    }

    #formUpdateCreate #updateDescription {
      padding-bottom: 34px !important;
    }

    #formUpdateCreate #the-count.fatal-inline-counter {
      position: absolute !important;
      right: 14px !important;
      bottom: 10px !important;
      width: auto !important;
      margin: 0 !important;
      float: none !important;
      text-align: right !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }

    #formUpdateCreate .fatal-post-tools-row {
      display: flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .fatal-generate-review-btn,
    .fatal-review-modal-copy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border: 1px solid rgba(160, 114, 90, 0.47) !important;
      border-radius: 6px !important;
      background: var(--color-magenta) !important;
      color: var(--color-white) !important;
      font-weight: 900;
      box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
    }

    .fatal-review-modal-qr {
      width: 248px;
      max-width: 100%;
      margin: 0 auto 18px;
      padding: 12px;
      border: 1px solid rgba(212, 175, 152, 0.22);
      border-radius: 10px;
      background: var(--fatal-panel-gradient);
      box-shadow: 0 18px 50px rgba(26, 12, 45, 0.28);
    }

    .fatal-review-modal-qr img,
    .fatal-review-modal-qr canvas {
      width: 100% !important;
      height: auto !important;
      display: block;
    }

    .fatal-review-link-box {
      display: flex;
      gap: 8px;
      padding: 8px;
      border: 1px solid rgba(248, 240, 240, 0.12);
      border-radius: 8px;
      background: rgba(248, 240, 240, 0.06);
    }

    .fatal-review-link-box input {
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--color-white);
      font-size: 13px;
    }

    .fatal-review-link-box input:focus {
      outline: 0;
      box-shadow: none;
    }

    .fatal-review-post {
      border: 1px solid rgba(160, 114, 90, 0.42) !important;
      background: linear-gradient(180deg, rgba(248, 240, 240, 0.06), rgba(248, 240, 240, 0.025)), rgba(26, 12, 45, 0.9) !important;
      color: var(--color-white);
    }

    .fatal-review-post-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .fatal-review-post-head img {
      width: 52px;
      height: 52px;
      border: 2px solid rgba(212, 175, 152, 0.34);
      border-radius: 50%;
      object-fit: cover;
    }

    .fatal-review-post-head strong,
    .fatal-review-post-head small {
      display: block;
    }

    .fatal-review-post-head small {
      color: rgba(248, 240, 240, 0.58);
      font-size: 12px;
    }

    .fatal-review-stars {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
      color: rgba(248, 240, 240, 0.2);
      font-size: 20px;
    }

    .fatal-review-stars .is-filled {
      color: var(--color-magenta-mid);
      text-shadow: 0 8px 20px rgba(212, 175, 152, 0.2);
    }

    .fatal-review-comment {
      color: rgba(248, 240, 240, 0.82);
      line-height: 1.65;
    }
    .img-profile-user .fatal-profile-actions > .btn-profile,
    .img-profile-user .fatal-profile-actions > form,
    .img-profile-user .fatal-profile-actions > form .btn-profile {
      margin: 0 !important;
    }
    .img-profile-user .fatal-profile-actions > form {
      display: inline-flex;
    }
    .fatal-profile-contact-action,
    .fatal-profile-social-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border: 1px solid rgba(232, 197, 175, 0.2) !important;
      border-radius: 6px !important;
      color: var(--color-white) !important;
      text-decoration: none !important;
      box-shadow: 0 12px 30px rgba(26, 12, 45, 0.22);
      transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    }
    .fatal-profile-contact-action {
      gap: 8px;
      padding: 10px 16px;
      font-weight: 800;
    }
    .fatal-profile-contact-action.whatsapp {
      background: var(--color-magenta) !important;
    }
    .fatal-profile-contact-action.whatsapp {
      border-color: rgba(160, 114, 90, 0.34) !important;
      background: var(--color-magenta) !important;
      box-shadow: 0 12px 30px rgba(160, 114, 90, 0.18);
    }
    .fatal-profile-social-action {
      flex: 0 0 44px;
      width: 44px;
      padding: 0;
      background: rgba(248, 240, 240, 0.065) !important;
      color: var(--color-magenta-light) !important;
      font-size: 18px;
    }
    .fatal-profile-contact-action:hover,
    .fatal-profile-social-action:hover {
      transform: translateY(-2px);
      border-color: rgba(232, 197, 175, 0.48) !important;
      color: var(--color-white) !important;
    }
    #modalProfilePhone .modal-content {
      overflow: hidden;
      border: 1px solid rgba(232, 197, 175, 0.3);
      border-radius: 8px;
      background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), rgba(26, 12, 45, 0.98) 62%);
      color: var(--color-white);
      box-shadow: 0 34px 90px rgba(26, 12, 45, 0.52);
    }
    #modalProfilePhone .modal-header {
      border-color: rgba(248, 240, 240, 0.1);
    }
    #profilePhoneNumber {
      color: var(--color-magenta-light);
      letter-spacing: .02em;
    }
    .fatal-profile-copy-alert {
      position: fixed;
      z-index: 999999;
      right: 22px;
      bottom: 22px;
      display: none;
      padding: 12px 16px;
      border: 1px solid rgba(232, 197, 175, 0.28);
      border-radius: 6px;
      background: #1A0C2D;
      color: var(--color-white);
      box-shadow: 0 18px 50px rgba(26, 12, 45, 0.38);
      font-weight: 800;
    }

    /* Profile navigation: icon-only tabs with a neutral active state. */
    body .nav-profile {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-bottom: 0 !important;
    }
    body .nav-profile .nav-link {
      display: flex;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      width: 48px;
      max-width: 48px;
      height: 48px;
      margin: 0 !important;
      padding: 0 !important;
      border: 1px solid rgba(248, 240, 240, 0.12) !important;
      border-radius: 8px !important;
      background: rgba(248, 240, 240, 0.055) !important;
      box-shadow: 0 10px 24px rgba(26, 12, 45, 0.16);
      transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
    }
    body .nav-profile .nav-link > small,
    body .nav-profile .nav-link > a span {
      display: none !important;
    }
    body .nav-profile .nav-link > a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0 !important;
      background: transparent !important;
      color: rgba(248, 240, 240, 0.72) !important;
      line-height: 1;
    }
    body .nav-profile .nav-link i {
      margin: 0 !important;
      color: inherit !important;
      font-size: 20px;
      line-height: 1;
    }
    body .nav-profile .nav-link svg {
      width: 20px;
      height: 20px;
      color: inherit !important;
    }
    body .nav-profile .nav-link:hover {
      transform: translateY(-1px);
      border-color: rgba(248, 240, 240, 0.26) !important;
      background: rgba(248, 240, 240, 0.1) !important;
    }
    body .nav-profile .nav-link.active {
      border: 1px solid rgba(248, 240, 240, 0.42) !important;
      background: rgba(248, 240, 240, 0.2) !important;
      box-shadow: 0 12px 30px rgba(26, 12, 45, 0.22), inset 0 0 0 1px rgba(248, 240, 240, 0.08);
    }
    body .nav-profile .nav-link.active > a,
    body .nav-profile .nav-link.active i,
    body .nav-profile .nav-link.active svg {
      color: var(--color-white) !important;
    }

    /* Profile actions: icon-only controls on tablets and phones. */
    @media (max-width: 991.98px) {
      .img-profile-user .fatal-profile-actions > .btn-profile,
      .img-profile-user .fatal-profile-actions > form,
      .img-profile-user .fatal-profile-actions > form .btn-profile,
      .img-profile-user .fatal-profile-actions > .fatal-profile-contact-action,
      .img-profile-user .fatal-profile-actions > .fatal-profile-social-action {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important;
      }
      .img-profile-user .fatal-profile-actions > form {
        height: 44px;
      }
      .img-profile-user .fatal-profile-actions .btn-profile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1 !important;
      }
      .img-profile-user .fatal-profile-actions .btn-profile i,
      .img-profile-user .fatal-profile-actions .fatal-profile-contact-action i,
      .img-profile-user .fatal-profile-actions .fatal-profile-social-action i {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
      }
      .img-profile-user .fatal-profile-actions .btn-profile svg {
        margin: 0 !important;
      }
      .img-profile-user .fatal-profile-actions span {
        display: none !important;
      }
    }

    @media (max-width: 767.98px) {
      .img-profile-user .fatal-profile-actions {
        width: 100%;
        padding: 0 12px;
        gap: 8px;
      }
      .img-profile-user .fatal-profile-actions > .btn-profile,
      .img-profile-user .fatal-profile-actions > form {
        flex: 1 1 150px;
        width: auto !important;
      }
      .img-profile-user .fatal-profile-actions > form .btn-profile {
        width: 100% !important;
      }
      .fatal-profile-contact-action {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
      }
      .fatal-profile-social-action {
        flex: 0 0 44px;
      }

      .wrap-post {
        padding-left: 12px !important;
        padding-right: 12px !important;
      }

      body .container .row .wrap-post {
        padding-left: 12px !important;
        padding-right: 12px !important;
      }

      .wrap-post .card,
      .wrap-post .card-body,
      .wrap-post .form-post,
      .wrap-post form,
      .wrap-post .textarea,
      .wrap-post textarea,
      .wrap-post .grid-updates,
      .wrap-post .updates {
        max-width: 100% !important;
      }

      .wrap-post .card {
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 8px !important;
      }

      .wrap-post textarea,
      .wrap-post .form-control {
        width: 100% !important;
        min-width: 0 !important;
      }

      .wrap-post .card-footer,
      .wrap-post .list-inline,
      .wrap-post .form-post-actions,
      .wrap-post .btn-block,
      .wrap-post .justify-content-between {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
      }

      .wrap-post [class*="btn"],
      .wrap-post button {
        white-space: normal !important;
      }

      .wrap-post .btn-primary,
      .wrap-post .fatal-button,
      .wrap-post button[type="submit"] {
        min-width: 0 !important;
        max-width: 100% !important;
      }

      .wrap-post .list-inline-item,
      .wrap-post .dropdown,
      .wrap-post .dropup {
        margin: 0 !important;
      }

      #formUpdateCreate {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      #formUpdateCreate .card {
        overflow: hidden !important;
        background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), rgba(26, 12, 45, 0.94)) !important;
        border: 1px solid rgba(232, 197, 175, 0.12) !important;
      }

      #formUpdateCreate .card-body {
        padding: 18px 16px 6px !important;
      }

      #formUpdateCreate .media {
        display: flex !important;
        gap: 12px !important;
        align-items: start !important;
      }

      #formUpdateCreate .media > span {
        margin: 0 !important;
      }

      #formUpdateCreate .fatal-post-story-avatar-wrap {
        flex: 0 0 54px !important;
        width: 54px !important;
        height: 54px !important;
        margin-right: 0 !important;
      }

      #formUpdateCreate .avatarUser {
        width: 54px !important;
        height: 54px !important;
        object-fit: cover !important;
      }

      #formUpdateCreate #updateDescription {
        min-height: 126px !important;
        border: 1px solid rgba(232, 197, 175, 0.16) !important;
        border-radius: 8px !important;
        background: rgba(248, 240, 240, 0.045) !important;
        color: var(--color-white) !important;
        padding: 14px !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
      }

      #formUpdateCreate .card-footer {
        padding: 12px 14px 16px !important;
        background: rgba(26, 12, 45, 0.18) !important;
      }

      #formUpdateCreate .card-footer > .justify-content-between {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
      }

      #formUpdateCreate .fatal-post-tools-row {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        overflow: hidden !important;
      }

      #formUpdateCreate .btn-post,
      #formUpdateCreate .dropdown.btn-post,
      #formUpdateCreate #dropdownMoreOptions {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 7px !important;
        border: 1px solid rgba(232, 197, 175, 0.18) !important;
        background: rgba(248, 240, 240, 0.06) !important;
        color: var(--color-magenta-light) !important;
      }

      #formUpdateCreate .btn-post svg,
      #formUpdateCreate .btn-post i {
        max-width: 16px !important;
        max-height: 16px !important;
        margin: 0 !important;
        font-size: 16px !important;
      }

      #formUpdateCreate .d-inline-block.float-right.position-relative.w-100-mobile {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        float: none !important;
      }

      #formUpdateCreate .d-inline-block.float-right.position-relative.w-100-mobile > span {
        display: block !important;
        width: 100% !important;
        float: none !important;
      }

      #formUpdateCreate #btnCreateUpdate {
        width: 100% !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        font-size: 15px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
      }

      #formUpdateCreate #textPostPublish {
        display: inline !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
      }

      #formUpdateCreate #the-count {
        width: auto !important;
        margin: 0 !important;
        float: none !important;
        text-align: right !important;
      }
    }

/* =========================================================================
   Migrated from resources/views/users/edit_my_page.blade.php
   ========================================================================= */
.profile-settings-page { color: var(--color-white); }
    .profile-settings-shell { max-width: 1180px; margin: 0 auto; }
    .profile-settings-heading { margin-bottom: 24px; }
    .profile-settings-heading h2 { color: var(--color-white); font-weight: 900; }
    .profile-public-alert {
      display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding: 16px 18px;
      border: 1px solid rgba(160, 114, 90, 0.35); border-radius: 8px;
      background: linear-gradient(135deg, rgba(160, 114, 90, 0.58), rgba(26, 12, 45, 0.88));
      box-shadow: 0 18px 45px rgba(26, 12, 45, 0.24);
    }
    .profile-public-alert i { color: var(--color-white); font-size: 22px; }
    .profile-public-alert strong { display: block; color: var(--color-white); margin-bottom: 3px; }
    .profile-public-alert p { margin: 0; color: rgba(248, 240, 240, 0.72); }
    .profile-settings-card {
      margin-bottom: 18px; overflow: hidden; border: 1px solid rgba(248, 240, 240, 0.1);
      border-radius: 8px; background: linear-gradient(160deg, rgba(35, 18, 56, 0.76), rgba(26, 12, 45, 0.94));
      box-shadow: 0 22px 60px rgba(26, 12, 45, 0.26);
    }
    .profile-settings-card__header {
      display: flex; align-items: center; gap: 12px; padding: 18px 20px;
      border-bottom: 1px solid rgba(248, 240, 240, 0.08);
      background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 58%);
    }
    .profile-settings-card__icon {
      width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
      flex: 0 0 42px; border: 1px solid rgba(212, 175, 152, 0.28); border-radius: 6px;
      background: rgba(160, 114, 90, 0.48); color: var(--color-white); font-size: 18px;
    }
    .profile-settings-card__header h3 { margin: 0; color: var(--color-white); font-size: 18px; font-weight: 900; }
    .profile-settings-card__header p { margin: 3px 0 0; color: rgba(248, 240, 240, 0.55); font-size: 13px; }
    .profile-settings-card__body { padding: 20px; }
    .profile-field label { color: rgba(248, 240, 240, 0.72); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .profile-field .form-control,
    .profile-field .custom-select,
    .profile-settings-page .select2-container--default .select2-selection--single,
    .profile-settings-page .select2-container--default .select2-selection--multiple {
      min-height: 46px; border: 1px solid rgba(248, 240, 240, 0.12) !important; border-radius: 6px !important;
      background: rgba(26, 12, 45, 0.58) !important; color: var(--color-white) !important; box-shadow: none !important;
    }
    .profile-native-select {
      color-scheme: dark;
      cursor: pointer;
      background-color: #1A0C2D !important;
    }
    .profile-native-select option {
      background: #1A0C2D !important;
      color: var(--color-white) !important;
    }
    .profile-native-select option:checked,
    .profile-native-select option:hover {
      background: var(--color-magenta) !important;
      color: var(--color-white) !important;
    }
    .profile-field textarea.form-control { min-height: 110px; resize: vertical; }
    .profile-field .input-group-text {
      min-width: 45px; justify-content: center; border-color: rgba(248, 240, 240, 0.12);
      border-radius: 6px 0 0 6px !important; background: rgba(160, 114, 90, 0.34); color: var(--color-magenta-light);
    }
    .profile-field .input-group { flex-wrap: nowrap; gap: 0; }
    .profile-field .input-group-prepend { margin-right: 0; }
    .profile-field .input-group > .form-control,
    .profile-field .input-group > .custom-select {
      border-radius: 0 6px 6px 0 !important;
      padding-left: .75rem !important;
    }
    .profile-field .input-group-prepend + .form-control { margin-left: -1px; }
    .profile-field--compact .form-group,
    .profile-field.form-group { margin-bottom: 16px; }
    .profile-settings-page .select2-container { width: 100% !important; }
    .profile-settings-page .select2-selection__rendered { color: var(--color-white) !important; line-height: 44px !important; }
    .profile-settings-page .select2-selection--multiple {
      display: flex !important; align-items: center !important; height: auto !important; padding: 4px 7px !important;
    }
    .profile-settings-page .select2-selection--multiple .select2-selection__rendered {
      width: 100%; display: flex !important; align-items: center !important; flex-wrap: wrap !important;
      gap: 5px; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important;
    }
    .profile-settings-page .select2-selection__choice {
      display: inline-flex !important; align-items: center !important; min-height: 28px; margin: 0 !important;
      padding: 4px 9px !important; border: 0 !important; border-radius: 5px !important;
      background: var(--color-magenta) !important; color: var(--color-white) !important; line-height: 1 !important;
    }
    .profile-settings-page .select2-selection__choice__remove { margin-right: 6px !important; color: var(--color-magenta-light) !important; }
    .profile-settings-page .select2-search--inline {
      display: inline-flex !important; align-items: center !important; flex: 1 1 120px; min-width: 100px;
      margin: 0 !important; padding: 0 !important;
    }
    .profile-settings-page .select2-search--inline .select2-search__field {
      width: 100% !important; height: 30px !important; margin: 0 !important; padding: 3px 4px !important;
      border: 0 !important; background: transparent !important; color: var(--color-white) !important; line-height: 24px !important;
    }
    #postTagsWrap .select2-selection__choice {
      order: 0 !important;
    }
    #postTagsWrap .select2-search--inline {
      order: 9999 !important;
      margin-left: 0 !important;
    }
    #postTagsWrap li.select2-search--inline.select2-selection__choice {
      display: inline-flex !important;
      width: auto !important;
      min-width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 8px !important;
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    #postTagsWrap li.post-tags-search-choice {
      display: inline-flex !important;
      width: auto !important;
      min-width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      margin: 0 !important;
      padding: 0 8px !important;
      align-items: center !important;
      flex: 0 0 auto !important;
      order: 9999 !important;
    }
    #postTagsWrap li.post-tags-search-choice > .select2-search--inline {
      display: inline-flex !important;
      width: auto !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    #postTagsWrap li.select2-search--inline.select2-selection__choice .select2-search__field {
      min-width: .75em !important;
      height: 30px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      line-height: 30px !important;
    }
    #postTagsWrap li.post-tags-search-choice .select2-search__field {
      min-width: .75em !important;
      height: 30px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      line-height: 30px !important;
    }
    .profile-settings-page .select2-selection__placeholder { color: rgba(248, 240, 240, 0.45) !important; }
    .select2-container--open .select2-dropdown {
      border: 1px solid rgba(248, 240, 240, 0.12) !important; border-radius: 6px !important;
      background: #1A0C2D !important; color: var(--color-white) !important; box-shadow: 0 22px 60px rgba(26, 12, 45, 0.48);
    }
    .select2-container--open .select2-search__field {
      border: 1px solid rgba(248, 240, 240, 0.14) !important; border-radius: 5px;
      background: #1A0C2D !important; color: var(--color-white) !important;
    }
    .select2-results__option { color: rgba(248, 240, 240, 0.76); }
    .select2-results__option--highlighted[aria-selected] { background: var(--color-magenta) !important; color: var(--color-white) !important; }
    .select2-results__option[aria-selected=true] { background: #231238 !important; color: var(--color-white) !important; }
    .profile-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .profile-choice {
      display: flex; align-items: center; gap: 9px; min-height: 42px; margin: 0; padding: 9px 11px;
      border: 1px solid rgba(248, 240, 240, 0.09); border-radius: 6px; background: rgba(248, 240, 240, 0.03);
      color: rgba(248, 240, 240, 0.78); cursor: pointer;
    }
    .profile-choice input { accent-color: var(--color-magenta); }
    .service-category { margin-bottom: 18px; }
    .service-category:last-child { margin-bottom: 0; }
    .service-category__title { margin: 0 0 10px; color: var(--color-magenta-light); font-size: 14px; font-weight: 900; }
    .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .currency-brl { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
    .service-item {
      padding: 14px; border: 1px solid rgba(248, 240, 240, 0.09); border-radius: 7px;
      background: rgba(248, 240, 240, 0.03);
    }
    .service-item__toggle { display: flex; align-items: center; gap: 9px; color: var(--color-white); font-weight: 900; }
    .service-item__description { min-height: 34px; margin: 8px 0; color: rgba(248, 240, 240, 0.5); font-size: 12px; }
    .availability-schedule {
      display: grid;
      gap: 9px;
    }
    .availability-day {
      display: grid;
      grid-template-columns: minmax(150px, 1fr) auto minmax(280px, 1.35fr);
      align-items: center;
      gap: 16px;
      min-height: 66px;
      padding: 10px 12px;
      border: 1px solid rgba(248, 240, 240, 0.09);
      border-radius: 7px;
      background: linear-gradient(135deg, rgba(248, 240, 240, 0.04), rgba(160, 114, 90, 0.08));
      transition: border-color .2s ease, background .2s ease, opacity .2s ease;
    }
    .availability-day:not(.is-disabled) {
      border-color: rgba(212, 175, 152, 0.25);
      background: linear-gradient(135deg, rgba(212, 175, 152, 0.07), rgba(160, 114, 90, 0.13));
    }
    .availability-day__name {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
      font-size: 13px;
      font-weight: 900;
    }
    .availability-day__name i {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 6px;
      background: rgba(160, 114, 90, 0.36);
      color: var(--color-white);
      font-size: 15px;
    }
    .availability-day__toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: rgba(248, 240, 240, 0.68);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
    }
    .availability-day__toggle input {
      width: 17px;
      height: 17px;
      accent-color: var(--color-magenta);
    }
    .availability-day__times {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 9px;
    }
    .availability-time-control {
      min-width: 0;
      height: 42px;
      border: 1px solid rgba(248, 240, 240, 0.12) !important;
      border-radius: 6px !important;
      background: #1A0C2D !important;
      color: var(--color-white) !important;
      color-scheme: dark;
      padding: 8px 10px;
      font-variant-numeric: tabular-nums;
    }
    .availability-day__separator {
      color: rgba(248, 240, 240, 0.42);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .availability-day.is-disabled .availability-day__times {
      opacity: .38;
      pointer-events: none;
    }
    .availability-day.is-disabled .availability-day__name,
    .availability-day.is-disabled .availability-day__toggle {
      color: rgba(248, 240, 240, 0.42);
    }
    .save-profile-button {
      min-height: 52px; border: 1px solid rgba(160, 114, 90, 0.47) !important; border-radius: 6px !important;
      background: var(--color-magenta) !important;
      color: var(--color-white) !important; font-weight: 900; box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
    }
    @media (max-width: 767px) {
      .profile-settings-card__body { padding: 15px; }
      .profile-option-grid, .service-grid { grid-template-columns: 1fr; }
      .profile-settings-heading { text-align: left; }
      .availability-day {
        grid-template-columns: 1fr auto;
        gap: 10px;
      }
      .availability-day__times {
        grid-column: 1 / -1;
      }
    }
    @media (min-width: 1200px) {
      .profile-settings-card__body .row { margin-left: -7px; margin-right: -7px; }
      .profile-settings-card__body .row > [class*="col-"] { padding-left: 7px; padding-right: 7px; }
    }

/* =========================================================================
   Migrated from resources/views/users/messages-show.blade.php
   ========================================================================= */
@media (min-width: 991px) {
    .fileuploader-theme-thumbnails .fileuploader-thumbnails-input,
    .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item {
      width: calc(14% - 16px);
      padding-top: 12%;
      }
    }

/* =========================================================================
   Migrated from resources/views/users/edit-update.blade.php
   ========================================================================= */
.fileuploader-items {white-space: unset !important;}
      .fileuploader-item:nth-child(1) {margin-left: 16px !important;}

/* =========================================================================
   Migrated from resources/views/users/verify_account.blade.php
   ========================================================================= */
.eca-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(212, 175, 152, 0.15), transparent 28rem),
    linear-gradient(180deg, #1A0C2D 0%, #1A0C2D 100%);
  color: var(--color-white);
}
.eca-hero,
.eca-info-panel,
.eca-form-panel,
.eca-capture-modal {
  border: 1px solid rgba(160, 114, 90, 0.42);
  border-radius: 8px;
  background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.42) 35%, rgba(26, 12, 45, 0.7) 70%, #1A0C2D 100%);
  box-shadow: 0 28px 80px rgba(26, 12, 45, 0.34);
}
.eca-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  padding: 34px;
}
.eca-eyebrow {
  color: var(--color-magenta-light);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.eca-hero h1 {
  margin: 12px 0;
  color: var(--color-white);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
}
.eca-hero p,
.eca-info-panel p,
.eca-approved p,
.eca-capture-head p {
  color: rgba(248, 240, 240, 0.72);
}
.eca-status-card {
  padding: 22px;
  border-radius: 8px;
  background: rgba(26, 12, 45, 0.28);
}
.eca-status-card span,
.eca-status-card small {
  display: block;
  color: rgba(248, 240, 240, 0.64);
}
.eca-status-card strong {
  display: block;
  margin: 8px 0;
  color: var(--color-magenta-light);
  font-size: 30px;
}
.eca-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
}
.eca-info-panel,
.eca-form-panel {
  padding: 28px;
}
.eca-info-panel h2,
.eca-approved h3 {
  color: var(--color-white);
  font-weight: 900;
}
.eca-info-panel li {
  margin-bottom: 12px;
  color: rgba(248, 240, 240, 0.78);
}
.eca-input {
  min-height: 48px;
  border: 1px solid rgba(160, 114, 90, 0.52) !important;
  border-radius: 6px !important;
  background: rgba(26, 12, 45, 0.32) !important;
  color: var(--color-white) !important;
}
.eca-form-panel label {
  color: var(--color-magenta-light);
  font-weight: 800;
}
.eca-capture-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.eca-capture-summary div {
  padding: 14px;
  border: 1px solid rgba(248, 240, 240, 0.1);
  border-radius: 8px;
  background: rgba(26, 12, 45, 0.24);
}
.eca-capture-summary i,
.eca-approved i {
  color: var(--color-white);
  font-size: 24px;
}
.eca-capture-summary span,
.eca-capture-summary strong {
  display: block;
}
.eca-capture-summary strong {
  color: rgba(248, 240, 240, 0.58);
  font-size: 12px;
}
.eca-capture-summary .is-done {
  border-color: rgba(232, 197, 175, 0.45);
  box-shadow: 0 0 0 1px rgba(232, 197, 175, 0.14) inset;
}
.eca-capture-summary .is-done strong {
  color: var(--color-magenta-light);
}
.eca-primary-button,
.eca-secondary-button {
  min-height: 46px;
  border-radius: 6px !important;
  font-weight: 900;
}
.eca-primary-button {
  border: 1px solid rgba(160, 114, 90, 0.47) !important;
  background: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
}
.eca-secondary-button {
  border: 1px solid rgba(248, 240, 240, 0.14) !important;
  background: rgba(35, 18, 56, 0.81) !important;
  color: var(--color-white) !important;
}
.eca-approved {
  text-align: center;
  padding: 30px;
}
.eca-capture-modal {
  position: relative;
  padding: 28px;
  color: var(--color-white);
}
.eca-camera-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #1A0C2D;
}
#ecaCamera,
#ecaCanvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ecaCameraFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(248, 240, 240, 0.62);
}
.eca-capture-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 768px) {
  .eca-hero,
  .eca-grid {
    grid-template-columns: 1fr;
  }
  .eca-capture-summary {
    grid-template-columns: 1fr;
  }
}

/* Final specificity pass for legacy page selectors. */
body .btn-primary,
body .btn-danger,
body .btn-success,
body .btn-info,
body .btn-warning,
body .btn-main,
body .btn-arrow,
body .fatal-button,
body .fatal-action-main,
body .btn-promote-premium,
body:has(.fatal-page) .btn-light.btn-main,
body:has(.fatal-page) .toggleRegister,
body:has(.fatal-page) .btn-register-menu {
  background: var(--fatal-magenta) !important;
  border-color: rgba(232, 197, 175, 0.48) !important;
  color: var(--fatal-bg) !important;
  box-shadow: 0 10px 28px var(--fatal-action-shadow), inset 0 1px 0 rgba(248, 240, 240, 0.22) !important;
}

.fatal-hero-media-inner {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 42% 48% 44% 50% / 38% 42% 48% 44% !important;
  background: var(--fatal-bg) !important;
  box-shadow: 0 0 70px rgba(212, 175, 152, 0.12) !important;
}

.fatal-hero-media-inner::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 44px 22px rgba(26, 12, 45, 0.72),
    inset 0 0 82px 30px rgba(26, 12, 45, 0.32);
}

.fatal-hero-media-inner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wrap-center,
.error-page {
  background: transparent !important;
  color: var(--fatal-text) !important;
}

.error-page h1 {
  color: var(--fatal-accent) !important;
  text-shadow: 0 0 30px rgba(212, 175, 152, 0.22) !important;
}

.error-link {
  color: var(--fatal-accent-bright) !important;
}

.video-container,
.mobile-container,
.reels-container,
#videoGrid,
.video-wrapper {
  background-color: var(--fatal-surface-strong) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  box-shadow: 0 18px 52px rgba(26, 12, 45, 0.52) !important;
}

.live-badge,
.mobile-live-badge,
.timer-badge,
.mobile-timer-badge,
.connecting-message {
  background: rgba(49, 27, 75, 0.9) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.control-btn,
.mobile-control-btn,
.control-btn.end-call,
.mobile-control-btn.end-call,
.control-btn.muted,
.mobile-control-btn.muted {
  background: var(--fatal-magenta) !important;
  border: 1px solid rgba(232, 197, 175, 0.48) !important;
  color: var(--fatal-bg) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 152, 0.22) !important;
}

.participant-thumbnail,
.mobile-thumbnail,
.avatar-user {
  background-color: var(--fatal-surface-strong) !important;
  border-color: var(--fatal-accent) !important;
}

.dot-pattern {
  background-image: radial-gradient(circle, rgba(212, 175, 152, 0.15) 2px, transparent 2px) !important;
}

.epub-container .epub-view > iframe {
  background: var(--fatal-text) !important;
  box-shadow: 0 0 12px rgba(212, 175, 152, 0.24) !important;
}

body:has(.fatal-page) .navbar.p-nav .btn-main.btn-light,
body:has(.fatal-page) .navbar.p-nav .btn-primary,
body:has(.fatal-page) .navbar.p-nav .btn-register-menu,
body:has(.fatal-page) .navbar.p-nav .toggleRegister {
  background: var(--fatal-magenta) !important;
  border-color: rgba(232, 197, 175, 0.48) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 10px 28px var(--fatal-action-shadow), inset 0 1px 0 rgba(248, 240, 240, 0.22) !important;
}

body .btn-primary,
body .btn-danger,
body .btn-success,
body .btn-info,
body .btn-warning,
body .btn-main,
body .btn-arrow,
body .fatal-button,
body .fatal-action-main,
body .btn-promote-premium {
  color: var(--fatal-text) !important;
}

#page-container,
.quickinfo,
.quickinfo .inner {
  background: var(--fatal-panel-gradient) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.btn_red,
.btn_blue,
.btn_green,
.btn_yellow,
.quickinfo .button {
  background: var(--fatal-magenta) !important;
  border-color: rgba(232, 197, 175, 0.48) !important;
  color: var(--fatal-text) !important;
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-red-50,
.bg-red-100,
.bg-red-200 {
  background-color: var(--fatal-bg) !important;
}

.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-red-300,
.text-red-400,
.text-red-500,
.text-red-600 {
  color: var(--fatal-text) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-red-100,
.border-red-200,
.border-red-300 {
  border-color: var(--fatal-border-soft) !important;
}

/* Functional light surfaces kept only where contrast/scanning requires it. */
.fatal-review-modal-qr,
.qr-code canvas,
.qr-code img {
  background: var(--fatal-text) !important;
}

.fatal-story-capture span,
.modal-filters-sandbox .noUi-horizontal .noUi-handle {
  background: var(--fatal-accent-bright) !important;
}

/* =========================================================================
   Migrated from resources/views/includes/eca-verification.blade.php
   ========================================================================= */
.eca-verify-banner {
  position: sticky;
  top: 0;
  z-index: 1025;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(160, 114, 90, 0.42);
  background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.82) 35%, rgba(26, 12, 45, 0.9) 70%, rgba(26, 12, 45, 0.96) 100%);
  color: var(--color-white);
  box-shadow: 0 18px 44px rgba(26, 12, 45, 0.28);
}
.eca-verify-banner strong,
.eca-modal h4 {
  display: block;
  color: var(--color-magenta-light);
  font-weight: 900;
  letter-spacing: .02em;
}
.eca-verify-banner span {
  display: block;
  color: rgba(248, 240, 240, 0.78);
  font-size: 13px;
}
.eca-verify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(160, 114, 90, 0.47) !important;
  border-radius: 6px !important;
  background: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
  font-weight: 900;
  text-decoration: none !important;
}
.eca-modal {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(160, 114, 90, 0.52);
  border-radius: 8px;
  background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.68) 35%, rgba(26, 12, 45, 0.88) 70%, #1A0C2D 100%);
  color: var(--color-white);
  box-shadow: 0 30px 90px rgba(26, 12, 45, 0.58);
}
.eca-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--color-white);
  opacity: .9;
}
.eca-modal-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(35, 18, 56, 0.81);
}
.eca-modal p {
  color: rgba(248, 240, 240, 0.76);
}
.eca-adult-locked {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.eca-adult-overlay,
.eca-video-locked span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(232, 197, 175, 0.26);
  border-radius: 6px;
  background: rgba(26, 12, 45, 0.82);
  color: var(--color-magenta-light);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 18px 40px rgba(26, 12, 45, 0.36);
}
.eca-video-locked {
  position: relative;
  min-height: 360px;
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), transparent 38%),
    linear-gradient(135deg, #1A0C2D, #1A0C2D);
  background-size: cover;
  background-position: center;
}
@media (max-width: 640px) {
  .eca-verify-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 16px;
  }
}

/* =========================================================================
   Migrated from resources/views/includes/listing-creators.blade.php
   ========================================================================= */
.fatal-badge.profile-video {
    border: 1px solid rgba(248, 240, 240, 0.16);
    gap: 6px;
}
.fatal-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fatal-badge.profile-video.approved {
    color: #1A0C2D;
    border-color: rgba(212, 175, 152, 0.68);
    background: linear-gradient(135deg, var(--color-magenta-light) 0%, var(--color-magenta) 42%, var(--color-magenta) 100%);
    box-shadow: 0 12px 28px rgba(160, 114, 90, 0.3);
}
.fatal-badge.profile-video.muted {
    color: rgba(248, 240, 240, 0.62);
    border-color: rgba(248, 240, 240, 0.12);
    background: rgba(49, 27, 75, 0.55);
}
.fatal-info-grid .fatal-video-ok {
    color: var(--color-magenta-light);
}
.fatal-info-grid .fatal-video-off {
    color: rgba(248, 240, 240, 0.42);
}
.fatal-card .fatal-badge i {
    font-size: 13px !important;
    line-height: 1 !important;
}
.fatal-card .fatal-location i {
    font-size: 13px !important;
    line-height: 1 !important;
}
.fatal-card .fatal-mini-pill i {
    font-size: 14px !important;
    line-height: 1 !important;
}
.fatal-card .fatal-info-grid i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 16px;
    font-size: 15px !important;
    line-height: 1 !important;
}
.fatal-card .fatal-action-main i {
    font-size: 15px !important;
    line-height: 1 !important;
}
.fatal-card .fatal-action-icon i {
    font-size: 18px !important;
    line-height: 1 !important;
}
.fatal-card .bi-patch-check-fill::before {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* =========================================================================
   Migrated from resources/views/includes/modal-add-story.blade.php
   ========================================================================= */
.fatal-story-modal .modal-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		margin: 0;
	}

	.fatal-story-modal .modal-content {
		width: 100%;
		height: 100%;
		border: 0;
		border-radius: 0;
		background:
			radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0%, rgba(35, 18, 56, 0.43) 35%, rgba(26, 12, 45, 0.58) 70%, rgba(26, 12, 45, 0.92) 100%),
			#1A0C2D;
		color: var(--color-white);
		overflow: hidden;
	}

	.fatal-story-creator {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		display: grid;
		grid-template-columns: minmax(260px, min(430px, calc(56.25dvh - 54px))) minmax(88px, 132px);
		align-items: center;
		justify-content: center;
		gap: clamp(14px, 2vw, 26px);
		padding: clamp(14px, 2vw, 28px);
		background:
			radial-gradient(circle at 16% 12%, rgba(212, 175, 152, 0.12), transparent 24rem),
			radial-gradient(circle at 86% 78%, rgba(212, 175, 152, 0.15), transparent 24rem);
		overflow: hidden;
	}

	.fatal-story-phone-shell {
		width: min(430px, calc(56.25dvh - 54px), calc(100vw - 170px));
		max-width: 430px;
		aspect-ratio: 9 / 16;
		min-width: min(240px, calc(100vw - 170px));
		border: 1px solid rgba(232, 197, 175, 0.18);
		border-radius: 24px;
		background: rgba(26, 12, 45, 0.32);
		padding: 10px;
		box-shadow: 0 42px 120px rgba(26, 12, 45, 0.58), 0 0 0 1px rgba(248, 240, 240, 0.04) inset;
	}

	.fatal-story-stage {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 18px;
		background: #1A0C2D;
		overflow: hidden;
		isolation: isolate;
	}

	#fatalStoryCanvas {
		width: 100%;
		height: 100%;
		display: block;
		background: #1A0C2D;
		cursor: grab;
		touch-action: none;
	}

	#fatalStoryCanvas.is-drawing {
		cursor: crosshair;
	}

	.fatal-story-safe {
		position: absolute;
		left: 7%;
		right: 7%;
		z-index: 3;
		height: 1px;
		border-top: 1px dashed rgba(232, 197, 175, 0.34);
		opacity: 0;
		pointer-events: none;
		transition: opacity .18s ease;
	}

	.fatal-story-stage.show-safe .fatal-story-safe {
		opacity: 1;
	}

	.fatal-story-safe-top {
		top: 10%;
	}

	.fatal-story-safe-bottom {
		bottom: 10%;
	}

	.fatal-story-topbar,
	.fatal-story-bottom {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 8;
		pointer-events: none;
	}

	.fatal-story-topbar {
		top: 0;
		display: grid;
		grid-template-columns: 42px 1fr 42px;
		align-items: center;
		gap: 10px;
		padding: 14px;
		background: linear-gradient(180deg, rgba(26, 12, 45, 0.7), transparent);
	}

	.fatal-story-topbar small,
	.fatal-story-drawer-head small {
		display: block;
		color: var(--color-magenta-light);
		font-size: 10px;
		font-weight: 950;
		letter-spacing: .18em;
		text-transform: uppercase;
	}

	.fatal-story-topbar strong {
		display: block;
		font-size: 15px;
		font-weight: 950;
		line-height: 1.05;
	}

	.fatal-story-bottom {
		bottom: 0;
		padding: 54px 14px 15px;
		background: linear-gradient(0deg, rgba(26, 12, 45, 0.76), transparent);
	}

	.fatal-story-icon,
	.fatal-story-mini,
	.fatal-story-tool,
	.fatal-story-drawer-head button,
	.fatal-story-inline button {
		border: 1px solid rgba(232, 197, 175, 0.15);
		background: rgba(26, 12, 45, 0.46);
		color: var(--color-white);
		backdrop-filter: blur(14px);
		cursor: pointer;
		pointer-events: auto;
	}

	.fatal-story-icon,
	.fatal-story-mini,
	.fatal-story-drawer-head button,
	.fatal-story-inline button {
		width: 42px;
		height: 42px;
		border-radius: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.fatal-story-side {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.fatal-story-side-right {
		align-items: flex-start;
	}

	.fatal-story-tool {
		width: 92px;
		min-height: 64px;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		font-size: 10px;
		font-weight: 950;
		text-transform: uppercase;
	}

	.fatal-story-tool i {
		font-size: 20px;
	}

	.fatal-story-tool.active,
	.fatal-story-tool:hover,
	.fatal-story-wide-action:hover,
	.fatal-story-sticker-grid button:hover {
		border-color: rgba(160, 114, 90, 0.47) !important;
		background: var(--color-magenta) !important;
		color: var(--color-white) !important;
		box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
	}

	.fatal-story-publish {
		width: 92px;
		min-height: 52px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 4px;
		border: 1px solid rgba(160, 114, 90, 0.47) !important;
		border-radius: 8px !important;
		background: var(--color-magenta) !important;
		color: var(--color-white) !important;
		box-shadow: 0 14px 36px rgba(160, 114, 90, 0.26) !important;
		font-size: 10px;
		font-weight: 950;
		text-transform: uppercase;
		cursor: pointer;
	}

	.fatal-story-publish:disabled {
		opacity: .7;
		cursor: wait;
	}

	.fatal-story-capture-row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 12px;
		pointer-events: auto;
	}

	.fatal-story-mini-group {
		display: flex;
		align-items: center;
		gap: 8px;
		justify-self: start;
	}

	.fatal-story-media-audio {
		justify-self: end;
	}

	.fatal-story-capture {
		--progress: 0deg;
		justify-self: center;
		width: 76px;
		height: 76px;
		border: 3px solid rgba(248, 240, 240, 0.86);
		border-radius: 999px;
		background: conic-gradient(var(--color-magenta) var(--progress), rgba(248, 240, 240, 0.2) 0);
		padding: 6px;
		cursor: pointer;
		box-shadow: 0 0 0 7px rgba(26, 12, 45, 0.28), 0 18px 42px rgba(26, 12, 45, 0.38);
	}

	.fatal-story-capture span {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background: var(--fatal-panel-gradient);
		transition: transform .18s ease, border-radius .18s ease;
	}

	.fatal-story-capture.is-recording span {
		border-radius: 12px;
		transform: scale(.58);
		background: var(--color-magenta);
	}

	.fatal-story-mini.is-active {
		border-color: rgba(160, 114, 90, 0.47) !important;
		background: var(--color-magenta) !important;
		color: var(--color-white) !important;
		box-shadow: 0 14px 36px rgba(160, 114, 90, 0.2) !important;
	}

	.fatal-story-media-audio.is-muted {
		opacity: .58;
	}

	.fatal-story-recording {
		position: absolute;
		left: 50%;
		top: 74px;
		z-index: 9;
		display: none;
		align-items: center;
		gap: 8px;
		min-width: 220px;
		padding: 10px 12px 13px;
		border: 1px solid rgba(160, 114, 90, 0.36);
		border-radius: 8px;
		background: rgba(26, 12, 45, 0.88);
		color: var(--color-white);
		box-shadow: 0 18px 46px rgba(26, 12, 45, 0.42);
		backdrop-filter: blur(14px);
		transform: translateX(-50%);
	}

	.fatal-story-recording.active {
		display: flex;
	}

	.fatal-story-recording strong {
		font-size: 12px;
		font-weight: 950;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.fatal-story-recording small {
		margin-left: auto;
		color: rgba(248, 240, 240, 0.74);
		font-weight: 900;
	}

	.fatal-story-recording div {
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 6px;
		height: 2px;
		overflow: hidden;
		border-radius: 999px;
		background: rgba(248, 240, 240, 0.14);
	}

	.fatal-story-recording div span {
		display: block;
		width: 0;
		height: 100%;
		border-radius: inherit;
		background: var(--color-magenta);
	}

	.fatal-story-rec-dot {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		background: var(--color-magenta);
		box-shadow: 0 0 0 6px rgba(160, 114, 90, 0.16);
		animation: fatalStoryRecPulse 900ms ease-in-out infinite;
	}

	@keyframes fatalStoryRecPulse {
		0%, 100% { transform: scale(.88); opacity: .75; }
		50% { transform: scale(1.08); opacity: 1; }
	}

	.fatal-story-drawer {
		position: absolute;
		left: 14px;
		right: auto;
		bottom: 145px;
		z-index: 30;
		width: min(390px, calc(100% - 86px));
		max-height: min(54%, 430px);
		overflow: auto;
		display: none;
		border: 1px solid rgba(232, 197, 175, 0.16);
		border-radius: 10px;
		background: rgba(26, 12, 45, 0.94);
		padding: 14px;
		box-shadow: 0 28px 90px rgba(26, 12, 45, 0.48);
		backdrop-filter: blur(18px);
		touch-action: none;
	}

	.fatal-story-drawer.active {
		display: block;
	}

	.fatal-story-drawer[data-story-panel="music"].active {
		overflow: visible;
	}

	.fatal-story-drawer.is-dragging {
		opacity: .96;
		cursor: grabbing;
		user-select: none;
	}

	.fatal-story-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 12px;
		cursor: grab;
		touch-action: none;
	}

	.fatal-story-drawer-head strong {
		font-size: 16px;
		font-weight: 950;
	}

	.fatal-story-drawer label {
		display: block;
		margin: 12px 0 7px;
		color: var(--color-magenta-light);
		font-size: 10px;
		font-weight: 950;
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.fatal-story-drawer input,
	.fatal-story-drawer textarea,
	.fatal-story-drawer select {
		width: 100%;
		border: 1px solid rgba(232, 197, 175, 0.16);
		border-radius: 6px;
		background: rgba(26, 12, 45, 0.42);
		color: var(--color-white);
		padding: 11px 12px;
	}

	.fatal-story-drawer textarea {
		min-height: 74px;
		resize: vertical;
	}

	.fatal-story-text-tools {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-top: 9px;
	}

	.fatal-story-text-tools label {
		position: relative;
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		border: 1px solid rgba(232, 197, 175, 0.16);
		border-radius: 6px;
		background: rgba(26, 12, 45, 0.42);
		color: var(--color-magenta-light);
		padding: 0 8px;
		min-height: 42px;
		letter-spacing: 0;
		text-transform: none;
	}

	.fatal-story-text-tools i {
		flex: 0 0 auto;
		font-size: 16px;
	}

	.fatal-story-text-tools select {
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0;
		height: 34px;
		font-size: 0;
		cursor: pointer;
	}

	.fatal-story-text-tools select option {
		font-size: 13px;
	}

	.fatal-story-color-panel {
		margin-top: 10px;
		border: 1px solid rgba(232, 197, 175, 0.15);
		border-radius: 8px;
		background:
			linear-gradient(135deg, rgba(248, 240, 240, 0.08), transparent),
			rgba(26, 12, 45, 0.32);
		padding: 10px;
	}

	.fatal-story-spectrum-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 42px;
		gap: 10px;
		align-items: stretch;
	}

	.fatal-story-spectrum {
		position: relative;
		height: 126px;
		border: 1px solid rgba(248, 240, 240, 0.28);
		border-radius: 8px;
		background:
			linear-gradient(180deg, transparent, rgba(26, 12, 45, 0.92)),
			var(--color-white),
			linear-gradient(90deg, var(--color-magenta), var(--color-magenta-mid), var(--color-magenta), var(--color-magenta-mid), var(--color-magenta), var(--color-magenta-mid), var(--color-magenta));
		box-shadow: inset 0 0 0 1px rgba(26, 12, 45, 0.2), 0 18px 34px rgba(26, 12, 45, 0.3);
		cursor: pointer;
		touch-action: none;
		overflow: hidden;
	}

	.fatal-story-spectrum span {
		position: absolute;
		left: 98%;
		top: 4%;
		width: 18px;
		height: 18px;
		border: 2px solid var(--color-white);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 0 1px rgba(26, 12, 45, 0.55), 0 8px 20px rgba(26, 12, 45, 0.42);
		pointer-events: none;
	}

	.fatal-story-color-presets {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 7px;
		margin-top: 9px;
	}

	.fatal-story-color-presets button {
		aspect-ratio: 1;
		min-height: 24px;
		border: 1px solid rgba(248, 240, 240, 0.28);
		border-radius: 6px;
		background: linear-gradient(135deg, rgba(248, 240, 240, 0.28), rgba(26, 12, 45, 0.1)), var(--c);
		box-shadow: 0 8px 18px rgba(26, 12, 45, 0.26);
		cursor: pointer;
	}

	.fatal-story-color-presets button.active {
		outline: 2px solid var(--color-magenta-light);
		outline-offset: 2px;
	}

	.fatal-story-alpha {
		display: grid;
		grid-template-rows: 22px minmax(0, 1fr);
		place-items: center;
		border: 1px solid rgba(232, 197, 175, 0.15);
		border-radius: 8px;
		background: rgba(26, 12, 45, 0.28);
		padding: 8px 0;
	}

	.fatal-story-alpha input {
		width: 96px;
		accent-color: var(--color-magenta-light);
		transform: rotate(-90deg);
	}

	.fatal-story-range-tool {
		display: grid;
		grid-template-columns: 32px 1fr;
		align-items: center;
		gap: 8px;
		margin-top: 9px;
		border: 1px solid rgba(232, 197, 175, 0.16);
		border-radius: 6px;
		background: rgba(26, 12, 45, 0.36);
		padding: 7px 10px;
		color: var(--color-magenta-light);
	}

	.fatal-story-range-tool input {
		border: 0 !important;
		background: transparent !important;
		padding: 0 !important;
	}

	.fatal-story-inline-editor {
		position: fixed;
		z-index: 2147483647;
		border: 1px solid rgba(232, 197, 175, 0.76);
		border-radius: 10px;
		background: rgba(26, 12, 45, 0.88);
		color: var(--color-white);
		padding: 10px 12px;
		font-size: 18px;
		font-weight: 900;
		line-height: 1.2;
		box-shadow: 0 18px 48px rgba(26, 12, 45, 0.46);
		outline: none;
		resize: both;
	}

	.fatal-story-grid-2 {
		display: grid;
		grid-template-columns: 1fr 92px;
		gap: 10px;
	}

	.fatal-story-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
		gap: 9px;
		margin-top: 12px;
	}

	.fatal-story-bg,
	.fatal-story-color {
		height: 66px;
		border: 1px solid rgba(248, 240, 240, 0.14);
		border-radius: 8px;
		background-size: cover;
		background-position: center;
		cursor: pointer;
	}

	.fatal-story-bg.active,
	.fatal-story-color.active {
		outline: 2px solid var(--color-magenta-light);
		outline-offset: 2px;
	}

	.fatal-story-wide-action,
	.fatal-story-sticker-grid button {
		width: 100%;
		min-height: 42px;
		border: 1px solid rgba(232, 197, 175, 0.16);
		border-radius: 8px;
		background: rgba(248, 240, 240, 0.06);
		color: var(--color-white);
		font-weight: 950;
		cursor: pointer;
	}

	.fatal-story-wide-action i {
		margin-right: 7px;
	}

	.fatal-story-muted {
		margin: 10px 0 0;
		color: rgba(248, 240, 240, 0.62);
		font-size: 12px;
		line-height: 1.45;
	}

	.fatal-story-sticker-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 7px;
		max-height: min(48vh, 430px);
		overflow-y: auto;
		padding-right: 4px;
	}

	.fatal-story-sticker-grid button {
		display: flex;
		min-height: 54px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		font-size: 10px;
		text-transform: uppercase;
		padding: 7px 4px;
	}

	.fatal-story-sticker-grid i {
		font-size: 18px;
		color: var(--color-white);
	}

	.fatal-story-inline {
		display: grid;
		grid-template-columns: 1fr 42px;
		gap: 8px;
	}

	.fatal-story-hidden-control {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.fatal-story-music-controls {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 9px;
	}

	.fatal-story-dropdown {
		position: relative;
	}

	.fatal-story-icon-card {
		width: 100%;
		height: 56px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(232, 197, 175, 0.18);
		border-radius: 8px;
		background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15), rgba(26, 12, 45, 0.72));
		color: var(--color-white);
		cursor: pointer;
		box-shadow: 0 14px 34px rgba(26, 12, 45, 0.28);
	}

	.fatal-story-icon-card i {
		font-size: 24px;
	}

	.fatal-story-icon-card.active {
		border-color: rgba(160, 114, 90, 0.55);
		background: var(--color-magenta);
		color: var(--color-white);
	}

	.fatal-story-dropdown-menu {
		position: absolute;
		left: 0;
		top: auto;
		bottom: calc(100% + 9px);
		z-index: 80;
		min-width: 280px;
		max-width: min(82vw, 360px);
		border: 1px solid rgba(232, 197, 175, 0.18);
		border-radius: 8px;
		background: radial-gradient(circle at top right, rgba(35, 18, 56, 0.96), rgba(26, 12, 45, 0.98));
		box-shadow: 0 28px 70px rgba(26, 12, 45, 0.62);
		padding: 9px;
	}

	.fatal-story-dropdown:last-child .fatal-story-dropdown-menu {
		left: auto;
		right: 0;
	}

	.fatal-story-music-menu {
		max-height: min(52vh, 430px);
		overflow-y: auto;
	}

	.fatal-story-music-row {
		width: 100%;
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 28px;
		align-items: center;
		gap: 9px;
		min-height: 58px;
		margin-bottom: 7px;
		border: 1px solid rgba(248, 240, 240, 0.1);
		border-radius: 7px;
		background: #1A0C2D;
		color: var(--color-white);
		text-align: left;
		cursor: pointer;
	}

	div.fatal-story-music-row {
		grid-template-columns: minmax(0, 1fr) 40px;
		padding: 0 7px 0 0;
		cursor: default;
	}

	.fatal-story-music-row.active,
	.fatal-story-music-row:hover {
		border-color: rgba(212, 175, 152, 0.48);
		box-shadow: 0 0 0 1px rgba(212, 175, 152, 0.12) inset;
	}

	.fatal-story-music-pick-zone {
		min-width: 0;
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		align-items: center;
		gap: 9px;
		height: 100%;
		border: 0;
		background: transparent;
		color: inherit;
		text-align: left;
		cursor: pointer;
	}

	.fatal-story-music-preview {
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(248, 240, 240, 0.14);
		border-radius: 7px;
		background: rgba(248, 240, 240, 0.08);
		color: var(--color-white);
		cursor: pointer;
	}

	.fatal-story-music-preview.is-playing {
		border-color: rgba(212, 175, 152, 0.58);
		background: rgba(212, 175, 152, 0.2);
		color: var(--color-magenta-mid);
	}

	.fatal-story-track-art {
		width: 38px;
		height: 38px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: 6px;
		border-radius: 6px;
		background: linear-gradient(135deg, rgba(232, 197, 175, 0.72), rgba(160, 114, 90, 0.58));
		color: #1A0C2D;
	}

	.fatal-story-track-text {
		min-width: 0;
	}

	.fatal-story-track-text strong,
	.fatal-story-track-text small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fatal-story-track-text strong {
		font-size: 12px;
		font-weight: 950;
	}

	.fatal-story-track-text small {
		color: rgba(248, 240, 240, 0.62);
		font-size: 10px;
	}

	.fatal-story-volume-menu {
		left: 50%;
		min-width: 96px;
		width: 96px;
		display: grid;
		place-items: center;
		transform: translateX(-50%);
	}

	.fatal-story-volume-menu[hidden] {
		display: none !important;
	}

	#fatalStoryMusicVolume {
		width: 170px;
		accent-color: var(--color-magenta);
		transform: rotate(-90deg);
	}

	#fatalStoryMusicVolumeLabel {
		position: absolute;
		bottom: 10px;
		color: var(--color-magenta-light);
		font-size: 11px;
		font-weight: 950;
	}

	.fatal-story-sticker-menu {
		right: 0;
		left: auto;
		min-width: 260px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.fatal-story-sticker-menu[hidden] {
		display: none !important;
	}

	.fatal-story-sticker-choice {
		min-height: 92px;
		border: 1px solid rgba(232, 197, 175, 0.14);
		border-radius: 8px;
		background: rgba(248, 240, 240, 0.055);
		color: var(--color-white);
		cursor: pointer;
	}

	.fatal-story-sticker-choice.active,
	.fatal-story-sticker-choice:hover {
		border-color: rgba(160, 114, 90, 0.5);
		background: rgba(160, 114, 90, 0.24);
	}

	.fatal-story-sticker-preview {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-bottom: 6px;
		border-radius: 7px;
		background: rgba(26, 12, 45, 0.32);
		color: var(--color-white);
		font-weight: 950;
	}

	.fatal-story-sticker-preview.large {
		background: linear-gradient(135deg, rgba(232, 197, 175, 0.34), rgba(160, 114, 90, 0.32));
	}

	.fatal-story-selected-music {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
		padding: 10px 11px;
		border: 1px solid rgba(232, 197, 175, 0.13);
		border-radius: 8px;
		background: rgba(26, 12, 45, 0.3);
		color: rgba(248, 240, 240, 0.78);
		font-size: 12px;
		font-weight: 850;
	}

	.fatal-story-range {
		display: grid;
		grid-template-columns: 92px 1fr;
		gap: 10px;
		align-items: center;
		margin-top: 10px;
		color: rgba(248, 240, 240, 0.72);
		font-size: 12px;
		font-weight: 850;
	}

	.fatal-story-waveform {
		height: 56px;
		display: flex;
		align-items: center;
		gap: 3px;
		padding: 8px;
		border: 1px solid rgba(232, 197, 175, 0.13);
		border-radius: 8px;
		background: rgba(26, 12, 45, 0.34);
	}

	.fatal-story-waveform span {
		flex: 1;
		height: var(--h);
		border-radius: 999px;
		background: linear-gradient(180deg, var(--color-magenta-light), var(--color-magenta));
		opacity: .82;
	}

	.fatal-story-error {
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 14px;
		z-index: 12;
		display: none;
		border: 1px solid rgba(160, 114, 90, 0.36);
		border-radius: 8px;
		background: rgba(160, 114, 90, 0.9);
		color: var(--color-white);
		padding: 11px 13px;
		font-weight: 850;
	}

	@media (max-width: 991.98px) {
		.fatal-story-creator {
			grid-template-columns: 1fr;
			padding: 0;
		}

		.fatal-story-phone-shell {
			width: 100vw;
			max-width: 100vw;
			height: 100vh;
			height: 100dvh;
			min-width: 0;
			border: 0;
			border-radius: 0;
			padding: 0;
			box-shadow: none;
		}

		.fatal-story-stage {
			border-radius: 0;
		}

		.fatal-story-side {
			position: absolute;
			z-index: 11;
			flex-direction: row;
			gap: 6px;
		}

		.fatal-story-side-right {
			right: max(10px, env(safe-area-inset-right));
			top: calc(max(62px, env(safe-area-inset-top) + 54px));
			flex-direction: column;
		}

		.fatal-story-side-right .fatal-story-tool {
			width: 44px;
			min-height: 44px;
			border-radius: 10px;
		}

		.fatal-story-side-right .fatal-story-tool span {
			display: none;
		}

		.fatal-story-publish {
			width: 44px;
			min-height: 44px;
			border-radius: 10px !important;
		}

		.fatal-story-publish span {
			display: none;
		}

		.fatal-story-topbar {
			padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
		}

		.fatal-story-bottom {
			padding: 44px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		}

		.fatal-story-drawer {
			left: max(10px, env(safe-area-inset-left));
			right: auto;
			bottom: calc(max(10px, env(safe-area-inset-bottom)) + 110px);
			width: calc(100vw - max(78px, env(safe-area-inset-right) + 70px) - max(10px, env(safe-area-inset-left)));
			max-height: min(46dvh, 390px);
			padding: 12px;
		}

		.fatal-story-dropdown-menu {
			position: fixed;
			left: max(10px, env(safe-area-inset-left)) !important;
			right: max(68px, env(safe-area-inset-right) + 60px) !important;
			bottom: calc(max(110px, env(safe-area-inset-bottom) + 104px)) !important;
			top: auto !important;
			min-width: 0;
			max-width: none;
			max-height: min(42dvh, 320px);
			overflow: auto;
			z-index: 2147483200;
			transform: none !important;
		}

		.fatal-story-drawer[data-story-panel="music"] {
			max-height: min(42dvh, 330px);
			overflow: visible !important;
		}

		.fatal-story-drawer[data-story-panel="music"] .fatal-story-drawer-head {
			margin-bottom: 10px;
		}

		.fatal-story-drawer[data-story-panel="music"] .fatal-story-music-controls {
			position: relative;
			z-index: 4;
			gap: 8px;
		}

		.fatal-story-drawer[data-story-panel="music"] .fatal-story-icon-card {
			height: 54px;
			border-radius: 10px;
			background:
				linear-gradient(145deg, rgba(248, 240, 240, 0.09), rgba(248, 240, 240, 0.025)),
				rgba(26, 12, 45, 0.72);
			box-shadow: 0 12px 28px rgba(26, 12, 45, 0.38);
		}

		.fatal-story-drawer[data-story-panel="music"] .fatal-story-icon-card.active {
			background: var(--color-magenta) !important;
			box-shadow: 0 18px 38px rgba(160, 114, 90, 0.28) !important;
		}

		.fatal-story-drawer[data-story-panel="music"] .fatal-story-selected-music {
			position: relative;
			z-index: 3;
			margin-top: 10px;
		}

		.fatal-story-music-menu {
			left: max(24px, env(safe-area-inset-left) + 14px) !important;
			right: max(88px, env(safe-area-inset-right) + 78px) !important;
			bottom: calc(max(110px, env(safe-area-inset-bottom) + 104px) + 4px) !important;
			width: auto !important;
			min-width: 0 !important;
			max-height: min(38dvh, 292px) !important;
			padding: 10px !important;
			border-radius: 12px !important;
			background:
				linear-gradient(180deg, rgba(248, 240, 240, 0.075), rgba(248, 240, 240, 0.025)),
				rgba(26, 12, 45, 0.94) !important;
			border-color: rgba(212, 175, 152, 0.24) !important;
			box-shadow: 0 28px 70px rgba(26, 12, 45, 0.68), 0 0 0 1px rgba(248, 240, 240, 0.05) inset !important;
			backdrop-filter: blur(18px);
		}

		.fatal-story-music-menu .fatal-story-music-row {
			min-height: 54px;
			margin-bottom: 8px;
			border-radius: 9px;
			background:
				linear-gradient(135deg, rgba(248, 240, 240, 0.055), rgba(248, 240, 240, 0.015)),
				rgba(26, 12, 45, 0.94);
		}

		.fatal-story-music-menu .fatal-story-track-art {
			width: 38px;
			height: 38px;
			margin-left: 5px;
			border-radius: 8px;
		}

		.fatal-story-music-menu .fatal-story-music-preview {
			width: 38px;
			height: 38px;
			border-radius: 9px;
		}

		.fatal-story-volume-menu {
			left: 50% !important;
			right: auto !important;
			bottom: calc(max(110px, env(safe-area-inset-bottom) + 104px) + 4px) !important;
			width: 104px !important;
			min-width: 104px !important;
			height: 188px !important;
			max-height: 188px !important;
			padding: 16px 12px 26px !important;
			overflow: hidden !important;
			border-radius: 14px !important;
			transform: translateX(-50%) !important;
			background:
				radial-gradient(circle at 50% 0%, rgba(212, 175, 152, 0.15), transparent 58%),
				linear-gradient(180deg, rgba(35, 18, 56, 0.96), rgba(26, 12, 45, 0.98)) !important;
			box-shadow: 0 28px 70px rgba(26, 12, 45, 0.7), 0 0 0 1px rgba(248, 240, 240, 0.05) inset !important;
		}

		.fatal-story-volume-menu::before {
			content: "Volume";
			position: absolute;
			top: 11px;
			left: 0;
			right: 0;
			color: rgba(232, 197, 175, 0.92);
			font-size: 10px;
			font-weight: 950;
			letter-spacing: .08em;
			text-align: center;
			text-transform: uppercase;
		}

		.fatal-story-volume-menu #fatalStoryMusicVolume {
			width: 132px;
			margin-top: 28px;
			margin-bottom: 28px;
			transform: rotate(-90deg);
			accent-color: var(--color-magenta);
			position: absolute;
		}

		.fatal-story-volume-menu #fatalStoryMusicVolumeLabel {
			left: 0;
			right: 0;
			bottom: 8px;
			text-align: center;
			font-size: 12px;
		}

		.fatal-story-sticker-menu {
			left: max(24px, env(safe-area-inset-left) + 14px) !important;
			right: max(88px, env(safe-area-inset-right) + 78px) !important;
			bottom: calc(max(110px, env(safe-area-inset-bottom) + 104px) + 4px) !important;
			width: auto !important;
			min-width: 0 !important;
			max-height: min(38dvh, 286px) !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 8px !important;
			padding: 10px !important;
			border-radius: 12px !important;
			background:
				linear-gradient(180deg, rgba(248, 240, 240, 0.075), rgba(248, 240, 240, 0.025)),
				rgba(26, 12, 45, 0.94) !important;
			box-shadow: 0 28px 70px rgba(26, 12, 45, 0.68), 0 0 0 1px rgba(248, 240, 240, 0.05) inset !important;
			backdrop-filter: blur(18px);
		}

		.fatal-story-sticker-choice {
			min-height: 78px !important;
			padding: 8px !important;
			border-radius: 10px !important;
		}

		.fatal-story-sticker-preview {
			min-height: 34px !important;
			margin-bottom: 5px !important;
		}

		.fatal-story-capture {
			width: 68px;
			height: 68px;
		}
	}

	@media (max-width: 420px) {
		.fatal-story-topbar strong {
			font-size: 13px;
		}

		.fatal-story-topbar small {
			display: none;
		}

		.fatal-story-drawer {
			width: calc(100vw - max(70px, env(safe-area-inset-right) + 62px) - max(10px, env(safe-area-inset-left)));
		}

		.fatal-story-grid-2,
		.fatal-story-sticker-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

/* =========================================================================
   Migrated from resources/views/includes/promote_profile.blade.php
   ========================================================================= */
#modalPromover {
        z-index: 1065 !important;
        padding: 12px !important;
    }

    #modalPromover .modal-dialog {
        width: min(100%, 500px);
        max-width: 500px;
        margin: max(12px, env(safe-area-inset-top)) auto
                max(12px, env(safe-area-inset-bottom));
    }

    #modalPromover .modal-content {
        max-height: calc(100dvh - 24px);
        overflow: hidden;
        border-radius: 12px !important;
    }

    #modalPromover .modal-body {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 575.98px) {
        #modalPromover {
            padding: 8px !important;
        }

        #modalPromover .modal-dialog {
            width: 100%;
            max-width: none;
            min-height: calc(100dvh - 16px);
            margin: max(8px, env(safe-area-inset-top)) auto
                    max(8px, env(safe-area-inset-bottom));
        }

        #modalPromover .modal-content {
            max-height: calc(100dvh - 16px);
        }

        #modalPromover .modal-header,
        #modalPromover .modal-footer {
            flex: 0 0 auto;
        }
    }

/* =========================================================================
   Migrated from resources/views/includes/review_invitation_card.blade.php
   ========================================================================= */
.fatal-home-action-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid rgba(212, 175, 152, 0.18);
    border-radius: 8px;
    background:
      radial-gradient(circle at 100% 0, rgba(212, 175, 152, 0.15), transparent 42%),
      linear-gradient(145deg, rgba(26, 12, 45, 0.98), rgba(26, 12, 45, 0.98));
    box-shadow: 0 18px 48px rgba(26, 12, 45, 0.25);
    color: var(--color-white);
  }

  .fatal-home-action-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-magenta-mid), var(--color-magenta));
  }

  .fatal-home-action-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .fatal-home-action-card-icon {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 152, 0.28);
    border-radius: 7px;
    background: rgba(212, 175, 152, 0.09);
    color: var(--color-white);
    font-size: 19px;
  }

  .fatal-home-action-card h5 {
    margin: 0;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 900;
  }

  .fatal-home-action-card p {
    margin: 0 0 15px;
    color: rgba(248, 240, 240, 0.64);
    font-size: 13px;
    line-height: 1.55;
  }

  .fatal-home-action-button,
  .fatal-review-modal-copy {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(160, 114, 90, 0.47) !important;
    border-radius: 6px !important;
    background: var(--color-magenta) !important;
    color: var(--color-white) !important;
    font-weight: 900;
    box-shadow: 0 14px 36px rgba(160, 114, 90, 0.22) !important;
  }

  .fatal-home-action-button i,
  .fatal-review-modal-copy i {
    display: inline-block !important;
    flex: 0 0 auto;
    color: inherit !important;
    font-size: 17px;
    line-height: 1;
  }

  .fatal-review-modal-qr {
    width: 248px;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 12px;
    border: 1px solid rgba(212, 175, 152, 0.22);
    border-radius: 10px;
    background: var(--fatal-panel-gradient);
    box-shadow: 0 18px 50px rgba(26, 12, 45, 0.28);
  }

  .fatal-review-modal-qr img,
  .fatal-review-modal-qr canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .fatal-review-link-box {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(248, 240, 240, 0.12);
    border-radius: 8px;
    background: rgba(248, 240, 240, 0.06);
  }

  .fatal-review-link-box input {
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--color-white) !important;
    font-size: 13px;
  }

  .fatal-review-modal-copy {
    width: 44px !important;
    min-width: 44px;
    padding: 0 !important;
  }

  #modalEscortReviewInvite {
    z-index: 1065 !important;
    padding: 12px !important;
  }

  #modalEscortReviewInvite .modal-dialog {
    width: min(100%, 500px);
    max-width: 500px;
    margin: max(12px, env(safe-area-inset-top)) auto
            max(12px, env(safe-area-inset-bottom));
  }

  #modalEscortReviewInvite .modal-content {
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    border-radius: 12px;
  }

  #modalEscortReviewInvite .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @media (max-width: 575.98px) {
    #modalEscortReviewInvite {
      padding: 8px !important;
    }

    #modalEscortReviewInvite .modal-dialog {
      width: 100%;
      max-width: none;
      min-height: calc(100dvh - 16px);
      margin: max(8px, env(safe-area-inset-top)) auto
              max(8px, env(safe-area-inset-bottom));
    }

    #modalEscortReviewInvite .modal-content {
      max-height: calc(100dvh - 16px);
    }
  }

/* =========================================================================
   Story state, mobile overlays, header search and creator-card safeguards
   ========================================================================= */
.fatal-post-story-avatar-wrap.has-stories,
#formUpdateCreate .fatal-post-story-avatar-wrap.has-stories,
.fatal-profile-story-avatar {
  background-size: 240% 240% !important;
  animation: fatal-story-ring-flow 2.8s linear infinite;
}

@keyframes fatal-story-ring-flow {
  0% { background-position: 0 50%; }
  100% { background-position: 200% 50%; }
}

@media (min-width: 992px) {
  .header-search-premium {
    display: inline-flex !important;
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap !important;
  }

  .header-search-premium #dropdownCreators {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

#containerWrapCreators .fatal-card,
.fatal-card-grid .fatal-card,
.fatal-featured-grid .fatal-card {
  width: min(100%, 340px) !important;
  max-width: 340px !important;
  justify-self: center;
}

@media (max-width: 575.98px) {
  #modalPromover.show,
  #modalEscortReviewInvite.show {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    z-index: 2145 !important;
  }

  #modalPromover .modal-dialog,
  #modalEscortReviewInvite .modal-dialog {
    width: min(100%, 500px) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: auto !important;
    transform: none !important;
  }

  #modalPromover .modal-content,
  #modalEscortReviewInvite .modal-content {
    display: flex;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    flex-direction: column;
  }
}

/* Profile reviews empty state: center Bootstrap Icons by geometry, not baseline. */
.fatal-profile-reviews .no-updates .ico-no-result {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: normal !important;
}

.fatal-profile-reviews .no-updates .ico-no-result::before {
  line-height: 1;
  vertical-align: 0;
}

/* Escort action modals must sit above the full-screen mobile navigation. */
#modalPromover,
#modalEscortReviewInvite {
  z-index: 1000001 !important;
}

.menuMobile {
    background: radial-gradient(circle at top right, rgba(212, 175, 152, 0.15) 0, rgba(35, 18, 56, 0.43) 35%, rgba(26, 12, 45, 0.58) 70%, rgba(26, 12, 45, 0.61) 100%) !important;
    border-top: 1px solid rgba(160, 114, 90, 0.42) !important;
	box-shadow: 0 18px 54px rgba(26, 12, 45, 0.32) !important;
    backdrop-filter: blur(18px);
}

body.modal-open .modal-backdrop {
  z-index: 1000 !important;
}

@media (max-width: 991.98px) {
  .fatal-footer-full {
    display: none !important;
  }

  .fatal-footer-mobile {
    display: block !important;
    width: 100%;
    text-align: center;
  }

  .fatal-footer-mobile .card,
  .fatal-footer-mobile .card-body {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
}

/* =========================================================================
   Migrated from resources/views/partials/pix_payment.blade.php
   ========================================================================= */
.payment-box { 
        background: var(--fatal-panel-gradient); 
        padding: 25px; 
        border-radius: 12px; 
        text-align: center;
        width: 350px; /* Largura fixa mantida conforme solicitado */
        margin: 0 auto;
        box-shadow: 0 4px 15px rgba(26, 12, 45, 0.1);
        border: 1px solid var(--color-white);
    }
    .qr-code { 
        width: 220px; 
        height: 220px; 
        margin: 15px 0; 
        border: 1px solid var(--color-white); 
        display: inline-block;
    }
    .status-badge {
        padding: 8px;
        margin-bottom: 15px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: bold;
        background: var(--fatal-panel-gradient); 
        color: var(--color-magenta);
    }
    .status-paid { 
        background: var(--color-magenta-light) !important; 
        color: var(--color-magenta) !important; 
    }
    .btn-copy {
        background: var(--color-magenta); 
        color: var(--color-white); 
        border: none; 
        padding: 12px;
        border-radius: 6px; 
        cursor: pointer; 
        width: 100%; 
        font-weight: bold;
        transition: background 0.2s;
    }
    .btn-copy:hover { background: var(--color-magenta); }
    
    .pix-code-container {
        background: var(--fatal-panel-gradient); 
        padding: 10px; 
        border-radius: 8px; 
        margin-bottom: 15px;
        border: 1px dashed var(--color-magenta-light);
    }
/* Post hashtags: compact single-line selector */
#postTagsWrap .post-tags-input-group {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}

#postTagsWrap .input-group-prepend {
  flex: 0 0 auto;
}

#postTagsWrap .post-tags-input-group .input-group-text {
  width: 38px;
  height: 42px;
  justify-content: center;
  border: 1px solid var(--color-magenta-light);
  border-right: 0;
  border-radius: .375rem 0 0 .375rem !important;
  background: var(--fatal-panel-gradient);
  color: var(--color-magenta);
}

#postTagsWrap .post-tags-input-group .select2-container {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 0%;
}

#postTagsWrap .post-tags-input-group .select2-selection--multiple {
  display: flex !important;
  position: relative;
  align-items: center;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--color-magenta-light) !important;
  border-left: 0 !important;
  border-radius: 0 .375rem .375rem 0 !important;
  box-sizing: border-box;
}

#postTagsWrap .post-tags-input-group .select2-selection__rendered {
  display: flex !important;
  position: static !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 6px 8px 4px !important;
  margin: 0 !important;
  align-items: center;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  direction: ltr !important;
  gap: 4px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box;
  line-height: normal !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 114, 90, 0.55) transparent;
}

#postTagsWrap .post-tags-input-group .select2-selection__rendered::-webkit-scrollbar {
  height: 3px;
}

#postTagsWrap .post-tags-input-group .select2-selection__rendered::-webkit-scrollbar-track {
  background: transparent;
}

#postTagsWrap .post-tags-input-group .select2-selection__rendered::-webkit-scrollbar-thumb {
  background: rgba(160, 114, 90, 0.55);
  border-radius: 999px;
}

#postTagsWrap .post-tags-input-group .select2-selection__choice {
  display: inline-flex !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  height: 28px;
  min-height: 28px;
  margin: 0 !important;
  padding: 0 8px !important;
  align-items: center;
  flex: 0 0 auto;
  order: 0 !important;
  line-height: 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-magenta) !important;
  color: var(--color-white) !important;
}

#postTagsWrap .post-tags-input-group .select2-selection__choice__remove {
  margin-right: 5px;
  color: rgba(248, 240, 240, 0.85) !important;
}

#postTagsWrap .post-tags-input-group .select2-search--inline {
  display: inline-flex !important;
  position: static !important;
  height: 28px !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  flex: 0 0 104px !important;
  align-self: center;
  order: 9999 !important;
  z-index: 2;
  float: none !important;
  clear: none !important;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

#postTagsWrap .post-tags-input-group .select2-search--inline .select2-search__field,
#postTagsWrap .select2-container--open .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 28px !important;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--color-white) !important;
  caret-color: var(--color-white);
  line-height: 28px !important;
  box-sizing: border-box !important;
}

#postTagsWrap .post-tags-input-group .select2-search--inline .select2-search__field::placeholder {
  color: rgba(248, 240, 240, 0.78) !important;
  opacity: 1;
}

/* =========================================================================
   Dark Premium Rosé Magenta Theme Overrides
   ========================================================================= */
:root {
  --fatal-bg: #1A0C2D;
  --fatal-surface: #311B4B;
  --fatal-surface-strong: #231238;
  --fatal-text: var(--color-white);
  --fatal-accent: var(--color-magenta-mid);
  --fatal-accent-strong: var(--color-magenta);
  --fatal-accent-bright: var(--color-magenta-light);
  --fatal-border: rgba(212, 175, 152, 0.22);
  --fatal-border-soft: rgba(212, 175, 152, 0.14);
  --fatal-glow: rgba(212, 175, 152, 0.18);
  --fatal-heading-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fatal-body-font: 'Inter', 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
  background: var(--fatal-bg) !important;
  color: var(--fatal-text) !important;
  font-family: var(--fatal-body-font) !important;
}

body, button, input, select, textarea, label, small, span, strong, p, a, li {
  font-family: var(--fatal-body-font);
}

h1, h2, h3, h4, h5, h6,
.fatal-title,
.fatal-section-title,
.fatal-category-title,
.modal-title,
.font-montserrat,
.profile-settings-heading h2,
.profile-settings-card__header,
.card-title {
  font-family: var(--fatal-heading-font) !important;
  color: var(--fatal-accent) !important;
  letter-spacing: .01em;
}

.fatal-title::first-letter,
.fatal-section-title::first-letter,
.fatal-category-title::first-letter,
h1::first-letter,
h2::first-letter,
h3::first-letter {
  font-size: 1.08em;
}

body:has(.fatal-page),
body:has(.jumbotron-cover-user),
html:has(.fatal-page),
html:has(.jumbotron-cover-user) {
  min-height: 100%;
  background: var(--fatal-bg) !important;
}

body:has(.fatal-page) main[role=main],
body:has(.jumbotron-cover-user) main[role=main] {
  background:
    radial-gradient(circle at 14% 10%, rgba(212, 175, 152, 0.15), transparent 22rem),
    radial-gradient(circle at 82% 4%, rgba(212, 175, 152, 0.15), transparent 20rem),
    radial-gradient(circle at 50% 55%, rgba(212, 175, 152, 0.08), transparent 28rem),
    linear-gradient(135deg, #1A0C2D, #231238 52%, #1A0C2D) !important;
  color: var(--fatal-text) !important;
}

body:has(.fatal-page) .navbar.p-nav,
body:has(.jumbotron-cover-user) .navbar.p-nav {
  min-height: 78px;
  border-bottom: 1px solid rgba(212, 175, 152, 0.16) !important;
  background: linear-gradient(135deg, rgba(49, 27, 75, 0.96), rgba(35, 18, 56, 0.96)) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 18px 54px rgba(26, 12, 45, 0.42) !important;
  backdrop-filter: blur(18px);
}

body:has(.fatal-page) .navbar-brand img,
body:has(.jumbotron-cover-user) .navbar-brand img,
body:has(.fatal-page) .fatal-brand-logo,
body:has(.jumbotron-cover-user) .fatal-brand-logo {
  filter: drop-shadow(0 8px 22px rgba(212, 175, 152, 0.18));
}

body:has(.fatal-page) .search-pill-header,
body:has(.jumbotron-cover-user) .search-pill-header {
  background: linear-gradient(180deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98)) !important;
  border: 1px solid var(--fatal-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(248, 240, 240, 0.04), 0 16px 38px rgba(26, 12, 45, 0.28) !important;
}

body:has(.fatal-page) .search-pill-header:before,
body:has(.jumbotron-cover-user) .search-pill-header:before {
  color: #992727 !important;
}

body:has(.fatal-page) .search-input-header,
body:has(.jumbotron-cover-user) .search-input-header {
  color: var(--fatal-text) !important;
}

body:has(.fatal-page) .search-input-header::placeholder,
body:has(.jumbotron-cover-user) .search-input-header::placeholder {
  color: rgba(248, 240, 240, 0.58);
}

body:has(.fatal-page) .btn-primary,
body:has(.fatal-page) .btn-main,
body:has(.fatal-page) .btn-arrow,
body:has(.fatal-page) .fatal-button,
body:has(.fatal-page) .fatal-action-main,
body:has(.fatal-page) .btn-post,
body:has(.fatal-page) .btn-upload,
body:has(.fatal-page) .btn-header-search,
body:has(.fatal-page) #alertAdult .btn-primary,
body:has(.fatal-page) .showBanner .btn-primary,
body:has(.jumbotron-cover-user) .btn-primary,
body:has(.jumbotron-cover-user) .btn-main,
body:has(.jumbotron-cover-user) .btn-arrow,
body:has(.jumbotron-cover-user) .fatal-button,
body:has(.jumbotron-cover-user) .fatal-action-main,
body:has(.jumbotron-cover-user) .btn-post,
body:has(.jumbotron-cover-user) .btn-upload,
body:has(.jumbotron-cover-user) .btn-header-search {
  border: 1px solid rgba(232, 197, 175, 0.44) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--color-magenta-light), var(--color-magenta-mid) 50%, var(--color-magenta)) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px rgba(212, 175, 152, 0.22), inset 0 1px 0 rgba(248, 240, 240, 0.16) !important;
  text-shadow: 0 1px 0 rgba(26, 12, 45, 0.14);
}

body:has(.fatal-page) .btn-primary:hover,
body:has(.fatal-page) .btn-main:hover,
body:has(.fatal-page) .btn-arrow:hover,
body:has(.fatal-page) .fatal-button:hover,
body:has(.fatal-page) .fatal-action-main:hover,
body:has(.fatal-page) .btn-post:hover,
body:has(.fatal-page) .btn-upload:hover,
body:has(.jumbotron-cover-user) .btn-primary:hover,
body:has(.jumbotron-cover-user) .btn-main:hover,
body:has(.jumbotron-cover-user) .btn-arrow:hover,
body:has(.jumbotron-cover-user) .fatal-button:hover,
body:has(.jumbotron-cover-user) .fatal-action-main:hover,
body:has(.jumbotron-cover-user) .btn-post:hover,
body:has(.jumbotron-cover-user) .btn-upload:hover {
  filter: brightness(1.04) saturate(1.02);
  transform: translateY(-1px);
}

body:has(.fatal-page) .btn-clear-city,
body:has(.jumbotron-cover-user) .btn-clear-city {
  background: rgba(248, 240, 240, 0.08) !important;
  color: var(--fatal-accent) !important;
}

body:has(.fatal-page) .btn-clear-city i,
body:has(.jumbotron-cover-user) .btn-clear-city i,
body:has(.fatal-page) .navbar .nav-link i,
body:has(.jumbotron-cover-user) .navbar .nav-link i,
body:has(.fatal-page) .navbar .btn i,
body:has(.jumbotron-cover-user) .navbar .btn i,
body:has(.fatal-page) .fatal-action-icon i,
body:has(.fatal-page) .fatal-badge i,
body:has(.fatal-page) .fatal-card i,
body:has(.fatal-page) .profile-settings-page i,
body:has(.fatal-page) .nav-profile i,
body:has(.fatal-page) .fatal-category-chip i,
body:has(.fatal-page) .fatal-category-letter i {
  color: var(--color-white) !important;
}

body:has(.fatal-page) #dropdownCreators,
body:has(.jumbotron-cover-user) #dropdownCreators {
  top: calc(100% + 8px) !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(58vh, 420px);
  overflow-y: auto !important;
  border: 1px solid rgba(212, 175, 152, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(26, 12, 45, 0.98) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 24px 58px rgba(26, 12, 45, 0.46) !important;
  backdrop-filter: blur(18px);
}

body:has(.fatal-page) #dropdownCreators .list-group-item,
body:has(.jumbotron-cover-user) #dropdownCreators .list-group-item {
  border-color: rgba(248, 240, 240, 0.08);
  background: transparent;
  color: rgba(248, 240, 240, 0.82);
}

body:has(.fatal-page) #dropdownCreators .list-group-item:hover,
body:has(.jumbotron-cover-user) #dropdownCreators .list-group-item:hover {
  background: rgba(212, 175, 152, 0.12);
  color: var(--color-white);
}

body:has(.fatal-page) .footer_background_color,
body:has(.fatal-page) footer,
body:has(.jumbotron-cover-user) .footer_background_color,
body:has(.jumbotron-cover-user) footer {
  border-top: 1px solid rgba(212, 175, 152, 0.14) !important;
  background: linear-gradient(135deg, rgba(49, 27, 75, 0.96), rgba(26, 12, 45, 0.98)) !important;
  color: var(--fatal-text) !important;
  backdrop-filter: blur(18px);
}

body:has(.fatal-page) .copyright,
body:has(.fatal-page) .footer-tiny,
body:has(.fatal-page) .link-footer,
body:has(.fatal-page) footer small,
body:has(.jumbotron-cover-user) .copyright,
body:has(.jumbotron-cover-user) .footer-tiny,
body:has(.jumbotron-cover-user) .link-footer,
body:has(.jumbotron-cover-user) footer small {
  color: rgba(248, 240, 240, 0.74) !important;
}

body:has(.fatal-page) .link-footer:hover,
body:has(.fatal-page) .footer-tiny:hover,
body:has(.jumbotron-cover-user) .link-footer:hover,
body:has(.jumbotron-cover-user) .footer-tiny:hover {
  color: var(--fatal-accent) !important;
}

.fatal-hero-media {
  position: relative;
  isolation: isolate;
}

.fatal-hero-media:before {
  content: "";
  position: absolute;
  inset: 6% -10% -2% -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(212, 175, 152, 0.15), rgba(212, 175, 152, 0.15) 24%, transparent 62%),
    radial-gradient(circle at 42% 38%, rgba(212, 175, 152, 0.15), transparent 36%),
    radial-gradient(circle at 58% 56%, rgba(212, 175, 152, 0.14), transparent 38%);
  filter: blur(34px);
  z-index: -1;
}

.fatal-hero-media img {
  filter: drop-shadow(0 34px 62px rgba(26, 12, 45, 0.48)) drop-shadow(0 0 34px rgba(212, 175, 152, 0.16));
}

.fatal-card {
  border: 1px solid rgba(212, 175, 152, 0.14) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98)) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 26px 78px rgba(26, 12, 45, 0.34) !important;
}

.fatal-card:before {
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(212, 175, 152, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(212, 175, 152, 0.18), transparent 42%, rgba(160, 114, 90, 0.12));
  opacity: .9 !important;
}

.fatal-card:after {
  background: radial-gradient(circle, rgba(212, 175, 152, 0.15), transparent 68%) !important;
}

.fatal-card:hover {
  border-color: rgba(212, 175, 152, 0.34) !important;
  box-shadow: 0 30px 88px rgba(26, 12, 45, 0.42), 0 0 28px rgba(212, 175, 152, 0.1) !important;
}

.fatal-card-premium {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98)) padding-box,
    linear-gradient(135deg, var(--color-magenta-light) 0%, var(--color-magenta-mid) 50%, var(--color-magenta) 100%) border-box !important;
  box-shadow: 0 0 15px rgba(212, 175, 152, 0.25), 0 30px 84px rgba(26, 12, 45, 0.44) !important;
}

.fatal-card-premium .fatal-badge.vip {
  background: linear-gradient(135deg, var(--color-magenta-light), var(--color-magenta-mid) 50%, var(--color-magenta)) !important;
  color: #1A0C2D !important;
  box-shadow: 0 10px 24px rgba(212, 175, 152, 0.22) !important;
}

.fatal-card-premium .fatal-badge.vip:after {
  background: linear-gradient(90deg, transparent, rgba(248, 240, 240, 0.42), transparent);
}

.fatal-card-media {
  background: var(--fatal-surface-strong) !important;
}

.fatal-card-name h3 {
  color: var(--fatal-text) !important;
}

.fatal-card-text,
.fatal-location,
.fatal-visited,
.fatal-mini-pill,
.fatal-info-grid span {
  color: rgba(248, 240, 240, 0.78) !important;
}

.fatal-mini-pill,
.fatal-info-grid span {
  background: rgba(248, 240, 240, 0.04) !important;
  border-color: rgba(212, 175, 152, 0.12) !important;
}

.fatal-action-main {
  background: linear-gradient(135deg, var(--color-magenta-light), var(--color-magenta-mid) 48%, var(--color-magenta)) !important;
  color: var(--color-white) !important;
  border: 1px solid rgba(232, 197, 175, 0.38) !important;
}

.fatal-action-icon {
  background: rgba(248, 240, 240, 0.05) !important;
  border: 1px solid rgba(212, 175, 152, 0.12) !important;
  color: var(--fatal-accent) !important;
}

.fatal-action-icon.whatsapp {
  background: linear-gradient(135deg, rgba(49, 27, 75, 0.95), rgba(35, 18, 56, 0.98)) !important;
  color: var(--fatal-accent) !important;
}

body .nav-profile .nav-link {
  color: rgba(248, 240, 240, 0.72) !important;
}

body .nav-profile .nav-link:hover a,
body .nav-profile .nav-link a:hover,
body .nav-profile .nav-link:hover span,
body .nav-profile .nav-link a:hover span {
  color: #c084fc !important;
}

body .nav-profile .nav-link i,
body .nav-profile .nav-link svg {
  color: rgba(248, 240, 240, 0.72) !important;
  fill: rgba(248, 240, 240, 0.72) !important;
}

body .nav-profile .nav-link:hover i,
body .nav-profile .nav-link:hover svg,
body .nav-profile .nav-link a:hover i,
body .nav-profile .nav-link a:hover svg {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}

body .nav-profile .nav-link.navbar-user-mobile {
  background: var(--color-magenta-mid) !important;
}

body .nav-profile .nav-link.active {
  background: linear-gradient(135deg, rgba(123, 35, 63, 0.22), rgba(168, 85, 247, 0.12)) !important;
  color: var(--fatal-text) !important;
}

body .nav-profile .nav-link.active > a {
  background: transparent !important;
  color: var(--color-white) !important;
}

body .nav-profile .nav-link.active i,
body .nav-profile .nav-link.active svg {
  color: var(--fatal-text) !important;
  fill: currentColor !important;
}

.profile-settings-page {
  color: var(--fatal-text) !important;
}

.profile-settings-page .form-control,
.profile-settings-page .custom-select,
.profile-settings-page .select2-container--default .select2-selection--single,
.profile-settings-page .select2-container--default .select2-selection--multiple,
.fatal-category-chip,
.fatal-category-letter,
.fatal-category-sidecard,
.fatal-category-banner {
  border-color: rgba(212, 175, 152, 0.16) !important;
}

.profile-settings-page .select2-container--default .select2-selection--single,
.profile-settings-page .select2-container--default .select2-selection--multiple {
  background: linear-gradient(180deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98)) !important;
  color: var(--fatal-text) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(248, 240, 240, 0.04), 0 16px 38px rgba(26, 12, 45, 0.22) !important;
}

.profile-settings-page .select2-selection__rendered,
.profile-settings-page .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.profile-settings-page .select2-selection__placeholder {
  color: var(--fatal-text) !important;
}

.profile-settings-page .select2-selection__choice {
  background: linear-gradient(135deg, var(--color-magenta-light), var(--color-magenta-mid) 50%, var(--color-magenta)) !important;
  border: 0 !important;
  color: var(--color-white) !important;
}

.profile-settings-page .select2-selection__choice__remove {
  color: #1A0C2D !important;
}

.fatal-category-banner,
.fatal-category-sidecard,
.fatal-category-empty,
.fatal-category-list-note {
  background: linear-gradient(180deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98)) !important;
  color: var(--fatal-text) !important;
  border: 1px solid rgba(212, 175, 152, 0.16) !important;
  box-shadow: 0 18px 45px rgba(26, 12, 45, 0.28) !important;
}

.fatal-category-title,
.fatal-category-subtitle,
.fatal-category-sidecard__head small,
.fatal-category-empty p,
.fatal-category-list-note,
.fatal-category-stat span {
  color: rgba(248, 240, 240, 0.78) !important;
}

.fatal-category-stat strong,
.fatal-category-sidecard__head span {
  color: var(--fatal-accent) !important;
}

.fatal-category-letter,
.fatal-category-chip,
.fatal-category-sidecard .btn-category {
  background: rgba(35, 18, 56, 0.96) !important;
  color: rgba(248, 240, 240, 0.84) !important;
  border: 1px solid rgba(212, 175, 152, 0.14) !important;
}

.fatal-category-letter:hover,
.fatal-category-letter.active,
.fatal-category-chip.active,
.fatal-category-sidecard .btn-category:hover,
.fatal-category-sidecard .btn-category.active-category {
  background: linear-gradient(135deg, var(--color-magenta-light), var(--color-magenta-mid) 50%, var(--color-magenta)) !important;
  color: var(--color-white) !important;
  border-color: rgba(232, 197, 175, 0.42) !important;
  box-shadow: 0 12px 28px rgba(212, 175, 152, 0.18) !important;
}

.fatal-category-empty__icon {
  background: linear-gradient(135deg, rgba(212, 175, 152, 0.16), rgba(35, 18, 56, 0.96)) !important;
  color: var(--fatal-accent) !important;
}

.fatal-card-grid .fatal-card,
#containerWrapCreators .fatal-card,
.fatal-featured-grid .fatal-card {
  max-width: 340px !important;
}

body .btn-block,
body .btn-link,
body .text-primary,
body .text-info,
body .link-border,
body .verified {
  color: var(--fatal-accent) !important;
}

/* ==========================================================================
   DARK PREMIUM MAGENTA - FULL SITE COVERAGE
   Loaded after every page-specific stylesheet by layouts/app and admin/layout.
   ========================================================================== */
:root {
  --fatal-bg: #1A0C2D;
  --fatal-surface: #311B4B;
  --fatal-surface-strong: #231238;
  --fatal-surface-soft: rgba(49, 27, 75, 0.72);
  --fatal-text: var(--color-white);
  --fatal-muted: rgba(248, 240, 240, 0.7);
  --fatal-accent: var(--color-magenta-mid);
  --fatal-accent-strong: var(--color-magenta);
  --fatal-accent-bright: var(--color-magenta-light);
  --fatal-border: rgba(212, 175, 152, 0.25);
  --fatal-border-soft: rgba(212, 175, 152, 0.14);
  --fatal-glow: rgba(212, 175, 152, 0.22);
  --fatal-magenta: linear-gradient(135deg, var(--color-magenta-light) 0%, var(--color-magenta-mid) 50%, var(--color-magenta) 100%);
  --fatal-panel-gradient: linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9));
  --fatal-page-gradient:
    radial-gradient(circle at 12% 8%, rgba(212, 175, 152, 0.14), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(212, 175, 152, 0.12), transparent 25rem),
    linear-gradient(145deg, #1A0C2D 0%, #231238 54%, #1A0C2D 100%);
  --fatal-header-gradient: linear-gradient(135deg, rgba(49, 27, 75, 0.98), rgba(35, 18, 56, 0.98));
  --fatal-action-gradient: var(--fatal-magenta);
  --fatal-action-shadow: rgba(212, 175, 152, 0.25);
  --color-default: var(--color-magenta-mid) !important;
  --bs-body-bg: #1A0C2D;
  --bs-body-color: var(--color-white);
  --bs-primary: var(--color-magenta-mid);
  --bs-secondary: #311B4B;
  --bs-border-color: rgba(212, 175, 152, 0.18);
}

html,
body,
body.bg-light,
body.bg-white,
main,
main[role="main"],
.wrapper,
.content-wrapper,
.main-content,
.page-wrapper,
.py-4 {
  color: var(--fatal-text) !important;
}

body:not(.modal-open),
body:not(.modal-open) main[role="main"] {
  background-image: var(--fatal-page-gradient) !important;
  background-attachment: fixed !important;
}

body,
button,
input,
select,
textarea,
.tooltip,
.popover {
  font-family: var(--fatal-body-font) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.modal-title,
.offcanvas-title,
.page-title,
.section-title,
.title {
  color: var(--fatal-accent) !important;
  font-family: var(--fatal-heading-font) !important;
}

p,
label,
.form-label,
.form-check-label,
.card-text,
.modal-body,
.offcanvas-body,
.table,
.table td,
.table th,
.list-group-item,
.dropdown-item {
  color: var(--fatal-text);
}

.text-white {
  color: #FFFFFF !important;
}
.text-light {
  color: #F8F9FA !important;
}
.text-dark {
  color: #212529 !important;
}
.text-body {
  color: rgba(248, 240, 240, 0.9) !important;
}
.text-black {
  color: #000000 !important;
}
.text-primary {
  color: var(--color-magenta-light) !important;
}
.text-info {
  color: #17a2b8 !important;
}
.text-success {
  color: #28a745 !important;
}
.text-warning {
  color: #ffc107 !important;
}
.text-danger {
  color: #dc3545 !important;
}
.link-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.category-btn):not(.btn-category):not(.fatal-category-letter):not(.fatal-category-chip) {
  color: #FFFFFF !important;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.category-btn):not(.btn-category):not(.fatal-category-letter):not(.fatal-category-chip):not([href^="tel:"]):not(.fatal-button):not(.fatal-action-main):hover {
  color: var(--color-magenta-light) !important;
}

.text-muted,
.text-secondary,
.help-block,
.form-text,
.small,
small,
.description,
.subtitle {
  color: var(--fatal-muted) !important;
}

.link-border:hover,
.link-border:focus,
.text-primary:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--fatal-accent-bright) !important;
}

hr,
.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.divider,
.dropdown-divider,
.modal-header,
.modal-footer,
.card-header,
.card-footer,
.list-group-item,
.table td,
.table th {
  border-color: var(--fatal-border-soft) !important;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast,
.accordion-item,
.well,
.box,
.panel,
.shadow,
.shadow-sm,
.shadow-lg {
  border: 1px solid var(--fatal-border-soft) !important;
  box-shadow: 0 18px 46px rgba(26, 12, 45, 0.42), inset 0 1px 0 rgba(232, 197, 175, 0.035) !important;
}

.card,
.modal-content,
.toast,
.accordion-item,
.well,
.box,
.panel {
  background-image: var(--fatal-panel-gradient) !important;
  border-radius: 10px !important;
}

.modal-backdrop,
.offcanvas-backdrop,
.overlay {
  background: rgba(26, 12, 45, 0.82) !important;
}

.navbar,
.navbar_background_color,
header:not(.card-header),
.header,
.topbar {
  background: var(--fatal-header-gradient) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 14px 42px rgba(26, 12, 45, 0.38) !important;
}

.navbar .nav-link,
.navbar .navbar-toggler,
.navbar .login-btn,
.navbar .dropdown-toggle,
.navbar .text-dark,
.navbar .text-muted,
.topbar a {
  color: var(--fatal-text) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .show > .nav-link,
.topbar a:hover {
  color: var(--fatal-accent-bright) !important;
}

/* --- nav-link hover: original */
body:has(.fatal-page) .navbar.p-nav .nav-link:hover{color:var(--color-magenta-light)!important}

footer,
.footer-main,
.footer_background_color,
.fatal-footer {
  background: var(--fatal-header-gradient) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-muted) !important;
}

.btn-primary,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning,
.btn-main,
.btn-arrow,
.fatal-button,
.fatal-action-main,
.btn-promote-premium,
.swal2-confirm,
.page-item.active .page-link {
  background: var(--fatal-magenta) !important;
  border: 1px solid rgba(232, 197, 175, 0.48) !important;
  color: var(--fatal-bg) !important;
  box-shadow: 0 10px 28px var(--fatal-action-shadow), inset 0 1px 0 rgba(248, 240, 240, 0.22) !important;
  text-shadow: none !important;
}

.btn-secondary,
.btn-light,
.btn-dark,
.btn-default,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light,
.btn-post,
.btn-upload,
.btn-category,
.btn-radio,
.page-link {
  background: rgba(49, 27, 75, 0.88) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-default:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-light:hover,
.btn-post:hover,
.btn-upload:hover,
.btn-category:hover,
.btn-radio:hover,
.btn-radio.active,
.page-link:hover {
  background: rgba(212, 175, 152, 0.14) !important;
  border-color: var(--fatal-border) !important;
  color: var(--fatal-accent-bright) !important;
}

.btn i,
.btn svg,
.btn [class^="bi-"],
.btn [class*=" bi-"],
.page-link i,
.badge i {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

i[class^="bi-"],
i[class*=" bi-"],
i[class^="fa"],
i[class*=" fa"],
i[class^="feather"],
i[class*=" feather"],
svg.icon,
.icon-navbar,
.verified,
.ico-social {
  color: #FFFFFF !important;
}

.form-control,
.custom-select,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
.input-group-text,
.search-bar,
.search-pill-header,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search__field {
  background-color: rgba(49, 27, 75, 0.74) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
  box-shadow: inset 0 1px 0 rgba(232, 197, 175, 0.035) !important;
}

.form-control:focus,
.custom-select:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus,
.search-bar:focus,
.search-pill-header:focus-within,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  background-color: rgba(49, 27, 75, 0.94) !important;
  border-color: var(--fatal-accent) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 152, 0.13) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.search-input-header::placeholder,
.select2-search__field::placeholder {
  color: rgba(248, 240, 240, 0.5) !important;
  opacity: 1 !important;
}

.input-group-text,
.search-pill-header i,
.form-control-icon,
.select2-selection__arrow {
  color: var(--fatal-accent) !important;
}

.select2-container--default .select2-results__option {
  background: var(--fatal-surface-strong) !important;
  color: var(--fatal-text) !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background: rgba(212, 175, 152, 0.17) !important;
  color: var(--fatal-accent-bright) !important;
}

.select2-selection__choice,
.badge-primary,
.badge-danger,
.badge-success,
.badge-info,
.badge-warning,
.badge-premium,
.premium-badge,
.fatal-badge.vip {
  background: var(--fatal-magenta) !important;
  border-color: transparent !important;
  color: var(--fatal-bg) !important;
}

.select2-selection__choice__remove,
.select2-selection__choice__display {
  color: var(--fatal-bg) !important;
}

.badge-secondary,
.badge-light,
.badge-dark,
.badge:not(.badge-primary):not(.badge-danger):not(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-premium) {
  background: rgba(49, 27, 75, 0.92) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--fatal-accent) !important;
  border-color: var(--fatal-accent-strong) !important;
}

.progress {
  background: rgba(49, 27, 75, 0.64) !important;
}

.progress-bar,
.bg-primary.progress-bar,
.bg-danger.progress-bar,
.bg-success.progress-bar {
  background: var(--fatal-magenta) !important;
}

.alert,
.alert-primary,
.alert-danger,
.alert-warning,
.alert-success,
.alert-info {
  background: rgba(49, 27, 75, 0.9) !important;
  border: 1px solid var(--fatal-border) !important;
  color: var(--fatal-text) !important;
}

.table,
.table-responsive,
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-hover > tbody > tr:hover > *,
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
  background-color: transparent !important;
  color: var(--fatal-text) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(212, 175, 152, 0.045);
  --bs-table-hover-bg: rgba(212, 175, 152, 0.075);
  --bs-table-color: var(--color-white);
}

.nav-tabs,
.nav-pills {
  border-color: var(--fatal-border-soft) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.list-sidebar .nav-link,
.menu-left-home .nav-link,
.cards-settings .nav-link {
  color: var(--fatal-muted) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active,
.list-sidebar .nav-link:hover,
.list-sidebar .nav-link.active,
.menu-left-home .nav-link:hover,
.menu-left-home .nav-link.active,
.cards-settings .nav-link:hover,
.cards-settings .nav-link.active {
  background: rgba(135, 15, 108, 0.13) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-accent-bright) !important;
}

.swal2-popup,
.swal2-modal,
.sweet-alert,
.jconfirm-box {
  background: var(--fatal-panel-gradient) !important;
  border: 1px solid var(--fatal-border) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 24px 70px rgba(26, 12, 45, 0.66) !important;
}

.swal2-title,
.swal2-html-container,
.sweet-alert h2,
.sweet-alert p,
.jconfirm-title,
.jconfirm-content {
  color: var(--fatal-text) !important;
}

/* Landing page */
.fatal-page,
.fatal-shell,
.fatal-hero-fold,
.fatal-showcase {
  background-color: transparent !important;
  color: var(--fatal-text) !important;
}

.fatal-page {
  background-image: var(--fatal-page-gradient) !important;
}

.fatal-title,
.fatal-section-title {
  color: var(--fatal-accent) !important;
}

.fatal-gradient-text {
  background: var(--fatal-magenta) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}



.fatal-kicker-dot {
  background: var(--fatal-accent) !important;
  box-shadow: 0 0 14px var(--fatal-glow) !important;
}

.fatal-glass,
.fatal-stat,
.fatal-search {
  background: linear-gradient(145deg, rgba(49, 27, 75, 0.76), rgba(35, 18, 56, 0.84)) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(232, 197, 175, 0.055), 0 20px 45px rgba(26, 12, 45, 0.28) !important;
}

.fatal-stat strong,
.fatal-eyebrow,
.fatal-search-icon,
.fatal-search-icon i {
  color: var(--fatal-accent) !important;
}

.fatal-stat span,
.fatal-lead {
  color: var(--fatal-muted) !important;
}

.fatal-search input,
.fatal-search input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fatal-hero-media::before {
  background:
    radial-gradient(ellipse at 52% 46%, rgba(212, 175, 152, 0.15), rgba(212, 175, 152, 0.15) 27%, transparent 65%),
    radial-gradient(ellipse at 38% 58%, rgba(212, 175, 152, 0.15), transparent 55%) !important;
  filter: blur(38px) !important;
}

/* Listing and premium profile cards */
.fatal-card,
.card-profile,
.card-creator,
.creator-card,
.profile-card {
  background: var(--fatal-panel-gradient) !important;
  border: 1px solid rgba(49, 27, 75, 0.96) !important;
  color: var(--fatal-text) !important;
}

.fatal-card-premium,
.card-profile.premium,
.card-creator.premium,
.creator-card.premium,
.profile-card.premium,
[data-premium="true"] {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(145deg, #311B4B, #231238) padding-box,
    var(--fatal-magenta) border-box !important;
  box-shadow: 0 0 15px rgba(212, 175, 152, 0.25), 0 22px 58px rgba(26, 12, 45, 0.42) !important;
}

.fatal-card-name h3,
.fatal-card-title,
.creator-name,
.profile-name {
  color: var(--fatal-text) !important;
}

.fatal-action-icon,
.contact-button,
.btn-contact {
  background: rgba(49, 27, 75, 0.88) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-accent) !important;
}

/* Feed, profile, posts and media surfaces */
.wrap-post .card,
#formUpdateCreate .card,
.card-updates,
.card-posts,
.post-detail,
.comments,
.replies,
.profile-settings-card,
.profile-settings-sidebar,
.user-panel,
.wallet-card,
.statistics-card {
  background: var(--fatal-panel-gradient) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.wrap-post .card-header,
.wrap-post .card-body,
.wrap-post .card-footer,
#formUpdateCreate .card-header,
#formUpdateCreate .card-body,
#formUpdateCreate .card-footer {
  background: transparent !important;
}

.nav-profile,
.profile-tabs,
.profile-menu {
  background: transparent !important;
  border-color: var(--fatal-border-soft) !important;
}

.nav-profile .nav-link.active,
.profile-tabs .active,
.profile-menu .active {
  background: rgba(135, 15, 108, 0.15) !important;
  color: var(--fatal-accent-bright) !important;
  box-shadow: inset 0 -2px 0 var(--fatal-accent) !important;
}

.jumbotron,
.jumbotron-cover-user,
.cover-user,
.profile-cover {
  border-color: var(--fatal-border-soft) !important;
}

/* Categories */
.fatal-category-hero,
.fatal-category-page {
  color: var(--fatal-text) !important;
}

.fatal-category-banner,
.fatal-category-sidecard,
.fatal-category-empty,
.fatal-category-list-note,
.fatal-category-stat,
.fatal-category-content .card {
  background: var(--fatal-panel-gradient) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.fatal-category-stat strong,
.fatal-category-stat span {
  color: var(--fatal-accent) !important;
}

.fatal-category-letter,
.fatal-category-chip,
.fatal-category-sidecard .btn-category {
  background: rgba(49, 27, 75, 0.9) !important;
  border-color: var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.fatal-category-letter.active,
.fatal-category-letter:hover,
.fatal-category-chip.active,
.fatal-category-chip:hover,
.fatal-category-sidecard .btn-category.active-category,
.fatal-category-sidecard .btn-category:hover {
  background: var(--fatal-magenta) !important;
  color: var(--fatal-bg) !important;
}

/* Admin panel */
body > main,
body > main > .container-fluid,
.admin-content,
.dashboard-content {
  background-color: transparent !important;
  color: var(--fatal-text) !important;
}

.sidebar,
#sidebar-nav,
.offcanvas.sidebar {
  background: linear-gradient(180deg, #231238, #1A0C2D) !important;
  border-right: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-text) !important;
}

.sidebar .nav-link,
#sidebar-nav .nav-link {
  color: var(--fatal-muted) !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover,
#sidebar-nav .nav-link.active,
#sidebar-nav .nav-link:hover {
  background: rgba(135, 15, 108, 0.13) !important;
  color: var(--fatal-accent-bright) !important;
}

.shadow-custom,
.admin-header,
body > main > header {
  background: var(--fatal-header-gradient) !important;
  border-bottom: 1px solid var(--fatal-border-soft) !important;
  box-shadow: 0 14px 42px rgba(26, 12, 45, 0.38) !important;
}

/* Native controls and scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fatal-surface-strong);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fatal-accent), var(--fatal-accent-strong));
  border: 2px solid var(--fatal-surface-strong);
  border-radius: 999px;
}

* {
  scrollbar-color: var(--fatal-accent-strong) var(--fatal-surface-strong);
}

@media (max-width: 991.98px) {
  .navbar,
  .navbar_background_color,
  header:not(.card-header) {
    background: linear-gradient(180deg, #311B4B, #231238) !important;
  }

  .menu-mobile,
  .mobile-menu,
  .navbar-collapse,
  .offcanvas {
    background: linear-gradient(180deg, #311B4B, #231238) !important;
    color: var(--fatal-text) !important;
  }

  .modal-dialog,
  .modal-content {
    color: var(--fatal-text) !important;
  }
}

/* Strict Rosé Magenta runtime shield for legacy cascade layers */
body:not(:has(.fatal-page)) .navbar_background_color,
body:not(:has(.fatal-page)) .navbar.p-nav,
body:not(:has(.fatal-page)) .navbar,
body:not(:has(.fatal-page)) header:not(.card-header) {
  background: linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9)) !important;
  border-color: rgba(212, 175, 152, 0.14) !important;
  color: var(--color-white) !important;
  box-shadow: 0 18px 54px rgba(26, 12, 45, 0.32) !important;
}

body:not(:has(.fatal-page)) .search-pill-header,
body:not(:has(.fatal-page)) .input-group,
body:not(:has(.fatal-page)) .input-group-text,
body:not(:has(.fatal-page)) .form-control,
body:not(:has(.fatal-page)) .search-input-header,
body:not(:has(.fatal-page)) .search-box,
body:not(:has(.fatal-page)) .select2-container--default .select2-selection--single,
body:not(:has(.fatal-page)) .select2-container--default .select2-selection--multiple {
  background: linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9)) !important;
  border-color: rgba(212, 175, 152, 0.14) !important;
  color: var(--color-white) !important;
  box-shadow: inset 0 1px 0 rgba(248, 240, 240, 0.04) !important;
}

body:not(:has(.fatal-page)) .btn-header-search,
body:not(:has(.fatal-page)) .btn-primary,
body:not(:has(.fatal-page)) .btn-main,
body:not(:has(.fatal-page)) .btn-arrow,
body:not(:has(.fatal-page)) .btn-register-menu,
body:not(:has(.fatal-page)) .btn-view-profile,
body:not(:has(.fatal-page)) .btn-action,
body:not(:has(.fatal-page)) .btn-block .btn {
  background: linear-gradient(135deg, var(--color-magenta-light) 0%, var(--color-magenta-mid) 50%, var(--color-magenta) 100%) !important;
  border-color: rgba(232, 197, 175, 0.48) !important;
  color: var(--color-white) !important;
  box-shadow: 0 10px 28px rgba(212, 175, 152, 0.25) !important;
}

body:not(:has(.fatal-page)) .jumbotron.home,
body:not(:has(.fatal-page)) .jumbotron,
body:not(:has(.fatal-page)) .hero,
body:not(:has(.fatal-page)) .hero-banner {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9));
  border-color: rgba(212, 175, 152, 0.14) !important;
  color: var(--color-white) !important;
}

body:not(:has(.fatal-page)) .card,
body:not(:has(.fatal-page)) .card.bg-white,
body:not(:has(.fatal-page)) .b-radio-custom,
body:not(:has(.fatal-page)) .modal-content,
body:not(:has(.fatal-page)) .list-group-item,
body:not(:has(.fatal-page)) .panel,
body:not(:has(.fatal-page)) .box {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(49, 27, 75, 0.6), rgba(35, 18, 56, 0.9)) !important;
  border-color: rgba(212, 175, 152, 0.14) !important;
  color: var(--color-white) !important;
  box-shadow: 0 22px 70px rgba(26, 12, 45, 0.34) !important;
}

body:not(:has(.fatal-page)) .card::before,
body:not(:has(.fatal-page)) .card::after,
body:not(:has(.fatal-page)) .hero::before,
body:not(:has(.fatal-page)) .hero::after {
  background: radial-gradient(circle at 12% 0%, rgba(212, 175, 152, 0.15), transparent 45%) !important;
}

body:not(:has(.fatal-page)) h1,
body:not(:has(.fatal-page)) h2,
body:not(:has(.fatal-page)) h3,
body:not(:has(.fatal-page)) h4,
body:not(:has(.fatal-page)) h5,
body:not(:has(.fatal-page)) h6 {
  background: linear-gradient(135deg, #FFFFFF 20%, #F5E5DC 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body:not(:has(.fatal-page)) h1 span,
body:not(:has(.fatal-page)) h1 strong,
body:not(:has(.fatal-page)) h1 .text-primary,
body:not(:has(.fatal-page)) h1 .fatal-gradient-text,
body:not(:has(.fatal-page)) h2 span,
body:not(:has(.fatal-page)) h2 strong,
body:not(:has(.fatal-page)) h2 .text-primary,
body:not(:has(.fatal-page)) h2 .fatal-gradient-text,
body:not(:has(.fatal-page)) h3 span,
body:not(:has(.fatal-page)) h3 strong,
body:not(:has(.fatal-page)) h3 .text-primary,
body:not(:has(.fatal-page)) h3 .fatal-gradient-text,
body:not(:has(.fatal-page)) h4 span,
body:not(:has(.fatal-page)) h4 strong,
body:not(:has(.fatal-page)) h4 .text-primary,
body:not(:has(.fatal-page)) h4 .fatal-gradient-text,
body:not(:has(.fatal-page)) h5 span,
body:not(:has(.fatal-page)) h5 strong,
body:not(:has(.fatal-page)) h5 .text-primary,
body:not(:has(.fatal-page)) h5 .fatal-gradient-text,
body:not(:has(.fatal-page)) h6 span,
body:not(:has(.fatal-page)) h6 strong,
body:not(:has(.fatal-page)) h6 .text-primary,
body:not(:has(.fatal-page)) h6 .fatal-gradient-text {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFE5D9 35%, #E29578 70%, #C57B57 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body:not(:has(.fatal-page)) .text-muted,
body:not(:has(.fatal-page)) small,
body:not(:has(.fatal-page)) .form-text,
body:not(:has(.fatal-page)) .help-text {
  color: rgba(248, 240, 240, 0.7) !important;
}

body:not(:has(.fatal-page)) a:not(.btn),
body:not(:has(.fatal-page)) .nav-link,
body:not(:has(.fatal-page)) label,
body:not(:has(.fatal-page)) p,
body:not(:has(.fatal-page)) span {
  color: var(--color-white) !important;
}

/* Home hero restore: original contained media composition */
.fatal-page .fatal-shell {
  position: relative;
  overflow: hidden;
}

.fatal-page .fatal-hero-fold {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.fatal-page .fatal-hero-fold > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.fatal-page .fatal-hero-fold > .container > .row {
  min-height: auto;
  display: flex;
  align-items: center !important;
}

.fatal-page .fatal-hero-fold > .container > .row > .col-lg-5 {
  position: relative;
  z-index: 1;
  display: block !important;
  flex: 0 0 52% !important;
  max-width: 52% !important;
  min-height: 0;
  margin-left: 0;
  pointer-events: auto;
}

.fatal-page .fatal-hero-fold > .container > .row > .col-12.col-lg-7 {
  position: relative;
  z-index: 3;
  flex: 0 0 48% !important;
  max-width: 48% !important;
  padding-top: 0;
  padding-right: 15px;
  padding-bottom: 0;
  align-self: center;
}

.fatal-page .fatal-hero-media {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: auto;
  min-height: 0;
  margin-left: 0;
  margin-right: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.fatal-page .fatal-hero-media-inner {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.fatal-page .fatal-hero-media::before,
.fatal-page .fatal-hero-media::after,
.fatal-page .fatal-hero-media-inner::before,
.fatal-page .fatal-hero-media-inner::after {
  content: none !important;
  display: none !important;
}

.fatal-page .fatal-hero-media img {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 100% !important;
  height: min(66vh, 610px) !important;
  min-height: 520px !important;
  max-height: 610px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 36px 70px rgba(26, 12, 45, 0.42)) !important;
  margin: 0 !important;
  transform: none !important;
}

.fatal-page .fatal-title {
  max-width: 780px;
}

.fatal-page .fatal-hero-fold .fatal-stats,
.fatal-page .fatal-hero-fold .fatal-search {
  position: relative;
  z-index: 4;
}

@media (max-width: 991.98px) {
  .fatal-page .fatal-hero-fold {
    min-height: auto;
  }

  .fatal-page .fatal-hero-fold > .container > .row {
    display: block;
  }

  .fatal-page .fatal-hero-fold > .container > .row > .col-12.col-lg-7 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 15px;
    padding-bottom: 24px;
  }

  .fatal-page .fatal-hero-fold > .container > .row > .col-lg-5 {
    display: none !important;
  }

  .fatal-page .fatal-hero-media {
    display: none !important;
    max-width: 520px;
    margin: 0 auto;
  }

  .fatal-page .fatal-hero-media img {
    height: min(56vh, 500px) !important;
    min-height: 0 !important;
    max-height: 500px !important;
  }
}

@media (max-width: 767.98px) {
  .fatal-page .fatal-hero-fold {
    padding-top: 14px !important;
    padding-bottom: 24px !important;
  }

  .fatal-page .fatal-hero-media {
    display: none !important;
    max-width: 420px;
  }

  .fatal-page .fatal-hero-media img {
    height: min(48vh, 420px) !important;
    max-height: 420px !important;
  }
}

/* Satin purple action theme: replaced with bronze variables */
:root {
  --fatal-action-purple: var(--color-magenta);
  --fatal-action-purple-border: var(--color-magenta);
  --fatal-action-white: var(--color-white);
}

body .btn-primary,
body .btn-main,
body .btn-arrow,
body .fatal-button,
body .fatal-action-main,
body .btn-header-search,
body .btn-register-menu,
body .btn-view-profile,
body .btn-action,
body .btn-apply-compact,
body .btn-clear-filters,
body .fatal-price-button,
body .fatal-action-icon.whatsapp,
body .fatal-profile-contact-action,
body .fatal-profile-contact-action.whatsapp,
body .fatal-card .fatal-action-main,
body .fatal-card-premium .fatal-action-main,
body:has(.fatal-page) .navbar.p-nav .btn-light,
body:has(.fatal-page) .navbar.p-nav .btn-main,
body:has(.fatal-page) .navbar.p-nav .btn-primary,
body:has(.fatal-page) #alertAdult .btn-primary,
body:has(.fatal-page) .showBanner .btn-primary,
body:not(:has(.fatal-page)) .btn-header-search,
body:not(:has(.fatal-page)) .btn-primary,
body:not(:has(.fatal-page)) .btn-main,
body:not(:has(.fatal-page)) .btn-arrow,
body:not(:has(.fatal-page)) .btn-register-menu,
body:not(:has(.fatal-page)) .btn-view-profile,
body:not(:has(.fatal-page)) .btn-action,
body:not(:has(.fatal-page)) .btn-block .btn {
  background: var(--fatal-action-purple) !important;
  background-image: var(--fatal-action-purple) !important;
  border: 1px solid var(--fatal-action-purple-border) !important;
  color: var(--fatal-action-white) !important;
  fill: var(--fatal-action-white) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .btn-primary *,
body .btn-main *,
body .btn-arrow *,
body .fatal-button *,
body .fatal-action-main *,
body .btn-header-search *,
body .btn-register-menu *,
body .btn-view-profile *,
body .btn-action *,
body .btn-apply-compact *,
body .btn-clear-filters *,
body .fatal-price-button *,
body .fatal-action-icon.whatsapp *,
body .fatal-profile-contact-action *,
body .fatal-profile-contact-action.whatsapp *,
body .fatal-card .fatal-action-main *,
body .fatal-card-premium .fatal-action-main *,
body:has(.fatal-page) .navbar.p-nav .btn-light *,
body:has(.fatal-page) .navbar.p-nav .btn-main *,
body:has(.fatal-page) .navbar.p-nav .btn-primary *,
body:has(.fatal-page) #alertAdult .btn-primary *,
body:has(.fatal-page) .showBanner .btn-primary *,
body:not(:has(.fatal-page)) .btn-header-search *,
body:not(:has(.fatal-page)) .btn-primary *,
body:not(:has(.fatal-page)) .btn-main *,
body:not(:has(.fatal-page)) .btn-arrow *,
body:not(:has(.fatal-page)) .btn-register-menu *,
body:not(:has(.fatal-page)) .btn-view-profile *,
body:not(:has(.fatal-page)) .btn-action *,
body:not(:has(.fatal-page)) .btn-block .btn * {
  color: var(--fatal-action-white) !important;
  fill: var(--fatal-action-white) !important;
}

/* Final exceptions: social networks and share buttons keep branded colors */
html body a[href*="wa.me"],
html body a[href*="whatsapp"],
html body .btn-whatsapp,
html body .whatsapp,
html body .fatal-action-icon.whatsapp,
html body .fatal-profile-contact-action.whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border: 1px solid rgba(37, 211, 102, 0.55) !important;
  border-radius: 6px !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.25) !important;
}

html body a[href*="wa.me"]:hover,
html body a[href*="whatsapp"]:hover,
html body .btn-whatsapp:hover,
html body .whatsapp:hover,
html body .fatal-action-icon.whatsapp:hover,
html body .fatal-profile-contact-action.whatsapp:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  background-image: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

html body .btn-share,
html body .share,
html body [data-action*="share"],
html body .fatal-profile-social-action,
html body .fatal-share-dropdown a,
html body .fatal-card .fatal-action-icon:not(.whatsapp),
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp) {
  background: var(--color-magenta) !important;
  background-image: none !important;
  border: 1px solid var(--color-magenta) !important;
  border-radius: 6px !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-shadow-magenta) !important;
}

html body .btn-share:hover,
html body .share:hover,
html body [data-action*="share"]:hover,
html body .fatal-profile-social-action:hover,
html body .fatal-share-dropdown a:hover,
html body .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover {
  transform: translateY(-2px) !important;
  background: var(--color-share-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-share-hover-bg) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

/* Absolute final button variables: edit these to recolor all ordinary buttons */
html:root,
html body {
  --fatal-btn-bg-color: var(--color-magenta);
  --fatal-btn-border-color: var(--color-magenta);
  --fatal-btn-text-color: var(--color-white);
  --fatal-btn-shadow-value: 0 14px 36px var(--color-shadow-magenta);

  --fatal-btn-hover-bg-color: var(--color-magenta-light);
  --fatal-btn-hover-border-color: var(--color-magenta-light);
  --fatal-btn-hover-text-color: var(--color-text-hover);
  --fatal-btn-hover-shadow-value: 0 18px 38px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;

  --fatal-btn-active-bg-color: var(--color-magenta-light);
  --fatal-btn-active-border-color: var(--color-magenta-light);
  --fatal-btn-active-text-color: var(--color-text-hover);
  --fatal-btn-active-shadow-value: 0 18px 38px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body [role="button"],
html body .btn,
html body a.btn,
html body .fatal-button,
html body .fatal-action-main,
html body .btn-primary,
html body .btn-danger,
html body .btn-success,
html body .btn-info,
html body .btn-warning,
html body .btn-main,
html body .btn-arrow,
html body .btn-header-search,
html body .btn-register-menu,
html body .btn-view-profile,
html body .btn-action,
html body .btn-apply-compact,
html body .btn-clear-filters,
html body .fatal-price-button,
html body .btn-promote-premium,
html body .swal2-confirm,
html body .page-item.active .page-link,
html body .category-btn,
html body .fatal-creators-page .category-btn,
html body #dropdownItems .category-btn,
html body #moreDropdown > .category-btn,
html body .fatal-category-letter,
html body .fatal-category-chip,
html body .fatal-category-sidecard .btn-category,
html body .btn-category,
html body .select2-results__option--highlighted[aria-selected],
html body .pill-checkbox input:checked + span,
html body .modal-filters-sandbox .pill-checkbox input:checked + span,
html body .modal-nav-compact .nav-link.active,
html body .noUi-connect,
html body .range-values,
html body .fatal-card .fatal-action-main,
html body #containerWrapCreators .fatal-card .fatal-action-main,
html body .fatal-featured-grid .fatal-card .fatal-action-main,
html body .fatal-card-grid .fatal-card .fatal-action-main,
html body .fatal-creators-page button[data-target="#modalFiltros"] {
  min-height: 46px !important;
  border: 1px solid var(--fatal-btn-border-color) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  color: var(--fatal-btn-text-color) !important;
  fill: var(--fatal-btn-text-color) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: var(--fatal-btn-shadow-value) !important;
  text-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

html body button:hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover,
html body input[type="reset"]:hover,
html body [role="button"]:hover,
html body .btn:hover,
html body a.btn:hover,
html body .fatal-button:hover,
html body .fatal-action-main:hover,
html body .btn-primary:hover,
html body .btn-danger:hover,
html body .btn-success:hover,
html body .btn-info:hover,
html body .btn-warning:hover,
html body .btn-main:hover,
html body .btn-arrow:hover,
html body .btn-header-search:hover,
html body .btn-register-menu:hover,
html body .btn-view-profile:hover,
html body .btn-action:hover,
html body .btn-apply-compact:hover,
html body .btn-clear-filters:hover,
html body .fatal-price-button:hover,
html body .btn-promote-premium:hover,
html body .swal2-confirm:hover,
html body .page-item.active .page-link:hover,
html body .category-btn:hover,
html body .fatal-creators-page .category-btn:hover,
html body #dropdownItems .category-btn:hover,
html body #moreDropdown > .category-btn:hover,
html body .fatal-category-letter:hover,
html body .fatal-category-chip:hover,
html body .fatal-category-sidecard .btn-category:hover,
html body .btn-category:hover,
html body .pill-checkbox input:checked + span:hover,
html body .modal-filters-sandbox .pill-checkbox input:checked + span:hover,
html body .modal-nav-compact .nav-link.active:hover,
html body .fatal-card .fatal-action-main:hover,
html body #containerWrapCreators .fatal-card .fatal-action-main:hover,
html body .fatal-featured-grid .fatal-card .fatal-action-main:hover,
html body .fatal-card-grid .fatal-card .fatal-action-main:hover,
html body .fatal-creators-page button[data-target="#modalFiltros"]:hover {
  transform: translateY(-2px) !important;
  border-color: var(--color-magenta-light) !important;
  background: var(--color-magenta-light) !important;
  background-image: none !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: var(--fatal-btn-hover-shadow-value) !important;
}

html body .active.btn,
html body .btn.active,
html body .btn:active,
html body button:active,
html body [role="button"]:active,
html body .category-btn.active,
html body .fatal-creators-page .category-btn.active,
html body #moreDropdown.has-active > .category-btn,
html body .fatal-category-letter.active,
html body .fatal-category-chip.active,
html body .fatal-category-sidecard .btn-category.active-category,
html body .btn-category.active-category,
html body .page-item.active .page-link,
html body .modal-nav-compact .nav-link.active,
html body .pill-checkbox input:checked + span,
html body .modal-filters-sandbox .pill-checkbox input:checked + span,
html body .select2-results__option--highlighted[aria-selected] {
  border-color: var(--fatal-btn-active-border-color) !important;
  background: linear-gradient(135deg, var(--fatal-btn-active-bg-color) 0%, var(--fatal-btn-active-bg-color) 42%, var(--fatal-btn-active-bg-color) 76%, var(--fatal-btn-active-bg-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--fatal-btn-active-bg-color) 0%, var(--fatal-btn-active-bg-color) 42%, var(--fatal-btn-active-bg-color) 76%, var(--fatal-btn-active-bg-color) 100%) !important;
  color: var(--fatal-btn-active-text-color) !important;
  fill: var(--fatal-btn-active-text-color) !important;
  box-shadow: var(--fatal-btn-active-shadow-value) !important;
}

html body button:hover *,
html body [role="button"]:hover *,
html body .btn:hover *,
html body .fatal-button:hover *,
html body .fatal-action-main:hover *,
html body .category-btn:hover *,
html body .fatal-category-letter:hover *,
html body .fatal-category-chip:hover *,
html body .btn-category:hover *,
html body .active.btn *,
html body .btn.active *,
html body .category-btn.active *,
html body .fatal-category-letter.active *,
html body .fatal-category-chip.active *,
html body .btn-category.active-category * {
  color: inherit !important;
  fill: currentColor !important;
}

/* Preserve branded social/share buttons after the final ordinary-button system */
html body a[href*="wa.me"],
html body a[href*="whatsapp"],
html body .btn-whatsapp,
html body .whatsapp,
html body .fatal-action-icon.whatsapp,
html body .fatal-profile-contact-action.whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border: 1px solid rgba(37, 211, 102, 0.55) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.25) !important;
}

html body a[href*="wa.me"]:hover,
html body a[href*="whatsapp"]:hover,
html body .btn-whatsapp:hover,
html body .whatsapp:hover,
html body .fatal-action-icon.whatsapp:hover,
html body .fatal-profile-contact-action.whatsapp:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  background-image: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

html body .btn-share,
html body [data-action*="share"],
html body [aria-label*="share" i],
html body [title*="share" i],
html body [aria-label*="compart" i],
html body [title*="compart" i],
html body .fatal-profile-social-action,
html body .fatal-share-dropdown a,
html body .fatal-card .fatal-action-icon:not(.whatsapp),
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp) {
  background: var(--color-magenta) !important;
  background-image: none !important;
  border: 1px solid var(--color-magenta) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-shadow-magenta) !important;
}

html body .btn-share:hover,
html body [data-action*="share"]:hover,
html body [aria-label*="share" i]:hover,
html body [title*="share" i]:hover,
html body [aria-label*="compart" i]:hover,
html body [title*="compart" i]:hover,
html body .fatal-profile-social-action:hover,
html body .fatal-share-dropdown a:hover,
html body .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover {
  transform: translateY(-2px) !important;
  background: var(--color-share-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-share-hover-bg) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

/* Absolute final ordinary-button color system */
html:root,
html body {
  --fatal-btn-bg-color: var(--color-magenta);
  --fatal-btn-border-color: var(--color-magenta);
  --fatal-btn-text-color: var(--color-white);
  --fatal-btn-shadow-value: 0 14px 36px var(--color-shadow-magenta);
  --fatal-btn-hover-bg-color: var(--color-magenta-light);
  --fatal-btn-hover-border-color: var(--color-magenta-light);
  --fatal-btn-hover-text-color: var(--color-text-hover);
  --fatal-btn-hover-shadow-value: 0 18px 38px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

html body:not(:has(.fatal-page)) button,
html body:not(:has(.fatal-page)) input[type="button"],
html body:not(:has(.fatal-page)) input[type="submit"],
html body:not(:has(.fatal-page)) input[type="reset"],
html body:not(:has(.fatal-page)) [role="button"],
html body:not(:has(.fatal-page)) .btn,
html body:not(:has(.fatal-page)) a.btn,
html body:not(:has(.fatal-page)) .btn-primary,
html body:not(:has(.fatal-page)) .btn-success,
html body:not(:has(.fatal-page)) .btn-danger,
html body:not(:has(.fatal-page)) .btn-info,
html body:not(:has(.fatal-page)) .btn-warning,
html body:not(:has(.fatal-page)) .btn-main,
html body:not(:has(.fatal-page)) .btn-arrow,
html body:not(:has(.fatal-page)) .fatal-button,
html body:not(:has(.fatal-page)) .fatal-action-main,
html body:not(:has(.fatal-page)) .btn-header-search,
html body:not(:has(.fatal-page)) .btn-register-menu,
html body:not(:has(.fatal-page)) .btn-view-profile,
html body:not(:has(.fatal-page)) .btn-action,
html body:not(:has(.fatal-page)) .btn-apply-compact,
html body:not(:has(.fatal-page)) .btn-clear-filters,
html body:not(:has(.fatal-page)) .fatal-price-button,
html body:not(:has(.fatal-page)) .btn-promote-premium,
html body:not(:has(.fatal-page)) .swal2-confirm,
html body:not(:has(.fatal-page)) .page-item.active .page-link,
html body:not(:has(.fatal-page)) .category-btn,
html body:not(:has(.fatal-page)) .category-btn.active,
html body:not(:has(.fatal-page)) .fatal-category-letter,
html body:not(:has(.fatal-page)) .fatal-category-letter.active,
html body:not(:has(.fatal-page)) .fatal-category-chip,
html body:not(:has(.fatal-page)) .fatal-category-chip.active,
html body:not(:has(.fatal-page)) .fatal-category-sidecard .btn-category,
html body:not(:has(.fatal-page)) .fatal-category-sidecard .btn-category.active-category,
html body:not(:has(.fatal-page)) .btn-category,
html body:not(:has(.fatal-page)) .btn-category.active-category,
html body:not(:has(.fatal-page)) .select2-results__option--highlighted[aria-selected],
html body:not(:has(.fatal-page)) .pill-checkbox input:checked + span,
html body:not(:has(.fatal-page)) .modal-filters-sandbox .pill-checkbox input:checked + span,
html body:not(:has(.fatal-page)) .modal-nav-compact .nav-link.active,
html body:not(:has(.fatal-page)) .noUi-connect,
html body:not(:has(.fatal-page)) .range-values,
html body:not(:has(.fatal-page)) .fatal-card .fatal-action-main,
html body:not(:has(.fatal-page)) #containerWrapCreators .fatal-card .fatal-action-main,
html body:not(:has(.fatal-page)) .fatal-featured-grid .fatal-card .fatal-action-main,
html body:not(:has(.fatal-page)) .fatal-card-grid .fatal-card .fatal-action-main,
html body:not(:has(.fatal-page)) .fatal-creators-page button[data-target="#modalFiltros"] {
  min-height: 0px !important;
  border: 1px solid var(--fatal-btn-border-color) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  color: var(--fatal-btn-text-color) !important;
  fill: var(--fatal-btn-text-color) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: var(--fatal-btn-shadow-value) !important;
  text-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

html body:not(:has(.fatal-page)) button:hover,
html body:not(:has(.fatal-page)) input[type="button"]:hover,
html body:not(:has(.fatal-page)) input[type="submit"]:hover,
html body:not(:has(.fatal-page)) input[type="reset"]:hover,
html body:not(:has(.fatal-page)) [role="button"]:hover,
html body:not(:has(.fatal-page)) .btn:hover,
html body:not(:has(.fatal-page)) a.btn:hover,
html body:not(:has(.fatal-page)) .btn-primary:hover,
html body:not(:has(.fatal-page)) .btn-success:hover,
html body:not(:has(.fatal-page)) .btn-danger:hover,
html body:not(:has(.fatal-page)) .btn-info:hover,
html body:not(:has(.fatal-page)) .btn-warning:hover,
html body:not(:has(.fatal-page)) .btn-main:hover,
html body:not(:has(.fatal-page)) .btn-arrow:hover,
html body:not(:has(.fatal-page)) .fatal-button:hover,
html body:not(:has(.fatal-page)) .fatal-action-main:hover,
html body:not(:has(.fatal-page)) .btn-header-search:hover,
html body:not(:has(.fatal-page)) .btn-register-menu:hover,
html body:not(:has(.fatal-page)) .btn-view-profile:hover,
html body:not(:has(.fatal-page)) .btn-action:hover,
html body:not(:has(.fatal-page)) .btn-apply-compact:hover,
html body:not(:has(.fatal-page)) .btn-clear-filters:hover,
html body:not(:has(.fatal-page)) .fatal-price-button:hover,
html body:not(:has(.fatal-page)) .btn-promote-premium:hover,
html body:not(:has(.fatal-page)) .swal2-confirm:hover,
html body:not(:has(.fatal-page)) .page-item.active .page-link:hover,
html body:not(:has(.fatal-page)) .category-btn:hover,
html body:not(:has(.fatal-page)) .category-btn.active:hover,
html body:not(:has(.fatal-page)) .fatal-category-letter:hover,
html body:not(:has(.fatal-page)) .fatal-category-letter.active:hover,
html body:not(:has(.fatal-page)) .fatal-category-chip:hover,
html body:not(:has(.fatal-page)) .fatal-category-chip.active:hover,
html body:not(:has(.fatal-page)) .fatal-category-sidecard .btn-category:hover,
html body:not(:has(.fatal-page)) .fatal-category-sidecard .btn-category.active-category:hover,
html body:not(:has(.fatal-page)) .btn-category:hover,
html body:not(:has(.fatal-page)) .btn-category.active-category:hover,
html body:not(:has(.fatal-page)) .pill-checkbox input:checked + span:hover,
html body:not(:has(.fatal-page)) .modal-filters-sandbox .pill-checkbox input:checked + span:hover,
html body:not(:has(.fatal-page)) .modal-nav-compact .nav-link.active:hover,
html body:not(:has(.fatal-page)) .fatal-card .fatal-action-main:hover,
html body:not(:has(.fatal-page)) #containerWrapCreators .fatal-card .fatal-action-main:hover,
html body:not(:has(.fatal-page)) .fatal-featured-grid .fatal-card .fatal-action-main:hover,
html body:not(:has(.fatal-page)) .fatal-card-grid .fatal-card .fatal-action-main:hover,
html body:not(:has(.fatal-page)) .fatal-creators-page button[data-target="#modalFiltros"]:hover {
  transform: translateY(-2px) !important;
  border-color: var(--color-magenta-light) !important;
  background: var(--color-magenta-light) !important;
  background-image: none !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: var(--fatal-btn-hover-shadow-value) !important;
}

/* Re-apply branded exceptions after the body:not override */
html body:not(:has(.fatal-page)) a[href*="wa.me"],
html body:not(:has(.fatal-page)) a[href*="whatsapp"],
html body:not(:has(.fatal-page)) .btn-whatsapp,
html body:not(:has(.fatal-page)) .whatsapp,
html body:not(:has(.fatal-page)) .fatal-action-icon.whatsapp,
html body:not(:has(.fatal-page)) .fatal-profile-contact-action.whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border: 1px solid rgba(37, 211, 102, 0.55) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.25) !important;
}

html body:not(:has(.fatal-page)) .btn-share,
html body:not(:has(.fatal-page)) [data-action*="share"],
html body:not(:has(.fatal-page)) [aria-label*="share" i],
html body:not(:has(.fatal-page)) [title*="share" i],
html body:not(:has(.fatal-page)) [aria-label*="compart" i],
html body:not(:has(.fatal-page)) [title*="compart" i],
html body:not(:has(.fatal-page)) .fatal-profile-social-action,
html body:not(:has(.fatal-page)) .fatal-share-dropdown a,
html body:not(:has(.fatal-page)) .fatal-card .fatal-action-icon:not(.whatsapp),
html body:not(:has(.fatal-page)) #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp),
html body:not(:has(.fatal-page)) .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp),
html body:not(:has(.fatal-page)) .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp) {
  background: var(--color-magenta) !important;
  background-image: none !important;
  border: 1px solid var(--color-magenta) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-shadow-magenta) !important;
}

html body #close-banner,
html body .showBanner #close-banner,
html body.modal-open #close-banner.btn.btn-sm.btn-primary {
  min-height: 46px !important;
  border: 1px solid var(--fatal-btn-border-color) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--fatal-btn-bg-color) 0%, var(--fatal-btn-bg-color) 42%, var(--fatal-btn-bg-color) 76%, var(--fatal-btn-bg-color) 100%) !important;
  color: var(--fatal-btn-text-color) !important;
  fill: var(--fatal-btn-text-color) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: var(--fatal-btn-shadow-value) !important;
  text-shadow: none !important;
}

html body #close-banner:hover,
html body .showBanner #close-banner:hover,
html body.modal-open #close-banner.btn.btn-sm.btn-primary:hover {
  transform: translateY(-2px) !important;
  border-color: var(--fatal-btn-hover-border-color) !important;
  background: linear-gradient(135deg, var(--fatal-btn-hover-bg-color) 0%, var(--fatal-btn-hover-bg-color) 42%, var(--fatal-btn-hover-bg-color) 76%, var(--fatal-btn-hover-bg-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--fatal-btn-hover-bg-color) 0%, var(--fatal-btn-hover-bg-color) 42%, var(--fatal-btn-hover-bg-color) 76%, var(--fatal-btn-hover-bg-color) 100%) !important;
  color: var(--fatal-btn-hover-text-color) !important;
  fill: var(--fatal-btn-hover-text-color) !important;
  box-shadow: var(--fatal-btn-hover-shadow-value) !important;
}

/* Final button variables and category cleanup */
:root {
  --fatal-btn-bg: var(--color-magenta);
  --fatal-btn-border: var(--color-magenta);
  --fatal-btn-text: var(--color-white);
  --fatal-btn-shadow: 0 10px 24px var(--color-shadow-magenta);
  --fatal-btn-hover-bg: var(--color-magenta-light);
  --fatal-btn-hover-border: var(--color-magenta-light);
  --fatal-btn-hover-text: var(--color-text-hover);
  --fatal-btn-hover-shadow: 0 16px 36px var(--color-shadow-magenta-hover), 0 0 16px rgba(255, 255, 255, 0.25);
}

html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body [role="button"],
html body .btn,
html body a.btn,
html body .fatal-button,
html body .fatal-action-main,
html body .btn-primary,
html body .btn-danger,
html body .btn-success,
html body .btn-info,
html body .btn-warning,
html body .btn-main,
html body .btn-arrow,
html body .btn-header-search,
html body .btn-register-menu,
html body .btn-view-profile,
html body .btn-action,
html body .btn-apply-compact,
html body .btn-clear-filters,
html body .fatal-price-button,
html body .btn-promote-premium,
html body .swal2-confirm,
html body .category-btn,
html body .fatal-creators-page .category-btn,
html body #dropdownItems .category-btn,
html body #moreDropdown > .category-btn,
html body .fatal-category-letter,
html body .fatal-category-chip,
html body .fatal-category-sidecard .btn-category,
html body .btn-category,
html body .select2-results__option--highlighted[aria-selected],
html body .noUi-connect,
html body .range-values,
html body .fatal-card .fatal-action-main,
html body #containerWrapCreators .fatal-card .fatal-action-main,
html body .fatal-featured-grid .fatal-card .fatal-action-main,
html body .fatal-card-grid .fatal-card .fatal-action-main,
html body:has(.fatal-page) .navbar.p-nav .btn-main.btn-light,
html body:has(.fatal-page) .navbar.p-nav .btn-primary,
html body:has(.fatal-page) .navbar.p-nav .btn-register-menu,
html body:has(.fatal-page) .navbar.p-nav .toggleRegister,
html body:has(.jumbotron-cover-user) .navbar.p-nav .btn-main.btn-light,
html body:has(.jumbotron-cover-user) .navbar.p-nav .btn-primary,
html body:has(.jumbotron-cover-user) .navbar.p-nav .btn-register-menu,
html body:has(.jumbotron-cover-user) .navbar.p-nav .toggleRegister,
html body .fatal-creators-page button[data-target="#modalFiltros"] {
  min-height: 46px !important;
  border: 1px solid var(--fatal-btn-border) !important;
  border-radius: 6px !important;
  background: var(--fatal-btn-bg) !important;
  background-image: var(--fatal-btn-bg) !important;
  color: var(--fatal-btn-text) !important;
  fill: var(--fatal-btn-text) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: var(--fatal-btn-shadow) !important;
  text-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

/* Premium active state for buttons and chips */
html body .page-item.active .page-link,
html body .category-btn.active,
html body .fatal-creators-page .category-btn.active,
html body .fatal-category-letter.active,
html body .fatal-category-chip.active,
html body .fatal-category-sidecard .btn-category.active-category,
html body .btn-category.active-category,
html body .pill-checkbox input:checked + span,
html body .modal-filters-sandbox .pill-checkbox input:checked + span,
html body .modal-nav-compact .nav-link.active {
  border-color: var(--fatal-btn-hover-border) !important;
  background: var(--fatal-btn-hover-bg) !important;
  background-image: var(--fatal-btn-hover-bg) !important;
  color: var(--fatal-btn-hover-text) !important;
  fill: var(--fatal-btn-hover-text) !important;
  box-shadow: var(--fatal-btn-hover-shadow) !important;
}

html body .page-item.active .page-link *,
html body .category-btn.active *,
html body .fatal-creators-page .category-btn.active *,
html body .fatal-category-letter.active *,
html body .fatal-category-chip.active *,
html body .fatal-category-sidecard .btn-category.active-category *,
html body .btn-category.active-category *,
html body .pill-checkbox input:checked + span *,
html body .modal-filters-sandbox .pill-checkbox input:checked + span *,
html body .modal-nav-compact .nav-link.active * {
  color: var(--fatal-btn-hover-text) !important;
  fill: var(--fatal-btn-hover-text) !important;
}


html body button:hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover,
html body input[type="reset"]:hover,
html body [role="button"]:hover,
html body .btn:hover,
html body a.btn:hover,
html body button:hover *,
html body [role="button"]:hover *,
html body .btn:hover *,
html body .fatal-button:hover *,
html body .fatal-action-main:hover *,
html body .category-btn:hover *,
html body .fatal-creators-page .category-btn:hover *,
html body .fatal-category-letter:hover *,
html body .fatal-category-chip:hover *,
html body .fatal-category-sidecard .btn-category:hover *,
html body .btn-category:hover *,
html body .modal-nav-compact .nav-link.active:hover *,
html body .fatal-creators-page button[data-target="#modalFiltros"]:hover * {
  color: var(--fatal-btn-hover-text) !important;
  fill: var(--fatal-btn-hover-text) !important;
}

html body button *,
html body [role="button"] *,
html body .btn *,
html body .fatal-button *,
html body .fatal-action-main *,
html body .category-btn *,
html body .fatal-creators-page .category-btn *,
html body .fatal-category-letter *,
html body .fatal-category-chip *,
html body .fatal-category-sidecard .btn-category *,
html body .btn-category *,
html body .modal-nav-compact .nav-link.active *,
html body .fatal-creators-page button[data-target="#modalFiltros"] * {
  color: inherit !important;
  fill: currentColor !important;
}

/* Keep only real share/social actions outside the general button system */
html body a[href*="wa.me"],
html body a[href*="whatsapp"],
html body .btn-whatsapp,
html body .whatsapp,
html body .fatal-action-icon.whatsapp,
html body .fatal-profile-contact-action.whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border: 1px solid rgba(37, 211, 102, 0.55) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.25) !important;
}

html body a[href*="wa.me"]:hover,
html body a[href*="whatsapp"]:hover,
html body .btn-whatsapp:hover,
html body .whatsapp:hover,
html body .fatal-action-icon.whatsapp:hover,
html body .fatal-profile-contact-action.whatsapp:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  background-image: linear-gradient(135deg, #2BEA72 0%, #0F7F73 100%) !important;
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

/* Custom Bronze styling for Share & Message buttons */
html body .btn-share,
html body [data-action*="share"],
html body [aria-label*="share" i],
html body [title*="share" i],
html body [aria-label*="compart" i],
html body [title*="compart" i],
html body .fatal-profile-social-action,
html body .fatal-share-dropdown a,
html body .fatal-card .fatal-action-icon:not(.whatsapp),
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp),
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp),
html body #sendMessageUser,
html body .btn-google {
  background: var(--color-magenta) !important;
  background-image: none !important;
  border: 1px solid var(--color-magenta) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-shadow-magenta) !important;
}

html body .btn-share:hover,
html body [data-action*="share"]:hover,
html body [aria-label*="share" i]:hover,
html body [title*="share" i]:hover,
html body [aria-label*="compart" i]:hover,
html body [title*="compart" i]:hover,
html body .fatal-profile-social-action:hover,
html body .fatal-share-dropdown a:hover,
html body .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body #containerWrapCreators .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-featured-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body .fatal-card-grid .fatal-card .fatal-action-icon:not(.whatsapp):hover,
html body #sendMessageUser:hover,
html body .btn-google:hover {
  transform: translateY(-2px) !important;
  background: var(--color-share-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-share-hover-bg) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-shadow-magenta-hover), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

/* Custom Green styling for Phone buttons / Ver Telefone */
html body a[href^="tel:"],
html body .btn-phone,
html body .btn-telefone,
html body .btn-show-phone,
html body .fatal-story-phone,
html body .fatal-profile-contact-action:not(.whatsapp) {
  background: var(--color-phone-bg) !important;
  background-image: none !important;
  border: 1px solid var(--color-phone-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-phone-shadow) !important;
}

html body a[href^="tel:"]:hover,
html body .btn-phone:hover,
html body .btn-telefone:hover,
html body .btn-show-phone:hover,
html body .fatal-story-phone:hover,
html body .fatal-profile-contact-action:not(.whatsapp):hover {
  transform: translateY(-2px) !important;
  background: var(--color-phone-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-phone-hover-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-phone-hover-shadow), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

/* Force white text and icons inside these branded buttons (Normal and Hover states) */
html body a[href^="tel:"] *,
html body .btn-phone *,
html body .btn-telefone *,
html body .btn-show-phone *,
html body .fatal-story-phone *,
html body .fatal-profile-contact-action *,
html body a[href*="wa.me"] *,
html body a[href*="whatsapp"] *,
html body .btn-whatsapp *,
html body .whatsapp *,
html body .fatal-action-icon.whatsapp *,
html body .btn-share *,
html body .share *,
html body [data-action*="share"] *,
html body .fatal-profile-social-action *,
html body .fatal-share-dropdown a *,
html body .fatal-card .fatal-action-icon:not(.whatsapp) *,
html body #sendMessageUser *,
html body .btn-google *,
html body .btn-facebook *,
html body .btn-instagram *,
html body .btn-twitter *,
html body .btn-telegram *,
html body a[href^="tel:"]:hover *,
html body .btn-phone:hover *,
html body .btn-telefone:hover *,
html body .btn-show-phone:hover *,
html body .fatal-story-phone:hover *,
html body .fatal-profile-contact-action:hover *,
html body a[href*="wa.me"]:hover *,
html body a[href*="whatsapp"]:hover *,
html body .btn-whatsapp:hover *,
html body .whatsapp:hover *,
html body .fatal-action-icon.whatsapp:hover *,
html body .btn-share:hover *,
html body .share:hover *,
html body [data-action*="share"]:hover *,
html body .fatal-profile-social-action:hover *,
html body .fatal-share-dropdown a:hover *,
html body .fatal-card .fatal-action-icon:not(.whatsapp):hover *,
html body #sendMessageUser:hover *,
html body .btn-google:hover *,
html body .btn-facebook:hover *,
html body .btn-instagram:hover *,
html body .btn-twitter:hover *,
html body .btn-telegram:hover * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ==================== Unified Bronze Button & Link Hover Styles ==================== */

/* --- Base: all bronze buttons use variables --- */
.fatal-button,
.fatal-action-main,
.toggleRegister,
.btn-register-menu,
.btn-main,
.btn-primary,
.btn-arrow,
.btn-arrow-sm,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram) {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta) !important;
}

/* --- Default inner elements: white --- */
.fatal-button *,
.fatal-action-main *,
.toggleRegister *,
.btn-register-menu *,
.btn-main *,
.btn-primary *,
.btn-arrow *,
.btn-arrow-sm *,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram) * {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}

/* --- Hover/active: bronze (#996827) + texto (#fdea9f) --- */
.fatal-button:hover,
.fatal-button:active,
.fatal-action-main:hover,
.fatal-action-main:active,
.toggleRegister:hover,
.toggleRegister:active,
.btn-register-menu:hover,
.btn-register-menu:active,
.btn-main:hover,
.btn-main:active,
.btn-primary:hover,
.btn-primary:active,
.btn-arrow:hover,
.btn-arrow:active,
.btn-arrow-sm:hover,
.btn-arrow-sm:active,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram):hover,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram):active {
  background: var(--color-magenta-light) !important;
  background-image: none !important;
  border-color: var(--color-magenta-light) !important;
  color: var(--color-text-hover) !important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}

/* --- Hover/active inner elements: texto hover --- */
.fatal-button:hover *,
.fatal-button:active *,
.fatal-action-main:hover *,
.fatal-action-main:active *,
.toggleRegister:hover *,
.toggleRegister:active *,
.btn-register-menu:hover *,
.btn-register-menu:active *,
.btn-main:hover *,
.btn-main:active *,
.btn-primary:hover *,
.btn-primary:active *,
.btn-arrow:hover *,
.btn-arrow:active *,
.btn-arrow-sm:hover *,
.btn-arrow-sm:active *,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram):hover *,
.btn:not(.btn-phone):not(.btn-telefone):not(.btn-show-phone):not(.btn-whatsapp):not(.btn-google):not(.btn-facebook):not(.btn-instagram):not(.btn-twitter):not(.btn-telegram):active * {
  color: var(--color-text-hover) !important;
  fill: var(--color-text-hover) !important;
}


/* --- Buscar Cidade button with bronze colors --- */
html body #btn-buscar,
html body button#btn-buscar {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta) !important;
}
html body button#btn-buscar i,
html body button#btn-buscar svg {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}
html body button#btn-buscar i,
html body button#btn-buscar svg {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}

html body #btn-buscar:hover,
html body #btn-buscar:active,
html body button#btn-buscar:hover,
html body button#btn-buscar:active {
  background: var(--color-magenta-light) !important;
  background-image: none !important;
  border-color: var(--color-magenta-light) !important;
  color: var(--color-text-hover) !important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta-hover) !important;
  transform: translateY(-1px) !important;
}
html body button#btn-buscar:hover i,
html body button#btn-buscar:hover svg,
html body button#btn-buscar:active i,
html body button#btn-buscar:active svg {
  color: var(--color-text-hover) !important;
  fill: var(--color-text-hover) !important;
}

/* --- Card action icons (non-whatsapp): bronze claro no hover --- */
.fatal-action-icon:not(.whatsapp):hover {
  background: var(--color-magenta-light) !important;
  color: var(--color-text-hover) !important;
  fill: var(--color-text-hover) !important;
  border-color: var(--color-white)!important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta-hover) !important;
}

/* ==================== End of Unified Bronze/Hover Styles ==================== */

/* ==================== HIGH SPECIFICITY CUSTOM OVERRIDES (Ver Telefone & Ver Perfil) ==================== */

/* Custom Green background for "Ver Telefone" button */
html body a[href^="tel:"].fatal-button,
html body a[href^="tel:"].fatal-action-main,
html body a.fatal-button[href^="tel:"],
html body a.fatal-action-main[href^="tel:"],
html body .fatal-button[href^="tel:"],
html body .fatal-action-main[href^="tel:"],
html body a[href^="tel:"].fatal-button.fatal-action-main,
html body .btn-phone,
html body .btn-telefone,
html body .btn-show-phone,
html body .fatal-story-phone,
html body .fatal-profile-contact-action:not(.whatsapp) {
  background: var(--color-phone-bg) !important;
  background-image: none !important;
  border-color: var(--color-phone-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-phone-shadow) !important;
}

html body a[href^="tel:"].fatal-button:hover,
html body a[href^="tel:"].fatal-action-main:hover,
html body a.fatal-button[href^="tel:"]:hover,
html body a.fatal-action-main[href^="tel:"]:hover,
html body .fatal-button[href^="tel:"]:hover,
html body .fatal-action-main[href^="tel:"]:hover,
html body a[href^="tel:"].fatal-button.fatal-action-main:hover,
html body .btn-phone:hover,
html body .btn-telefone:hover,
html body .btn-show-phone:hover,
html body .fatal-story-phone:hover,
html body .fatal-profile-contact-action:not(.whatsapp):hover {
  transform: translateY(-2px) !important;
  background: var(--color-phone-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-phone-hover-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-phone-hover-shadow), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

/* Custom Dark Gray background for "Ver Perfil" button */
html body .btn-view-profile.fatal-button.fatal-action-main,
html body a.btn-view-profile.fatal-button,
html body a.btn-view-profile.btn,
html body button.btn-view-profile.btn,
html body .btn-view-profile {
  background: var(--color-profile-bg) !important;
  background-image: none !important;
  border: 1px solid var(--color-profile-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 10px 26px var(--color-profile-shadow) !important;
}

html body .btn-view-profile.fatal-button.fatal-action-main:hover,
html body a.btn-view-profile.fatal-button:hover,
html body a.btn-view-profile.btn:hover,
html body button.btn-view-profile.btn:hover,
html body .btn-view-profile:hover,
html body .btn-view-profile:active,
html body .btn-view-profile.fatal-button.fatal-action-main:active {
  transform: translateY(-2px) !important;
  background: var(--color-profile-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-profile-hover-border) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  box-shadow: 0 16px 34px var(--color-profile-hover-shadow), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

/* Force all button/action icons to remain white */
html body i,
html body svg,
html body .fa,
html body .fas,
html body .far,
html body .fab,
html body button i,
html body .btn i,
html body a i,
html body button svg,
html body .btn svg,
html body a svg,
html body .fatal-action-icon i,
html body .fatal-action-icon svg,
html body button:hover i,
html body .btn:hover i,
html body a:hover i,
html body button:hover svg,
html body .btn:hover svg,
html body a:hover svg,
html body button:active i,
html body .btn:active i,
html body a:active i,
html body button:active svg,
html body .btn:active svg,
html body a:active svg {
  color: var(--color-icon-white) !important;
  fill: var(--color-icon-white) !important;
}


/* ==================== LOGIN FORM MODAL & TRIGGERS OVERRIDES ==================== */

/* Triggers of the loginFormModal (e.g. Entrar) - Only text color change on hover */
html body a[data-target="#loginFormModal"]:hover,
html body a[data-toggle="modal"][data-target="#loginFormModal"]:hover,
html body a.login-btn:hover,
html body a.toggleRegister:hover {
  color: var(--color-magenta-light) !important;
}

/* Hyperlinks and badge-buttons inside the loginFormModal - Only text color change on hover */
html body #loginFormModal a:hover,
html body #loginFormModal .badge:hover {
  color: var(--color-magenta-light) !important;
}

/* Submit button inside loginFormModal - Regular button styling */
html body #loginFormModal button[type="submit"],
html body #loginFormModal .btn-primary,
html body #btnLoginRegister {
  background: var(--color-magenta) !important;
  background-color: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
}

html body #loginFormModal button[type="submit"]:hover,
html body #loginFormModal .btn-primary:hover,
html body #btnLoginRegister:hover {
  background: var(--color-magenta-mid) !important;
  background-color: var(--color-magenta-mid) !important;
  color: var(--color-text-hover) !important;
  border-color: var(--color-magenta-mid) !important;
}


/* ==================== PREMIUM TEXT GRADIENT FOR FATAL-TITLE ==================== */

/* Entire Title: subtle gradient from white to soft champagne */
html body .fatal-title,
html body .fatal-page .fatal-title {
  background: linear-gradient(135deg, #FFFFFF 20%, #F5E5DC 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)) !important;
}

/* Last/highlighted element in the title: stunning white to gold/bronze premium gradient */
html body .fatal-gradient-text,
html body .fatal-page .fatal-gradient-text {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFE5D9 35%, #E29578 70%, #C57B57 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)) !important;
}


/* ==================== PREMIUM GLASS STATS OVERRIDES ==================== */

/* Frosted glass containers: dark background with a subtle bronze/gold border */
html body .fatal-glass,
html body .fatal-stat,
html body .fatal-page .fatal-stat {
  background: rgba(26, 12, 45, 0.55) !important;
  border: 1px solid rgba(226, 149, 120, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 45px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(18px) !important;
}

/* Numbers: premium gradient similar to the main title */
html body .fatal-stat strong,
html body .fatal-page .fatal-stat strong {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE5D9 35%, #E29578 75%, #C57B57 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Labels: clean premium white text */
html body .fatal-stat span,
html body .fatal-page .fatal-stat span {
  color: rgba(248, 240, 240, 0.72) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}


/* ==================== FATAL-EYEBROW & FATAL-SECTION-TITLE OVERRIDES ==================== */

/* eyebrow: highlighted pure white, uppercase, bold spacing */
html body .fatal-eyebrow,
html body .fatal-page .fatal-eyebrow,
html body .fatal-showcase .fatal-eyebrow {
  color: #FFFFFF !important;
  font-weight: 950 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* section-title: pure white */
html body .fatal-section-title,
html body .fatal-page .fatal-section-title,
html body .fatal-showcase .fatal-section-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}


/* ==================== NON-PREMIUM FATAL-PRICE-BUTTON CUSTOM STYLING ==================== */

/* Default non-premium fatal-price-button: deep purple background, lighter purple border */
html body .fatal-price-button {
  background: #2a0137 !important;
  background-image: none !important;
  border: 1px solid #5b0d73 !important;
  box-shadow: 0 12px 28px rgba(26, 12, 45, 0.45) !important;
}

/* Maintain the premium card fatal-price-button untouched with its gold/bronze theme */
html body .fatal-card-premium .fatal-price-button {
  border-color: rgba(212, 175, 152, 0.68) !important;
  background: radial-gradient(circle at 90% 0, rgba(212, 175, 152, 0.15), transparent 48%), linear-gradient(180deg, rgb(56 36 18 / 96%), rgb(71 48 11 / 96%)) !important;
  box-shadow: 0 16px 38px rgba(160, 114, 90, 0.28), inset 0 0 0 1px rgba(232, 197, 175, 0.12) !important;
}

html body .fatal-price-line {
  align-items: stretch !important;
  gap: 8px !important;
}

html body .fatal-rate-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .fatal-price-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  border-radius: 5px !important;
  padding: 9px 10px !important;
}

html body .fatal-price-prefix {
  font-size: 8px !important;
  line-height: 1 !important;
  opacity: .72 !important;
}

html body .fatal-price-button strong.fatal-price-consult {
  font-size: .84rem !important;
  line-height: 2.8 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

html body .fatal-price-side {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(22px, 1fr) !important;
  gap: 4px !important;
  align-self: stretch !important;
  width: 84px !important;
  min-width: 84px !important;
}

html body .fatal-price-line .fatal-mini-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 5px !important;
  padding: 5px 4px !important;
  font-size: 9.5px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .fatal-price-line .fatal-mini-pill i {
  font-size: 12px !important;
  line-height: 1 !important;
}


/* --- Explicit style for Buscar Cidade link --- */
html body a.fatal-action-main.fatal-button {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: 0 14px 36px var(--color-shadow-magenta) !important;
}


/* --- Hover style for Buscar cidade link --- */
html body a.fatal-action-main.fatal-button[href="#city-search"]:hover {
  background: var(--color-magenta-light) !important;
  color: var(--color-white) !important;
}




/* ==================== Custom Social Media Colors ==================== */

/* Facebook */
html body .fatal-profile-social-action.facebook {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  box-shadow: 0 10px 26px rgba(24, 119, 242, 0.3) !important;
}
html body .fatal-profile-social-action.facebook:hover {
  background: #3b8eff !important;
  border-color: #3b8eff !important;
  box-shadow: 0 16px 34px rgba(24, 119, 242, 0.4) !important;
}

/* Twitter / X */
html body .fatal-profile-social-action.twitter,
html body .fatal-profile-social-action.x {
  background: #000000 !important;
  border-color: #333333 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
}
html body .fatal-profile-social-action.twitter:hover,
html body .fatal-profile-social-action.x:hover {
  background: #222222 !important;
  border-color: #444444 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
}

/* Instagram */
html body .fatal-profile-social-action.instagram {
  background: #E1306C !important;
  border-color: #E1306C !important;
  box-shadow: 0 10px 26px rgba(225, 48, 108, 0.3) !important;
}
html body .fatal-profile-social-action.instagram:hover {
  background: #e64b7f !important;
  border-color: #e64b7f !important;
  box-shadow: 0 16px 34px rgba(225, 48, 108, 0.4) !important;
}

/* Youtube */
html body .fatal-profile-social-action.youtube {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
  box-shadow: 0 10px 26px rgba(255, 0, 0, 0.3) !important;
}
html body .fatal-profile-social-action.youtube:hover {
  background: #ff3333 !important;
  border-color: #ff3333 !important;
  box-shadow: 0 16px 34px rgba(255, 0, 0, 0.4) !important;
}

/* Telegram */
html body .fatal-profile-social-action.telegram {
  background: #229ED9 !important;
  border-color: #229ED9 !important;
  box-shadow: 0 10px 26px rgba(34, 158, 217, 0.3) !important;
}
html body .fatal-profile-social-action.telegram:hover {
  background: #3cb1eb !important;
  border-color: #3cb1eb !important;
  box-shadow: 0 16px 34px rgba(34, 158, 217, 0.4) !important;
}

/* TikTok */
html body .fatal-profile-social-action.tiktok {
  background: #010101 !important;
  border-color: #25f4ee !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
}
html body .fatal-profile-social-action.tiktok:hover {
  background: #1f1f1f !important;
  border-color: #ff0050 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
}

/* WhatsApp */
html body .fatal-profile-social-action.whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.3) !important;
}
html body .fatal-profile-social-action.whatsapp:hover {
  background: #30e374 !important;
  border-color: #30e374 !important;
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.4) !important;
}

/* Twitch */
html body .fatal-profile-social-action.twitch {
  background: #9146FF !important;
  border-color: #9146FF !important;
  box-shadow: 0 10px 26px rgba(145, 70, 255, 0.3) !important;
}
html body .fatal-profile-social-action.twitch:hover {
  background: #a366ff !important;
  border-color: #a366ff !important;
  box-shadow: 0 16px 34px rgba(145, 70, 255, 0.4) !important;
}

/* Discord */
html body .fatal-profile-social-action.discord {
  background: #5865F2 !important;
  border-color: #5865F2 !important;
  box-shadow: 0 10px 26px rgba(88, 101, 242, 0.3) !important;
}
html body .fatal-profile-social-action.discord:hover {
  background: #727ef4 !important;
  border-color: #727ef4 !important;
  box-shadow: 0 16px 34px rgba(88, 101, 242, 0.4) !important;
}

/* Reddit */
html body .fatal-profile-social-action.reddit {
  background: #FF4500 !important;
  border-color: #FF4500 !important;
  box-shadow: 0 10px 26px rgba(255, 69, 0, 0.3) !important;
}
html body .fatal-profile-social-action.reddit:hover {
  background: #ff5d20 !important;
  border-color: #ff5d20 !important;
  box-shadow: 0 16px 34px rgba(255, 69, 0, 0.4) !important;
}

/* Pinterest */
html body .fatal-profile-social-action.pinterest {
  background: #BD081C !important;
  border-color: #BD081C !important;
  box-shadow: 0 10px 26px rgba(189, 8, 28, 0.3) !important;
}
html body .fatal-profile-social-action.pinterest:hover {
  background: #d61a2e !important;
  border-color: #d61a2e !important;
  box-shadow: 0 16px 34px rgba(189, 8, 28, 0.4) !important;
}

/* Snapchat */
html body .fatal-profile-social-action.snapchat {
  background: #FFFC00 !important;
  border-color: #FFFC00 !important;
  box-shadow: 0 10px 26px rgba(255, 252, 0, 0.3) !important;
}
html body .fatal-profile-social-action.snapchat:hover {
  background: #fffd40 !important;
  border-color: #fffd40 !important;
  box-shadow: 0 16px 34px rgba(255, 252, 0, 0.4) !important;
}
html body .fatal-profile-social-action.snapchat *,
html body .fatal-profile-social-action.snapchat:hover * {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Spotify */
html body .fatal-profile-social-action.spotify {
  background: #1DB954 !important;
  border-color: #1DB954 !important;
  box-shadow: 0 10px 26px rgba(29, 185, 84, 0.3) !important;
}
html body .fatal-profile-social-action.spotify:hover {
  background: #24d162 !important;
  border-color: #24d162 !important;
  box-shadow: 0 16px 34px rgba(29, 185, 84, 0.4) !important;
}

/* VK */
html body .fatal-profile-social-action.vk {
  background: #4C75A3 !important;
  border-color: #4C75A3 !important;
  box-shadow: 0 10px 26px rgba(76, 117, 163, 0.3) !important;
}
html body .fatal-profile-social-action.vk:hover {
  background: #5d88b7 !important;
  border-color: #5d88b7 !important;
  box-shadow: 0 16px 34px rgba(76, 117, 163, 0.4) !important;
}

/* Threads */
html body .fatal-profile-social-action.threads {
  background: #000000 !important;
  border-color: #333333 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
}
html body .fatal-profile-social-action.threads:hover {
  background: #222222 !important;
  border-color: #444444 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
}

/* Kick */
html body .fatal-profile-social-action.kick {
  background: #53FC18 !important;
  border-color: #53FC18 !important;
  box-shadow: 0 10px 26px rgba(83, 252, 24, 0.3) !important;
}
html body .fatal-profile-social-action.kick:hover {
  background: #6eff3d !important;
  border-color: #6eff3d !important;
  box-shadow: 0 16px 34px rgba(83, 252, 24, 0.4) !important;
}
html body .fatal-profile-social-action.kick *,
html body .fatal-profile-social-action.kick:hover * {
  color: #000000 !important;
  fill: #000000 !important;
}

/* OnlyFans */
html body .fatal-profile-social-action.onlyfans {
  background: #00AFF0 !important;
  border-color: #00AFF0 !important;
  box-shadow: 0 10px 26px rgba(0, 175, 240, 0.3) !important;
}
html body .fatal-profile-social-action.onlyfans:hover {
  background: #26beff !important;
  border-color: #26beff !important;
  box-shadow: 0 16px 34px rgba(0, 175, 240, 0.4) !important;
}

/* Privacy */
html body .fatal-profile-social-action.privacy {
  background: #E0004C !important;
  border-color: #E0004C !important;
  box-shadow: 0 10px 26px rgba(224, 0, 76, 0.3) !important;
}
html body .fatal-profile-social-action.privacy:hover {
  background: #ff2671 !important;
  border-color: #ff2671 !important;
  box-shadow: 0 16px 34px rgba(224, 0, 76, 0.4) !important;
}

/* Patreon */
html body .fatal-profile-social-action.patreon {
  background: #F96854 !important;
  border-color: #F96854 !important;
  box-shadow: 0 10px 26px rgba(249, 104, 84, 0.3) !important;
}
html body .fatal-profile-social-action.patreon:hover {
  background: #ff7f6c !important;
  border-color: #ff7f6c !important;
  box-shadow: 0 16px 34px rgba(249, 104, 84, 0.4) !important;
}

/* Generic Website / Globe */
html body .fatal-profile-social-action.website {
  background: #2D3748 !important;
  border-color: #2D3748 !important;
  box-shadow: 0 10px 26px rgba(45, 55, 72, 0.3) !important;
}
html body .fatal-profile-social-action.website:hover {
  background: #3a4659 !important;
  border-color: #3a4659 !important;
  box-shadow: 0 16px 34px rgba(45, 55, 72, 0.4) !important;
}

/* Send Message Button (yellow/gold base and hover) */
html body #sendMessageUser,
html body button[data-url*="/messages/"],
html body .btn-google[data-url*="/messages/"] {
  background: var(--color-msg-bg) !important;
  background-image: none !important;
  border: 1px solid var(--color-msg-bg) !important;
  color: #151614 !important;
  fill: #151614 !important;
  box-shadow: 0 10px 26px rgba(253, 234, 159, 0.26) !important;
}

html body #sendMessageUser:hover,
html body button[data-url*="/messages/"]:hover,
html body .btn-google[data-url*="/messages/"]:hover {
  transform: translateY(-2px) !important;
  background: var(--color-msg-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-msg-hover-bg) !important;
  color: #151614 !important;
  fill: #151614 !important;
  box-shadow: 0 16px 34px rgba(253, 234, 159, 0.42) !important;
}

/* Force dark icon/text color for the Send Message button */
html body #sendMessageUser *,
html body #sendMessageUser:hover *,
html body button[data-url*="/messages/"] *,
html body button[data-url*="/messages/"]:hover *,
html body .btn-google[data-url*="/messages/"] *,
html body .btn-google[data-url*="/messages/"]:hover * {
  color: #151614 !important;
  fill: #151614 !important;
}

/* Verified Checkmark Badge: Always Verified Blue */
html body i.bi-patch-check-fill,
html body svg.bi-patch-check-fill,
html body .bi-patch-check-fill,
html body .bi-patch-check-fill::before,
html body .bi-patch-check-fill::after,
html body i.bi-patch-check-fill *,
html body svg.bi-patch-check-fill * {
  color: #0095f6 !important;
  fill: #0095f6 !important;
}

/* User Profile Dropdown Toggle & Menu Hover Styles (Lilac/Purple Transparent instead of Orange/Bronze) */
html body #nav-inner-success_dropdown_1:hover,
html body #nav-inner-success_dropdown_1:focus,
html body #nav-inner-success_dropdown_1:active,
html body .show > #nav-inner-success_dropdown_1 {
  background-color: rgba(107, 70, 193, 0.15) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

html body #nav-inner-success_dropdown_1 i {
  color: #FFFFFF !important;
}

html body .dd-menu-user {
  border: 1px solid rgba(107, 70, 193, 0.2) !important;
}

html body .dd-menu-user .dropdown-item:hover,
html body .dd-menu-user .dropdown-item:focus,
html body .dd-menu-user .dropdown-item.active,
html body .dd-menu-user .dropdown-item:active {
  background-color: rgba(107, 70, 193, 0.15) !important;
  color: #FFFFFF !important;
}

/* Premium Gray Pill Buttons for Report and Restrict Actions */
html body button[data-target="#reportCreator"],
html body button#restrictUser {
  background: rgba(248, 240, 240, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(248, 240, 240, 0.12) !important;
  color: rgba(248, 240, 240, 0.75) !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  transition: all 0.25s ease !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 15px !important;
  margin-bottom: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html body button[data-target="#reportCreator"]:hover,
html body button#restrictUser:hover {
  transform: translateY(-1px) !important;
  background: rgba(248, 240, 240, 0.12) !important;
  border-color: rgba(248, 240, 240, 0.25) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

html body button[data-target="#reportCreator"] i,
html body button#restrictUser i {
  color: inherit !important;
  font-size: 12px !important;
}

html body button[data-target="#reportCreator"] small,
html body button#restrictUser small {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

/* Ensure the search-pill-header is always a flex container with items centered */
html body .search-pill-header {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Ensure the input field takes up all available space and does not overflow */
html body .search-pill-header .search-input-header {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent the clear button from being squeezed, keep it inline-flex only when visible */
html body .search-pill-header .btn-clear-city:not(.d-none),
html body .search-pill-header #btn-clear-header:not(.d-none) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure the red close icon is centered and retains its color and size */
html body .search-pill-header .btn-clear-city:not(.d-none) i,
html body .search-pill-header #btn-clear-header:not(.d-none) i {
  color: #dc3545 !important; /* Bootstrap text-danger red */
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Prevent the search button from being squeezed, keep it inline-flex only when visible */
html body .search-pill-header .btn-header-search:not(.d-none),
html body .search-pill-header #btn-header-search:not(.d-none) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ==================== CATWRAPPER HOVER COLOR FIXED TO WHITE ==================== */
html body #catWrapper .category-btn:hover,
html body #catWrapper .category-btn:hover *,
html body #dropdownItems .category-btn:hover,
html body #dropdownItems .category-btn:hover *,
html body .category-btn.active:hover,
html body .category-btn.active:hover * {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}

/* ==================== NO BORDERS OR BACKGROUNDS ON CAROUSEL CONTROLS ==================== */
html body .carousel-control-prev,
html body .carousel-control-next,
html body .carousel-control-prev:hover,
html body .carousel-control-next:hover,
html body .carousel-control-prev:focus,
html body .carousel-control-next:focus,
html body .fatal-card-premium .carousel-control-prev,
html body .fatal-card-premium .carousel-control-next,
html body .fatal-card-premium .carousel-control-prev:hover,
html body .fatal-card-premium .carousel-control-next:hover,
html body .fatal-card-premium .carousel-control-prev:focus,
html body .fatal-card-premium .carousel-control-next:focus {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* ==================== FATAL BADGE ICONS & ANIMATED STATUS DOTS ==================== */
/* .fatal-badge-row is already positioned absolutely in the card media — no override needed */
.fatal-badge-left {
  display: flex;
  align-items: center;
}

.fatal-badge-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.fatal-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(49, 27, 75, 0.88) !important;
  border: 1px solid var(--fatal-border-soft) !important;
  color: var(--fatal-accent) !important;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.fatal-badge-icon:hover {
  transform: scale(1.1) translateY(-1px);
  background: rgba(49, 27, 75, 1) !important;
  border-color: rgba(212, 175, 152, 0.44) !important;
}

/* Premium VIP badge style override */
.fatal-badge-icon.vip {
  color: #ffd9a8 !important;
  border-color: rgba(212, 175, 152, 0.5) !important;
  background: linear-gradient(135deg, rgba(86, 56, 18, 0.95), rgba(49, 27, 75, 0.9)) !important;
  box-shadow: 0 0 10px rgba(212, 175, 152, 0.25) !important;
}

/* Verified Profile Video badge styles */
.fatal-badge-icon.profile-video.approved {
  color: #69fff7 !important;
  border-color: rgba(105, 255, 247, 0.3) !important;
}

.fatal-badge-icon.profile-video.muted {
  color: rgba(248, 240, 240, 0.4) !important;
  border-color: rgba(248, 240, 240, 0.12) !important;
}

/* Pulsing Status Dot Animations */
@keyframes fatal-pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

@keyframes fatal-pulse-gray {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(108, 117, 125, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); }
}

.fatal-status-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.fatal-status-dot.online {
  background-color: #28a745;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.6);
  animation: fatal-pulse-green 2s infinite;
}

.fatal-status-dot.offline {
  background-color: #6c757d;
  animation: fatal-pulse-gray 2s infinite;
}


/* ==================== FATAL MANUAL LOAD BUTTON LAYOUT FIX ==================== */
html body .fatal-manual-load-wrap {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

html body .fatal-manual-load-button {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==================== SELECT2 WIDGET FIXES (CLEAR & REMOVE BUTTONS) ==================== */
.select2-container--default .select2-selection--single .select2-selection__clear {
  color: #fff !important;
  background: var(--color-magenta) !important;
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  min-width: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 0 !important;
  position: absolute !important;
  right: 32px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
  transition: background 0.15s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  background: var(--color-magenta-light) !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  min-width: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 0 !important;
  margin-right: 6px !important;
  margin-left: 0 !important;
  float: none !important;
  position: static !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: var(--color-magenta-light) !important;
  color: #fff !important;
}


/* ==================== ULTIMATE VER TELEFONE BUTTON OVERRIDES ==================== */
/* 1. Backgrounds, borders, shadows - applied ONLY to the button container */
html body a[href^="tel:"].fatal-action-main,
html body .fatal-card a[href^="tel:"].fatal-action-main,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main,
html body .fatal-profile-contact-action:not(.whatsapp),
html body .btn-phone,
html body .btn-telefone,
html body .btn-show-phone,
html body .fatal-story-phone {
  background: var(--color-phone-bg) !important;
  background-image: none !important;
  border-color: var(--color-phone-border) !important;
  box-shadow: 0 10px 26px var(--color-phone-shadow) !important;
}

/* 2. Text and icon colors - applied to both the container and all children (like <i> and <span>) */
html body a[href^="tel:"].fatal-action-main,
html body a[href^="tel:"].fatal-action-main *,
html body .fatal-card a[href^="tel:"].fatal-action-main,
html body .fatal-card a[href^="tel:"].fatal-action-main *,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main *,
html body .fatal-profile-contact-action:not(.whatsapp),
html body .fatal-profile-contact-action:not(.whatsapp) *,
html body .btn-phone,
html body .btn-phone *,
html body .btn-telefone,
html body .btn-telefone *,
html body .btn-show-phone,
html body .btn-show-phone *,
html body .fatal-story-phone,
html body .fatal-story-phone * {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  text-shadow: none !important;
}

/* 3. Hover state background, borders, shadows - applied ONLY to the button container */
html body a[href^="tel:"].fatal-action-main:hover,
html body .fatal-card a[href^="tel:"].fatal-action-main:hover,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main:hover,
html body .fatal-profile-contact-action:not(.whatsapp):hover,
html body .btn-phone:hover,
html body .btn-telefone:hover,
html body .btn-show-phone:hover,
html body .fatal-story-phone:hover {
  background: var(--color-phone-hover-bg) !important;
  background-image: none !important;
  border-color: var(--color-phone-hover-border) !important;
  box-shadow: 0 16px 34px var(--color-phone-hover-shadow), 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
  transform: translateY(-2px) !important;
}

/* 4. Hover state text and icon colors - applied to both the container and all children */
html body a[href^="tel:"].fatal-action-main:hover,
html body a[href^="tel:"].fatal-action-main:hover *,
html body .fatal-card a[href^="tel:"].fatal-action-main:hover,
html body .fatal-card a[href^="tel:"].fatal-action-main:hover *,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main:hover,
html body #containerWrapCreators .fatal-card a[href^="tel:"].fatal-action-main:hover *,
html body .fatal-profile-contact-action:not(.whatsapp):hover,
html body .fatal-profile-contact-action:not(.whatsapp):hover *,
html body .btn-phone:hover,
html body .btn-phone:hover *,
html body .btn-telefone:hover,
html body .btn-telefone:hover *,
html body .btn-show-phone:hover,
html body .btn-show-phone:hover *,
html body .fatal-story-phone:hover,
html body .fatal-story-phone:hover * {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}


/* ==================== VER TELEFONE POPUP STYLING ==================== */
/* 1. Modal title text "Contato de" to white */
#modalPhoneV3 .modal-title,
#modalProfilePhone .modal-title {
  color: var(--color-white) !important;
}

/* 2. Modal title name (if not inline styled) to gold */
#modalPhoneV3 .modal-title #mName,
#modalProfilePhone .modal-title #profilePhoneName {
  color: #f8d7a4 !important;
}

/* 3. Telephone number to glowing premium gold */
#modalPhoneV3 #mPhone,
#modalProfilePhone #profilePhoneNumber {
  color: #f8d7a4 !important;
  text-shadow: 0 0 10px rgba(248, 215, 164, 0.44) !important;
}


/* ==================== PREMIUM DARK PURPLE GRID UPDATES & CARD UPDATES STYLING ==================== */
/* 1. The Post Card Container */
html body .card-updates {
  background: linear-gradient(135deg, #180a2d 0%, #0c0416 100%) !important; /* Gradiente roxo escuro premium */
  border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Borda mais clara e nitida */
  border-radius: 16px !important; /* Bordas arredondadas e modernas */
  box-shadow: 0 12px 36px rgba(10, 5, 18, 0.6) !important; /* Sombra profunda premium */
  margin-bottom: 24px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Subtle elevation hover effect */
html body .card-updates:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 48px rgba(10, 5, 18, 0.8) !important;
  border-color: rgba(255, 47, 104, 0.15) !important; /* Brilho sutil magenta no hover */
}

/* 2. The Header Area */
html body .card-updates .card-body {
  background: transparent !important;
  padding: 20px !important;
}

/* 3. Link tags inside the post cards (highly targeted to avoid dropdown/modal conflicts) */
html body .card-updates .media-body h5 a {
  color: var(--color-white) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  background: transparent !important;
  transition: color 0.15s ease !important;
}

html body .card-updates .media-body h5 a:hover {
  color: var(--color-magenta-light) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Avatar link reset */
html body .card-updates .media span.rounded-circle a {
  background: transparent !important;
  border: none !important;
  display: block !important;
}

/* Three dots dropdown toggle button */
html body .card-updates #dropdown_options {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 18px !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

html body .card-updates #dropdown_options:hover {
  color: var(--color-magenta-light) !important;
}

/* 4. Dropdown menu & items inside card updates */
html body .card-updates .dropdown-menu {
  background: #170b28 !important; /* Roxo escuro para o dropdown */
  border: 1px solid rgba(255, 47, 104, 0.2) !important; /* Bordas magenta sutis */
  box-shadow: 0 10px 30px rgba(10, 5, 18, 0.7) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  z-index: 1000 !important;
}

html body .card-updates .dropdown-item {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important; /* Texto claro */
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  text-align: left !important;
  width: 100% !important;
}

html body .card-updates .dropdown-item i,
html body .card-updates .dropdown-item svg {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-right: 8px !important;
  font-size: 16px !important;
}

/* Hover state for dropdown items */
html body .card-updates .dropdown-item:hover {
  background: rgba(255, 47, 104, 0.1) !important; /* Fundo magenta claro */
  color: var(--color-magenta-light) !important; /* Texto aceso */
}

html body .card-updates .dropdown-item:hover i,
html body .card-updates .dropdown-item:hover svg {
  color: var(--color-magenta-light) !important;
}

/* 5. Post Text Content & Description Links (hashtags/mentions) */
html body .card-updates p.truncated,
html body .card-updates p.update-text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  padding: 0 20px 15px 20px !important;
}

html body .card-updates p.truncated a,
html body .card-updates p.update-text a {
  color: var(--color-magenta-light) !important; /* Destaque em rosa claro */
  background: transparent !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: opacity 0.15s ease !important;
}

html body .card-updates p.truncated a:hover,
html body .card-updates p.update-text a:hover {
  opacity: 0.8 !important;
  background: transparent !important;
}

/* 6. Post Card Footer */
html body .card-updates .card-footer {
  background: #0d0617 !important; /* Fundo ligeiramente mais escuro que o corpo do card */
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important; /* Linha divisoria sutil */
  padding: 16px 20px !important;
  border-radius: 0px !important; /* Rodape com cantos retos conforme solicitado */
}

/* Action buttons in footer (like, comment, share, bookmark) */
html body .card-updates .card-footer h4 {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

html body .card-updates .card-footer .pulse-btn {
  background: rgba(255, 255, 255, 0.03) !important; /* Fundo circular bem discreto */
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important; /* Override transparent fill color from h4 */
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  cursor: pointer !important;
  background-image: none !important;
}

html body .card-updates .card-footer .pulse-btn *,
html body .card-updates .card-footer .pulse-btn i,
html body .card-updates .card-footer .pulse-btn svg {
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  font-size: 18px !important; /* Forcar tamanho do icone para evitar colapso de heranca */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .card-updates .card-footer .pulse-btn:hover {
  background: rgba(255, 47, 104, 0.1) !important; /* Fundo magenta claro no hover */
  color: var(--color-magenta-light) !important; /* Cor do icone acende no hover */
  -webkit-text-fill-color: var(--color-magenta-light) !important;
  border-color: rgba(255, 47, 104, 0.2) !important;
  transform: scale(1.05) !important;
}

html body .card-updates .card-footer .pulse-btn:hover *,
html body .card-updates .card-footer .pulse-btn:hover i,
html body .card-updates .card-footer .pulse-btn:hover svg {
  color: var(--color-magenta-light) !important;
  -webkit-text-fill-color: var(--color-magenta-light) !important;
  font-size: 18px !important;
}

/* Active like/bookmark states */
html body .card-updates .card-footer .pulse-btn.active,
html body .card-updates .card-footer .pulse-btn.text-primary {
  background: rgba(255, 47, 104, 0.15) !important;
  color: var(--color-magenta-light) !important;
  -webkit-text-fill-color: var(--color-magenta-light) !important;
  border-color: rgba(255, 47, 104, 0.3) !important;
}

html body .card-updates .card-footer .pulse-btn.active *,
html body .card-updates .card-footer .pulse-btn.text-primary * {
  color: var(--color-magenta-light) !important;
  -webkit-text-fill-color: var(--color-magenta-light) !important;
}

/* Disabled comment button/span */
html body .card-updates .card-footer span.disabled {
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.02) !important;
}

html body .card-updates .card-footer span.disabled * {
  color: rgba(255, 255, 255, 0.3) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3) !important;
}

/* Text statistics counters (like count, comment count) */
html body .card-updates .card-footer .containerLikeComment {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

html body .card-updates .card-footer .containerLikeComment .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

html body .card-updates .card-footer .containerLikeComment a.toggleComments:hover {
  color: var(--color-magenta-light) !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* 7. Share Modal in updates card */
html body .card-updates .modal-content {
  background: #11081d !important;
  border: 1px solid rgba(255, 47, 104, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

html body .card-updates .modal-header {
  border-bottom: none !important;
  padding: 15px 20px 5px 20px !important;
}

html body .card-updates .modal-header .close {
  color: rgba(255, 255, 255, 0.6) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 20px !important;
  transition: color 0.15s ease !important;
  background: transparent !important;
  border: none !important;
}

html body .card-updates .modal-header .close:hover {
  color: var(--color-magenta-light) !important;
}

html body .card-updates .modal-body {
  padding: 20px !important;
}

html body .card-updates .social-share {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 15px 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

html body .card-updates .social-share:hover {
  background: rgba(255, 47, 104, 0.08) !important;
  border-color: rgba(255, 47, 104, 0.2) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) !important;
}

html body .card-updates .social-share i {
  font-size: 24px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Specific colors for social icons */
html body .card-updates .social-share .facebook-btn {
  color: #1877F2 !important;
}
html body .card-updates .social-share .bi-twitter-x {
  color: #FFFFFF !important;
}
html body .card-updates .social-share .btn-whatsapp {
  color: #25D366 !important;
}
html body .card-updates .social-share .fa-sms {
  color: #0084FF !important;
}

/* 8. Report Modal inside card updates */
html body .card-updates .modalReport .modal-content {
  background: #11081d !important;
  border: 1px solid rgba(255, 47, 104, 0.25) !important;
  border-radius: 16px !important;
}

html body .card-updates .modalReport .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html body .card-updates .modalReport .modal-title {
  color: var(--color-white) !important;
}

html body .card-updates .modalReport .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html body .card-updates .modalReport .btn.border {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
}

html body .card-updates .modalReport .btn.border:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-white) !important;
}

html body .card-updates .modalReport .sendReport {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  transition: all 0.15s ease !important;
}

html body .card-updates .modalReport .sendReport:hover {
  background: var(--color-magenta-light) !important;
  border-color: var(--color-magenta-light) !important;
}

/* 9. Locked Post / paywall area styling */
html body .card-updates .content-locked {
  background: rgba(18, 9, 29, 0.85) !important;
  border: 1px dashed rgba(255, 47, 104, 0.25) !important;
  border-radius: 12px !important;
  margin: 15px !important;
  padding: 30px 20px !important;
}

html body .card-updates .content-locked .icon-lock {
  font-size: 32px !important;
  color: var(--color-magenta-light) !important;
}

/* Primary call to action unlock button */
html body .card-updates .content-locked .btn-primary {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  padding: 12px 24px !important;
  transition: all 0.2s ease !important;
  color: var(--color-white) !important;
}

html body .card-updates .content-locked .btn-primary:hover {
  background: var(--color-magenta-light) !important;
  border-color: var(--color-magenta-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--fatal-btn-hover-shadow-value) !important;
}

/* 10. Load More Button for Updates Paginator */
html body #updatesPaginator .loadPaginator,
html body .grid-updates .loadPaginator {
  background: rgba(255, 47, 104, 0.1) !important;
  border: 1px solid rgba(255, 47, 104, 0.3) !important;
  color: var(--color-magenta-light) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  transition: all 0.2s ease !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

html body #updatesPaginator .loadPaginator:hover,
html body .grid-updates .loadPaginator:hover {
  background: var(--color-magenta) !important;
  border-color: var(--color-magenta) !important;
  color: var(--color-white) !important;
  box-shadow: var(--fatal-btn-hover-shadow-value) !important;
  transform: translateY(-1px) !important;
}


/* ==================== POPPER DROPDOWN OVERRIDES FOR POST OPTIONS ==================== */
/* Global Premium Dark Dropdowns (forces visibility and white text across all pages) */
/* Isolated Post Options Dropdown Overrides (only targets the posts menu, leaving header and other dropdowns untouched) */
html body .dropdown-menu[aria-labelledby="dropdown_options"],
html body div.dropdown-menu[aria-labelledby="dropdown_options"] {
  background: #170b28 !important;
  background-color: #170b28 !important;
  border: 1px solid rgba(255, 47, 104, 0.25) !important;
  box-shadow: 0 10px 30px rgba(10, 5, 18, 0.7) !important;
  border-radius: 12px !important;
  padding: 6px !important;
}

html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item,
html body .dropdown-menu[aria-labelledby="dropdown_options"] a.dropdown-item,
html body .dropdown-menu[aria-labelledby="dropdown_options"] button.dropdown-item {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* Override the heading transparent fill color! */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  z-index: 10 !important;
  box-shadow: none !important;
}

html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item *,
html body .dropdown-menu[aria-labelledby="dropdown_options"] a.dropdown-item *,
html body .dropdown-menu[aria-labelledby="dropdown_options"] button.dropdown-item * {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* Override transparent fill color for all descendants! */
  opacity: 1 !important;
  visibility: visible !important;
}

html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item i,
html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item svg,
html body .dropdown-menu[aria-labelledby="dropdown_options"] a.dropdown-item i,
html body .dropdown-menu[aria-labelledby="dropdown_options"] button.dropdown-item i {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 8px !important;
  font-size: 16px !important;
  display: inline-block !important;
}

/* Hover state for isolated dropdown items */
html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item:hover,
html body .dropdown-menu[aria-labelledby="dropdown_options"] a.dropdown-item:hover,
html body .dropdown-menu[aria-labelledby="dropdown_options"] button.dropdown-item:hover {
  background: rgba(255, 47, 104, 0.15) !important; /* Fundo magenta claro */
  color: var(--color-magenta-light) !important; /* Texto aceso */
  -webkit-text-fill-color: var(--color-magenta-light) !important;
}

html body .dropdown-menu[aria-labelledby="dropdown_options"] .dropdown-item:hover *,
html body .dropdown-menu[aria-labelledby="dropdown_options"] a.dropdown-item:hover *,
html body .dropdown-menu[aria-labelledby="dropdown_options"] button.dropdown-item:hover * {
  color: var(--color-magenta-light) !important;
  fill: var(--color-magenta-light) !important;
  -webkit-text-fill-color: var(--color-magenta-light) !important;
}

/* ==================== FILTERS MODAL & GLOWING LOCATION ICONS OVERRIDES ==================== */

/* 1. Modal Content and Header */
html body .modal-filters-sandbox .modal-content {
  background: linear-gradient(135deg, #180a2d 0%, #0c0416 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .modal-filters-sandbox .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .modal-filters-sandbox .modal-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* 2. Custom Labels and Subtitles */
html body .modal-filters-sandbox .filter-label {
  color: var(--color-magenta-light) !important;
  -webkit-text-fill-color: var(--color-magenta-light) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

html body .modal-filters-sandbox .small.text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

/* 3. Services Layout Spacing & Categories */
html body .modal-filters-sandbox .filter-service-category {
  margin-bottom: 16px !important;
}

html body .modal-filters-sandbox .filter-service-category .filter-subtitle {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  letter-spacing: 0.5px;
}

html body .modal-filters-sandbox .filter-service-category .d-flex.flex-wrap {
  gap: 6px !important;
}

/* 4. Select2 Inputs & Dropdowns inside Modal */
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  background: #170b28 !important;
  background-color: #170b28 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  padding: 4px 8px !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(255, 47, 104, 0.15) !important;
  border: 1px solid rgba(255, 47, 104, 0.3) !important;
  color: var(--color-magenta-light) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-magenta-light) !important;
  border-right: 1px solid rgba(255, 47, 104, 0.3) !important;
  margin-right: 8px !important;
}

html body .modal-filters-sandbox .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(255, 47, 104, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(255, 47, 104, 0.1) !important;
}

/* 5. Animated Glowing Location Icons (Header and Home page) */
@keyframes glowing-location-icon {
  0% {
    color: #ff00cf !important;
    -webkit-text-fill-color: #ff00cf !important;
    text-shadow: 0 0 5px rgba(255, 0, 207, 0.5), 0 0 12px rgba(255, 0, 207, 0.2);
  }
  50% {
    color: #ff66e5 !important;
    -webkit-text-fill-color: #ff66e5 !important;
    text-shadow: 0 0 12px rgba(255, 0, 207, 0.9), 0 0 25px rgba(255, 0, 207, 0.5);
  }
  100% {
    color: #ff00cf !important;
    -webkit-text-fill-color: #ff00cf !important;
    text-shadow: 0 0 5px rgba(255, 0, 207, 0.5), 0 0 12px rgba(255, 0, 207, 0.2);
  }
}

html body .search-pill-header:before,
html body .search-pill-header::before,
html body .fatal-search-icon,
html body .fatal-search-icon i,
html body .fatal-search-icon svg {
  color: #ff00cf !important;
  -webkit-text-fill-color: #ff00cf !important;
  animation: glowing-location-icon 2s infinite ease-in-out !important;
}

/* ==================== SELECT2 TAGS & MODAL COMPACT OVERRIDES ==================== */

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice,
html body .modal-filters-sandbox .select2-selection__choice,
html body .modal-filters-sandbox li.select2-selection__choice,
html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(255, 0, 207, 0.15) !important;
  background-color: rgba(255, 0, 207, 0.15) !important;
  border: 1px solid rgba(255, 0, 207, 0.4) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html body .modal-filters-sandbox .select2-selection__choice__remove,
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background: rgba(0, 0, 0, 0.35) !important;
  color: #ff00cf !important;
  -webkit-text-fill-color: #ff00cf !important;
  border: none !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 0 !important;
  margin-right: 6px !important;
  margin-left: 0 !important;
  float: none !important;
  position: static !important;
  cursor: pointer !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
html body .modal-filters-sandbox .select2-selection__choice__display,
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Modal Body Layout cleanup - Reverted to allow wide modal-lg */
html body .modal-filters-sandbox .modal-dialog.modal-lg {
  max-width: 800px !important;
  width: 90% !important;
  margin: 1.75rem auto !important;
}

html body .modal-filters-sandbox .modal-dialog {
  max-width: 800px !important;
  width: 90% !important;
  margin: 1.75rem auto !important;
}

html body .modal-filters-sandbox .modal-body {
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: 24px 20px !important;
}

/* Hide horizontal scrollbar in modal body */
html body .modal-filters-sandbox .modal-body::-webkit-scrollbar {
  width: 6px;
}
html body .modal-filters-sandbox .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 207, 0.3);
  border-radius: 10px;
}
html body .modal-filters-sandbox .modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}


/* ==================== MOCKUP IA FILTER MODAL STYLING ==================== */

/* Custom toggle switch for Online Agora */
.switch-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.switch-container input {
  display: none;
}
.switch-container .switch-slider {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 0, 207, 0.4);
  border-radius: 20px;
  transition: all 0.3s ease;
}
.switch-container .switch-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.switch-container input:checked + .switch-slider {
  background-color: #ff00cf;
  border-color: #ff00cf;
  box-shadow: 0 0 8px rgba(255, 0, 207, 0.6);
}
.switch-container input:checked + .switch-slider::before {
  transform: translateX(22px);
  background-color: #ffffff;
}

/* Custom Checkbox Pills for Atendimento */
.pill-checkbox-mockup input {
  display: none;
}
.pill-checkbox-mockup span {
  display: block;
  padding: 8px 4px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pill-checkbox-mockup input:checked + span {
  background: #ff00cf !important;
  color: #ffffff !important;
  border-color: #ff00cf !important;
  box-shadow: 0 0 10px rgba(255, 0, 207, 0.6);
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 0, 207, 0.3) !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  padding: 4px 10px !important;
}

/* Mockup Nav Tabs */
html body .modal-filters-sandbox .modal-nav-compact {
  display: flex !important;
  gap: 6px !important;
  padding: 0 22px !important;
  background: transparent !important;
  border-bottom: none !important;
  margin-bottom: 20px !important;
}

html body .modal-filters-sandbox .modal-nav-compact .nav-link {
  flex: 1 !important;
  text-align: center !important;
  padding: 10px 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #ffffff !important;
  transition: all 0.3s !important;
}

html body .modal-filters-sandbox .modal-nav-compact .nav-link.active {
  background: #ff00cf !important;
  color: #ffffff !important;
  border-color: #ff00cf !important;
  box-shadow: 0 0 10px rgba(255, 0, 207, 0.5) !important;
}

/* Labels and Subtitles */
.filter-label-mockup {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  display: block;
}

/* Range sliders matching mockup styles */
html body .modal-filters-sandbox .noUi-target {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  border: none !important;
  margin-top: 15px !important;
  margin-bottom: 5px !important;
}

html body .modal-filters-sandbox .noUi-connect {
  background: #ff00cf !important;
}

html body .modal-filters-sandbox .noUi-horizontal .noUi-handle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #ff00cf !important;
  box-shadow: 0 0 6px rgba(255, 0, 207, 0.5) !important;
  top: -7px !important;
  cursor: pointer !important;
}

/* Footer Buttons */
.btn-mockup-clear {
  flex: 1;
  background: transparent !important;
  border: 1px solid #ff00cf !important;
  color: #ff00cf !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center;
  padding: 12px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: all 0.2s;
  display: inline-block;
}
.btn-mockup-clear:hover {
  background: rgba(255, 0, 207, 0.1) !important;
}

.btn-mockup-apply {
  flex: 1;
  background: #ff00cf !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center;
  padding: 12px !important;
  border-radius: 30px !important;
  box-shadow: 0 0 12px rgba(255, 0, 207, 0.5) !important;
  transition: all 0.2s;
  display: inline-block;
}
.btn-mockup-apply:hover {
  background: #ff33db !important;
  box-shadow: 0 0 18px rgba(255, 0, 207, 0.8) !important;
}

/* Dialog size restriction to compact narrow popup as in mockup */
html body .modal-filters-sandbox .modal-dialog {
  max-width: 460px !important;
  width: 92% !important;
  margin: 1.75rem auto !important;
}

html body .modal-filters-sandbox .modal-content {
  background: #0f051b !important;
  border: 1px solid rgba(255, 0, 207, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 25px rgba(255, 0, 207, 0.3) !important;
  overflow: hidden !important;
}

html body .modal-filters-sandbox .modal-header {
  border-bottom: none !important;
  padding: 20px 22px 10px !important;
}

html body .modal-filters-sandbox .modal-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

html body .modal-filters-sandbox .close {
  opacity: 0.8 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  font-size: 20px !important;
  transition: all 0.2s;
}
html body .modal-filters-sandbox .close:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}


/* ==================== ADDITIONAL IA MOCKUP PRECISION REFINEMENTS ==================== */

/* Gothic title font */
html body .modal-filters-sandbox .modal-title {
  font-family: 'MedievalSharp', cursive, 'Cinzel', serif !important;
  font-size: 22px !important;
  letter-spacing: 1px !important;
  font-weight: 400 !important;
}

/* Neon outline and box-shadow glow matching the picture */
html body .modal-filters-sandbox .modal-content {
  background: #0f051b !important;
  border: 1px solid rgba(255, 0, 207, 0.6) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 35px rgba(255, 0, 207, 0.45), inset 0 0 10px rgba(255, 0, 207, 0.15) !important;
}

/* Chevron down indicators for Select2 multi-selects to match the dropdown look in mockup */
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  position: relative !important;
  padding-right: 32px !important; /* Ensure space for chevron */
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple::after {
  content: "\F282" !important; /* Bootstrap Icons chevron-down */
  font-family: "bootstrap-icons" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  pointer-events: none !important;
}

/* ==================== FILTER MODAL STRUCTURE REPAIR 2026-06-27 ==================== */
html body .modal-filters-sandbox.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .modal-filters-sandbox .modal-dialog,
html body .modal-filters-sandbox .modal-dialog.modal-lg {
  max-width: min(760px, calc(100vw - 24px)) !important;
  width: min(760px, calc(100vw - 24px)) !important;
  margin: 1.25rem auto !important;
}

html body .modal-filters-sandbox .modal-content {
  max-height: calc(100vh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

html body .modal-filters-sandbox .modal-header {
  flex: 0 0 auto !important;
  align-items: center !important;
}

html body .modal-filters-sandbox .modal-nav-compact {
  flex: 0 0 auto !important;
  margin: 0 22px 16px !important;
  padding: 0 !important;
}

html body .modal-filters-sandbox .modal-body {
  flex: 1 1 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 4px 22px 22px !important;
}

html body .modal-filters-sandbox .modal-footer {
  flex: 0 0 auto !important;
  gap: 12px !important;
  background: linear-gradient(180deg, rgba(15, 5, 27, 0.65), rgba(15, 5, 27, 0.96)) !important;
}

html body .modal-filters-sandbox .fatal-filter-form,
html body .modal-filters-sandbox .tab-content,
html body .modal-filters-sandbox .tab-pane {
  min-width: 0 !important;
  width: 100% !important;
}

html body .modal-filters-sandbox .fatal-filter-section--top {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.72fr) minmax(260px, 1.28fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

html body .modal-filters-sandbox .fatal-filter-grid {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

html body .modal-filters-sandbox .fatal-filter-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .modal-filters-sandbox .fatal-filter-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .modal-filters-sandbox .fatal-filter-field,
html body .modal-filters-sandbox .fatal-filter-pill {
  min-width: 0 !important;
}

html body .modal-filters-sandbox .fatal-filter-field--full {
  grid-column: 1 / -1 !important;
}

html body .modal-filters-sandbox .fatal-filter-online {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 0, 207, 0.22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

html body .modal-filters-sandbox .switch-container {
  width: 100% !important;
  min-width: 0 !important;
}

html body .modal-filters-sandbox .fatal-filter-location > .bi-search {
  top: 42px !important;
  z-index: 3 !important;
}

html body .modal-filters-sandbox .fatal-filter-pills {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}

html body .modal-filters-sandbox .fatal-filter-pills--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .modal-filters-sandbox .pill-checkbox-mockup,
html body .modal-filters-sandbox .pill-checkbox-mockup span {
  width: 100% !important;
}

html body .modal-filters-sandbox .pill-checkbox-mockup span {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

html body .modal-filters-sandbox .form-control-premium,
html body .modal-filters-sandbox .form-control,
html body .modal-filters-sandbox .custom-select {
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

html body .modal-filters-sandbox .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 96px !important;
  display: block !important;
  overflow: hidden !important;
  padding: 6px 34px 6px 10px !important;
  box-sizing: border-box !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  width: 100% !important;
  min-height: 30px !important;
  max-height: 82px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar,
html body .modal-filters-sandbox .fatal-filter-chip-list::-webkit-scrollbar {
  width: 4px !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb,
html body .modal-filters-sandbox .fatal-filter-chip-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 207, 0.42) !important;
  border-radius: 999px !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-search--inline {
  flex: 1 1 130px !important;
  min-width: 120px !important;
  max-width: 100% !important;
  height: 28px !important;
  margin: 0 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-search__field {
  width: 100% !important;
  min-width: 120px !important;
  max-width: 100% !important;
  height: 28px !important;
  margin: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice {
  max-width: 100% !important;
  min-height: 28px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

html body .modal-filters-sandbox .select2-dropdown {
  z-index: 2065 !important;
  border-color: rgba(255, 0, 207, 0.48) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 0, 207, 0.22) !important;
  overflow: hidden !important;
}

html body .modal-filters-sandbox .fatal-filter-sliders .fatal-filter-field,
html body .modal-filters-sandbox .filter-group {
  padding: 14px !important;
  border: 1px solid rgba(255, 0, 207, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

html body .modal-filters-sandbox #tab-perfil > .filter-group,
html body .modal-filters-sandbox #tab-precos > .filter-group {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

html body .modal-filters-sandbox .fatal-filter-chip-list {
  max-height: 240px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 4px 2px 8px !important;
}

@media (max-width: 767.98px) {
  html body .modal-filters-sandbox .modal-dialog,
  html body .modal-filters-sandbox .modal-dialog.modal-lg {
    max-width: calc(100vw - 18px) !important;
    width: calc(100vw - 18px) !important;
    margin: 0.75rem auto !important;
  }

  html body .modal-filters-sandbox .modal-content {
    max-height: calc(100vh - 24px) !important;
    border-radius: 18px !important;
  }

  html body .modal-filters-sandbox .modal-header {
    padding: 16px 16px 8px !important;
  }

  html body .modal-filters-sandbox .modal-nav-compact {
    margin: 0 16px 14px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  html body .modal-filters-sandbox .modal-nav-compact .nav-link {
    min-width: 82px !important;
    flex: 1 0 auto !important;
    padding: 9px 8px !important;
  }

  html body .modal-filters-sandbox .modal-body {
    padding: 2px 16px 18px !important;
  }

  html body .modal-filters-sandbox .modal-footer {
    padding: 14px 16px 16px !important;
  }

  html body .modal-filters-sandbox .fatal-filter-section--top,
  html body .modal-filters-sandbox .fatal-filter-grid--two,
  html body .modal-filters-sandbox .fatal-filter-grid--three {
    grid-template-columns: 1fr !important;
  }

  html body .modal-filters-sandbox .fatal-filter-pills--three {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   FEED / HOME - sincronizar cores e backgrounds com a página de perfil
   Mantido no final para neutralizar CSS antigo de css_general.blade.php.
   ========================================================================== */
html body .fatal-social-home {
  --fatal-bg: #1A0C2D;
  --fatal-surface: #311B4B;
  --fatal-surface-strong: #231238;
  --fatal-surface-soft: rgba(49, 27, 75, 0.72);
  --fatal-text: var(--color-white);
  --fatal-muted: rgba(248, 240, 240, 0.68);
  --fatal-accent: var(--color-magenta-mid);
  --fatal-accent-strong: var(--color-magenta);
  --fatal-accent-bright: var(--color-magenta-light);
  --fatal-border: rgba(212, 175, 152, 0.25);
  --fatal-border-soft: rgba(212, 175, 152, 0.14);
  --fatal-glow: rgba(212, 175, 152, 0.22);
  --fatal-magenta: linear-gradient(135deg, var(--color-magenta-light) 0%, var(--color-magenta-mid) 50%, var(--color-magenta) 100%);
  --fatal-panel-gradient:
    radial-gradient(circle at 18% 0%, rgba(212, 175, 152, 0.15), transparent 34%),
    radial-gradient(circle at 100% 6%, rgba(212, 175, 152, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(49, 27, 75, 0.72), rgba(35, 18, 56, 0.96));
  --fatal-page-gradient:
    radial-gradient(circle at 12% 8%, rgba(212, 175, 152, 0.14), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(212, 175, 152, 0.12), transparent 25rem),
    linear-gradient(145deg, #1A0C2D 0%, #231238 54%, #1A0C2D 100%);
  --fatal-action-gradient: var(--fatal-magenta);
  --fatal-action-shadow: rgba(212, 175, 152, 0.25);
  min-height: calc(100vh - 72px) !important;
  padding-bottom: 42px !important;
  background: var(--fatal-page-gradient) !important;
  color: var(--fatal-text) !important;
}

html body:has(.fatal-social-home):not(:has(.fatal-page)) main[role="main"],
html body:has(.fatal-social-home):not(.modal-open) main[role="main"],
html body:has(.fatal-social-home):not(.modal-open) {
  background-image: var(--fatal-page-gradient) !important;
  background-attachment: fixed !important;
  color: var(--fatal-text) !important;
}

html body .fatal-social-home .container-lg-3 {
  max-width: 1420px !important;
}

html body .fatal-social-home .fatal-social-grid {
  align-items: flex-start !important;
}

html body .fatal-social-home .fatal-social-left,
html body .fatal-social-home .fatal-social-right,
html body .fatal-social-home .fatal-social-feed {
  color: var(--fatal-text) !important;
}

html body .fatal-social-home .fatal-social-panel,
html body .fatal-social-home .card:not(.fatal-card),
html body .fatal-social-home .panel-transparent,
html body .fatal-social-home .card-updates,
html body .fatal-social-home .fatal-social-sidebar,
html body .fatal-social-home .fatal-profile-mini,
html body .fatal-social-home .fatal-story-panel,
html body .fatal-social-home .no-updates,
html body .fatal-social-home .alert.card-border-0,
html body .fatal-social-home .modal-content {
  overflow: hidden !important;
  border: 1px solid var(--fatal-border-soft) !important;
  border-radius: 10px !important;
  background: var(--fatal-panel-gradient) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 24px 72px rgba(26, 12, 45, 0.34), inset 0 1px 0 rgba(248, 240, 240, 0.045) !important;
}

html body .fatal-social-home .card:not(.fatal-card):hover,
html body .fatal-social-home .card-updates:hover,
html body .fatal-social-home .panel-transparent:hover,
html body .fatal-social-home .fatal-social-sidebar:hover {
  border-color: rgba(212, 175, 152, 0.24) !important;
  box-shadow: 0 28px 82px rgba(26, 12, 45, 0.44), 0 0 34px rgba(212, 175, 152, 0.08), inset 0 1px 0 rgba(248, 240, 240, 0.055) !important;
}

html body .fatal-social-home .card-body,
html body .fatal-social-home .panel-body,
html body .fatal-social-home .card-updates .card-body,
html body .fatal-social-home .modal-body {
  background: transparent !important;
  color: var(--fatal-text) !important;
}

html body .fatal-social-home .card-header,
html body .fatal-social-home .modal-header,
html body .fatal-social-home .card-footer,
html body .fatal-social-home .modal-footer,
html body .fatal-social-home #formUpdateCreate .card-footer {
  border-color: rgba(248, 240, 240, 0.08) !important;
  background: rgba(26, 12, 45, 0.22) !important;
  color: var(--fatal-text) !important;
}

html body .fatal-social-home h1,
html body .fatal-social-home h2,
html body .fatal-social-home h3,
html body .fatal-social-home h4,
html body .fatal-social-home h5,
html body .fatal-social-home h6,
html body .fatal-social-home strong,
html body .fatal-social-home .card-updates h5 a,
html body .fatal-social-home .panel-transparent strong,
html body .fatal-social-home .fatal-profile-mini strong {
  color: var(--fatal-text) !important;
  -webkit-text-fill-color: var(--fatal-text) !important;
}

html body .fatal-social-home p,
html body .fatal-social-home label,
html body .fatal-social-home .update-text,
html body .fatal-social-home .text-muted,
html body .fatal-social-home small,
html body .fatal-social-home .small,
html body .fatal-social-home .timeAgo,
html body .fatal-social-home .type-post,
html body .fatal-social-home .fatal-profile-mini small {
  color: var(--fatal-muted) !important;
  -webkit-text-fill-color: var(--fatal-muted) !important;
}

html body .fatal-social-home a,
html body .fatal-social-home .verified,
html body .fatal-social-home .fatal-panel-label,
html body .fatal-social-home .fatal-panel-label i,
html body .fatal-social-home .fatal-profile-mini a,
html body .fatal-social-home .link-border {
  color: var(--fatal-accent-bright) !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home a:hover,
html body .fatal-social-home .dropdown-item:hover,
html body .fatal-social-home .card-updates p.truncated a:hover,
html body .fatal-social-home .card-updates p.update-text a:hover {
  color: var(--fatal-text) !important;
  -webkit-text-fill-color: var(--fatal-text) !important;
}

html body .fatal-social-home .text-danger,
html body .fatal-social-home a.text-danger,
html body .fatal-social-home .btn-tooltip-form.text-danger,
html body .fatal-social-home #removePhoto,
html body .fatal-social-home #removeEpub {
  color: var(--fatal-accent-bright) !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .bg-primary,
html body .fatal-social-home .progress-bar.bg-primary,
html body .fatal-social-home .badge-primary,
html body .fatal-social-home .badge-danger,
html body .fatal-social-home .fatal-explore-free-badge,
html body .fatal-social-home .live-span {
  border-color: var(--fatal-accent-strong) !important;
  background: var(--fatal-action-gradient) !important;
  background-image: var(--fatal-action-gradient) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 12px 28px var(--fatal-action-shadow) !important;
}

html body .fatal-social-home .dropdown-menu,
html body .fatal-social-home .dropdown-emoji,
html body .fatal-social-home .select2-dropdown,
html body .fatal-social-home .select2-container--open .select2-dropdown,
html body:has(.fatal-social-home) .select2-container--open .select2-dropdown {
  overflow: hidden !important;
  border: 1px solid var(--fatal-border-soft) !important;
  border-radius: 8px !important;
  background: rgba(26, 12, 45, 0.98) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 24px 64px rgba(26, 12, 45, 0.62), inset 0 1px 0 rgba(248, 240, 240, 0.04) !important;
  backdrop-filter: blur(18px);
}

html body .fatal-social-home .dropdown-item,
html body .fatal-social-home .dropdown-item i,
html body .fatal-social-home .dropdown-item svg,
html body .fatal-social-home .select2-results__option,
html body:has(.fatal-social-home) .select2-results__option {
  background: transparent !important;
  color: var(--fatal-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: var(--fatal-text) !important;
}

html body .fatal-social-home .dropdown-item:hover,
html body .fatal-social-home .dropdown-item:focus,
html body .fatal-social-home .select2-results__option--highlighted,
html body .fatal-social-home .select2-results__option[aria-selected="true"],
html body:has(.fatal-social-home) .select2-results__option--highlighted,
html body:has(.fatal-social-home) .select2-results__option[aria-selected="true"] {
  background: rgba(212, 175, 152, 0.12) !important;
  color: var(--fatal-accent-bright) !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .form-control,
html body .fatal-social-home .custom-select,
html body .fatal-social-home .input-group-text,
html body .fatal-social-home textarea,
html body .fatal-social-home input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .fatal-social-home .select2-container--default .select2-selection--multiple,
html body .fatal-social-home .select2-container--default .select2-selection--single {
  border: 1px solid rgba(248, 240, 240, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(26, 12, 45, 0.36) !important;
  color: var(--fatal-text) !important;
  box-shadow: inset 0 1px 0 rgba(248, 240, 240, 0.035) !important;
}

html body .fatal-social-home .form-control:focus,
html body .fatal-social-home .custom-select:focus,
html body .fatal-social-home textarea:focus,
html body .fatal-social-home input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html body .fatal-social-home .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(212, 175, 152, 0.36) !important;
  background: rgba(35, 18, 56, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 152, 0.10), inset 0 1px 0 rgba(248, 240, 240, 0.04) !important;
}

html body .fatal-social-home ::placeholder,
html body .fatal-social-home .select2-search__field::placeholder {
  color: rgba(248, 240, 240, 0.46) !important;
  -webkit-text-fill-color: rgba(248, 240, 240, 0.46) !important;
}

html body .fatal-social-home #formUpdateCreate,
html body .fatal-social-home .wrap-post > form {
  color: var(--fatal-text) !important;
}

html body .fatal-social-home #formUpdateCreate .card,
html body .fatal-social-home .wrap-post > form .card {
  border-color: var(--fatal-border-soft) !important;
  background: var(--fatal-panel-gradient) !important;
}

html body .fatal-social-home #formUpdateCreate textarea {
  min-height: 92px !important;
  padding: 12px 14px !important;
  background: rgba(26, 12, 45, 0.28) !important;
}

html body .fatal-social-home .fatal-post-tools-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

html body .fatal-social-home .btn-post,
html body .fatal-social-home #formUpdateCreate .btn-post,
html body .fatal-social-home .wrap-post > form .btn-post,
html body .fatal-social-home #dropdown_options,
html body .fatal-social-home .card-updates .card-footer .pulse-btn,
html body .fatal-social-home .card-updates .card-footer span.disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin-right: 0 !important;
  border: 1px solid rgba(248, 240, 240, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(248, 240, 240, 0.075) !important;
  color: var(--fatal-accent-bright) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .btn-post:hover,
html body .fatal-social-home #formUpdateCreate .btn-post:hover,
html body .fatal-social-home .wrap-post > form .btn-post:hover,
html body .fatal-social-home #dropdown_options:hover,
html body .fatal-social-home .card-updates .card-footer .pulse-btn:hover,
html body .fatal-social-home .card-updates .card-footer .pulse-btn.active,
html body .fatal-social-home .card-updates .card-footer .pulse-btn.text-primary {
  border-color: rgba(212, 175, 152, 0.30) !important;
  background: rgba(212, 175, 152, 0.12) !important;
  color: var(--fatal-text) !important;
  transform: translateY(-1px);
  -webkit-text-fill-color: var(--fatal-text) !important;
}

html body .fatal-social-home .btn-post i,
html body .fatal-social-home .btn-post svg,
html body .fatal-social-home #dropdown_options i,
html body .fatal-social-home #dropdown_options svg,
html body .fatal-social-home .card-updates .card-footer .pulse-btn *,
html body .fatal-social-home .card-updates .card-footer .pulse-btn i,
html body .fatal-social-home .card-updates .card-footer .pulse-btn svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: inherit !important;
}

html body .fatal-social-home #btnCreateUpdate,
html body .fatal-social-home .btn-primary:not(.btn-whatsapp):not(.facebook-btn),
html body .fatal-social-home .btn-danger,
html body .fatal-social-home .btn-main,
html body .fatal-social-home .sendReport,
html body .fatal-social-home .content-locked .btn-primary {
  border: 1px solid var(--fatal-accent-strong) !important;
  border-radius: 8px !important;
  background: var(--fatal-action-gradient) !important;
  background-image: var(--fatal-action-gradient) !important;
  color: var(--fatal-text) !important;
  fill: var(--fatal-text) !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 34px var(--fatal-action-shadow) !important;
}

html body .fatal-social-home #btnCreateUpdate:hover,
html body .fatal-social-home .btn-primary:not(.btn-whatsapp):not(.facebook-btn):hover,
html body .fatal-social-home .btn-danger:hover,
html body .fatal-social-home .btn-main:hover,
html body .fatal-social-home .sendReport:hover,
html body .fatal-social-home .content-locked .btn-primary:hover {
  border-color: var(--fatal-accent-bright) !important;
  background: var(--color-magenta-light) !important;
  background-image: none !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 18px 42px rgba(212, 175, 152, 0.30), inset 0 0 0 1px rgba(248, 240, 240, 0.12) !important;
}

html body .fatal-social-home .storiesWrapper {
  gap: 16px !important;
  min-height: 104px !important;
  padding: 12px 14px 2px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--fatal-accent-strong) var(--fatal-surface-strong);
}

html body .fatal-social-home .storiesWrapper::-webkit-scrollbar {
  height: 5px !important;
}

html body .fatal-social-home .storiesWrapper::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: var(--fatal-accent-strong) !important;
}

html body .fatal-social-home .storiesWrapper .item-preview,
html body .fatal-social-home .storiesWrapper .add-story-preview,
html body .fatal-social-home .fatal-explore-avatar-wrap {
  background:
    linear-gradient(var(--fatal-bg), var(--fatal-bg)) padding-box,
    conic-gradient(from 225deg, var(--fatal-accent-bright), var(--fatal-accent-strong), var(--fatal-surface), var(--fatal-accent-bright)) border-box !important;
  border: 3px solid transparent !important;
  box-shadow: 0 12px 26px rgba(212, 175, 152, 0.16), 0 0 0 4px rgba(248, 240, 240, 0.035) !important;
}

html body .fatal-social-home .storiesWrapper img,
html body .fatal-social-home .storiesWrapper .item-preview img,
html body .fatal-social-home .storiesWrapper .add-story-preview img,
html body .fatal-social-home .fatal-explore-avatar,
html body .fatal-social-home .fatal-dark-avatar,
html body .fatal-social-home .avatarUser,
html body .fatal-social-home img.rounded-circle {
  border-color: var(--fatal-surface-strong) !important;
  background: var(--fatal-surface-strong) !important;
  box-shadow: 0 10px 28px rgba(26, 12, 45, 0.36), 0 0 0 4px rgba(248, 240, 240, 0.035) !important;
}

html body .fatal-social-home .storiesWrapper .add-story-plus,
html body .fatal-social-home .fatal-post-story-add {
  border-color: var(--fatal-surface-strong) !important;
  background: var(--fatal-action-gradient) !important;
  color: var(--fatal-text) !important;
  box-shadow: 0 8px 18px var(--fatal-action-shadow) !important;
}

html body .fatal-social-home .storiesWrapper .info,
html body .fatal-social-home .storiesWrapper .name {
  color: var(--fatal-muted) !important;
  -webkit-text-fill-color: var(--fatal-muted) !important;
}

html body .fatal-social-home .fatal-social-sidebar li > a,
html body .fatal-social-home .fatal-sidebar-profile a {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--fatal-muted) !important;
  -webkit-text-fill-color: var(--fatal-muted) !important;
}

html body .fatal-social-home .fatal-social-sidebar li > a i {
  border: 1px solid rgba(248, 240, 240, 0.08) !important;
  background: rgba(248, 240, 240, 0.075) !important;
  color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .fatal-social-sidebar li > a:hover,
html body .fatal-social-home .fatal-social-sidebar li > a.active,
html body .fatal-social-home .fatal-sidebar-profile a:hover {
  border-color: rgba(212, 175, 152, 0.20) !important;
  background: rgba(212, 175, 152, 0.10) !important;
  color: var(--fatal-text) !important;
  -webkit-text-fill-color: var(--fatal-text) !important;
}

html body .fatal-social-home .fatal-sidebar-profile a,
html body .fatal-social-home .fatal-explore-creator-card {
  border-color: var(--fatal-border-soft) !important;
  background:
    linear-gradient(180deg, rgba(26, 12, 45, 0.10), rgba(26, 12, 45, 0.76)),
    radial-gradient(circle at top, rgba(212, 175, 152, 0.14), rgba(49, 27, 75, 0.58) 58%, rgba(26, 12, 45, 0.94) 100%) !important;
  box-shadow: 0 18px 44px rgba(26, 12, 45, 0.32) !important;
}

html body .fatal-social-home .fatal-sidebar-profile-cover,
html body .fatal-social-home .fatal-explore-creator-overlay {
  background:
    radial-gradient(circle at 72% 8%, rgba(212, 175, 152, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(49, 27, 75, 0.72), rgba(35, 18, 56, 0.42)) !important;
}

html body .fatal-social-home .fatal-sidebar-profile a::after {
  background: radial-gradient(circle, rgba(212, 175, 152, 0.18), transparent 66%) !important;
}

html body .fatal-social-home .fatal-explore-creator-card:hover {
  border-color: rgba(212, 175, 152, 0.30) !important;
  box-shadow: 0 22px 54px rgba(212, 175, 152, 0.10), 0 18px 44px rgba(26, 12, 45, 0.36) !important;
}

html body .fatal-social-home .fatal-explore-username,
html body .fatal-social-home .fatal-sidebar-profile small {
  color: var(--fatal-accent-bright) !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .card-updates {
  margin-bottom: 18px !important;
}

html body .fatal-social-home .card-updates .card-body {
  padding: 16px !important;
}

html body .fatal-social-home .card-updates .card-footer {
  background: rgba(26, 12, 45, 0.28) !important;
}

html body .fatal-social-home .card-updates .content-locked {
  border: 1px solid rgba(248, 240, 240, 0.08) !important;
  background: rgba(26, 12, 45, 0.82) !important;
  color: var(--fatal-text) !important;
  backdrop-filter: blur(12px);
}

html body .fatal-social-home .card-updates .content-locked .icon-lock,
html body .fatal-social-home .card-updates .containerLikeComment a.toggleComments:hover,
html body .fatal-social-home .card-updates .containerLikeComment .text-muted:hover,
html body .fatal-social-home .pinned_post.pinned-current {
  color: var(--fatal-accent-bright) !important;
  -webkit-text-fill-color: var(--fatal-accent-bright) !important;
}

html body .fatal-social-home .modalReport .btn.border {
  border-color: rgba(248, 240, 240, 0.14) !important;
  background: transparent !important;
  color: var(--fatal-text) !important;
}

html body .fatal-social-home .modalReport .btn.border:hover {
  background: rgba(248, 240, 240, 0.08) !important;
}

html body .fatal-social-home .alert-danger,
html body .fatal-social-home #errorUdpate {
  border-color: rgba(212, 175, 152, 0.22) !important;
  background: rgba(35, 18, 56, 0.86) !important;
  color: var(--fatal-text) !important;
}

html body .fatal-social-home .social-share {
  border-color: rgba(248, 240, 240, 0.10) !important;
  background: rgba(248, 240, 240, 0.04) !important;
}

html body .fatal-social-home .social-share:hover {
  background: rgba(248, 240, 240, 0.08) !important;
}

@media (max-width: 991.98px) {
  html body .fatal-social-home {
    padding-top: 12px !important;
  }

  html body .fatal-social-home .fatal-social-feed {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body .fatal-social-home .fatal-social-right {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  html body .fatal-social-home #formUpdateCreate .card,
  html body .fatal-social-home .wrap-post > form .card {
    padding: 14px 14px 0 !important;
  }

  html body .fatal-social-home #formUpdateCreate .card-body,
  html body .fatal-social-home .wrap-post > form .card-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 10px 0 !important;
  }

  html body .fatal-social-home #formUpdateCreate textarea {
    width: 100% !important;
    min-height: 120px !important;
    margin: 0 !important;
    font-size: 18px !important;
  }

  html body .fatal-social-home #formUpdateCreate .card-footer,
  html body .fatal-social-home .wrap-post > form .card-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html body .fatal-social-home .fatal-post-tools-row {
    width: 100% !important;
  }

  html body .fatal-social-home .btn-post,
  html body .fatal-social-home #formUpdateCreate .btn-post,
  html body .fatal-social-home .wrap-post > form .btn-post {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 2px !important;
    padding: 0 !important;
  }

  html body .fatal-social-home #btnCreateUpdate {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   MODAL FILTROS - Select2 clear/remove igual ao "Editar minha Página"
   Corrige desalinhamento do X causado por estilos antigos/globais do Select2.
   ========================================================================== */
html body .modal-filters-sandbox .select2-container--default .select2-selection--single,
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  position: relative !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--single .select2-selection__clear,
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__clear,
html body .modal-filters-sandbox .select2-selection__clear {
  position: absolute !important;
  top: 50% !important;
  right: 34px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--single .select2-selection__clear:hover,
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__clear:hover,
html body .modal-filters-sandbox .select2-selection__clear:hover {
  background: var(--color-magenta-light) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  line-height: 1 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html body .modal-filters-sandbox .select2-selection__choice__remove,
html body .modal-filters-sandbox .select2-selection__remove {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span,
html body .modal-filters-sandbox .select2-selection__choice__remove span,
html body .modal-filters-sandbox .select2-selection__remove span,
html body .modal-filters-sandbox .select2-selection__clear span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html body .modal-filters-sandbox .select2-selection__choice__remove:hover,
html body .modal-filters-sandbox .select2-selection__remove:hover {
  background: var(--color-magenta-light) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Filter modal inner spacing 2026-06-27 */
html body .modal-filters-sandbox .tab-content {
  padding: 20px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html body .modal-filters-sandbox .fatal-filter-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==================== FILTER MODAL PRODUCT LAYOUT FIX 2026-06-27 ==================== */
html body .modal-filters-sandbox #filterForm .tab-pane {
  display: none !important;
}

html body .modal-filters-sandbox #filterForm .tab-pane.active {
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  align-items: initial !important;
  gap: 0 !important;
}

html body .modal-filters-sandbox .modal-dialog,
html body .modal-filters-sandbox .modal-dialog.modal-lg {
  max-width: min(920px, calc(100vw - 28px)) !important;
  width: min(920px, calc(100vw - 28px)) !important;
}

html body .modal-filters-sandbox .modal-content {
  overflow: hidden !important;
}

html body .modal-filters-sandbox .modal-body {
  padding: 0 28px 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .modal-filters-sandbox .modal-nav-compact {
  margin: 0 28px 18px !important;
}

html body .modal-filters-sandbox .fatal-filter-section,
html body .modal-filters-sandbox .fatal-filter-location,
html body .modal-filters-sandbox #tab-perfil > .form-group,
html body .modal-filters-sandbox #tab-perfil > .filter-group,
html body .modal-filters-sandbox #tab-corpo > .fatal-filter-grid,
html body .modal-filters-sandbox #tab-corpo > .filter-label-mockup,
html body .modal-filters-sandbox #tab-precos > .filter-group {
  margin-bottom: 18px !important;
}

html body .modal-filters-sandbox .fatal-filter-section--top {
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr) !important;
  align-items: end !important;
}

html body .modal-filters-sandbox .fatal-filter-grid {
  align-items: start !important;
}

html body .modal-filters-sandbox .fatal-filter-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .modal-filters-sandbox .fatal-filter-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .modal-filters-sandbox .fatal-filter-field {
  position: relative !important;
  min-width: 0 !important;
}

html body .modal-filters-sandbox .fatal-filter-location {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .modal-filters-sandbox .fatal-filter-location > .bi-search {
  top: 43px !important;
  right: 16px !important;
  z-index: 4 !important;
}

html body .modal-filters-sandbox .search-input-wrapper .bi-search {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html body .modal-filters-sandbox .filter-label-mockup,
html body .modal-filters-sandbox .fatal-filter-field:not(:has(> .filter-label-mockup)):has(select)::before {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  position: static !important;
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="ethnicity[]"])::before {
  content: "ETNIA";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="orientation[]"])::before {
  content: "ORIENTA\00C7\00C3O";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="education_level_id[]"])::before {
  content: "ESCOLARIDADE";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="zodiac_sign_id[]"])::before {
  content: "SIGNO";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="nationality[]"])::before {
  content: "NACIONALIDADE";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="languages[]"])::before {
  content: "IDIOMAS";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="payment_methods[]"])::before {
  content: "FORMAS DE PAGAMENTO";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="hair_color_id[]"])::before {
  content: "COR DO CABELO";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="eye_color_id[]"])::before {
  content: "COR DOS OLHOS";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="bust_type[]"])::before {
  content: "TIPO DE BUSTO";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="bust_size[]"])::before {
  content: "TAMANHO DO BUSTO";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="tattoos[]"])::before {
  content: "TATUAGENS";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="piercings[]"])::before {
  content: "PIERCINGS";
}

html body .modal-filters-sandbox .fatal-filter-field:has(select[name="smoker[]"])::before {
  content: "FUMANTE";
}

html body .modal-filters-sandbox .fatal-filter-field:has(> .filter-label-mockup)::before {
  content: none !important;
  display: none !important;
}

html body .modal-filters-sandbox .fatal-filter-online {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .modal-filters-sandbox .switch-container {
  min-height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 0, 207, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

html body .modal-filters-sandbox .form-control-premium,
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  min-height: 46px !important;
  border-radius: 12px !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 7px 36px 7px 12px !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  min-height: 30px !important;
  max-height: 84px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.25 !important;
}

html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
html body .modal-filters-sandbox .select2-container--default .select2-selection--multiple .select2-search__field {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  line-height: 28px !important;
}

html body .modal-filters-sandbox .fatal-filter-sliders .fatal-filter-field,
html body .modal-filters-sandbox .filter-group {
  padding: 16px 18px !important;
  margin-bottom: 0 !important;
}

html body .modal-filters-sandbox #tab-perfil > .filter-group,
html body .modal-filters-sandbox #tab-precos > .filter-group {
  width: 100% !important;
}

html body .modal-filters-sandbox .fatal-filter-chip-list {
  width: 100% !important;
}

html body .modal-filters-sandbox #tab-servicos-full.active {
  display: block !important;
}

html body .modal-filters-sandbox #tab-servicos-full .filter-service-category {
  display: grid !important;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 0, 207, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

html body .modal-filters-sandbox #tab-servicos-full .filter-subtitle {
  margin: 5px 0 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body .modal-filters-sandbox #tab-servicos-full .fatal-filter-chip-list {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body .modal-filters-sandbox #tab-corpo > .filter-label-mockup {
  margin-top: 2px !important;
}

@media (max-width: 767.98px) {
  html body .modal-filters-sandbox .modal-dialog,
  html body .modal-filters-sandbox .modal-dialog.modal-lg {
    max-width: calc(100vw - 18px) !important;
    width: calc(100vw - 18px) !important;
  }

  html body .modal-filters-sandbox .modal-body {
    padding: 0 16px 18px !important;
  }

  html body .modal-filters-sandbox .modal-nav-compact {
    margin: 0 16px 16px !important;
  }

  html body .modal-filters-sandbox .fatal-filter-section--top,
  html body .modal-filters-sandbox .fatal-filter-grid--two,
  html body .modal-filters-sandbox .fatal-filter-grid--three,
  html body .modal-filters-sandbox .fatal-filter-pills--three,
  html body .modal-filters-sandbox #tab-servicos-full .filter-service-category {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   SELECT2 - ocultar campo de busca inline no modal de filtros e editar página
   Mantém o espaço do Select2, apenas deixa o input visualmente invisível.
   ========================================================================== */
html body .modal-filters-sandbox .select2-search.select2-search--inline,
html body .modal-filters-sandbox li.select2-search.select2-search--inline,
html body .modal-filters-sandbox .select2-selection--multiple .select2-search.select2-search--inline,
html body section.profile-settings-page .select2-search.select2-search--inline,
html body section.profile-settings-page li.select2-search.select2-search--inline,
html body section.profile-settings-page .select2-selection--multiple .select2-search.select2-search--inline {
  visibility: hidden !important;
}

html body .modal-filters-sandbox .select2-search.select2-search--inline .select2-search__field,
html body section.profile-settings-page .select2-search.select2-search--inline .select2-search__field {
  visibility: hidden !important;
}

/* ==========================================================================
   noUiSlider - remover fundo das hastes internas do handle
   ========================================================================== */
html body .noUi-handle:before,
html body .noUi-handle:after,
html body .noUi-handle::before,
html body .noUi-handle::after {
  background: none !important;
  background-color: transparent !important;
}

/* ==========================================================================
   POST TAGS - campo inline do Select2 sem bolha própria
   ========================================================================== */
html body #postTagsWrap .post-tags-input-group .select2-search--inline .select2-search__field,
html body #postTagsWrap .select2-container--open .select2-search--inline .select2-search__field {
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   ADMIN - badges com cores semânticas Bootstrap
   Corrige colunas Status/Função/Verificado que usam badge bg-* no painel.
   ========================================================================== */
html body:has(#sidebar-nav) .badge.bg-primary,
html body:has(#sidebar-nav) .badge.badge-primary {
  background: #0d6efd !important;
  background-color: #0d6efd !important;
  background-image: none !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body:has(#sidebar-nav) .badge.bg-secondary,
html body:has(#sidebar-nav) .badge.badge-secondary {
  background: #6c757d !important;
  background-color: #6c757d !important;
  background-image: none !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body:has(#sidebar-nav) .badge.bg-success,
html body:has(#sidebar-nav) .badge.badge-success {
  background: #198754 !important;
  background-color: #198754 !important;
  background-image: none !important;
  border-color: #198754 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body:has(#sidebar-nav) .badge.bg-danger,
html body:has(#sidebar-nav) .badge.badge-danger {
  background: #dc3545 !important;
  background-color: #dc3545 !important;
  background-image: none !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body:has(#sidebar-nav) .badge.bg-warning,
html body:has(#sidebar-nav) .badge.badge-warning {
  background: #ffc107 !important;
  background-color: #ffc107 !important;
  background-image: none !important;
  border-color: #ffc107 !important;
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
}

html body:has(#sidebar-nav) .badge.bg-info,
html body:has(#sidebar-nav) .badge.badge-info {
  background: #0dcaf0 !important;
  background-color: #0dcaf0 !important;
  background-image: none !important;
  border-color: #0dcaf0 !important;
  color: #052c35 !important;
  -webkit-text-fill-color: #052c35 !important;
}

html body:has(#sidebar-nav) .badge.bg-light,
html body:has(#sidebar-nav) .badge.badge-light {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  background-image: none !important;
  border-color: #f8f9fa !important;
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
}

html body:has(#sidebar-nav) .badge.bg-dark,
html body:has(#sidebar-nav) .badge.badge-dark {
  background: #212529 !important;
  background-color: #212529 !important;
  background-image: none !important;
  border-color: #212529 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body:has(#sidebar-nav) .badge.text-dark,
html body:has(#sidebar-nav) .badge.bg-warning.text-dark,
html body:has(#sidebar-nav) .badge.bg-info.text-dark,
html body:has(#sidebar-nav) .badge.bg-light.text-dark {
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
}

html body:has(#sidebar-nav) .badge.bg-primary *,
html body:has(#sidebar-nav) .badge.bg-secondary *,
html body:has(#sidebar-nav) .badge.bg-success *,
html body:has(#sidebar-nav) .badge.bg-danger *,
html body:has(#sidebar-nav) .badge.bg-dark * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Live state badges, story/live chooser and filter switch */
@keyframes fatal-live-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 82, 0.34), 0 8px 18px rgba(255, 0, 82, 0.18) !important; }
  50% { box-shadow: 0 0 0 7px rgba(255, 0, 82, 0), 0 12px 26px rgba(255, 0, 82, 0.3) !important; }
}

html body .fatal-badge-icon.live {
  width: auto !important;
  min-width: 58px !important;
  height: 32px !important;
  gap: 5px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  border-color: rgba(255, 0, 82, 0.6) !important;
  background: linear-gradient(135deg, #ff0052 0%, #b00036 52%, #5d001d 100%) !important;
  animation: fatal-live-badge-pulse 1.45s ease-in-out infinite;
}

html body .fatal-badge-icon.live i,
html body .fatal-badge-icon.live em {
  color: #fff !important;
  line-height: 1 !important;
}

html body .fatal-badge-icon.live em {
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
}

html body .fatal-avatar-live-ribbon,
html body .fatal-profile-avatar-shell .live-span {
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff0052 0%, #b00036 55%, #5d001d 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 22px rgba(255, 0, 82, 0.28) !important;
}

html body #stories .story {
  position: relative !important;
}

html body #stories .story .fatal-story-live-ribbon {
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff0052 0%, #b00036 55%, #5d001d 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  box-shadow: 0 7px 18px rgba(255, 0, 82, 0.32) !important;
}

html body .fatal-profile-avatar-choice-trigger {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

html body .fatal-live-story-menu {
  position: fixed !important;
  z-index: 2147483100 !important;
  min-width: 188px !important;
  display: grid !important;
  gap: 7px !important;
  padding: 9px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 0, 82, 0.36) !important;
  background: linear-gradient(145deg, rgba(26, 12, 45, 0.98), rgba(12, 3, 23, 0.98)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.58), 0 0 26px rgba(255, 0, 82, 0.18) !important;
}

html body .fatal-live-story-menu button {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
}

html body .fatal-live-story-menu button:hover {
  background: linear-gradient(135deg, #ff0052, #8e002c) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html body .fatal-live-story-menu button i {
  width: 16px !important;
  color: #fff !important;
  text-align: center !important;
}

html body .modal-filters-sandbox .fatal-filter-section--top {
  grid-template-columns: minmax(150px, 0.58fr) minmax(150px, 0.58fr) minmax(260px, 1.34fr) !important;
}

html body .modal-filters-sandbox .fatal-filter-live {
  min-width: 0 !important;
}

@media (max-width: 767.98px) {
  html body .modal-filters-sandbox .fatal-filter-section--top {
    grid-template-columns: 1fr !important;
  }
}
/* SEO local internal linking: city/neighborhood hubs */
.fatal-page .fatal-seo-links {
  margin: 34px 0 10px;
  padding: 24px;
  border: 1px solid rgba(255, 0, 207, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 0, 207, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(49, 27, 75, 0.78), rgba(18, 7, 32, 0.96)) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
}

.fatal-page .fatal-seo-links__header {
  max-width: 760px;
  margin-bottom: 18px;
}

.fatal-page .fatal-seo-links__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #ff5bd8 !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fatal-page .fatal-seo-links__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff00cf;
  box-shadow: 0 0 12px rgba(255, 0, 207, 0.55);
}

.fatal-page .fatal-seo-links h2 {
  margin: 0 0 7px;
  color: #ffffff !important;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}

.fatal-page .fatal-seo-links p {
  margin: 0;
  color: rgba(248, 240, 240, 0.72) !important;
  font-size: 14px;
}

.fatal-page .fatal-seo-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
}

.fatal-page .fatal-seo-link-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 0, 207, 0.24);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.fatal-page .fatal-seo-link-chip span {
  min-width: 0;
  color: #ffffff !important;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fatal-page .fatal-seo-link-chip small {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 11px;
  font-weight: 800;
}

.fatal-page .fatal-seo-link-chip:hover,
.fatal-page .fatal-seo-link-chip.active {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 207, 0.68);
  background: linear-gradient(135deg, rgba(255, 0, 207, 0.18), rgba(90, 46, 140, 0.22)) !important;
  box-shadow: 0 12px 28px rgba(255, 0, 207, 0.12);
}

.fatal-page .fatal-seo-links__back {
  display: inline-flex;
  margin-top: 16px;
  color: #ff5bd8 !important;
  font-weight: 900;
  text-decoration: none !important;
}

.fatal-page .fatal-seo-links__back:hover {
  color: #ffffff !important;
}

@media (max-width: 767.98px) {
  .fatal-page .fatal-seo-links {
    margin-top: 24px;
    padding: 18px;
    border-radius: 18px;
  }

  .fatal-page .fatal-seo-links__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile category rail: use all available width before moving items to + */
html body .fatal-creators-page #catWrapper {
  width: 100% !important;
  justify-content: center !important;
}

html body .fatal-creators-page #visibleCats {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}

html body .fatal-creators-page #visibleCats > .category-btn {
  margin: 0 !important;
}

@media (max-width: 575.98px) {
  html body .fatal-creators-page .category-fixed-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .fatal-creators-page #catWrapper,
  html body .fatal-creators-page #visibleCats {
    gap: 5px !important;
  }

  html body .fatal-creators-page .category-btn {
    min-width: 0 !important;
    min-height: 42px !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    font-size: 10px !important;
    letter-spacing: .035em !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  html body .fatal-creators-page .category-btn i {
    margin-right: 2px !important;
    font-size: 10px !important;
  }

  html body .fatal-creators-page #moreDropdown > .category-btn {
    width: 40px !important;
    min-width: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 380px) {
  html body .fatal-creators-page #catWrapper,
  html body .fatal-creators-page #visibleCats {
    gap: 4px !important;
  }

  html body .fatal-creators-page .category-btn {
    min-height: 40px !important;
    padding: 8px 8px !important;
    font-size: 9px !important;
    letter-spacing: .02em !important;
  }

  html body .fatal-creators-page #moreDropdown > .category-btn {
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* Modal polish: adult alert, cookies banner and login actions */
html body #alertAdult .modal-dialog {
  max-width: min(520px, calc(100vw - 28px)) !important;
}

html body #alertAdult .modal-content {
  overflow: hidden !important;
  border: 1px solid rgba(255, 0, 207, .28) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 0, 207, .14), transparent 42%),
    linear-gradient(145deg, rgba(49, 27, 75, .96), rgba(18, 6, 31, .98)) !important;
  color: #F8F0F0 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52), 0 0 34px rgba(255, 0, 207, .16) !important;
}

html body #alertAdult .modal-body {
  padding: 34px 32px 14px !important;
  text-align: center !important;
}

html body #alertAdult .fatal-adult-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(255, 0, 207, .42) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(255, 0, 207, .22), rgba(90, 46, 140, .24)) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(248, 240, 240, .08), 0 0 26px rgba(255, 0, 207, .2) !important;
}

html body #alertAdult .fatal-adult-icon i {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 0, 207, .95) !important;
  font-size: 76px !important;
  line-height: 1 !important;
}

html body #alertAdult .fatal-adult-icon span {
  position: relative !important;
  z-index: 2 !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4) !important;
}

html body #alertAdult .modal-body p {
  max-width: 420px !important;
  margin: 0 auto !important;
  color: rgba(248, 240, 240, .9) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

html body #alertAdult .modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 32px 32px !important;
  border: 0 !important;
  flex-wrap: nowrap !important;
}

html body #alertAdult .fatal-adult-exit,
html body #alertAdult #btnAlertAdult {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 154px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

html body #alertAdult .fatal-adult-exit {
  border: 1px solid rgba(248, 240, 240, .22) !important;
  background: rgba(248, 240, 240, .055) !important;
  color: rgba(248, 240, 240, .86) !important;
  box-shadow: none !important;
}

html body #alertAdult .fatal-adult-exit:hover {
  border-color: rgba(248, 240, 240, .34) !important;
  background: rgba(248, 240, 240, .1) !important;
  color: #FFFFFF !important;
}

html body #alertAdult #btnAlertAdult {
  border: 1px solid rgba(255, 0, 207, .62) !important;
  background: linear-gradient(135deg, #ff00cf 0%, #9b177d 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(255, 0, 207, .28) !important;
}

html body #alertAdult #btnAlertAdult:hover {
  border-color: rgba(255, 0, 207, .8) !important;
  background: linear-gradient(135deg, #ff35da 0%, #b51d93 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

html body .showBanner {
  position: fixed !important;
  z-index: 9998 !important;
  left: 50% !important;
  bottom: 18px !important;
  width: min(840px, calc(100vw - 28px)) !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(255, 0, 207, .22) !important;
  border-radius: 14px !important;
  background: rgba(18, 6, 31, .92) !important;
  color: rgba(248, 240, 240, .92) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42), 0 0 28px rgba(255, 0, 207, .1) !important;
  backdrop-filter: blur(18px) !important;
}

html body .showBanner:not(.display-none) {
  display: flex !important;
}

html body .showBanner .fatal-cookie-message {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(248, 240, 240, .94) !important;
}

html body .showBanner i {
  color: #ff00cf !important;
}

html body .showBanner a {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

html body .showBanner #close-banner {
  flex: 0 0 auto !important;
  min-width: 104px !important;
  min-height: 38px !important;
  margin-left: 6px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(255, 0, 207, .58) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ff00cf 0%, #9b177d 100%) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.1 !important;
  box-shadow: 0 10px 24px rgba(255, 0, 207, .22) !important;
}

html body .showBanner #close-banner:hover {
  background: linear-gradient(135deg, #ff35da 0%, #b51d93 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

html body #loginFormModal .fatal-login-actions {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 24px !important;
}

html body #loginFormModal .fatal-login-actions > .btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #loginFormModal .fatal-login-actions > .btn.display-none {
  display: none !important;
}

html body #loginFormModal .fatal-login-actions #btnLoginRegister,
html body #loginFormModal .fatal-login-actions #btnModalSms {
  border: 1px solid rgba(255, 0, 207, .58) !important;
  background: linear-gradient(135deg, #ff00cf 0%, #9b177d 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(255, 0, 207, .22) !important;
}

html body #loginFormModal .fatal-login-actions #btnLoginRegister:hover,
html body #loginFormModal .fatal-login-actions #btnModalSms:hover {
  background: linear-gradient(135deg, #ff35da 0%, #b51d93 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

html body #loginFormModal .fatal-login-actions .fatal-login-cancel {
  border: 1px solid rgba(248, 240, 240, .22) !important;
  background: rgba(248, 240, 240, .055) !important;
  color: rgba(248, 240, 240, .86) !important;
  box-shadow: none !important;
}

html body #loginFormModal .fatal-login-actions .fatal-login-cancel:hover {
  border-color: rgba(248, 240, 240, .34) !important;
  background: rgba(248, 240, 240, .1) !important;
  color: #FFFFFF !important;
}

@media (max-width: 575.98px) {
  html body #alertAdult .modal-footer {
    flex-direction: column !important;
  }

  html body #alertAdult .fatal-adult-exit,
  html body #alertAdult #btnAlertAdult {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #loginFormModal .fatal-login-actions {
    gap: 8px !important;
  }

  html body #loginFormModal .fatal-login-actions > .btn {
    min-height: 44px !important;
    padding: 11px 10px !important;
    font-size: 11px !important;
  }

  html body .showBanner {
    align-items: stretch !important;
    text-align: center !important;
  }

  html body .showBanner #close-banner {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

html body .fatal-story-feed-nav.is-previous,
html body .fatal-story-feed-nav.is-next {
  border: none !important;
}

html body .fatal-story-feed-user {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .fatal-story-feed-inline-close,
html body .fatal-story-feed-actions button,
html body .fatal-story-feed-actions .btn,
html body .fatal-story-feed-actions a {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}