/* =========================================================
   ✅ GLOBAL: consistent field/button height
========================================================= */
:root { --gssk-field-h: 38px; }

/* =========================================================
   ✅ POPUP – OVERLAY + WINDOW
   FIX: remove translateY(-12vh) + stable height using dvh
========================================================= */
.gssk-popup-overlay{
  display:none;
  position:fixed;
  z-index:10000;
  inset:0;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);

  /* ✅ safe outer padding (desktop + mobile) */
  padding:16px;
  box-sizing:border-box;
}
.gssk-popup-overlay.is-open,
.gssk-popup-overlay.gssk-is-visible{ display:flex !important; }

.gssk-popup-inner{
  background:#fff;
  padding:20px;
  width:min(460px,92vw);
  max-width:460px;
  border-radius:10px;

  /* ✅ more stable on mobile than vh */
  max-height:calc(100dvh - 32px); /* overlay padding: 16px top + 16px bottom */
  overflow:auto;

  /* ❌ removed: transform: translateY(-12vh); */
  transform:none;

  box-shadow:0 18px 45px rgba(0,0,0,.25);
}

/* =========================================================
   ✅ MOBILE FIX: address bar / notch / no vertical centering
========================================================= */
@media (max-width: 991px){
  .gssk-popup-overlay{
    align-items:flex-start;
    padding-top:max(12px, env(safe-area-inset-top));
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    padding-left:12px;
    padding-right:12px;
  }

  .gssk-popup-inner{
    transform:none;
    max-height:calc(
      100dvh
      - max(12px, env(safe-area-inset-top))
      - max(12px, env(safe-area-inset-bottom))
    );
  }
}

/* =========================================================
   ✅ DESKTOP FIX: move popup higher (stable, no transform)
========================================================= */
@media (min-width: 992px){
  .gssk-popup-overlay{
    align-items:flex-start;
    padding-top:130px; /* adjust: 48–96px depending on preference */
  }
}

/* =========================================================
   ✅ POPUP – HEADERS
========================================================= */
.gssk-popup-header,
.gssk-popup-results-header{
  padding:14px 12px;
  background:#f1f3f5;
  border-bottom:1px solid #ddd;
  text-align:center;
}
.gssk-popup-title{
  margin:0;
  font-weight:700;
  font-size:18px;
  line-height:1.2;
}
.gssk-popup-header{ margin:-20px -20px 18px; }
.gssk-popup-results-header{ margin:25px -20px; }

/* =========================================================
   ✅ POPUP – FORM (theme protection)
========================================================= */
.gssk-popup-form{
  margin-bottom:14px;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

/* label: reset theme floats */
.gssk-popup-form label,
.gssk-popup-form .gssk-label{
  display:block !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
  text-align:left !important;
  margin:10px 0 6px !important;
  font-weight:600;
}

/* popup rows always block (mobile-first) */
.gssk-popup-form .gssk-row-country,
.gssk-popup-form .gssk-popup-row-country,
.gssk-popup-form .gssk-row-zip,
.gssk-popup-form .gssk-popup-row-zip,
.gssk-popup-form .gssk-row-qty,
.gssk-popup-form .gssk-popup-row-qty,
.gssk-popup-form .gssk-popup-calc-row{
  display:block !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
  margin:0 !important;
}

/* select/input in popup 100% width */
.gssk-popup-form select,
.gssk-popup-form input[type="text"],
.gssk-popup-form input[type="number"]{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
}

/* =========================================================
   ✅ CONSISTENT HEIGHT – FIELDS + BUTTONS (POPUP + FULLMODE)
========================================================= */
.gssk-popup-form :is(select, input[type="text"], input[type="number"], button),
.gssk-fullmode-wrapper :is(select, input[type="text"], input[type="number"], button),
#ps-zip-calc-popup,
#ps-zip-calc{
  height:var(--gssk-field-h) !important;
  box-sizing:border-box !important;
}

/* select: safe line-height */
.gssk-popup-form select,
.gssk-fullmode-wrapper select,
#ps-country,
#ps-popup-country{
  line-height:normal !important;
  box-sizing:border-box !important;
}
/* select paddings (caret alignment) */
#ps-country,
#ps-popup-country{
  padding-top:1px !important;
  padding-bottom:1px !important;
}

/* =========================================================
   ✅ FULLMODE – label theme reset (layout fix)
========================================================= */
.gssk-fullmode-wrapper label,
.gssk-fullmode-wrapper .gssk-label{
  display:block !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
  text-align:left !important;
  margin:10px 0 6px !important;
  font-weight:600;
}

