/* Exit popup: black and gold launch-offer theme */
#ouibounce-modal {
   --exit-gold-1: #fff1bf;
   --exit-gold-2: #ffd056;
   --exit-gold-3: #f0a020;
   --exit-gold-4: #b8740c;
   --exit-ink: #120e08;
   padding: 12px;
   overflow-y: auto;
   background: rgba(8, 6, 3, .84);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   font-family: 'Inter', sans-serif;
}

#ouibounce-modal .modal-dialog { width: 100%; max-width: 560px; min-height: calc(100% - 24px); margin: 0 auto; }

/* Card with a gold gradient border */
#ouibounce-modal .modal-content {
   position: relative;
   overflow: hidden;
   color: #fff;
   border: 1.5px solid transparent;
   border-radius: 28px;
   background:
      linear-gradient(180deg, #17120b, #0d0a06) padding-box,
      linear-gradient(150deg, var(--exit-gold-1), var(--exit-gold-3) 35%, #5a3b0a 60%, var(--exit-gold-2)) border-box;
   box-shadow: 0 30px 100px rgba(0, 0, 0, .7), 0 0 80px rgba(240, 160, 32, .18);
   animation: exitPop .45s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes exitPop {
   from { opacity: 0; transform: scale(.92) translateY(14px); }
}

#ouibounce-modal .exit-close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 3;
   width: 36px;
   height: 36px;
   padding: 0;
   color: var(--exit-gold-1);
   font-size: 24px;
   line-height: 1;
   border: 1px solid rgba(255, 208, 86, .45);
   border-radius: 50%;
   background: rgba(0, 0, 0, .45);
   cursor: pointer;
   transition: transform .2s ease, background .2s ease;
}

#ouibounce-modal .exit-close:hover { transform: rotate(90deg); background: rgba(255, 208, 86, .18); }

/* Header: dark gold with a subtle diamond lattice and sparkles */
#ouibounce-modal .exit-header {
   position: relative;
   padding: 34px 40px 58px;
   text-align: center;
   background:
      radial-gradient(ellipse at 50% 0%, rgba(255, 208, 86, .35), transparent 65%),
      repeating-linear-gradient(60deg, rgba(255, 208, 86, .05) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(-60deg, rgba(255, 208, 86, .05) 0 1px, transparent 1px 22px),
      linear-gradient(180deg, #3a2608, #1a1208);
   border-bottom: 1px solid rgba(255, 208, 86, .25);
}

#ouibounce-modal .exit-sparkle {
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--exit-gold-1);
   box-shadow: 0 0 10px 3px rgba(255, 208, 86, .7);
   animation: exitTwinkle 2.4s ease-in-out infinite;
}

#ouibounce-modal .exit-sparkle-1 { top: 24px; left: 12%; }
#ouibounce-modal .exit-sparkle-2 { top: 54px; right: 18%; width: 4px; height: 4px; animation-delay: .8s; }
#ouibounce-modal .exit-sparkle-3 { bottom: 40px; left: 22%; width: 3px; height: 3px; animation-delay: 1.5s; }

@keyframes exitTwinkle {
   50% { opacity: .2; transform: scale(.6); }
}

#ouibounce-modal .exit-alert {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 62px;
   height: 62px;
   margin-bottom: 14px;
   color: #3b2400;
   font-size: 24px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--exit-gold-1), var(--exit-gold-2) 45%, var(--exit-gold-3));
   box-shadow: 0 0 0 8px rgba(255, 208, 86, .14), 0 0 0 16px rgba(255, 208, 86, .06), 0 10px 30px rgba(240, 160, 32, .5);
}

#ouibounce-modal .exit-header h2 {
   margin: 0 0 8px;
   color: #fff;
   font-size: clamp(28px, 5vw, 40px);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -1px;
   text-transform: uppercase;
}

#ouibounce-modal .exit-header h2 span {
   display: block;
   background: linear-gradient(92deg, var(--exit-gold-1), var(--exit-gold-2) 45%, var(--exit-gold-3));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

#ouibounce-modal .exit-header p { margin: 0; color: rgba(255, 241, 191, .8); font-size: 15px; line-height: 1.5; }

#ouibounce-modal .exit-body { padding: 0 30px 20px; text-align: center; }

