/* MANTA APPARELS V76 — adaptive layout for narrow, standard, tablet and wide mobile screens.
   Additive CSS only. No API, routes, payment logic, or business rules are changed. */

:root{
  --manta-page-gutter:clamp(10px,2.8vw,24px);
  --manta-card-gap:clamp(8px,2vw,14px);
  --manta-control-height:clamp(38px,10vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;min-width:280px;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app{width:100%;max-width:100%;min-width:0;margin-inline:auto;overflow-x:clip}
#app img,#app svg,#app video,#app canvas{max-width:100%}
#app :is(button,input,select,textarea){max-width:100%;min-width:0}
#app .page{
  width:100%;max-width:1180px;min-width:0;margin-inline:auto;
  padding-left:var(--manta-page-gutter);padding-right:var(--manta-page-gutter);
}
#app .page :is(section,article,aside,form,fieldset,header,footer,main){min-width:0;max-width:100%}
#app .page :is(.card,.panel,.section,.hero,.stat,.mini-card,.menu-tile,.overview-card){min-width:0;max-width:100%}
#app .page :is(h1,h2,h3,h4,p,small,label,span,b,strong,a,li){max-width:100%;overflow-wrap:anywhere}
#app .page :is(.grid2,.grid3,.overview-grid,.quick-actions,.menu-grid,.profile-reference-grid,.profile-reference-actions,.profile-reference-metrics,.package-grid,.package-list,.team-grid,.support-link-list,.support-channel-list-v52){min-width:0}
#app .page :is(.grid2,.grid3,.overview-grid,.quick-actions,.menu-grid,.profile-reference-grid,.profile-reference-actions,.profile-reference-metrics)>*{min-width:0;max-width:100%}
#app .page :is(.btn,button[type=submit],button.primary,.home-package-details,.package-buy){min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#app .page :is(input,select,textarea){width:100%;max-width:100%;min-width:0}
#app .page :is(.table-wrap,.table-responsive,.table-scroll,.history-table-wrap,.responsive-table){width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
#app .page :is(pre,code){max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

/* Keep the shared top bar from squeezing its brand and action controls together. */
#app .top.home-top-reference{
  display:flex;align-items:center;gap:clamp(5px,1.3vw,10px);
  width:100%;max-width:100%;min-width:0;padding-inline:clamp(8px,2.5vw,18px);
}
#app .top.home-top-reference .profile-top-menu{flex:0 0 clamp(32px,9vw,40px);width:clamp(32px,9vw,40px);min-width:0;height:clamp(34px,9.5vw,42px)}
#app .top.home-top-reference .brand-wrap{flex:1 1 118px;width:auto;min-width:0;max-width:clamp(100px,34vw,190px);height:clamp(38px,11vw,48px)}
#app .top.home-top-reference .brandmark{display:block;width:100%;height:100%;min-width:0;max-width:100%;object-fit:contain}
#app .top.home-top-reference .top-actions{display:flex;flex:0 1 auto;align-items:center;justify-content:flex-end;gap:clamp(4px,1.2vw,8px);min-width:0;margin-left:auto}
#app .top.home-top-reference .lang-toggle{flex:0 1 auto;min-width:0;max-width:clamp(44px,18vw,90px);padding-inline:clamp(5px,1.5vw,11px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .top.home-top-reference .icon{flex:0 0 clamp(32px,9vw,40px);width:clamp(32px,9vw,40px);min-width:0;height:clamp(34px,9.5vw,42px);padding:0}
#app .top.home-top-reference .notification-badge{max-width:calc(100% - 2px);font-size:9px}

/* The bottom navigation stays in five equal touch targets at every phone width. */
#app .bottom.home-bottom-nav{
  width:100%;max-width:980px;grid-template-columns:repeat(5,minmax(0,1fr));
  padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right));
  padding-bottom:calc(7px + env(safe-area-inset-bottom));
}
#app .bottom.home-bottom-nav .nav-item{min-width:0;max-width:100%;padding-inline:1px;overflow:visible}
#app .bottom.home-bottom-nav .nav-item small{display:block;max-width:100%;font-size:clamp(8px,2.5vw,11px);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .bottom.home-bottom-nav .nav-item .nav-icon{max-width:100%}