/* ✅ FULLMODE – Postcode: identical label→field spacing (fix) */
.gssk-fullmode-wrapper .gssk-zip-label-row{
  margin:10px 0 6px !important;
  padding:0 !important;
}
/* label inside zip-label-row must not add extra margins */
.gssk-fullmode-wrapper .gssk-zip-label-row .gssk-label,
.gssk-fullmode-wrapper .gssk-zip-label-row label{
  margin:0 !important;
}
/* input-wrap without extra top gap */
.gssk-fullmode-wrapper .gssk-fullmode-input-wrap{
  margin-top:0 !important;
}

/* =========================================================
   ✅ INPUT WRAP + ISO PREFIX
========================================================= */
.gssk-popup-input-wrap,
.gssk-fullmode-input-wrap{
  position:relative;
  height:var(--gssk-field-h);
}

/* ISO prefix: full height + flex centering */
.gssk-popup-country,
.gssk-fullmode-country{
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  font-size:16px;
  line-height:1;
  pointer-events:none;
}

/* =========================================================
   ✅ INPUTS (space for right-side badge)
========================================================= */
/* shared base */
.gssk-popup-input,
.gssk-fullmode-input{
  height: var(--gssk-field-h) !important;
  padding-left: 40px;
  padding-right: 95px !important;
  padding-bottom: 0 !important;
  line-height: calc(var(--gssk-field-h) - 2px) !important; /* -2px for border */
  box-sizing: border-box !important;
}

/* POPUP/BUTTON MODE: keep text perfectly centered */
.gssk-popup-input{
  padding-top: 2px !important;
}

/* FULLMODE: some themes push text slightly lower – lift by 2px */
.gssk-fullmode-input{
  padding-top: 2px !important;
}

.gssk-popup-qty,
.gssk-fullmode-qty{
  height:var(--gssk-field-h) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:calc(var(--gssk-field-h) - 2px) !important;
  box-sizing:border-box !important;
}

.gssk-popup-qty{
  width:100% !important;
  max-width:110px;
}
.gssk-fullmode-qty{
  width:70px;
}

/* =========================================================
   ✅ "CALCULATE" BUTTON – popup mobile: centered under fields
========================================================= */
#ps-zip-calc-popup{
  float:none !important;
  clear:both !important;
  display:block !important;
  width:auto !important;
  min-width:160px;
  margin:14px auto 0 !important;
}

/* =========================================================
   ✅ "CLOSE" BUTTON – centered by default (both popups)
========================================================= */
#ps-popup-button .gssk-popup-close,
#ps-shipping-popup .gssk-popup-close{
  display:block !important;
  width:auto !important;
  min-width:160px;
  margin:0 auto !important;
  float:none !important;
  clear:both !important;
}

/* =========================================================
   ✅ POPUP FOOTER – separator
========================================================= */
#ps-popup-button .gssk-popup-footer,
#ps-shipping-popup .gssk-popup-footer{
  margin:14px -20px 0;
  padding:14px 20px 0;
  border-top:1px solid #ddd;
}

/* =========================================================
   ✅ ZIP BADGE (00-000 / ✅) – flex centered like ISO prefix
   CHANGE: remove border (no font/background changes)
========================================================= */
.gssk-popup-zip-icon,
.gssk-fullmode-zip-icon,
#ps-popup-zip-icon,
#ps-zip-icon{
  position:absolute;
  right:10px;
  top:0;
  bottom:0;
  transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  padding:2px 8px;
  border-radius:4px;
  font-size:14px;
  line-height:16px;
  white-space:nowrap;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease-in-out;
}

.gssk-popup-zip-icon.is-valid,
.gssk-popup-zip-icon.is-invalid,
.gssk-fullmode-zip-icon.is-valid,
.gssk-fullmode-zip-icon.is-invalid,
#ps-popup-zip-icon.is-valid,
#ps-popup-zip-icon.is-invalid,
#ps-zip-icon.is-valid,
#ps-zip-icon.is-invalid{
  opacity:1 !important;
}

/* remove border only */
.gssk-popup-zip-icon.is-valid,
.gssk-fullmode-zip-icon.is-valid,
#ps-popup-zip-icon.is-valid,
#ps-zip-icon.is-valid{
  color:#0a0;
  border:none !important;
}

.gssk-popup-zip-icon.is-invalid,
.gssk-fullmode-zip-icon.is-invalid,
#ps-popup-zip-icon.is-invalid,
#ps-zip-icon.is-invalid{
  color:#c00;
  border:none !important;
  font-weight:700;
}

