/* SECRETIK — unified mobile responsive layer
   Loaded after page styles so mobile rules win without changing desktop geometry. */
*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden}
body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}

@media (max-width: 700px){
  :root{--secretik-mobile-gutter:12px}
  body{font-size:14px;padding-bottom:env(safe-area-inset-bottom)}
  .container{width:calc(100% - 24px)!important;max-width:none!important}

  /* Public header */
  header{height:auto!important;min-height:64px!important}
  header .header-inner,
  .header-inner{width:calc(100% - 24px)!important;min-height:64px;height:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 0!important}
  .site-logo{max-width:150px;height:auto}
  header nav{display:none!important}
  .header-actions{display:flex!important;align-items:center!important;gap:7px!important;min-width:0}
  .header-actions a{white-space:nowrap!important}
  .login{padding:9px 10px!important;font-size:12px!important}
  .add-button{padding:9px 10px!important;font-size:12px!important}

  /* Hero */
  .hero{min-height:500px!important;height:auto!important}
  .hero-photo{background-position:center top!important}
  .hero .container{min-height:500px!important}
  .hero-content{padding:52px 0 38px!important;max-width:100%!important}
  .hero h1{font-size:clamp(34px,10vw,48px)!important;line-height:1.02!important}
  .advantages{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:22px!important}
  .advantage{font-size:12px!important;min-width:0!important;padding:10px!important}
  .advantage-logo{width:24px!important;height:24px!important}

  /* Public sections / headings */
  section{scroll-margin-top:72px}
  .section-title{gap:10px!important;align-items:flex-end!important}
  .section-title h2{font-size:24px!important;line-height:1.1!important}
  .section-title>a{font-size:12px!important;white-space:nowrap}

  /* Cities: horizontal touch carousel, no page overflow */
  .cities{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important}
  .cities::-webkit-scrollbar{display:none!important}
  .cities-track{display:flex!important;gap:10px!important;width:max-content!important}
  .city{width:168px!important;min-width:168px!important;height:214px!important}
  .city-name{font-size:15px!important}
  .city-count{font-size:11px!important}

  /* Public profile grids */
  .profiles,.city-profiles-grid,.massage-profile-grid,.salon-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important;gap:10px!important;width:100%!important}
  .profile.new-profile-card,.profile.vip-profile-card,
  .city-profiles-grid>a.new-profile-card,.massage-profile-grid>a.new-profile-card,.salon-grid>a.new-profile-card,.vip-carousel .profiles-track>a.vip-profile-card{
    width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:250/340!important;flex:0 0 auto!important;border-radius:12px!important
  }
  .compact-head{height:58px!important;padding:8px 9px!important}
  .compact-head strong{font-size:12px!important}
  .compact-details{padding:38px 10px 10px!important;font-size:11px!important}
  .compact-details *{max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .vip-carousel{width:100%!important;overflow:hidden!important}
  .vip-carousel .profiles-track{gap:10px!important}
  .vip-carousel .profiles-track>a.vip-profile-card{width:160px!important;min-width:160px!important;height:218px!important;aspect-ratio:auto!important}

  /* Pagination */
  .profiles-pagination{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;padding:16px 12px!important}
  .profiles-pagination a{min-width:36px!important;height:36px!important;padding:0 9px!important;display:grid!important;place-items:center!important}

  /* Rules / ads / footer */
  .features{grid-template-columns:1fr!important;gap:10px!important}
  .feature{padding:13px!important}
  .ads-row{grid-template-columns:1fr!important;gap:10px!important}
  footer{margin-top:28px!important}
  .footer-inner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:22px 0!important}

  /* Public profile / maps pages */
  .profile-page,.profile-layout,.profile-main,.profile-sidebar{width:100%!important;max-width:none!important}
  .profile-layout{display:flex!important;flex-direction:column!important;gap:14px!important}
  .profile-main{min-width:0!important}
  .profile-sidebar{position:static!important}
  .profile-gallery,.photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .profile-gallery img,.photo-gallery img{height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important}
  .map-container,.map,.map-wrap{height:55vh!important;min-height:320px!important;max-height:520px!important}

  /* Modals common */
  .overlay{padding:8px!important;align-items:center!important}
  .modal{width:100%!important;max-width:none!important;max-height:94vh!important;border-radius:14px!important}
  .modal-head{padding:13px 14px!important;gap:10px!important}
  .modal-head h2{font-size:19px!important;line-height:1.2!important;min-width:0!important;overflow-wrap:anywhere!important}
  .modal-body{padding:14px!important}
  .modal-foot{padding:10px 12px!important;gap:8px!important;flex-wrap:wrap!important}
  .modal-foot .btn{min-height:40px!important}

  /* Admin */
  .main{padding:24px 0 50px!important}
  .page-title{font-size:34px!important;line-height:1.05!important}
  .page-sub{font-size:13px!important;line-height:1.4!important}
  .head-inner{width:calc(100% - 24px)!important}
  .top-nav{width:100%!important;overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .top-nav::-webkit-scrollbar{display:none!important}
  .nav-item{flex:0 0 auto!important;white-space:nowrap!important;padding:9px 10px!important;font-size:12px!important}
  .head-right{min-width:0!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .stat{padding:12px!important;min-width:0!important}
  .stat b{font-size:21px!important}
  .toolbar{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin:20px 0 14px!important}
  .tabs{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;padding-bottom:2px!important}
  .tabs::-webkit-scrollbar{display:none!important}
  .tab{flex:0 0 auto!important;white-space:nowrap!important}
  .search{width:100%!important}
  .card{grid-template-columns:1fr!important}
  .card img.photo{width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important}
  .actions{grid-column:auto!important;max-width:none!important;width:100%!important;justify-content:stretch!important;flex-wrap:wrap!important}
  .actions .btn{flex:1 1 140px!important}
  .preview{grid-template-columns:1fr!important;gap:14px!important}
  .preview img{max-width:360px!important;margin:0 auto!important}
  .preview-grid,.preview-bottom-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .full{grid-column:auto!important}
  .vip-options{grid-template-columns:1fr 1fr!important}
  .service-checks{grid-template-columns:1fr 1fr!important}
  .edit-photo-grid{grid-template-columns:1fr 1fr!important}
  .edit-photo{height:150px!important}
  .edit-modal{width:100%!important;max-height:94vh!important}
  .edit-modal .modal-body{padding:12px!important}
  .edit-modal .modal-foot .btn{flex:1 1 140px!important;min-height:40px!important}

  /* Admin preview */
  .preview-modal .preview-overview{grid-template-columns:1fr!important}
  .preview-modal .site-card-preview{width:min(100%,360px)!important;margin:0 auto!important;height:min(500px,125vw)!important}
  .preview-modal .preview-info,.preview-modal .preview-bottom-grid{grid-template-columns:1fr!important}
  .preview-modal .gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .preview-modal .gallery img{height:135px!important}
  .preview-modal .modal-foot{justify-content:center!important}
  .preview-modal .modal-foot .btn{flex:0 1 170px!important}

  /* Admin messages */
  .messages-layout,.chat-layout{grid-template-columns:1fr!important;display:grid!important}
  .dialogs,.chat-list{max-height:260px!important;overflow:auto!important}
  .chat,.chat-panel{min-width:0!important}
  .chat-input,.message-compose{grid-template-columns:1fr auto!important}
  .chat-input input,.message-compose input{min-width:0!important}

  /* Auth / cabinet */
  .auth-shell,.auth-container,.login-card,.register-card,.settings-card,.support-card{width:calc(100% - 24px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .auth-grid,.settings-grid{grid-template-columns:1fr!important}
  .auth-actions{flex-direction:column!important}
  .auth-actions>*{width:100%!important}
  .cabinet-top-nav{width:100%!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .cabinet-top-nav::-webkit-scrollbar{display:none!important}

  /* Tables / long values */
  table{width:100%!important}
  .table-wrap,.data-table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  td,th{overflow-wrap:anywhere!important;word-break:break-word!important}

  /* Prevent accidental horizontal overflow from long user content */
  h1,h2,h3,h4,p,a,span,label,small,strong,b,div{overflow-wrap:anywhere}
}

@media (max-width: 420px){
  .header-actions .add-button{display:none!important}
  .site-logo{max-width:138px}
  .hero-content{padding-top:42px!important}
  .advantages{grid-template-columns:1fr!important}
  .profiles,.city-profiles-grid,.massage-profile-grid,.salon-grid{gap:8px!important}
  .profile.new-profile-card,.profile.vip-profile-card,
  .city-profiles-grid>a.new-profile-card,.massage-profile-grid>a.new-profile-card,.salon-grid>a.new-profile-card{border-radius:10px!important}
  .compact-head{padding:7px!important}
  .compact-head strong{font-size:11px!important}
  .stats{gap:7px!important}
  .stat{padding:10px!important}
  .stat span{font-size:11px!important}
  .stat b{font-size:19px!important}
  .page-title{font-size:30px!important}
  .vip-options{grid-template-columns:1fr!important}
  .service-checks{grid-template-columns:1fr!important}
  .edit-photo-grid{grid-template-columns:1fr 1fr!important}
  .edit-photo{height:135px!important}
  .preview-modal .site-card-preview{height:470px!important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* MOBILE V2 — 3-column cards + native touch scrolling */
@media (max-width:700px){
  /* Public profile cards: three compact cards in a row */
  #new-profiles .profiles,
  #profiles .profiles,
  .profiles,
  .city-profiles-grid,
  .massage-profile-grid,
  .salon-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    justify-content:stretch !important;
    overflow:visible !important;
  }

  #new-profiles .new-profile-card,
  #profiles .profile-list-card,
  #profiles .new-profile-card,
  .profile.new-profile-card,
  .profile.vip-profile-card,
  .city-profiles-grid>a.new-profile-card,
  .massage-profile-grid>a.new-profile-card,
  .salon-grid>a.new-profile-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:250 / 340 !important;
    flex:none !important;
  }

  /* Keep text readable on compact cards without overflow */
  .new-profile-card .compact-head,
  .vip-profile-card .compact-head,
  #profiles .profile-list-card .profile-header{
    height:44px !important;
    padding:6px 7px !important;
  }
  .new-profile-card .compact-head strong,
  .vip-profile-card .compact-head strong,
  #profiles .profile-list-card .profile-name{
    font-size:10px !important;
    line-height:1.1 !important;
  }
  .compact-vip,
  #profiles .profile-list-card .profile-vip{
    top:6px !important;
    left:6px !important;
    padding:3px 5px !important;
    font-size:7px !important;
  }

  /* Cities: exactly three visible cards, native horizontal swipe */
  .cities{
    width:100% !important;
    max-width:100% !important;
    margin-right:0 !important;
    padding:1px 0 8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    touch-action:pan-x !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-behavior:auto !important;
    scroll-snap-type:x proximity !important;
    overscroll-behavior-x:contain !important;
    cursor:default !important;
  }
  .cities-track{
    gap:8px !important;
    width:max-content !important;
  }
  .city{
    flex:0 0 calc((100vw - 40px) / 3) !important;
    width:calc((100vw - 40px) / 3) !important;
    min-width:calc((100vw - 40px) / 3) !important;
    height:125px !important;
    border-radius:9px !important;
    scroll-snap-align:start !important;
  }
  .city-info{left:7px !important;bottom:7px !important}
  .city-name{font-size:11px !important;margin-bottom:2px !important}
  .city-count{font-size:8px !important}
}

@media (max-width:420px){
  #new-profiles .profiles,
  #profiles .profiles,
  .profiles,
  .city-profiles-grid,
  .massage-profile-grid,
  .salon-grid{gap:6px !important}

  #new-profiles .new-profile-card,
  #profiles .profile-list-card,
  #profiles .new-profile-card,
  .profile.new-profile-card,
  .profile.vip-profile-card,
  .city-profiles-grid>a.new-profile-card,
  .massage-profile-grid>a.new-profile-card,
  .salon-grid>a.new-profile-card{aspect-ratio:250 / 340 !important}

  .city{
    flex-basis:calc((100vw - 30px) / 3) !important;
    width:calc((100vw - 30px) / 3) !important;
    min-width:calc((100vw - 30px) / 3) !important;
    height:115px !important;
  }
}

/* SECRETIK MOBILE V206 — unified two-card profile layout across the entire public site */
@media (max-width:700px){
  /* Every public profile listing: exactly two equal cards per row. */
  html body .profiles,
  html body .city-profiles-grid,
  html body .massage-profile-grid,
  html body .salon-grid,
  html body #new-profiles .profiles,
  html body #profiles .profiles{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }

  /* Same compact card geometry everywhere. */
  html body .profile.new-profile-card,
  html body .profile.vip-profile-card,
  html body .city-profiles-grid > a.new-profile-card,
  html body .massage-profile-grid > a.new-profile-card,
  html body .salon-grid > a.new-profile-card,
  html body #new-profiles .profiles > a,
  html body #profiles .profiles > a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:250 / 340 !important;
    flex:none !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  /* VIP remains a horizontal carousel, but its cards use exactly the same
     two-column card size as the normal profile grids. */
  html body .vip-carousel{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x !important;
  }
  html body .vip-carousel::-webkit-scrollbar{display:none !important}
  html body .vip-carousel .profiles-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    gap:10px !important;
  }
  html body .vip-carousel .profiles-track > a.vip-profile-card{
    flex:0 0 min(250px, calc((100vw - 34px) / 2)) !important;
    width:min(250px, calc((100vw - 34px) / 2)) !important;
    min-width:min(250px, calc((100vw - 34px) / 2)) !important;
    max-width:min(250px, calc((100vw - 34px) / 2)) !important;
    height:auto !important;
    aspect-ratio:250 / 340 !important;
    scroll-snap-align:start !important;
  }

  /* Keep the requested home pagination: 16 profiles per page = 2 columns × 8 rows. */
  html body #profiles .profiles-pagination,
  html body .profiles-pagination{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
}

/* V209 shared fallback: two equal mobile columns and non-touch VIP viewport. */
@media (max-width:700px){
  html body .profiles,html body .city-profiles-grid,html body .massage-profile-grid,html body .salon-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0!important;width:100%!important;}
  html body .vip-carousel{overflow:hidden!important;overflow-x:hidden!important;touch-action:none!important;min-width:0!important;}
  html body .vip-carousel .profiles-track>a.vip-profile-card{flex:0 0 calc((100vw - 44px)/2)!important;width:calc((100vw - 44px)/2)!important;min-width:calc((100vw - 44px)/2)!important;max-width:calc((100vw - 44px)/2)!important;aspect-ratio:250/340!important;}
}