/* Price ticket */
#ouibounce-modal .exit-offer {
   position: relative;
   max-width: 380px;
   margin: -34px auto 18px;
   padding: 20px 18px 18px;
   border: 1px solid rgba(255, 208, 86, .4);
   border-radius: 22px;
   background: linear-gradient(160deg, #241a0c, #120d06);
   box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 241, 191, .12);
}

#ouibounce-modal .exit-badge {
   display: inline-block;
   padding: 6px 14px;
   color: #2a1a00;
   font-size: 11px;
   font-weight: 900;
   letter-spacing: 1px;
   border-radius: 30px;
   background: linear-gradient(110deg, var(--exit-gold-1), var(--exit-gold-2));
}

#ouibounce-modal .exit-price {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin: 14px 0 10px;
}

#ouibounce-modal .exit-price small {
   display: block;
   color: rgba(255, 241, 191, .6);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

#ouibounce-modal .exit-was del {
   color: rgba(255, 255, 255, .55);
   font-size: 40px;
   font-weight: 800;
   text-decoration-color: #ff5f5f;
   text-decoration-thickness: 3px;
}

#ouibounce-modal .exit-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   color: var(--exit-gold-2);
   font-size: 14px;
   border: 1px solid rgba(255, 208, 86, .4);
   border-radius: 50%;
}

#ouibounce-modal .exit-now strong {
   display: block;
   font-size: 76px;
   font-weight: 900;
   line-height: 1;
   letter-spacing: -3px;
   background: linear-gradient(180deg, var(--exit-gold-1), var(--exit-gold-2) 55%, var(--exit-gold-3));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(0 4px 18px rgba(255, 190, 60, .35));
}

#ouibounce-modal .exit-now sup { top: -.9em; font-size: .4em; letter-spacing: 0; }

#ouibounce-modal .exit-saving {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   color: #7ee2a8;
   font-size: 12px;
   font-weight: 700;
   border: 1px solid rgba(126, 226, 168, .3);
   border-radius: 999px;
   background: rgba(126, 226, 168, .08);
}

/* Coupon strip */
#ouibounce-modal .exit-coupon {
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 380px;
   margin: 0 auto 16px;
   padding: 10px 12px;
   text-align: left;
   border: 2px dashed rgba(255, 208, 86, .45);
   border-radius: 14px;
   background: rgba(255, 208, 86, .06);
}

#ouibounce-modal .exit-ticket {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   color: #2a1a00;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--exit-gold-1), var(--exit-gold-3));
}

#ouibounce-modal .exit-code { flex: 1; min-width: 0; }

#ouibounce-modal .exit-code span {
   display: block;
   margin-bottom: 3px;
   color: rgba(255, 241, 191, .6);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1px;
}

#ouibounce-modal .exit-code code {
   color: var(--exit-gold-2);
   font-size: 16px;
   font-weight: 800;
   letter-spacing: 1.5px;
   word-break: break-all;
}

#ouibounce-modal .exit-copy {
   padding: 9px 14px;
   color: var(--exit-gold-1);
   font-size: 12px;
   font-weight: 800;
   border: 1px solid rgba(255, 208, 86, .5);
   border-radius: 9px;
   background: rgba(255, 208, 86, .12);
   cursor: pointer;
   transition: background .2s ease;
}

#ouibounce-modal .exit-copy:hover { background: rgba(255, 208, 86, .25); }

/* Gold CTA with a light sweep */
#ouibounce-modal .exit-buy {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 16px 18px;
   margin-bottom: 14px;
   overflow: hidden;
   color: #2a1a00;
   font-size: 20px;
   font-weight: 900;
   line-height: 1.25;
   text-decoration: none;
   border-radius: 14px;
   background: linear-gradient(100deg, var(--exit-gold-1), var(--exit-gold-2) 40%, var(--exit-gold-3));
   box-shadow: 0 6px 0 var(--exit-gold-4), 0 16px 34px rgba(240, 160, 32, .35);
   transition: transform .15s ease, box-shadow .15s ease;
}

#ouibounce-modal .exit-buy::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
   transform: translateX(-100%);
   animation: exitShine 3s ease-in-out infinite;
}

@keyframes exitShine {
   60%, 100% { transform: translateX(100%); }
}

#ouibounce-modal .exit-buy:hover { color: #2a1a00; transform: translateY(2px); box-shadow: 0 4px 0 var(--exit-gold-4), 0 12px 26px rgba(240, 160, 32, .35); }