/* =========================================================
   ✅ FULLMODE – form layout
========================================================= */
.gssk-fullmode-wrapper{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
}
.gssk-row-country{ flex:0 0 250px; margin:0; }
.gssk-row-zip{ flex:1 1 150px; margin:0; display:block; }

.gssk-zip-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.gssk-fullmode-input-wrap{
  flex:1 1 200px;
  min-width:200px;
}

/* =========================================================
   ✅ RESULTS – lists (new markup)
========================================================= */
.gssk-popup-list{
  display:block !important;
  padding-left:0;
  margin-top:12px;
}

.gssk-shipline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.gssk-shipleft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.gssk-carrier-logo{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

.gssk-shiptexts{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

.gssk-fm-carrier,
.gssk-bm-carrier,
.gssk-shipcarrier{
  font-size:16px;
  min-width:0;
  flex:0 1 auto;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gssk-fm-price,
.gssk-bm-price,
.gssk-shipprice{
  font-size:16px;
  flex:0 0 auto;
  font-weight:700;
  white-space:nowrap;
  text-align:right;
}

.gssk-fm-delay-inline,
.gssk-bm-delay-inline,
.gssk-shipdelay{
  min-width:0;
  flex:1 1 auto;
  opacity:.85;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gssk-fm-delay-inline:empty,
.gssk-bm-delay-inline:empty,
.gssk-shipdelay:empty{ display:none; }

/* mobile: show delay on the 2nd line */
@media (max-width:768px){
  .gssk-shipline{ align-items:flex-start; }
  .gssk-shiptexts{ flex-wrap:wrap; gap:6px; }
  .gssk-fm-delay-inline,
  .gssk-bm-delay-inline,
  .gssk-shipdelay{
    flex:0 0 100%;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    margin-top:2px;
  }
}

/* "show more" – spacing + no bold */
.gssk-show-more{
  display:inline-block;
  margin-top:6px;
  padding-top:2px;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* optional: subtle hover */
.gssk-show-more:hover{
  opacity:.85;
}

/* =========================================================
   ✅ STATES – buttons
========================================================= */
.is-disabled{ opacity:.5; cursor:not-allowed; }
.is-loading{ opacity:.7; cursor:not-allowed; }

/* =========================================================
   ✅ PREFIX OFF → ZIP input shifts left (FULL + POPUP)
========================================================= */
.gssk-fullmode-input-wrap:not(:has(.gssk-fullmode-country)) .gssk-fullmode-input{
  padding-left:12px !important;
}
.gssk-popup-input-wrap:not(:has(.gssk-popup-country)) .gssk-popup-input{
  padding-left:12px !important;
}

/* =========================================================
   ✅ DESKTOP: BUTTONMODE POPUP — one-row form + footer right
========================================================= */
@media (min-width:992px){

  #ps-popup-button .gssk-popup-inner{
    width:min(900px,92vw);
    max-width:900px;
  }

  #ps-popup-button .gssk-popup-form{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-end !important;
    gap:12px !important;
  }

  #ps-popup-button .gssk-popup-row-country,
  #ps-popup-button .gssk-popup-row-zip,
  #ps-popup-button .gssk-popup-row-qty,
  #ps-popup-button .gssk-popup-calc-row{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    clear:none !important;
  }

  #ps-popup-button .gssk-popup-row-country{ flex:1 1 0; }
  #ps-popup-button .gssk-popup-row-zip{ flex:1 1 0; }
  #ps-popup-button .gssk-popup-row-qty{ flex:0 1 110px; }
  #ps-popup-button .gssk-popup-calc-row{ flex:0 0 160px; }

  #ps-popup-button #ps-zip-calc-popup{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #ps-popup-button .gssk-popup-row-country select,
  #ps-popup-button .gssk-popup-row-zip input,
  #ps-popup-button .gssk-popup-row-qty input{ min-width:0 !important; }

  #ps-popup-button .gssk-popup-row-qty .gssk-popup-qty{ max-width:100% !important; }

  /* footer: close button on the right */
  #ps-popup-button .gssk-popup-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }
  #ps-popup-button .gssk-popup-close{ margin:0 !important; }

  /* results: steadier price column + limit description width */
  #ps-popup-button .gssk-bm-price,
  #ps-popup-button .gssk-shipprice{
    min-width:90px;
    text-align:right;
  }
  #ps-popup-button .gssk-bm-delay-inline,
  #ps-popup-button .gssk-shipdelay{
    max-width:420px;
  }
}