/* ══════════════════════════════════════════════════════════
   SOYTUFAN — MOBILE-FIRST UX SYSTEM v3
   Every single element optimized for touch + small screens
══════════════════════════════════════════════════════════ */

/* ── Base: Mobile First ── */
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans','Open Sans',system-ui,sans-serif!important;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%!important}
::selection{background:rgba(255,23,102,.12)}
img{-webkit-user-drag:none}

/* ── Touch targets: min 44px only on mobile ── */
@media(max-width:599px){
  .btn,.nav-link,.dropdown-item,.list-group-item,.form-control,input,select,textarea,a.nav-link{min-height:44px!important}
}

/* ══════════════════════════════════════════════
   NUCLEAR DARK TEXT — Every element forced dark
   ══════════════════════════════════════════════ */

/* GLOBAL: kill -webkit-text-fill-color:transparent everywhere except buttons and gradient text */
*{-webkit-text-fill-color:initial!important}

/* BASE: All body text DARK */
body,p,span,div,a,li,td,th,label,small,.small,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,
.text-muted,.text-bold,.font-weight-bold,strong,b,
.list-group-item,.media-body,.card-body,
.modal-body,.modal-title,.modal-header,
.subscription-holder,.subscription-holder *,
.label-more,.label-less,
.contact-box,.contact-box *,
.conversations-wrapper *,.conversation-content *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important
}

/* HEADINGS: Extra bold dark */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.modal-title,.font-weight-bold,.text-bold,strong,b{
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important
}

/* SECONDARY TEXT: slightly lighter but still readable */
.text-muted,small,.small,.text-secondary{
  color:#334155!important;
  -webkit-text-fill-color:#334155!important
}