/* Order bump */
#ouibounce-modal .exit-bump {
   padding: 12px;
   color: rgba(255, 255, 255, .78);
   text-align: left;
   border: 1.5px dashed rgba(255, 208, 86, .4);
   border-radius: 14px;
   background: rgba(255, 255, 255, .03);
}

#ouibounce-modal .exit-bump label {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   margin-bottom: 10px;
   color: #2a1a00;
   font-size: 15px;
   font-weight: 800;
   border-radius: 9px;
   background: linear-gradient(100deg, var(--exit-gold-1), var(--exit-gold-2));
   cursor: pointer;
}

#ouibounce-modal .exit-bump input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--exit-gold-4); }
#ouibounce-modal .exit-bump p { margin: 0 4px 8px; font-size: 13px; line-height: 1.55; }
#ouibounce-modal .exit-bump p b { color: #ff8b75; }
#ouibounce-modal .exit-bump .exit-addon-price { margin-bottom: 2px; }
#ouibounce-modal .exit-bump .exit-addon-price strong { color: var(--exit-gold-2); }
#ouibounce-modal .exit-bump .exit-addon-price del { color: rgba(255, 255, 255, .45); }

#ouibounce-modal .exit-footer {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 14px;
   color: rgba(255, 241, 191, .6);
   font-size: 11px;
}

#ouibounce-modal .exit-footer i { margin-right: 5px; color: var(--exit-gold-2); }
#ouibounce-modal :is(button, a, input):focus-visible { outline: 3px solid var(--exit-gold-2); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
   #ouibounce-modal .modal-content,
   #ouibounce-modal .exit-sparkle,
   #ouibounce-modal .exit-buy::after { animation: none; }
}

@media (max-width: 480px) {
   #ouibounce-modal { padding: 8px; }
   #ouibounce-modal .modal-dialog { min-height: calc(100% - 16px); }
   #ouibounce-modal .modal-content { border-radius: 20px; }
   #ouibounce-modal .exit-header { padding: 30px 18px 52px; }
   #ouibounce-modal .exit-header p { font-size: 13px; }
   #ouibounce-modal .exit-body { padding: 0 14px 16px; }
   #ouibounce-modal .exit-was del { font-size: 30px; }
   #ouibounce-modal .exit-now strong { font-size: 60px; }
   #ouibounce-modal .exit-buy { font-size: 17px; }
   #ouibounce-modal .exit-bump label { font-size: 13px; }
}

/* =========================================================
   Fit-to-screen + premium refinements
========================================================= */
#ouibounce-modal { padding: 16px; }
#ouibounce-modal .modal-dialog { max-width: 500px; min-height: calc(100% - 32px); margin: 0 auto; }

/* Never taller than the viewport: scroll inside the card if needed */
#ouibounce-modal .modal-content {
   max-height: calc(100vh - 32px);
   max-height: calc(100dvh - 32px);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 208, 86, .5) transparent;
   border-radius: 26px;
   box-shadow:
      0 30px 100px rgba(0, 0, 0, .75),
      0 0 0 6px rgba(255, 208, 86, .06),
      0 0 90px rgba(240, 160, 32, .22);
}

#ouibounce-modal .modal-content::-webkit-scrollbar { width: 6px; }
#ouibounce-modal .modal-content::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(255, 208, 86, .45); }

/* Thin inner gold frame for a jewellery-box feel */
#ouibounce-modal .modal-content::before {
   content: "";
   position: absolute;
   inset: 7px;
   z-index: 2;
   border: 1px solid rgba(255, 208, 86, .14);
   border-radius: 20px;
   pointer-events: none;
}

/* Compact header with a curved bottom edge */
#ouibounce-modal .exit-header {
   padding: 24px 34px 44px;
   border-bottom: 0;
}

#ouibounce-modal .exit-header::after {
   content: "";
   position: absolute;
   left: -10%;
   right: -10%;
   bottom: -40px;
   height: 70px;
   border-radius: 50%;
   background: #120e08;
   box-shadow: 0 -1px 0 rgba(255, 208, 86, .35);
}