/* Compact sizing and responsive wrapping for regular phones. */
@media(max-width:640px){
  #app .page{padding-top:clamp(10px,2.8vw,16px);padding-bottom:calc(108px + env(safe-area-inset-bottom))}
  #app .page :is(h1){font-size:clamp(18px,5vw,25px)!important;line-height:1.2}
  #app .page :is(h2){font-size:clamp(15px,4.1vw,20px)!important;line-height:1.25}
  #app .page :is(h3){font-size:clamp(13px,3.6vw,17px)!important;line-height:1.28}
  #app .page :is(p,li){font-size:clamp(11px,3.1vw,14px)}
  #app .page :is(.card,.mini-card,.panel){padding:clamp(10px,2.8vw,15px)}
  #app .page :is(.section-head,.notification-head,.gift-v64-history>header,.task-v66-directory-head){display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  #app .page :is(.section-head,.notification-head,.gift-v64-history>header,.task-v66-directory-head)>:first-child{min-width:0;flex:1 1 135px}
  #app .page :is(.row,.package-row,.profile-reference-identity,.profile-referral-strip,.profile-reference-actions,.profile-reference-services .profile-menu-heading){min-width:0}
  #app .page :is(.row,.package-row){gap:8px;flex-wrap:wrap}
  #app .page :is(.row)>:first-child{min-width:0;flex:1 1 120px}
  #app .page :is(.row)>:last-child{min-width:0;max-width:100%;overflow-wrap:anywhere}
  #app .page :is(.btn,button[type=submit],.home-package-details,.package-buy){min-height:var(--manta-control-height);padding:9px 12px;font-size:clamp(11px,3.1vw,14px);line-height:1.2}
  #app .page :is(.field input,.field select,.field textarea,input,select,textarea){font-size:16px}
  #app .page :is(.grid2,.grid3,.menu-grid){gap:var(--manta-card-gap)}
  #app .page :is(.table-wrap table,.table-responsive table,.table-scroll table,.history-table-wrap table,.responsive-table table){min-width:500px}
  #app .modal{padding:0!important;align-items:flex-end!important;overflow-y:auto!important}
  #app .modal .sheet{width:100%!important;max-width:560px!important;max-height:min(90dvh,760px)!important;padding:clamp(14px,3.8vw,20px)!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain}
  #app #toast{max-width:calc(100vw - 24px);width:max-content;white-space:normal;overflow-wrap:anywhere;text-align:center}

  /* Reduce decorative elements without changing the established Manta colour system. */
  #app .home-page{padding-left:clamp(9px,2.5vw,15px)!important;padding-right:clamp(9px,2.5vw,15px)!important}
  #app .home-page .quick-actions{gap:clamp(5px,1.5vw,9px)}
  #app .home-page .quick-action{min-height:clamp(78px,22vw,100px);padding:8px 3px;gap:5px;border-radius:clamp(13px,4vw,19px)}
  #app .home-page .quick-icon{width:clamp(30px,9vw,42px);height:clamp(30px,9vw,42px);font-size:clamp(18px,5.5vw,24px);border-radius:11px}
  #app .home-page .quick-action b{font-size:clamp(9px,2.8vw,11px);line-height:1.2}
  #app .home-page .overview-grid{gap:clamp(7px,2vw,10px)}
  #app .home-page .overview-card{min-height:104px;padding:clamp(9px,2.8vw,13px);border-radius:18px}
  #app .home-page .overview-label{gap:5px;font-size:clamp(9px,2.8vw,11px)}
  #app .home-page .overview-label i{width:25px;height:25px;flex-basis:25px;font-size:14px}
  #app .home-page .overview-card strong{font-size:clamp(15px,4.2vw,21px)}

  #app .profile-reference-page .profile-reference-cover{padding:clamp(12px,3vw,17px)!important;border-radius:22px!important}
  #app .profile-reference-page .profile-reference-identity{grid-template-columns:clamp(54px,16vw,72px) minmax(0,1fr) clamp(52px,16vw,82px)!important;gap:clamp(6px,1.8vw,10px)!important}
  #app .profile-reference-page .profile-reference-avatar{width:clamp(52px,15.5vw,70px)!important;height:clamp(52px,15.5vw,70px)!important}
  #app .profile-reference-page .profile-brand-slogan img{width:clamp(48px,15vw,78px)!important;height:clamp(44px,13vw,66px)!important}
  #app .profile-reference-page .profile-brand-slogan b{font-size:clamp(7px,2.2vw,10px)!important}
  #app .profile-reference-page .profile-reference-metrics{padding:8px 3px!important}
  #app .profile-reference-page .profile-reference-metric{gap:clamp(3px,1vw,6px)!important;padding:5px 3px!important}
  #app .profile-reference-page .profile-reference-metric .metric-icon{width:clamp(22px,6.8vw,32px)!important;height:clamp(22px,6.8vw,32px)!important;flex-basis:clamp(22px,6.8vw,32px)!important;font-size:clamp(13px,4vw,19px)!important}
  #app .profile-reference-page .profile-reference-metric small{font-size:clamp(8px,2.25vw,10px)!important;line-height:1.15!important}
  #app .profile-reference-page .profile-reference-metric b{font-size:clamp(9px,2.6vw,12px)!important;letter-spacing:-.2px!important}
  #app .profile-reference-page .profile-reference-actions{gap:8px!important}
  #app .profile-reference-page .profile-reference-actions .profile-action{min-height:76px!important;padding:10px 9px 10px 42px!important;border-radius:18px!important}
  #app .profile-reference-page .profile-reference-actions .profile-action>span{left:10px!important;font-size:25px!important}
  #app .profile-reference-page .profile-reference-actions .profile-action b{font-size:clamp(15px,4.2vw,20px)!important}
  #app .profile-reference-page .profile-reference-actions .profile-action small{font-size:clamp(9px,2.8vw,12px)!important}
  #app .profile-reference-page .profile-reference-grid{gap:8px!important}
  #app .profile-reference-page .profile-reference-grid .profile-menu-item{min-height:82px!important;padding:8px!important;border-radius:16px!important}
  #app .profile-reference-page .profile-reference-grid .profile-menu-icon{width:clamp(34px,10vw,46px)!important;height:clamp(34px,10vw,46px)!important;flex-basis:clamp(34px,10vw,46px)!important;font-size:clamp(19px,5vw,24px)!important}
}

