/* =========================================================
   GX THANK YOU (PRO) - FULL RESPONSIVE (Desktop/Tablet/Mobile)
   - Top actions centered + small pill buttons
   - Grid becomes 1 column on tablet/mobile
   - Cards/padding/font scale down smoothly
   - Items wrap properly, no overflow
   ========================================================= */

.gx-ty{background:#fff;}
.gx-ty__wrap{max-width:1220px;margin:0 auto;padding:18px 16px 70px;}

/* ---------------------------
   1) TOP ACTIONS BAR
---------------------------- */
.gx-ty__actionsbar{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:12px 16px !important;
  border:1px solid #e9eef6 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(16,24,40,.05) !important;
}
.gx-ty__actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  flex-wrap:wrap !important;
}

/* Pill action links (override theme) */
.gx-ty__actionsbar a.gx-act,
.gx-ty__actionsbar a.gx-act:visited{
  background:#f3f4f6 !important;
  border:1px solid #e5e7eb !important;
  padding:6px 12px !important;
  border-radius:999px !important;

  font-size:12.5px !important;
  font-weight:800 !important;
  line-height:1 !important;

  color:#111827 !important;
  text-decoration:none !important;

  box-shadow:none !important;
  min-height:30px !important;
  height:auto !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  white-space:nowrap !important;
}
.gx-ty__actionsbar a.gx-act--primary{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}
.gx-ty__actionsbar a.gx-act:hover{
  filter:brightness(0.98) !important;
  text-decoration:none !important;
}

/* ---------------------------
   2) MAIN GRID
---------------------------- */
.gx-ty__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px; /* desktop */
  gap:16px;
  margin-top:16px;
  align-items:start;
}

/* Laptop tighten */
@media (max-width:1200px){
  .gx-ty__wrap{max-width:1100px;}
  .gx-ty__grid{grid-template-columns:minmax(0,1fr) 340px;}
}

/* Tablet -> 1 column */
@media (max-width:992px){
  .gx-ty__wrap{padding:16px 14px 60px;}
  .gx-ty__grid{grid-template-columns:1fr;}
}

/* Mobile -> more compact */
@media (max-width:520px){
  .gx-ty__wrap{padding:14px 12px 50px;}
  .gx-ty__actionsbar{padding:10px 12px !important;border-radius:12px !important;}
  .gx-ty__actionsbar a.gx-act{font-size:12px !important;min-height:28px !important;padding:6px 10px !important;}
}

/* ---------------------------
   3) CARDS
---------------------------- */
.gx-card{
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(16,24,40,.05);
  padding:16px;
  min-width:0; /* prevents overflow */
}
.gx-card--sticky{position:sticky;top:14px;}
@media (max-width:992px){
  .gx-card--sticky{position:static;top:auto;}
}

/* card head */
.gx-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid #eef2f7;
}
.gx-card__head h2{
  margin:0;
  font-size:15px;
  color:#0f172a;
  font-weight:900;
}

/* compact headings on small */
@media (max-width:520px){
  .gx-card{padding:14px;border-radius:12px;}
  .gx-card__head h2{font-size:14px;}
}

/* ---------------------------
   4) KV BOXES
---------------------------- */
.gx-kv{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width:520px){
  .gx-kv{grid-template-columns:1fr;}
}
.gx-kv__box{
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:12px;
  background:#fbfdff;
  min-width:0;
}
.gx-kv__box .t{
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
  font-weight:700;
}
.gx-kv__box .v{
  font-size:13px;
  color:#0f172a;
  font-weight:900;
  word-break:break-word;
}
@media (max-width:520px){
  .gx-kv__box{padding:11px;}
  .gx-kv__box .v{font-size:12.5px;}
}

/* ---------------------------
   5) SEPARATORS + SUBHEADS
---------------------------- */
.gx-line{height:1px;background:#eef2f7;margin:14px 0;}
.gx-h3{margin:0 0 10px;font-size:13px;color:#0f172a;font-weight:900;}

/* ---------------------------
   6) ITEMS LIST (no overflow)
---------------------------- */
.gx-items{display:flex;flex-direction:column;gap:10px;}
.gx-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #eef2f7;
  min-width:0;
}
.gx-item:last-child{border-bottom:none;}

.gx-item__name{
  font-size:13px;
  color:#0f172a;
  font-weight:800;
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
}
.gx-item__price{
  font-size:13px;
  color:#0f172a;
  font-weight:900;
  white-space:nowrap;
  flex:0 0 auto;
}
.gx-muted{color:#64748b;font-weight:700;margin-left:6px;}

/* Mobile: stack price below if needed */
@media (max-width:420px){
  .gx-item{flex-direction:column;align-items:flex-start;}
  .gx-item__price{white-space:normal;}
}

/* ---------------------------
   7) MINI ROWS (District/PS)
---------------------------- */
.gx-mini{display:flex;flex-direction:column;gap:10px;}
.gx-mini__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:#0f172a;
  min-width:0;
}
.gx-mini__row span{color:#64748b;font-weight:800;}
.gx-mini__row strong{font-weight:900;min-width:0;overflow-wrap:anywhere;text-align:right;}
@media (max-width:420px){
  .gx-mini__row{flex-direction:column;align-items:flex-start;}
  .gx-mini__row strong{text-align:left;}
}

/* ---------------------------
   8) TOTALS
---------------------------- */
.gx-totals{display:flex;flex-direction:column;gap:10px;}
.gx-totals__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
.gx-totals__row span{color:#64748b;font-weight:800;}
.gx-totals__row strong{color:#0f172a;font-weight:900;white-space:nowrap;}
.gx-totals__row--grand{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid #eef2f7;
  font-size:14px;
}
@media (max-width:420px){
  .gx-totals__row{flex-direction:column;align-items:flex-start;}
  .gx-totals__row strong{white-space:normal;}
}

/* ---------------------------
   9) NOTE
---------------------------- */
.gx-note{
  margin-top:12px;
  border:1px dashed #e9eef6;
  background:#fbfdff;
  border-radius:12px;
  padding:12px;
  font-size:13px;
  color:#334155;
  line-height:1.5;
}
@media (max-width:520px){
  .gx-note{font-size:12.5px;padding:11px;}
}