/* =========================================================
   COUPON MODAL — redesigned & responsive
   Loaded last to override legacy all.min.css modal rules
   ========================================================= */

#couponModal .coupon-modal-dialog {
   width: calc(100% - 24px);
   max-width: 440px;
   margin: 16px auto;
}

#couponModal .coupon-modal-content {
   position: relative;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 32px);
   overflow: hidden;
   border: none;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 24px 64px rgba(26, 26, 46, 0.18);
}

#couponModal .coupon-modal-close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 5;
   width: 36px;
   height: 36px;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   color: #4b5563;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   transition: transform 0.15s ease, background 0.15s ease;
}

#couponModal .coupon-modal-close:hover {
   background: #fff;
   transform: scale(1.05);
}

#couponModal .coupon-modal-hero {
   flex-shrink: 0;
   padding: 28px 52px 20px 24px;
   text-align: center;
   background: linear-gradient(165deg, #fdf6fb 0%, #f8faf6 55%, #fff 100%);
   border-bottom: 1px solid rgba(211, 119, 176, 0.12);
}

#couponModal .coupon-modal-type {
   display: inline-block;
   margin: 0 0 10px;
   padding: 4px 12px;
   border-radius: 999px;
   background: rgba(211, 119, 176, 0.12);
   color: #b95794;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

#couponModal .coupon-modal-title {
   margin: 0 0 8px;
   font-size: clamp(1.35rem, 4.5vw, 1.75rem);
   font-weight: 800;
   line-height: 1.2;
   color: #1a1a2e;
   overflow-wrap: anywhere;
}

#couponModal .coupon-modal-desc {
   margin: 0;
   font-size: clamp(0.8125rem, 2.8vw, 0.9375rem);
   line-height: 1.5;
   color: #6b7280;
   overflow-wrap: anywhere;
}

#couponModal .coupon-modal-scroll {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding: 20px 20px 8px;
}

#couponModal .coupon-modal-store {
   display: flex;
   justify-content: center;
   margin-bottom: 18px;
}

#couponModal .coupon-modal-store-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: min(100%, 200px);
   min-height: 72px;
   padding: 12px 16px;
   border: 1px solid rgba(26, 26, 46, 0.08);
   border-radius: 14px;
   background: #fafafa;
   text-decoration: none;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#couponModal .coupon-modal-store-link:hover {
   border-color: rgba(211, 119, 176, 0.35);
   box-shadow: 0 8px 20px rgba(211, 119, 176, 0.12);
}

#couponModal .coupon-modal-store-logo {
   display: block;
   max-width: 100%;
   max-height: 56px;
   width: auto;
   height: auto;
   object-fit: contain;
}

#couponModal .coupon-modal-code-block {
   margin-bottom: 18px;
}

#couponModal .coupon-modal-code {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   width: 100%;
   min-height: auto;
   height: auto;
   margin: 0;
   padding: 16px 18px;
   border: 2px dashed #d377b0;
   border-radius: 14px;
   background: #fdf6fb;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

#couponModal .coupon-modal-code:hover {
   background: #fceef7;
   border-color: #b95794;
}

#couponModal .coupon-modal-code:active {
   transform: scale(0.99);
}

#couponModal button.coupon-modal-code-copy {
   appearance: none;
   display: block;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   font: inherit;
   color: inherit;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
}

#couponModal button.coupon-modal-code-copy:hover,
#couponModal button.coupon-modal-code-copy:focus {
   background: transparent;
   outline: none;
}

#couponModal .coupon-modal-code--deal {
   cursor: default;
   border-style: solid;
   background: #f0fdf4;
   border-color: #86efac;
}

#couponModal .coupon-modal-code-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #9ca3af;
   user-select: none;
   -webkit-user-select: none;
   pointer-events: none;
}

#couponModal .coupon-modal-code-value {
   font-family: ui-monospace, "Cascadia Code", "Courier New", monospace;
   font-size: clamp(1.125rem, 4vw, 1.5rem);
   font-weight: 800;
   letter-spacing: 0.08em;
   color: #1a1a2e;
   word-break: break-all;
   text-align: center;
   user-select: all;
   -webkit-user-select: all;
}

#couponModal button.coupon-modal-code-copy.pccopybtn {
   user-select: none;
   -webkit-user-select: none;
   min-width: 0;
   border: 0;
   background: transparent;
   box-shadow: none;
}

#couponModal .coupon-modal-code-hint {
   margin: 10px 0 0;
   font-size: 13px;
   line-height: 1.45;
   text-align: center;
   color: #6b7280;
}

#couponModal .coupon-modal-meta {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   margin: 0 0 16px;
   padding: 0;
   list-style: none;
}