/* Narrow phones: prioritize readable, separated controls over forcing two columns. */
@media(max-width:360px){
  #app .top.home-top-reference{gap:4px;padding-inline:7px}
  #app .top.home-top-reference .profile-top-menu{flex-basis:31px;width:31px;height:34px;font-size:20px}
  #app .top.home-top-reference .brand-wrap{flex:1 1 92px;max-width:108px;height:38px}
  #app .top.home-top-reference .lang-toggle{max-width:44px;padding-inline:4px;font-size:9px}
  #app .top.home-top-reference .icon{flex-basis:31px;width:31px;height:34px}
  #app .top.home-top-reference .top-actions{gap:3px}
  #app .bottom.home-bottom-nav{height:82px!important;min-height:82px!important;padding:5px 4px calc(6px + env(safe-area-inset-bottom))!important;gap:1px!important}
  #app .bottom.home-bottom-nav .nav-item{min-height:61px!important;gap:3px!important;padding:4px 0!important}
  #app .bottom.home-bottom-nav .nav-item .nav-icon{width:27px!important;height:26px!important}
  #app .bottom.home-bottom-nav .nav-item .nav-icon svg{width:23px!important;height:23px!important}
  #app .bottom.home-bottom-nav .nav-item small{font-size:9px!important}
  #app .bottom.home-bottom-nav .nav-center-item .nav-icon{width:55px!important;height:55px!important;flex-basis:55px!important;margin-top:-23px!important}
  #app .bottom.home-bottom-nav .nav-center-item .nav-icon svg{width:29px!important;height:29px!important}
  #app .page{padding-left:9px;padding-right:9px}
  #app .page :is(.grid2,.grid3,.menu-grid){gap:7px}
  #app .page .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .home-page .home-featured-grid{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  #app .home-page .home-featured-package{padding:10px!important}
  #app .home-page .home-featured-package .package-card-top{grid-template-columns:minmax(70px,.55fr) minmax(0,1fr)!important;gap:8px!important}
  #app .home-page .home-featured-package .package-image,#app .home-page .home-featured-package .package-image-fallback{height:clamp(82px,25vw,105px)!important}
  #app .profile-reference-page .profile-reference-identity{grid-template-columns:50px minmax(0,1fr) 49px!important;gap:5px!important}
  #app .profile-reference-page .profile-reference-avatar{width:48px!important;height:48px!important}
  #app .profile-reference-page .profile-brand-slogan img{width:47px!important;height:42px!important}
  #app .profile-reference-page .profile-reference-metric{flex-direction:column!important;justify-content:center!important;text-align:center!important;gap:3px!important}
  #app .profile-reference-page .profile-reference-metric>div{align-items:center!important;text-align:center!important}
  #app .profile-reference-page .profile-reference-metric small{font-size:8px!important}
  #app .profile-reference-page .profile-reference-metric b{font-size:9px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  #app .profile-reference-page .profile-referral-strip{flex-wrap:wrap!important;gap:7px!important}
}

/* Larger phones and tablets: add breathing room while keeping content aligned. */
@media(min-width:641px) and (max-width:900px){
  #app .page{padding-left:clamp(16px,3vw,26px);padding-right:clamp(16px,3vw,26px)}
  #app .top.home-top-reference{padding-inline:clamp(14px,3vw,24px)}
  #app .home-page .quick-actions{gap:12px}
  #app .home-page .quick-action{min-height:96px}
  #app .profile-reference-page .profile-reference-cover{padding:18px 20px!important}
}

