/* Cart & Checkout Recovery Tracker — storefront popups (v1.8.0)
   These rules used to live only in admin.css (wp-admin), so on the shop the popup had no
   overlay styling and showed as plain text. They now load on the front end. */

html.ccrt-popup-open, body.ccrt-popup-open { overflow: hidden !important; }

.ccrt-exit-offer, .ccrt-smart-offer {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  height: 100dvh;
  z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(15, 23, 42, .66);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  line-height: 1.5; text-align: center;
}
.ccrt-exit-offer *, .ccrt-smart-offer * { box-sizing: border-box; }
.ccrt-exit-offer [hidden], .ccrt-smart-offer [hidden] { display: none !important; }

.ccrt-exit-offer-box, .ccrt-smart-offer-box {
  position: relative; width: min(500px, 100%); margin: auto;
  max-height: calc(100dvh - 28px); overflow-y: auto;
  background: linear-gradient(145deg, #fff, #fff8f2);
  border: 1px solid rgba(255, 90, 0, .16); border-radius: 26px;
  padding: 30px 26px 24px; text-align: center;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .28);
  font-family: inherit; color: #120a06;
  animation: ccrtPopIn .22s ease-out;
}
.ccrt-smart-offer-box { background: #fff; border: 0; border-radius: 22px; width: min(430px, 100%); }
@keyframes ccrtPopIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ccrt-exit-offer-box, .ccrt-smart-offer-box { animation: none; } }

.ccrt-exit-offer .ccrt-exit-close, .ccrt-smart-offer .ccrt-smart-offer-close {
  position: absolute; right: 12px; top: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: #f1f5f9; color: #475569;
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: none;
}
.ccrt-exit-badge { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #fff0e6; color: #d94d00; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; }
.ccrt-smart-offer-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #64748b; margin-bottom: 8px; }
.ccrt-exit-offer .ccrt-exit-offer-box h3, .ccrt-smart-offer .ccrt-smart-offer-box h3 {
  margin: 12px 0 9px; padding: 0; font-size: 26px; line-height: 1.25; color: #120a06; unicode-bidi: plaintext;
}
.ccrt-exit-offer .ccrt-exit-message, .ccrt-smart-offer .ccrt-smart-offer-box p {
  margin: 0 auto 18px; max-width: 410px; color: #5f514b; font-size: 15px; line-height: 1.7; unicode-bidi: plaintext;
}
.ccrt-exit-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.ccrt-exit-benefits > div { border: 1px solid #ffe0cc; background: #fff; border-radius: 15px; padding: 13px 8px; }
.ccrt-exit-benefits strong { display: block; color: #ff5a00; font-size: 17px; }
.ccrt-exit-benefits span { display: block; margin-top: 3px; color: #7b6f69; font-size: 11px; }

.ccrt-exit-offer .ccrt-exit-form, .ccrt-smart-offer .ccrt-smart-offer-form { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
.ccrt-exit-offer .ccrt-exit-form input, .ccrt-smart-offer .ccrt-smart-offer-form input {
  display: block; width: 100%; height: auto; min-height: 48px; margin: 0;
  border: 1px solid #eaded7; border-radius: 12px; padding: 12px 14px; background: #fff; color: #111;
  font-size: 16px; /* 16px stops iPhones zooming into the field */ outline: 0; box-shadow: none; text-align: start; unicode-bidi: plaintext;
}
.ccrt-exit-offer .ccrt-exit-form input:focus, .ccrt-smart-offer .ccrt-smart-offer-form input:focus { border-color: #ff9a66; box-shadow: 0 0 0 3px rgba(255, 90, 0, .12); }
.ccrt-exit-offer .ccrt-exit-form button, .ccrt-smart-offer .ccrt-smart-offer-form button, .ccrt-smart-offer .ccrt-smart-offer-cta {
  display: block; width: 100%; min-height: 48px; margin: 0; border: 0; border-radius: 13px; padding: 13px 18px;
  background: #ff5a00; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(255, 90, 0, .22);
}
.ccrt-exit-offer .ccrt-exit-form button:disabled, .ccrt-smart-offer .ccrt-smart-offer-form button:disabled { opacity: .65; cursor: wait; }
.ccrt-exit-offer .ccrt-exit-no, .ccrt-smart-offer .ccrt-smart-offer-no {
  display: inline-block; border: 0; background: transparent; color: #7b6f69; padding: 12px 10px; margin: 4px 0 0; font-size: 14px; cursor: pointer; box-shadow: none;
}
.ccrt-exit-offer-box small, .ccrt-smart-offer-box small { display: block; margin-top: 10px; color: #9a8e88; font-size: 12px; line-height: 1.6; unicode-bidi: plaintext; }
.ccrt-exit-success, .ccrt-smart-offer-success { padding: 18px; border-radius: 14px; background: #ecfdf5; color: #087443; font-weight: 800; line-height: 1.6; margin-top: 10px; }

@media (max-width: 600px) {
  .ccrt-exit-offer, .ccrt-smart-offer { padding: 10px; align-items: center; }
  .ccrt-exit-offer-box, .ccrt-smart-offer-box { border-radius: 22px; padding: 28px 18px 18px; }
  .ccrt-exit-offer .ccrt-exit-offer-box h3, .ccrt-smart-offer .ccrt-smart-offer-box h3 { font-size: 22px; }
  .ccrt-exit-benefits strong { font-size: 15px; }
}
@media (max-height: 520px) {
  .ccrt-exit-offer, .ccrt-smart-offer { align-items: flex-start; }
  .ccrt-exit-benefits { display: none; }
}