#ouibounce-modal .exit-alert {
   width: 50px;
   height: 50px;
   margin-bottom: 10px;
   font-size: 19px;
   box-shadow: 0 0 0 6px rgba(255, 208, 86, .14), 0 0 0 12px rgba(255, 208, 86, .06), 0 10px 30px rgba(240, 160, 32, .5);
}

#ouibounce-modal .exit-header h2 {
   font-size: clamp(24px, 4.2vw, 34px);
   letter-spacing: -.5px;
}

/* Serif italic accent instead of a second uppercase line */
#ouibounce-modal .exit-header h2 span {
   margin-top: 2px;
   font-family: 'Fraunces', Georgia, serif;
   font-size: 1.12em;
   font-style: italic;
   font-weight: 800;
   text-transform: none;
   letter-spacing: -.5px;
}

#ouibounce-modal .exit-header p { font-size: 14px; }

#ouibounce-modal .exit-body { position: relative; z-index: 1; padding: 0 26px 18px; }

#ouibounce-modal .exit-offer {
   max-width: 360px;
   margin: -22px auto 14px;
   padding: 16px 16px 14px;
}

/* Tiny gold ornament under the badge */
#ouibounce-modal .exit-badge { position: relative; }
#ouibounce-modal .exit-price { margin: 10px 0 8px; gap: 14px; }
#ouibounce-modal .exit-was del { font-size: 34px; }
#ouibounce-modal .exit-now strong { font-size: 64px; }

#ouibounce-modal .exit-coupon { max-width: 360px; margin-bottom: 14px; padding: 8px 10px; }
#ouibounce-modal .exit-ticket { width: 34px; height: 34px; }
#ouibounce-modal .exit-code code { font-size: 15px; }

#ouibounce-modal .exit-buy { padding: 14px 16px; font-size: 18px; margin-bottom: 14px; }

#ouibounce-modal .exit-bump { padding: 10px; }
#ouibounce-modal .exit-bump label { padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
#ouibounce-modal .exit-bump p { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }

#ouibounce-modal .exit-footer { margin-top: 12px; gap: 14px; }

/* Short screens (laptops): tighten further so it all fits without scrolling */
@media (max-height: 820px) {
   #ouibounce-modal .exit-header { padding: 18px 30px 40px; }
   #ouibounce-modal .exit-alert { width: 42px; height: 42px; margin-bottom: 8px; font-size: 16px; }
   #ouibounce-modal .exit-header h2 { font-size: 26px; margin-bottom: 4px; }
   #ouibounce-modal .exit-header p { font-size: 13px; }
   #ouibounce-modal .exit-offer { padding: 12px 14px; margin-bottom: 12px; }
   #ouibounce-modal .exit-price { margin: 6px 0; }
   #ouibounce-modal .exit-was del { font-size: 28px; }
   #ouibounce-modal .exit-now strong { font-size: 52px; }
   #ouibounce-modal .exit-coupon { margin-bottom: 12px; }
   #ouibounce-modal .exit-buy { padding: 12px 14px; font-size: 17px; margin-bottom: 12px; }
   #ouibounce-modal .exit-bump p { font-size: 12px; }
   #ouibounce-modal .exit-footer { margin-top: 10px; }
}

@media (max-height: 680px) {
   #ouibounce-modal .exit-sparkle,
   #ouibounce-modal .exit-alert { display: none; }
   #ouibounce-modal .exit-header { padding: 16px 30px 36px; }
   #ouibounce-modal .exit-saving { display: none; }
}

@media (max-width: 480px) {
   #ouibounce-modal { padding: 10px; }
   #ouibounce-modal .modal-content { max-height: calc(100dvh - 20px); border-radius: 20px; }
   #ouibounce-modal .modal-content::before { inset: 5px; border-radius: 16px; }
   #ouibounce-modal .exit-header { padding: 22px 18px 42px; }
   #ouibounce-modal .exit-header h2 { font-size: 24px; }
   #ouibounce-modal .exit-body { padding: 0 14px 14px; }
   #ouibounce-modal .exit-price { gap: 10px; }
   #ouibounce-modal .exit-was del { font-size: 26px; }
   #ouibounce-modal .exit-now strong { font-size: 50px; }
   #ouibounce-modal .exit-arrow { width: 28px; height: 28px; font-size: 12px; }
   #ouibounce-modal .exit-buy { font-size: 16px; gap: 8px; }
   #ouibounce-modal .exit-footer { gap: 8px 14px; }
}