/*
 * AcadMates fixed-viewport shell
 * Loaded after each page's embedded styles so no later legacy rule can
 * re-enable document scrolling.
 */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body {
  overflow: hidden !important;
}

.site-shell {
  width: 100%;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  max-height: 100dvh !important;
  display: grid !important;
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--footer-h) !important;
  overflow: hidden !important;
}

.topbar {
  height: var(--header-h) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.topbar-inner {
  height: 100%;
  min-width: 0;
}

.menu {
  min-width: 0;
  overflow: hidden !important;
}

.menu a {
  min-width: 0 !important;
  white-space: nowrap;
}

.main {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(6px, 1.4vh, 18px) var(--page-pad) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.frame {
  width: min(1280px, 100%) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.frame-grid,
.page-layout,
.purchase-layout {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.footer {
  height: var(--footer-h) !important;
  min-height: 0 !important;
  padding: 0 var(--page-pad) !important;
  overflow: hidden !important;
}

.footer-inner {
  height: 100%;
  min-height: 0;
}

/*
 * Avail App desktop fit
 * Keep every purchase control visible inside the fixed viewport without
 * hiding information or allowing either panel to scroll independently.
 */
@media (min-width: 901px) {
  .purchase-layout {
    grid-template-columns: minmax(330px, .72fr) minmax(600px, 1.28fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(10px, 1vw, 14px) !important;
    padding: clamp(10px, 1.5vh, 16px) !important;
  }

  .purchase-panel {
    min-height: 0 !important;
    border-radius: clamp(22px, 2vw, 28px) !important;
    overflow: hidden !important;
  }

  .purchase-summary,
  .purchase-form-panel {
    padding: clamp(22px, 2.8vh, 34px) !important;
  }

  .purchase-summary .eyebrow {
    margin: 0 0 11px !important;
    font-size: clamp(11px, .8vw, 14px) !important;
  }

  .purchase-summary h1 {
    margin: 0 0 13px !important;
    font-size: clamp(46px, 3.7vw, 66px) !important;
    line-height: .94 !important;
  }

  .purchase-summary .lead {
    margin: 0 0 14px !important;
    font-size: clamp(14px, 1.05vw, 17px) !important;
    line-height: 1.45 !important;
  }

  .price-row {
    margin: 0 0 14px !important;
    gap: 14px !important;
  }

  .price { font-size: clamp(54px, 4.8vw, 76px) !important; }
  .price-note { padding-bottom: 4px !important; font-size: clamp(11px, .85vw, 14px) !important; }

  .gcash-card {
    padding: 16px 18px !important;
    border-radius: 21px !important;
  }

  .gcash-card strong { margin-bottom: 8px !important; font-size: 13px !important; }
  .gcash-details { gap: 3px !important; font-size: 13px !important; line-height: 1.4 !important; }
  .gcash-card .btn {
    min-height: 42px !important;
    margin-top: 11px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
  }

  .benefit-grid { margin-top: 11px !important; gap: 8px !important; }
  .benefit {
    min-height: 40px !important;
    padding: 7px 10px !important;
    gap: 7px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
  }
  .benefit::before { width: 20px !important; height: 20px !important; font-size: 10px !important; }

  .device-note {
    margin-top: 11px !important;
    padding: 10px 13px !important;
    border-radius: 15px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  .form-head { margin-bottom: 14px !important; gap: 18px !important; }
  .form-head .eyebrow { margin-bottom: 7px !important; font-size: 11px !important; }
  .form-head h2 { font-size: clamp(35px, 3vw, 48px) !important; line-height: 1 !important; }
  .form-head p { max-width: 300px !important; font-size: 11px !important; line-height: 1.45 !important; }

  .purchase-fields { gap: 10px 13px !important; }
  .purchase-fields label { margin-bottom: 5px !important; font-size: 11px !important; }
  .purchase-fields input,
  .purchase-fields select {
    height: 47px !important;
    padding: 0 15px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  .amount-bar { padding: 10px 14px !important; border-radius: 15px !important; font-size: 12px !important; }
  .receipt-box { padding: 12px 14px !important; border-radius: 17px !important; }
  .receipt-box input[type=file] { padding: 7px !important; font-size: 12px !important; }
  .receipt-hint { margin-top: 5px !important; font-size: 10px !important; }
  .receipt-preview { max-height: 72px !important; margin-top: 6px !important; }
  .status-note { padding: 10px 14px !important; border-radius: 15px !important; font-size: 10.5px !important; line-height: 1.4 !important; }
  .purchase-actions { min-height: 42px !important; margin-top: 11px !important; }
  .purchase-actions .btn { min-height: 42px !important; padding: 0 19px !important; font-size: 12px !important; }
  .purchase-status { font-size: 11px !important; }
}

/* Keep the larger desktop type while fitting every action on common laptop heights. */
@media (min-width: 901px) and (max-height: 900px) {
  .purchase-layout { padding: 8px 10px !important; gap: 10px !important; }
  .purchase-summary,
  .purchase-form-panel { padding: 17px 20px !important; }

  .purchase-summary .eyebrow { margin-bottom: 7px !important; }
  .purchase-summary h1 { margin-bottom: 8px !important; font-size: clamp(40px, 3.35vw, 58px) !important; }
  .purchase-summary .lead { margin-bottom: 9px !important; line-height: 1.35 !important; }
  .price-row { margin-bottom: 9px !important; }
  .price { font-size: clamp(49px, 4.35vw, 66px) !important; }
  .gcash-card { padding: 12px 14px !important; }
  .gcash-card strong { margin-bottom: 5px !important; }
  .gcash-card .btn { min-height: 36px !important; margin-top: 7px !important; }
  .benefit-grid { margin-top: 8px !important; gap: 6px !important; }
  .benefit { min-height: 34px !important; padding: 5px 8px !important; }
  .device-note { margin-top: 8px !important; padding: 7px 10px !important; }

  .form-head { margin-bottom: 8px !important; }
  .form-head .eyebrow { margin-bottom: 4px !important; }
  .form-head h2 { font-size: clamp(32px, 2.75vw, 42px) !important; }
  .purchase-fields { gap: 7px 11px !important; }
  .purchase-fields label { margin-bottom: 3px !important; }
  .purchase-fields input,
  .purchase-fields select { height: 41px !important; }
  .amount-bar { padding: 8px 12px !important; }
  .receipt-box { padding: 9px 12px !important; }
  .receipt-box input[type=file] { padding: 5px !important; }
  .receipt-hint { margin-top: 3px !important; }
  .status-note { padding: 8px 12px !important; }
  .purchase-actions { min-height: 38px !important; margin-top: 6px !important; }
  .purchase-actions .btn { min-height: 38px !important; }
}

/* Extra breathing room protection for short laptop displays. */
@media (min-width: 901px) and (max-height: 760px) {
  .purchase-layout { padding: 7px !important; gap: 7px !important; }
  .purchase-summary,
  .purchase-form-panel { padding: 12px 15px !important; }
  .purchase-summary h1 { font-size: 32px !important; margin-bottom: 5px !important; }
  .purchase-summary .lead { font-size: 10px !important; margin-bottom: 5px !important; }
  .price-row { margin-bottom: 5px !important; }
  .price { font-size: 38px !important; }
  .gcash-card { padding: 8px 10px !important; }
  .gcash-card .btn { min-height: 29px !important; margin-top: 4px !important; }
  .benefit-grid,
  .device-note { margin-top: 4px !important; }
  .benefit { min-height: 26px !important; padding: 3px 5px !important; }
  .device-note { padding: 5px 7px !important; font-size: 7.5px !important; }
  .form-head { margin-bottom: 4px !important; }
  .form-head h2 { font-size: 25px !important; }
  .purchase-fields { gap: 4px 7px !important; }
  .purchase-fields input,
  .purchase-fields select { height: 32px !important; }
  .amount-bar,
  .receipt-box,
  .status-note { padding-top: 5px !important; padding-bottom: 5px !important; }
  .purchase-actions { min-height: 30px !important; margin-top: 4px !important; }
  .purchase-actions .btn { min-height: 30px !important; }
}

/* The purchase page stays a two-panel workspace on medium screens. */
@media (min-width: 621px) and (max-width: 1100px) {
  .purchase-layout {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .purchase-panel {
    min-height: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .purchase-summary,
  .purchase-form-panel {
    padding: clamp(12px, 1.8vw, 18px) !important;
  }

  .purchase-summary h1 { font-size: clamp(28px, 3.6vw, 38px) !important; }
  .purchase-summary .lead { display: block !important; margin-bottom: 7px !important; font-size: 10px !important; }
  .price-row { margin: 0 0 7px !important; }
  .price { font-size: 40px !important; }
  .gcash-card { display: block !important; padding: 10px !important; }
  .gcash-card strong { margin-bottom: 5px !important; }
  .gcash-card .btn { margin-top: 7px !important; min-height: 32px !important; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr) !important; margin-top: 6px !important; gap: 4px !important; }
  .benefit { min-height: 28px !important; padding: 4px 6px !important; font-size: 8px !important; }
  .benefit::before { display: grid !important; width: 14px !important; height: 14px !important; }
  .device-note { display: block !important; margin-top: 6px !important; padding: 7px 8px !important; font-size: 8px !important; }
  .form-head { margin-bottom: 7px !important; }
  .form-head h2 { font-size: clamp(22px, 2.8vw, 30px) !important; }
  .form-head p { display: none !important; }
  .purchase-fields { gap: 5px 7px !important; }
  .purchase-fields label { margin-bottom: 3px !important; font-size: 8px !important; }
  .purchase-fields input,
  .purchase-fields select { height: 34px !important; padding: 0 9px !important; font-size: 9.5px !important; }
  .amount-bar,
  .receipt-box,
  .status-note { padding-top: 6px !important; padding-bottom: 6px !important; }
  .receipt-box input[type=file] { padding: 4px !important; }
  .receipt-hint { margin-top: 2px !important; }
  .purchase-actions { margin-top: 6px !important; min-height: 34px !important; }
  .purchase-actions .btn { min-height: 34px !important; }
}

@media (max-width: 900px) {
  :root {
    --header-h: 96px;
    --footer-h: 24px;
    --page-pad: 8px;
  }

  .topbar { padding: 6px 8px !important; }
  .topbar-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  .brand { justify-self: center; min-width: 0; }
  .brand img { width: 32px !important; height: 32px !important; }
  .brand-copy strong { font-size: 13px !important; }
  .brand-copy small { display: none !important; }
  .menu {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  .menu a {
    width: 100% !important;
    height: 100% !important;
    padding: 0 2px !important;
    font-size: clamp(8px, 1.7vw, 10px) !important;
  }

  .main { padding: 7px 8px !important; }
  .frame { border-radius: 23px !important; }
  .footer { padding: 0 8px !important; }
}

/* Phone portrait: compact every page while preserving every essential block. */
@media (max-width: 620px) {
  :root {
    --header-h: 104px;
    --footer-h: 22px;
    --page-pad: 5px;
  }

  .topbar { padding: 5px 6px !important; }
  .topbar-inner { grid-template-rows: 32px minmax(0, 1fr) !important; }
  .brand img { width: 30px !important; height: 30px !important; }
  .brand-copy strong { font-size: 12px !important; }
  .menu { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .menu a { font-size: 9px !important; }
  .main { padding: 5px !important; }
  .frame { border-radius: 19px !important; }

  .home-grid,
  .guide-grid,
  .trial-grid,
  .support-grid { padding: 10px 12px !important; gap: 6px !important; }
  .page-layout { padding: 8px !important; gap: 6px !important; }

  .purchase-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 5px !important;
    gap: 4px !important;
  }
  .purchase-panel { border-radius: 16px !important; overflow: hidden !important; }
  .purchase-summary {
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    gap: 3px 7px !important;
  }
  .purchase-summary .eyebrow { margin: 0 !important; font-size: 7px !important; }
  .purchase-summary h1 { margin: 0 !important; font-size: 23px !important; line-height: .95 !important; }
  .purchase-summary .lead { display: none !important; }
  .price-row { margin: 0 !important; align-self: end !important; gap: 6px !important; }
  .price { font-size: 34px !important; }
  .price-note { font-size: 7px !important; }
  .gcash-card { grid-column: 1 / -1 !important; padding: 6px 8px !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 2px 6px !important; }
  .gcash-card strong { grid-column: 1 / -1 !important; margin: 0 !important; font-size: 8px !important; }
  .gcash-details { font-size: 8px !important; gap: 1px !important; }
  .gcash-card .btn { margin: 0 !important; min-height: 28px !important; padding: 0 9px !important; font-size: 8px !important; }
  .benefit-grid { grid-column: 1 / -1 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin: 0 !important; gap: 3px !important; }
  .benefit { min-height: 24px !important; padding: 3px !important; justify-content: center !important; text-align: center !important; font-size: 6.8px !important; }
  .benefit::before { display: none !important; }
  .device-note { grid-column: 1 / -1 !important; display: block !important; margin: 0 !important; padding: 5px 7px !important; font-size: 7px !important; line-height: 1.25 !important; }

  .purchase-form-panel { padding: 7px 9px !important; }
  .form-head { margin-bottom: 4px !important; align-items: center !important; }
  .form-head .eyebrow { display: none !important; }
  .form-head h2 { font-size: 18px !important; }
  .form-head p { display: none !important; }
  .purchase-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px 5px !important; }
  .purchase-fields .full { grid-column: 1 / -1 !important; }
  .purchase-fields label { margin-bottom: 2px !important; font-size: 7px !important; }
  .purchase-fields input,
  .purchase-fields select { height: 28px !important; padding: 0 7px !important; border-radius: 9px !important; font-size: 8px !important; }
  .amount-bar { padding: 5px 7px !important; border-radius: 10px !important; font-size: 8px !important; }
  .receipt-box { padding: 5px 7px !important; border-radius: 11px !important; }
  .receipt-box input[type=file] { padding: 3px !important; font-size: 7px !important; }
  .receipt-hint { margin-top: 2px !important; font-size: 6.5px !important; }
  .status-note { padding: 5px 7px !important; border-radius: 9px !important; font-size: 7px !important; }
  .purchase-actions { margin-top: 4px !important; min-height: 29px !important; gap: 5px !important; }
  .purchase-actions .btn { min-height: 29px !important; padding: 0 10px !important; font-size: 8px !important; }
  .purchase-status { font-size: 7px !important; }
}

@media (max-height: 620px) {
  :root { --header-h: 58px; --footer-h: 18px; }
  .topbar-inner { display: flex !important; height: 100% !important; }
  .brand { justify-self: auto !important; }
  .brand img { width: 30px !important; height: 30px !important; }
  .menu { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; }
  .menu a { font-size: 8px !important; }
  .main { padding-top: 4px !important; padding-bottom: 4px !important; }
  .footer-inner { font-size: 7px !important; }
}

/* v1.3.4: compact QR payment card and a fully visible receipt action. */
.gcash-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.gcash-copy { min-width: 0; }
.gcash-copy strong { display: block; }
.gcash-qr { margin: 0 !important; text-align: center; }
.gcash-qr img {
  display: block;
  width: clamp(82px, 7.2vw, 112px);
  aspect-ratio: 1;
  object-fit: contain;
  border: 5px solid #fff;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24,35,63,.12);
}
.gcash-qr figcaption {
  margin-top: 3px;
  color: rgba(24,35,63,.68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}
.purchase-form-panel form {
  display: flex !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}
.purchase-actions { flex: 0 0 auto !important; }

@media (min-width: 901px) and (max-height: 900px) {
  .gcash-card { gap: 9px !important; }
  .gcash-qr img { width: 82px; border-width: 4px; }
  .gcash-qr figcaption { font-size: 8px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .gcash-card { gap: 7px !important; }
  .gcash-qr img { width: 58px; border-width: 3px; border-radius: 8px; }
  .gcash-qr figcaption { display: none; }
}

@media (min-width: 621px) and (max-width: 1100px) {
  .gcash-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 7px !important; }
  .gcash-qr img { width: 64px; border-width: 3px; border-radius: 8px; }
  .gcash-qr figcaption { font-size: 7px; }
}

@media (max-width: 620px) {
  .gcash-card { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 3px 6px !important; }
  .gcash-copy strong { font-size: 8px !important; }
  .gcash-details { font-size: 7.5px !important; }
  .gcash-copy .btn { margin-top: 3px !important; min-height: 24px !important; }
  .gcash-qr img { width: 50px; border-width: 2px; border-radius: 6px; }
  .gcash-qr figcaption { display: none; }
  .purchase-actions { position: relative !important; z-index: 2; }
}

/* v1.5.6 filename-only receipt selection */
.receipt-box img,.receipt-box picture,.receipt-box canvas,.receipt-box video,.receipt-box .receipt-preview,.receipt-box #receiptPreview,.receipt-box [data-receipt-preview],.receipt-box [data-file-preview]{display:none!important;width:0!important;height:0!important;max-width:0!important;max-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;visibility:hidden!important;position:absolute!important;pointer-events:none!important}
.receipt-box{overflow:hidden!important}