/* Wide screens: readable measure, centered pages and balanced font scaling. */
@media(min-width:901px){
  #app .page{padding-left:clamp(24px,3vw,36px);padding-right:clamp(24px,3vw,36px)}
  #app .page :is(.card,.panel,.section){margin-bottom:clamp(10px,1.2vw,16px)}
  #app .top.home-top-reference{padding-inline:clamp(22px,3vw,34px)}
}

@media(orientation:landscape) and (max-height:500px) and (max-width:900px){
  #app .bottom.home-bottom-nav{height:68px!important;min-height:68px!important;padding-top:3px!important}
  #app .bottom.home-bottom-nav .nav-item{min-height:55px!important}
  #app .bottom.home-bottom-nav .nav-center-item .nav-icon{width:48px!important;height:48px!important;flex-basis:48px!important;margin-top:-15px!important}
  #app .page{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
}

@media(prefers-reduced-motion:reduce){#app .page *,#app .bottom.home-bottom-nav *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* V79.2: Payment channel cards — mobile-safe, non-overlapping layout. Loaded after page styles. */
.dep50-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.dep50-channel-card{display:flex;align-items:center;justify-content:flex-start;gap:9px;overflow:hidden;box-sizing:border-box}
.dep50-channel-logo{flex:0 0 auto;max-width:calc(100% - 12px);justify-content:flex-start;gap:6px}
.dep50-channel-logo>b{font-size:clamp(15px,2.8vw,20px);letter-spacing:-.4px;white-space:nowrap}
.dep50-channel-details{flex:1 1 0;width:0;max-width:none;min-width:0;overflow-wrap:anywhere}
.dep50-channel-details small,.dep50-channel-details em{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.dep50-channel-details small{line-height:1.35}
.dep50-channel-details em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dep50-channel-arrow{flex:0 0 10px;position:static;transform:none;margin-left:auto}
@media(max-width:560px){.dep50-channel-grid{grid-template-columns:minmax(0,1fr);gap:10px}.dep50-channel-card{min-height:82px;padding:11px 13px;gap:12px}.dep50-channel-logo{flex:0 0 112px;width:112px;max-width:112px;justify-content:flex-start}.dep50-logo-mark{width:42px;height:42px;flex-basis:42px}.dep50-logo-mark svg{width:38px;height:32px}.dep50-channel-logo>b{font-size:19px;white-space:normal;overflow-wrap:anywhere}.dep50-channel-details{flex:1 1 auto;width:auto;min-width:0}.dep50-channel-details small{font-size:10px}.dep50-channel-details em{font-size:10px}.dep50-channel-arrow{flex-basis:10px}}
@media(max-width:360px){.dep50-channel-card{gap:8px;padding:10px}.dep50-channel-logo{flex-basis:98px;width:98px;max-width:98px;gap:5px}.dep50-logo-mark{width:36px;height:36px;flex-basis:36px}.dep50-channel-logo>b{font-size:17px}.dep50-channel-details small{font-size:9px}.dep50-channel-details em{font-size:9px}}


/* V79.3: ChaoPaoPay channel card layout — prevent logo, limits and instructions colliding. */
@media(max-width:560px){
  #modal:has(.dep50-channel-modal) .dep50-channel-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-card{
    display:grid!important;grid-template-columns:minmax(0,1fr) 14px!important;
    grid-template-areas:"brand arrow" "details details"!important;
    align-items:center!important;justify-content:initial!important;gap:7px 9px!important;
    width:100%!important;min-width:0!important;min-height:88px!important;
    padding:12px 13px!important;overflow:hidden!important;text-align:left!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-logo{
    grid-area:brand!important;display:flex!important;align-items:center!important;
    justify-content:flex-start!important;width:auto!important;max-width:100%!important;
    min-width:0!important;flex:initial!important;gap:8px!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-logo>b{
    min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;
    font-size:clamp(18px,4.8vw,21px)!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-details{
    grid-area:details!important;display:grid!important;width:100%!important;max-width:100%!important;
    min-width:0!important;flex:initial!important;gap:3px!important;
    overflow-wrap:anywhere!important;word-break:break-word!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-details small,
  #modal:has(.dep50-channel-modal) .dep50-channel-details em{
    max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
    word-break:break-word!important;line-height:1.4!important;
  }
  #modal:has(.dep50-channel-modal) .dep50-channel-arrow{
    grid-area:arrow!important;position:static!important;transform:none!important;
    justify-self:end!important;margin:0!important;
  }
}