/* GeoTopUp front-end extensions. Announcement visual/content styles live in a Shadow DOM
   so administrator-supplied announcement CSS cannot hide or damage the main website. */
#gt-announcement-wrap{position:absolute!important;z-index:20!important;top:18px!important;left:50%!important;transform:translateX(-50%)!important;width:min(1080px,calc(100% - 40px))!important;margin:0!important;padding:0!important;pointer-events:auto!important}
.main>.simple-page{position:relative}
@media(max-width:760px){#gt-announcement-wrap{top:12px!important;width:min(100% - 28px,1080px)!important}}
.gt-support-btn{position:fixed;right:22px;bottom:22px;z-index:9996;border:0;border-radius:999px;background:#1769ff;color:#fff;font-weight:800;padding:13px 18px;box-shadow:0 10px 28px rgba(23,105,255,.28);cursor:pointer}.gt-support-modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,26,48,.45)}.gt-support-modal.open{display:flex}.gt-support-card{width:min(720px,100%);max-height:90vh;overflow:auto;border-radius:18px;background:#fff;padding:22px;box-shadow:0 28px 80px rgba(13,37,66,.28);color:#102442}.gt-support-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.gt-support-head h2{margin:0;font-size:20px}.gt-support-close{border:0;background:#f1f5f9;border-radius:8px;width:36px;height:36px;font-size:20px;cursor:pointer}.gt-tabs{display:flex;gap:8px;margin:18px 0}.gt-tab{border:0;border-radius:8px;padding:9px 14px;background:#eef4fb;color:#52677f;font-weight:800;cursor:pointer}.gt-tab.active{background:#1769ff;color:#fff}.gt-pane{display:none}.gt-pane.active{display:block}.gt-field{display:block;margin:0 0 12px;color:#536980;font-size:12px;font-weight:700}.gt-field input,.gt-field select,.gt-field textarea{width:100%;margin-top:6px;border:1px solid #d6e1ed;border-radius:9px;padding:10px 12px;font:inherit;color:#102442;background:#fff}.gt-field textarea{min-height:130px;resize:vertical}.gt-submit{border:0;border-radius:9px;background:#1769ff;color:#fff;font-weight:800;padding:11px 18px;cursor:pointer}.gt-msg{margin:12px 0;padding:11px 13px;border-radius:9px;background:#f5f8fc;font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word}.gt-msg.error{background:#fff1f3;color:#a92a36}.gt-ticket-info{margin-top:15px;border-top:1px solid #e7edf4;padding-top:15px}.gt-conv{display:flex;flex-direction:column;gap:10px;margin:14px 0}.gt-bubble{padding:11px 13px;border-radius:10px;background:#f4f7fb;white-space:pre-wrap;word-break:break-word}.gt-bubble.admin{background:#edf5ff}.gt-bubble small{display:block;margin-bottom:5px;color:#8293a7}@media(max-width:640px){.gt-support-btn{right:14px;bottom:14px}.gt-support-card{padding:16px}}


/* ============================================================
   GeoTopUp Mobile Adaptation v1
   - Front-end navigation becomes a compact two-row mobile header.
   - Forms use >=16px inputs on phones to avoid iOS auto zoom.
   - Cards, payment pages, order query/status and batch pages are
     optimized for narrow screens without changing desktop layout.
   - Ticket UI respects iOS safe areas and becomes a bottom sheet.
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

@media(max-width:760px){
  /* Public header: keep all existing routes reachable without horizontal page overflow. */
  .site-header{height:auto!important;min-height:62px!important}
  .header-inner{height:auto!important;min-height:62px!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:0 10px!important;padding:8px 0 0!important}
  .logo{flex:0 0 auto!important;font-size:15px!important;line-height:1!important}
  .logo:before{width:30px!important;height:30px!important;border-radius:8px!important}
  .nav{order:3!important;width:100%!important;display:flex!important;align-items:center!important;gap:2px!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;scrollbar-width:none!important;border-top:1px solid #edf2f7!important;margin-top:7px!important;padding:0 0 env(safe-area-inset-bottom,0)!important}
  .nav::-webkit-scrollbar{display:none!important}
  .nav a{flex:1 0 auto!important;min-width:max-content!important;min-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 10px!important;font-size:12px!important;white-space:nowrap!important}

  /* Home hero / top-up form. */
  .simple-page{padding-left:14px!important;padding-right:14px!important;padding-bottom:42px!important}
  .simple-layout{width:100%!important;gap:26px!important}
  .intro h1{font-size:clamp(32px,10.5vw,40px)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin-top:10px!important}
  .intro>p{font-size:14px!important;line-height:1.7!important}
  .intro-links{gap:12px!important;margin-top:14px!important}
  .history-link{font-size:13px!important}
  .topup-card{width:100%!important;padding:18px 16px!important;border-radius:17px!important;box-shadow:0 18px 44px rgba(28,65,112,.12)!important}
  .card-title{align-items:flex-start!important;gap:10px!important;margin-bottom:16px!important}
  .card-title h2{font-size:20px!important}
  .card-title b{padding:7px 9px!important;font-size:10px!important}
  .phone-input,.email-input,.operator-trigger{height:50px!important}
  .phone-input input,.email-input,.operator-trigger,.custom-amount input,
  .search-box input,.gt-field input,.gt-field select,.gt-field textarea{font-size:16px!important}
  .amounts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .amounts button{min-height:44px!important}
  .price-box{align-items:flex-start!important;min-height:62px!important;padding:10px 12px!important}
  .price-values strong{font-size:21px!important}
  .submit,.pay-button,.quote-btn,.pay-btn{min-height:48px!important}

  /* Mobile announcement: never cover the country/top-up heading.
     JS mounts it inside .intro after the title/copy/links, and on phones it participates
     in normal flow. Desktop keeps the absolute-positioned integrated treatment. */
  #gt-announcement-wrap{
    position:relative!important;
    z-index:1!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:18px 0 0!important;
    padding:0!important;
  }
  .main>.simple-page:has(#gt-announcement-wrap){padding-top:0!important}

  /* Single-order payment / checkout cards. */
  .page{min-height:calc(100svh - 102px)!important;padding:30px 14px 44px!important}
  .card{width:100%!important;padding:19px 16px!important;border-radius:17px!important;box-shadow:0 16px 44px rgba(28,65,112,.10)!important}
  .heading h1{font-size:24px!important;margin-bottom:20px!important}
  .rows>div{gap:12px!important;min-height:48px!important}
  .rows>div>span:first-child{flex:0 0 auto!important}
  .rows>div>strong,.rows>div>span:last-child{text-align:right!important;overflow-wrap:anywhere!important}
  .payment-option{min-height:64px!important;padding:10px 11px!important}
  .logo-box{flex-basis:40px!important;width:40px!important}
  .method-copy{min-width:0!important}
  .method-copy strong,.method-copy small{overflow-wrap:anywhere!important}

  /* Order query page. */
  .wrap{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  .search-box{grid-template-columns:1fr!important;gap:9px!important}
  .search-box button{width:100%!important;min-height:46px!important}
  .order-top,.order-info,.order-bottom{gap:10px!important}
  .order-top{align-items:flex-start!important;flex-wrap:wrap!important}
  .order-info{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .order-info>*{min-width:0!important;overflow-wrap:anywhere!important}

  /* Batch top-up: keep the row grid scrollable, make all controls usable by touch. */
  .batch-page{padding:28px 12px 46px!important}
  .batch-head{gap:12px!important;margin-bottom:18px!important}
  .batch-head h1{font-size:27px!important}
  .paste-panel,.table-card,.checkout-card{border-radius:14px!important}
  .paste-panel{padding:15px!important}
  .panel-title,.table-toolbar,.checkout-actions{gap:10px!important}
  .toolbar-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .toolbar-actions button{width:100%!important;min-height:42px!important}
  .rows{max-width:100%!important;-webkit-overflow-scrolling:touch!important}
  .batch-row{min-width:830px!important}
  .checkout-card{padding-left:15px!important;padding-right:15px!important}
  .quote-btn,.pay-btn{min-height:48px!important}

  /* Batch status. */
  .status-page{padding:30px 14px 48px!important}
  .status-wrap{width:100%!important}
  .summary-card,.item-card{border-radius:14px!important}
  .summary-top{gap:12px!important}
  .item-head,.item-row{gap:10px!important;flex-wrap:wrap!important}

  /* Footer. */
  .footer-inner{padding:12px 0 calc(12px + env(safe-area-inset-bottom,0))!important;text-align:center!important}

  /* Ticket button / modal: phone-friendly bottom sheet and safe-area spacing. */
  .gt-support-btn{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0))!important;min-height:44px!important;padding:11px 15px!important;font-size:13px!important}
  .gt-support-modal{align-items:flex-end!important;padding:0!important}
  .gt-support-card{width:100%!important;max-width:none!important;max-height:min(88svh,760px)!important;border-radius:20px 20px 0 0!important;padding:17px 15px calc(16px + env(safe-area-inset-bottom,0))!important}
  .gt-support-head{position:sticky!important;top:-17px!important;z-index:3!important;background:#fff!important;padding:10px 0 8px!important}
  .gt-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:12px 0 15px!important}
  .gt-tab,.gt-submit{min-height:44px!important}
  .gt-field textarea{min-height:110px!important}
}

@media(max-width:420px){
  .container{width:calc(100% - 20px)!important}
  .nav a{padding:0 8px!important;font-size:11px!important}
  .simple-page{padding-left:10px!important;padding-right:10px!important}
  .topup-card{padding:16px 13px!important}
  .card-title{flex-direction:column!important}
  .card-title b{align-self:flex-start!important}
  .phone-input>span{padding-left:10px!important;padding-right:10px!important}
  .custom-amount{grid-template-columns:auto minmax(0,1fr) auto!important;gap:6px!important;padding:0 9px!important}
  .price-box{flex-direction:column!important;gap:4px!important}
  .price-values{align-items:flex-start!important}
  .order-info{grid-template-columns:1fr!important}
  .toolbar-actions{grid-template-columns:1fr!important}
}


/* ============================================================
   Mobile hotfix v3
   Announcement and batch top-up fixes are intentionally merged so
   applying one mobile fix cannot regress the other.
   ============================================================ */
@media (max-width:760px){
  /* Announcement MUST participate in normal flow on phones. It is mounted
     after .intro copy/links by site-extensions.js and must never overlay the form. */
  #gt-announcement-wrap{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:18px 0 0!important;
    padding:0!important;
  }

  /* Batch top-up: every number becomes a vertical mobile card. */
  .rows[data-v-70aa2e72]{overflow-x:visible!important}
  .batch-row[data-v-70aa2e72]{
    min-width:0!important;
    width:100%!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "no remove"
      "phone phone"
      "operator operator"
      "amount amount"
      "price price"!important;
    gap:10px!important;
    padding:14px!important;
    align-items:stretch!important;
  }
  .row-no[data-v-70aa2e72]{grid-area:no;justify-self:start;text-align:left;font-size:12px!important}
  .phone-box[data-v-70aa2e72]{grid-area:phone;height:46px!important;width:100%!important}
  .phone-box>span[data-v-70aa2e72]{padding:0 14px!important;font-size:14px!important;flex:0 0 auto}
  .phone-box input[data-v-70aa2e72]{font-size:16px!important;padding:0 12px!important;min-width:0!important;letter-spacing:.02em}
  .batch-row select[data-v-70aa2e72]{grid-area:operator;height:46px!important;font-size:14px!important}
  .gel-box[data-v-70aa2e72]{grid-area:amount;height:46px!important;width:100%!important;max-width:none!important}
  .gel-box input[data-v-70aa2e72]{font-size:16px!important;padding:0 12px!important}
  .gel-box span[data-v-70aa2e72]{padding-right:12px!important;font-size:11px!important}
  .row-price[data-v-70aa2e72]{grid-area:price;padding-top:2px}
  .row-price strong[data-v-70aa2e72]{font-size:14px!important}
  .remove[data-v-70aa2e72]{grid-area:remove;justify-self:end;align-self:start;width:36px!important;height:36px!important}
}


/* Laptop / short-desktop viewport fix v2.
   The announcement remains visually integrated on desktop, but when vertical space
   is limited we reserve its measured height before the centered hero content. */
@media (min-width:761px) and (max-height:960px){
  .main > .simple-page.gt-announcement-compact-desktop{
    padding-top:var(--gt-announcement-compact-space,210px)!important;
    box-sizing:border-box!important;
  }
  .main > .simple-page.gt-announcement-compact-desktop #gt-announcement-wrap{
    top:14px!important;
  }
}