#couponModal .coupon-modal-meta li {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 10px 8px;
   border-radius: 12px;
   background: #f9fafb;
   border: 1px solid rgba(26, 26, 46, 0.06);
   text-align: center;
}

#couponModal .coupon-modal-meta-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #9ca3af;
}

#couponModal .coupon-modal-meta-value {
   font-size: 12px;
   font-weight: 700;
   line-height: 1.3;
   color: #374151;
   overflow-wrap: anywhere;
}

#couponModal .coupon-modal-terms {
   padding: 14px 16px;
   border-radius: 14px;
   background: #f8faf6;
   border: 1px solid rgba(26, 26, 46, 0.06);
}

#couponModal .coupon-modal-terms-title {
   margin: 0 0 8px;
   font-size: 14px;
   font-weight: 700;
   color: #1a1a2e;
}

#couponModal .coupon-modal-terms p {
   margin: 0;
   font-size: 13px;
   line-height: 1.55;
   color: #4b5563;
   text-transform: none;
}

#couponModal .coupon-modal-terms strong {
   color: #b95794;
   font-weight: 700;
}

#couponModal .coupon-modal-footer {
   flex-shrink: 0;
   padding: 12px 20px 20px;
   border-top: 1px solid rgba(26, 26, 46, 0.06);
   background: #fff;
}

#couponModal .coupon-modal-cta.modal-radeem-btn {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 10px !important;
   width: 100% !important;
   max-width: none !important;
   min-height: 48px !important;
   height: auto !important;
   margin: 0 !important;
   padding: 14px 20px !important;
   border: 1px solid #d377b0 !important;
   border-radius: 999px !important;
   background: #d377b0 !important;
   color: #fff !important;
   font-size: 15px !important;
   font-weight: 700 !important;
   text-decoration: none !important;
   box-shadow: 0 8px 22px rgba(211, 119, 176, 0.28) !important;
   transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

#couponModal .coupon-modal-cta.modal-radeem-btn:hover {
   transform: translateY(-1px) !important;
   background: #b95794 !important;
   border-color: #b95794 !important;
   color: #fff !important;
   box-shadow: 0 12px 28px rgba(211, 119, 176, 0.34) !important;
}

#couponModal .coupon-modal-cta.modal-radeem-btn span,
#couponModal .coupon-modal-cta.modal-radeem-btn i {
   margin: 0;
   color: currentColor !important;
}

/* Override legacy all.min.css fixed heights/sizes */
#couponModal .copy_code,
#couponModal .modal-img-area,
#couponModal .modal-header,
#couponModal .modal-body,
#couponModal .modal-footer,
#couponModal .modal-terms-list,
#couponModal .modal-tp-title,
#couponModal .coupon_modal_text,
#couponModal .cpn-code-title {
   all: unset;
}

/* --- Tablet --- */
@media (max-width: 768px) {
   #couponModal .coupon-modal-dialog {
      width: calc(100% - 20px);
      margin: 12px auto;
   }

   #couponModal .coupon-modal-content {
      max-height: calc(100vh - 24px);
   }

   #couponModal .coupon-modal-hero {
      padding: 24px 48px 18px 20px;
   }

   #couponModal .coupon-modal-scroll {
      padding: 16px 16px 6px;
   }
}

/* --- Mobile --- */
@media (max-width: 480px) {
   #couponModal .coupon-modal-dialog {
      width: calc(100% - 12px);
      margin: 8px auto;
   }

   #couponModal .coupon-modal-content {
      max-height: calc(100vh - 16px);
      border-radius: 16px;
   }

   #couponModal .coupon-modal-close {
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      font-size: 14px;
   }

   #couponModal .coupon-modal-hero {
      padding: 22px 44px 16px 16px;
   }

   #couponModal .coupon-modal-scroll {
      padding: 14px 14px 4px;
   }

   #couponModal .coupon-modal-store-link {
      width: 100%;
      min-height: 64px;
   }

   #couponModal .coupon-modal-meta {
      grid-template-columns: 1fr;
      gap: 8px;
   }

   #couponModal .coupon-modal-meta li {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      padding: 10px 12px;
   }

   #couponModal .coupon-modal-meta-value {
      font-size: 13px;
      text-align: right;
   }

   #couponModal .coupon-modal-footer {
      padding: 10px 14px 14px;
   }

   #couponModal .coupon-modal-cta.modal-radeem-btn {
      min-height: 46px !important;
      font-size: 14px !important;
   }
}

/* --- Very small screens --- */
@media (max-width: 360px) {
   #couponModal .coupon-modal-code {
      padding: 14px 12px;
   }

   #couponModal .coupon-modal-code-value {
      letter-spacing: 0.04em;
   }
}