/* MODALS: Everything inside dark */
.modal-content,.modal-content *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important
}
.modal-content .btn,.modal-content .btn *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.modal-content .btn-outline-primary,.modal-content .btn-outline-primary *{color:#FF1766!important;-webkit-text-fill-color:#FF1766!important}
.modal-content .close,.modal-content .close *{color:#64748B!important;-webkit-text-fill-color:#64748B!important}

/* SUBSCRIPTION SECTION: labels, bundles, tips */
.subscription-holder h6{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;font-size:.85rem!important}
.subscription-holder small,.subscription-holder .label-more,.subscription-holder .label-less{color:#334155!important;-webkit-text-fill-color:#334155!important;font-size:.82rem!important}
.subscription-bundles,.subscription-bundles *{color:#111827!important;-webkit-text-fill-color:#111827!important}

/* TABS: inactive=dark, active=pink */
.nav-pills .nav-link,.nav-tabs .nav-link,.inline-border-tabs .nav-link{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.nav-pills .nav-link.active,.nav-tabs .nav-link.active,.inline-border-tabs .nav-link.active{color:#FF1766!important;-webkit-text-fill-color:#FF1766!important}

/* BUTTONS: white text on colored bg */
.btn,.btn *,.btn-primary,.btn-primary *,.bg-gradient-primary,.bg-gradient-primary *,.cta-btn,.cta-btn *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.btn-outline-primary,.btn-outline-primary *{color:#FF1766!important;-webkit-text-fill-color:#FF1766!important}
.btn-light,.btn-light *,.btn-link,.btn-link *{color:#111827!important;-webkit-text-fill-color:#111827!important}

/* GRADIENT TEXT: only .hg on homepage */
.hg{background:linear-gradient(135deg,#FF1766,#FF922A)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
.text-gradient{background:linear-gradient(135deg,#FF1766,#FF4D8A)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* SIDEBAR: white text on dark bg */
.side-menu,.side-menu *,.side-menu .nav-link{color:rgba(255,255,255,.7)!important;-webkit-text-fill-color:rgba(255,255,255,.7)!important}
.side-menu .nav-link.active,.side-menu .nav-link.active *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* BADGES: preserve their colors */
.badge{-webkit-text-fill-color:initial!important;color:initial!important}
.badge-ai,.badge-verified-id{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* HERO/PHONE: white text (homepage only elements) */
.phone-overlay,.phone-overlay *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* FOOTER: dark text on light bg (internal pages footer is light) */
footer,footer *,.footer,.footer *,.greycontainer,.greycontainer *,.blackcontainer,.blackcontainer *,.copyRightInfo,.copyRightInfo *{color:#475569!important;-webkit-text-fill-color:#475569!important}
footer a,.footer a,.copyRightInfo a{color:#334155!important;-webkit-text-fill-color:#334155!important}
footer a:hover,.footer a:hover{color:#FF1766!important;-webkit-text-fill-color:#FF1766!important}
footer svg,.footer svg{fill:#64748B!important}
.footer-social-links .ionicon{fill:#64748B!important}

/* NAVBAR top: white text */
.navbar,.navbar *{-webkit-text-fill-color:initial!important}

/* DROPDOWN: dark text */
.dropdown-menu,.dropdown-menu *,.dropdown-item{color:#111827!important;-webkit-text-fill-color:#111827!important}

/* STICKY CTA bar: white text */
.hStk,.hStk *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* TOAST: preserve */
.toast,.toast *{-webkit-text-fill-color:initial!important}

/* ── Sidebar ── */
.main-wrapper>[style*="rgb(255,23,102)"]{min-height:100vh!important}
.side-menu .nav-link{border-radius:10px!important;margin-bottom:3px!important;padding:10px 14px!important;transition:all .2s!important}
.side-menu .nav-link:hover{background:rgba(255,255,255,.12)!important}
.side-menu .side-menu-label{font-weight:600!important;font-size:.88rem!important}

/* ── Buttons: COMPACT ── */
.btn{border-radius:8px!important;font-weight:600!important;transition:all .2s!important;font-family:inherit!important;padding:7px 14px!important;font-size:.82rem!important}
.btn-sm{padding:5px 10px!important;font-size:.75rem!important}
.btn-lg{padding:10px 20px!important;font-size:.88rem!important}
.btn:active{transform:scale(.97)!important}
.btn-primary,.bg-gradient-primary{background:linear-gradient(135deg,#FF1766,#FF4D8A)!important;border:none!important;box-shadow:0 1px 4px rgba(255,23,102,.15)!important;color:#fff!important}
.btn-outline-primary{border:1.5px solid #FF1766!important;color:#FF1766!important;background:transparent!important}
.text-primary,a.text-primary{color:#FF1766!important}

/* ── Forms: COMPACT ── */
.form-control{border-radius:8px!important;border:1.5px solid #E2E8F0!important;padding:7px 12px!important;font-size:14px!important;transition:all .2s!important;background:#FAFBFC!important;-webkit-appearance:none!important}
.form-control:focus{border-color:#FF1766!important;box-shadow:0 0 0 2px rgba(255,23,102,.06)!important;background:#fff!important}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;padding-right:30px!important}
.custom-control-input:checked~.custom-control-label::before{background-color:#FF1766!important;border-color:#FF1766!important}
label{font-weight:600!important;font-size:.78rem!important;color:#334155!important}

/* ── Cards: COMPACT ── */
.card{border-radius:10px!important;border:1px solid #F1F5F9!important;box-shadow:0 1px 2px rgba(0,0,0,.03)!important;transition:all .2s!important;overflow:hidden!important}
.card-header{background:#FAFBFC!important;border-bottom:1px solid #F1F5F9!important;padding:10px 14px!important}
.card-body{padding:12px!important}

/* ── Nav Pills/Tabs: COMPACT ── */
.nav-pills,.nav-tabs,.inline-border-tabs .nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;gap:2px!important;padding:3px!important;background:#F8FAFC!important;border-radius:10px!important;border:1px solid #F1F5F9!important}
.nav-pills::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar,.inline-border-tabs .nav::-webkit-scrollbar{display:none!important}
.nav-pills .nav-link,.nav-tabs .nav-link,.inline-border-tabs .nav-link{border-radius:7px!important;font-weight:600!important;font-size:.78rem!important;padding:6px 14px!important;white-space:nowrap!important;flex-shrink:0!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;background:transparent!important;border:none!important;transition:all .2s!important}
.nav-pills .nav-link.active,.nav-tabs .nav-link.active,.inline-border-tabs .nav-link.active{background:#fff!important;color:#FF1766!important;-webkit-text-fill-color:#FF1766!important;font-weight:700!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important}

/* ── Profile: COMPACT ── */
.avatar-holder img,.rounded-circle{border:2px solid #fff!important;box-shadow:0 1px 4px rgba(0,0,0,.08)!important}

/* ── Posts: COMPACT ── */
.post-box{border-radius:10px!important;border:1px solid #F1F5F9!important;margin-bottom:8px!important;background:#fff!important}
.post-box .card-body{padding:10px 12px!important}
.post-box .post-comment-area{padding:6px 10px!important;background:#FAFBFC!important;border-top:1px solid #F1F5F9!important}
.feed-box{box-shadow:none!important;background:transparent!important;border-radius:0!important}
.post-box .post-header{padding:8px 12px!important}
.post-box .post-header .avatar,.post-box .post-header img{width:36px!important;height:36px!important}
.post-box .post-actions-area{padding:4px 10px!important}

/* ── Checkout ── */
.checkout-payment-provider{border-radius:10px!important;border:1.5px solid #E2E8F0!important;padding:10px!important;transition:all .2s!important}
.checkout-payment-provider:hover,.checkout-payment-provider.selected{border-color:#FF1766!important}

/* ── Modals: COMPACT ── */
.modal-content{border-radius:14px!important;border:none!important;box-shadow:0 12px 40px rgba(0,0,0,.12)!important}
.modal-header{border-bottom:1px solid #F1F5F9!important;padding:12px 16px!important}
.modal-body{padding:14px 16px!important}
.modal-footer{border-top:1px solid #F1F5F9!important;padding:10px 16px!important}
.modal-title{font-size:.92rem!important}

/* ── Badges ── */
.badge{border-radius:5px!important;font-weight:700!important;font-size:.65rem!important;padding:2px 6px!important}
.badge-primary,.bg-primary:not(.btn):not(.bg-gradient-primary){background:#FF1766!important}

/* ── Alerts ── */
.alert{border-radius:8px!important;border:none!important;font-size:.8rem!important;padding:10px 14px!important}
.alert-success{background:#ECFDF5!important;color:#065F46!important}
.alert-danger{background:#FEF2F2!important;color:#991B1B!important}

/* ── Tables ── */
table thead th{background:#F8FAFC!important;font-weight:700!important;font-size:.7rem!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#64748B!important;padding:8px 10px!important}
table td{padding:8px 10px!important;font-size:.82rem!important}

/* ── Dropdowns: COMPACT ── */
.dropdown-menu{border-radius:10px!important;border:1px solid #F1F5F9!important;box-shadow:0 6px 20px rgba(0,0,0,.1)!important;padding:4px!important}
.dropdown-item{border-radius:6px!important;padding:7px 12px!important;font-size:.82rem!important}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:2px}

/* ── Footer ── */
footer.footer,.greycontainer,.blackcontainer{background:#F8FAFC!important}

/* ── Search: COMPACT ── */
.search-box-wrapper input{border-radius:10px!important;font-size:14px!important}
.user-search-box-item{border-radius:10px!important;padding:8px!important}
.user-search-box-item .avatar,.user-search-box-item img{width:42px!important;height:42px!important}

/* ── Notifications: COMPACT ── */
.notification-item{border-radius:8px!important;padding:8px 10px!important}
.notification-item .avatar{width:36px!important;height:36px!important}

/* ── Messenger: COMPACT ── */
.message-bubble{border-radius:12px!important;max-width:80%!important;padding:8px 12px!important;font-size:.84rem!important}
.message-bubble.sent{border-radius:12px 12px 3px 12px!important}
.conversations-wrapper .contact-box{padding:8px 12px!important}

/* ── Lists: COMPACT ── */
.list-group-item{padding:10px 14px!important;font-size:.84rem!important}

/* ── Focus ── */
:focus-visible{outline:2px solid #FF1766!important;outline-offset:2px!important}

/* ── Subscription section: COMPACT ── */
.subscription-holder{padding:14px!important;margin:10px!important}
.subscription-holder h6{font-size:.75rem!important;margin-bottom:8px!important}
.subscription-holder .btn{padding:8px 16px!important;font-size:.84rem!important}

/* ── Profile sidebar: COMPACT ── */
.profile-section-divider{margin:8px 0!important}
.p-pill{width:38px!important;height:38px!important;font-size:.82rem!important}
@media(max-width:599px){.p-pill{width:44px!important;height:44px!important}}

/* ══════════════════════════════════════
   MOBILE BREAKPOINTS — EXHAUSTIVE
══════════════════════════════════════ */

/* === SMALL PHONES (< 380px) === */
@media(max-width:379px){
  body{font-size:13px!important}
  .container,.container-fluid{padding-left:8px!important;padding-right:8px!important}
  h1,.h1{font-size:1.1rem!important}h2,.h2{font-size:1rem!important}h3,.h3{font-size:.9rem!important}
  .card-body{padding:8px!important}
  .post-box{border-radius:0!important;border-left:none!important;border-right:none!important;margin:0 -8px 4px!important}
  .profile-cover-bg{height:90px!important;border-radius:0!important}
  .avatar-holder,.avatar-holder img{width:64px!important;height:64px!important}
  .btn{font-size:.76rem!important;padding:6px 10px!important}
  .nav-pills .nav-link,.inline-border-tabs .nav-link{font-size:.7rem!important;padding:5px 8px!important}
  .form-control{padding:6px 10px!important;font-size:13px!important}
  .modal-content{border-radius:14px 14px 0 0!important;max-height:90vh!important}
  .modal-dialog{margin:auto 0 0!important;max-width:100%!important}
  .message-bubble{max-width:88%!important;padding:6px 10px!important;font-size:.8rem!important}
}

/* === PHONES (380-599px) === */
@media(max-width:599px){
  .container,.container-fluid{padding-left:10px!important;padding-right:10px!important}
  .post-box{border-radius:0!important;border-left:none!important;border-right:none!important;margin-left:-10px!important;margin-right:-10px!important}
  .profile-cover-bg{height:110px!important;border-radius:0!important}
  .avatar-holder,.avatar-holder img{width:72px!important;height:72px!important}
  .modal-content{border-radius:14px 14px 0 0!important}
  .modal-dialog{margin:auto 0 0!important;max-width:100%!important}
  .btn-block-mobile{width:100%!important;text-align:center!important}
  .messenger-chat-area{height:calc(100dvh - 110px)!important}
  .settings-menu .list-group{flex-direction:row!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}
  .settings-menu .list-group::-webkit-scrollbar{display:none!important}
  .settings-menu .list-group-item{white-space:nowrap!important;flex-shrink:0!important;border-radius:6px!important;font-size:.78rem!important;padding:6px 12px!important}
  table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .subscription-holder{margin:8px!important;padding:12px!important}
}

/* === TABLETS (600-899px) === */
@media(min-width:600px) and (max-width:899px){
  .profile-cover-bg{height:150px!important}
  .avatar-holder,.avatar-holder img{width:90px!important;height:90px!important}
  .modal-dialog{max-width:440px!important}
}

/* === DESKTOP (900px+) === */
@media(min-width:900px){
  .profile-cover-bg{height:180px!important;border-radius:0 0 12px 12px!important}
  .avatar-holder,.avatar-holder img{width:100px!important;height:100px!important}
}

/* === LANDSCAPE PHONES === */
@media(max-width:899px) and (orientation:landscape){
  .profile-cover-bg{height:120px!important}
  .modal-content{max-height:85vh!important;overflow-y:auto!important}
}

/* === SAFE AREAS (iPhone notch/dynamic island) === */
@supports(padding:max(0px)){
  .feed-mobile-search{padding-top:max(6px,env(safe-area-inset-top))!important}
  .modal-content{padding-bottom:env(safe-area-inset-bottom)!important}
  footer.footer{padding-bottom:max(16px,env(safe-area-inset-bottom))!important}
}

/* === DARK MODE SUPPORT === */
@media(prefers-color-scheme:dark){
  .card{border-color:rgba(255,255,255,.06)!important}
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* === HIGH CONTRAST === */
@media(prefers-contrast:high){
  .btn-primary,.bg-gradient-primary{background:#FF1766!important}
  .form-control{border-width:2px!important}
}

/* === PRINT === */
@media print{
  .sidebar,.navbar,.footer,.sticky,.stf-sticky,.hstk{display:none!important}
  .post-box{break-inside:avoid!important}
}

/* Suggestion cards mobile */
.suggestion-card,.swiper-slide .card{border-radius:14px!important;overflow:hidden!important}
.suggestion-card .card-body,.swiper-slide .card-body{padding:12px!important}
.suggestion-card img[style*="height"],.swiper-slide img[style*="height"]{border-radius:10px 10px 0 0!important}

/* Subscription button on profile */
.subscription-wrapper .btn{border-radius:12px!important;font-weight:700!important;padding:10px 16px!important}

/* Profile mobile improvements */
@media(max-width:599px){
  .suggestion-card,.swiper-slide .card{margin-bottom:8px!important}
  .profile-cover-bg+.container{padding:0 12px!important}
  .subscription-wrapper{padding:0 12px!important}
}