/* ============================================================
   couponko-redesign.css  v7.2
   "Obsidian" — Black / Zinc palette · clean modern neutral
   Coupon card · dashed-ticket CTA · filter tabs
   CSS-only · no HTML changes
   Loads after main.css / term.css via wp_enqueue_style dep chain
   ============================================================ */


/* ----------------------------------------------------------
   0. Design Tokens — Obsidian
   ---------------------------------------------------------- */

:root {
  /* ── Override WordPress theme palette variables ── */
  --primary-color:             #18181B;   /* Zinc 900 — brand black  */
  --coupon-btn-color:          #27272A;   /* Zinc 800                */
  --coupon-btn-secodary-color: #09090B;   /* Zinc 950                */
  --background-light-color:    #FAFAFA;   /* Zinc 50 — page bg       */
  --background-dark-color:     #18181B;
  --background-gray-color:     #FAFAFA;
  --small-border-radius:       10px;
  --large-border-radius:       12px;
  --footer-background-color:   #09090B;   /* near-black              */

  /* ── Component tokens ── */
  --ck-surface:       #FFFFFF;
  --ck-border:        #E4E4E7;            /* Zinc 200 */
  --ck-border-warm:   #A1A1AA;            /* Zinc 400 — hover        */
  --ck-text:          #09090B;            /* Zinc 950                */
  --ck-muted:         #71717A;            /* Zinc 500                */
  --ck-radius:        14px;
  --ck-radius-sm:     10px;
  --ck-radius-pill:   9999px;

  /* Brand gradient — tabs, deal button */
  --ck-btn-grad: linear-gradient(135deg, #18181B 0%, #09090B 100%);

  /* Shadows — pure black, no colour tint */
  --ck-shadow-card:  0 1px 3px  rgba(0, 0, 0, 0.06),
                     0 4px 14px rgba(0, 0, 0, 0.08);
  --ck-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.09),
                     0 14px 32px rgba(0, 0, 0, 0.14);
  --ck-shadow-tab:   0 2px 8px  rgba(0, 0, 0, 0.25);
}


/* ============================================================
   1. CARD CONTAINER
   ============================================================ */

.coupon-listing-item,
.store-listing-item {
  background:    var(--ck-surface) !important;
  border-radius: var(--ck-radius, 14px) !important;
  border:        1px solid var(--ck-border, #E4E4E7) !important;
  box-shadow:    var(--ck-shadow-card) !important;
  transition:    box-shadow   0.22s ease,
                 transform    0.22s ease,
                 border-color 0.22s ease !important;
}

.coupon-listing-item:hover,
.store-listing-item:hover {
  box-shadow:   var(--ck-shadow-hover) !important;
  transform:    translateY(-2px) !important;
  border-color: var(--ck-border-warm, #A1A1AA) !important;
}


/* ============================================================
   2. LEFT DISCOUNT THUMB — 80 px wide self-contained block
   ============================================================ */

.coupon-listing-item .coupon_featured.store-thumb-link,
.store-listing-item .store-thumb-link {
  flex:       0 0 80px !important;
  width:      80px !important;
  min-width:  80px !important;
  max-width:  80px !important;
  align-self: flex-start !important;
}

/* Discount-% text thumb */
.store-thumb.text-thumb {
  width:           80px !important;
  height:          80px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  background:      linear-gradient(145deg, #F4F4F5 0%, #E4E4E7 100%) !important;
  border-radius:   10px !important;
  border:          1.5px solid var(--ck-border, #E4E4E7) !important;
  padding-inline-end: 0 !important;
}

.store-thumb.text-thumb .thumb-padding {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 4px !important;
  color:           #18181B !important;
  font-weight:     900 !important;
  font-size:       17px !important;
  line-height:     1.2 !important;
  overflow:        visible !important;
}

/* Logo image thumb */
.coupon-listing-item .coupon_featured .store-thumb img,
.store-listing-item .store-thumb-link .store-thumb img {
  width:         80px !important;
  height:        80px !important;
  object-fit:    contain !important;
  border-radius: 10px !important;
  border:        1px solid var(--ck-border, #E4E4E7) !important;
}


/* ============================================================
   3. TITLE / CONTENT AREA
   ============================================================ */

.store-listing-item .latest-coupon .coupon-title {
  font-size:        15px !important;
  font-weight:      600 !important;
  line-height:      1.5 !important;
  color:            var(--ck-text, #09090B) !important;
  margin-block-end: 4px !important;
}

.store-listing-item .latest-coupon .coupon-title a {
  color: inherit !important;
}

.store-listing-item .latest-coupon .coupon-title a:hover {
  color: var(--primary-color, #18181B) !important;
}


/* ============================================================
   4. TYPE BADGES — pill shape, semantic palette
   ============================================================ */

.coupon-listing-item .c-type {
  margin-block-end: 4px !important;
}

.coupon-listing-item .c-type span {
  border-radius:  var(--ck-radius-pill, 9999px) !important;
  padding:        3px 10px !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.coupon-listing-item .c-type .c-code {
  background: #CCFBF1 !important;
  color:      #0F766E !important;
}

.coupon-listing-item .c-type .c-sale {
  background: #FFE4E6 !important;
  color:      #BE123C !important;
}

.coupon-listing-item .c-type .c-print {
  background: #F4F4F5 !important;
  color:      #3F3F46 !important;
}


/* ============================================================
   5. DEAL BUTTON  (sale coupons — no code)
   ============================================================ */

.coupon-button-type .coupon-deal {
  background:     var(--ck-btn-grad) !important;
  border-radius:  999px !important;
  font-weight:    700 !important;
  font-size:      14px !important;
  letter-spacing: 0.01em !important;
  box-shadow:     0 2px 8px rgba(0, 0, 0, 0.22) !important;
  transition:     opacity 0.18s ease, box-shadow 0.18s ease !important;
}

.coupon-button-type .coupon-deal:hover {
  opacity:    0.85 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important;
}


/* ============================================================
   6. CODE BUTTON — Dashed-Border Coupon Ticket
   ============================================================

   • Rounded-rect with DASHED outer border ("cut here" coupon look)
   • Left zone (GET CODE): solid black, fades to transparent at 90%
     — covers ~90% of the button, leaving a tiny code sliver visible
   • Right zone (code text): sits behind the fade, barely visible
   • overflow:hidden clips both abs zones to the rounded border-box

     ┌ - - - - - - - - - - - - - - - - - - - ┐
     ╎  GET CODE  [black→fade]     │ CODE… ╎
     └ - - - - - - - - - - - - - - - - - - - ┘
   ============================================================ */

/* 6a. Rounded-rect container with dashed border */
.coupon-button-type .coupon-code {
  display:       block !important;
  position:      relative !important;
  height:        44px !important;
  border-radius: 10px !important;
  overflow:      hidden !important;
  background:    #ffffff !important;
  border:        2px dashed #18181B !important;
  padding:       0 !important;
  box-sizing:    border-box !important;
  transition:    border-color 0.2s ease !important;
}

.coupon-listing-item .coupon-detail .coupon-button.coupon-code {
  width:     100% !important;
  min-width: 200px !important;
  height:    44px !important;
}

/* 6b. LEFT zone — solid black CTA, 90% wide, no fade */
.coupon-button-type .coupon-code .get-code {
  position:        absolute !important;
  left:            0 !important;
  top:             0 !important;
  width:           90% !important;
  height:          100% !important;
  background:      #18181B !important;
  color:           #ffffff !important;
  font-size:       13px !important;
  font-weight:     800 !important;
  letter-spacing:  0.07em !important;
  text-transform:  uppercase !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  padding:         0 0 0 16px !important;
  border-radius:   0 !important;
  z-index:         2 !important;
  box-shadow:      none !important;
  transition:      opacity 0.18s ease !important;
}

/* Kill legacy chevron wings */
.coupon-button-type .coupon-code .get-code::before,
.coupon-button-type .coupon-code .get-code::after {
  display: none !important;
}

/* 6c. RIGHT zone — code stub behind the fading GET CODE zone */
.coupon-button-type .coupon-code .code-text {
  position:        absolute !important;
  right:           0 !important;
  top:             0 !important;
  width:           35% !important;
  height:          100% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  background:      transparent !important;
  color:           #52525B !important;   /* Zinc 600 */
  font-size:       10px !important;
  font-weight:     700 !important;
  letter-spacing:  0.12em !important;
  text-transform:  uppercase !important;
  padding:         0 8px !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   clip !important;
  z-index:         1 !important;
  user-select:     none !important;
}

/* 6d. No pseudo-element separators needed */
.coupon-button-type .coupon-code::before,
.coupon-button-type .coupon-code::after {
  display: none !important;
}

/* 6e. Hover — slightly darker solid */
.coupon-button-type .coupon-code:hover .get-code {
  background: #09090B !important;
}

.coupon-button-type .coupon-code:hover {
  border-color: #52525B !important;
}

/* Kill legacy hover-slide from main.css */
.coupon-button-type .coupon-deal:hover .get-code,
.coupon-listing-item .coupon-detail .coupon-button:hover .get-code,
.tax-coupon_category .coupon-detail .coupon-button:hover .get-code {
  padding-right: 0 !important;
  left:          0 !important;
}


/* ============================================================
   7. FOOTER META ROW
   Layout: [ ↓ Read More ] ·····  [ 👍 | share | X Used | ✓ ]
   "Read More" is last in DOM → pushed LEFT via order:-1
   ============================================================ */

.coupon-listing-item .coupon-listing-footer {
  border-top:  1px solid #E4E4E7 !important;
  margin-top:  14px !important;
  padding-top: 10px !important;
}

.coupon-listing-item .coupon-listing-footer ul {
  display:     flex !important;
  flex-wrap:   wrap !important;
  align-items: center !important;
  gap:         2px 10px !important;
}

.coupon-listing-item .coupon-listing-footer ul li {
  float:        none !important;
  margin-right: 0 !important;
}

/* Read More (last <li>) → far left */
.coupon-listing-item .coupon-listing-footer ul li:last-child {
  order:        -1 !important;
  margin-right: auto !important;
  float:        none !important;
}

.coupon-listing-item .coupon-listing-footer ul li span,
.coupon-listing-item .coupon-listing-footer ul li a {
  color:     var(--ck-muted, #71717A) !important;
  font-size: 13px !important;
}

.coupon-listing-item .coupon-listing-footer ul li a:hover {
  color: var(--primary-color, #18181B) !important;
}


/* ============================================================
   8. FILTER TABS — black pill segmented control
   ============================================================ */

/* Reset term.css structural offset (sidebar is separate DOM) */
.header-content .top-heading-sec.filters {
  width:           100% !important;
  transform:       none !important;
  justify-content: flex-start !important;
  padding-block:   16px 4px !important;
}

/* Tab group container */
.filters .header-store-filter {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           3px !important;
  background:    #FAFAFA !important;
  border-radius: var(--ck-radius-pill, 9999px) !important;
  padding:       4px !important;
  border:        1px solid var(--ck-border, #E4E4E7) !important;
  box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Individual tab */
.filters .header-store-filter .store-filter-button {
  border-radius:  var(--ck-radius-pill, 9999px) !important;
  border:         none !important;
  background:     transparent !important;
  color:          var(--ck-muted, #71717A) !important;
  padding:        8px 22px !important;
  font-size:      14px !important;
  font-weight:    500 !important;
  line-height:    1.4 !important;
  margin:         0 !important;
  cursor:         pointer !important;
  white-space:    nowrap !important;
  box-shadow:     none !important;
  transition:     background 0.18s ease,
                  color      0.18s ease,
                  box-shadow 0.18s ease !important;
}

/* Active tab — black pill */
.filters .header-store-filter .store-filter-button.current,
.filters .header-store-filter .store-filter-button.active {
  background:  var(--ck-btn-grad) !important;
  color:       #ffffff !important;
  font-weight: 600 !important;
  box-shadow:  var(--ck-shadow-tab) !important;
}

/* Hover on inactive tab */
.filters .header-store-filter .store-filter-button:not(.current):not(.active):hover {
  background: #F4F4F5 !important;
  color:      var(--ck-text, #09090B) !important;
}


/* ============================================================
   9. RESPONSIVE
   ============================================================ */

/* Tablet */
@media screen and (max-width: 1024px) {
  .filters .header-store-filter .store-filter-button {
    padding:   7px 18px !important;
    font-size: 13px !important;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  /* Slightly smaller text on mobile */
  .coupon-button-type .coupon-code .get-code {
    width:     90% !important;
    font-size: 11px !important;
    padding:   0 0 0 12px !important;
  }

  /* Tabs wrap on very small screens */
  .filters .header-store-filter {
    border-radius: 16px !important;
    flex-wrap:     wrap !important;
  }

  .filters .header-store-filter .store-filter-button {
    padding:   7px 14px !important;
    font-size: 13px !important;
  }
}


/* ============================================================
   10. COUPON POPUP MODAL — Ultra Minimal, Premium
   Stripe / Notion / Linear aesthetic
   Scoped entirely to .coupon-modal — zero bleed to other UI
   ============================================================ */

/* 10a. Backdrop — dark with blur */
.ui.dimmer.modals.page,
.ui.page.modals.dimmer {
  background:             rgba(0, 0, 0, 0.50) !important;
  backdrop-filter:        blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* 10b. Modal container */
.coupon-modal.ui.modal {
  background:    #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow:    0 10px 40px rgba(0, 0, 0, 0.10),
                 0 2px  8px  rgba(0, 0, 0, 0.06) !important;
  max-width:     460px !important;
  width:         90% !important;
  padding:       0 !important;
  overflow:      hidden !important;
  border:        none !important;
}

/* 10c. Remove Semantic UI's default scrolling padding */
.coupon-modal .scrolling.content {
  padding:    0 !important;
  overflow-y: visible !important;
}

/* ── 10d. Header ── */
.coupon-modal .coupon-header.ck-mhd {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         18px 22px !important;
  background:      #FFFFFF !important;
  border-bottom:   1px solid #F3F4F6 !important;
  margin-block-start: 0 !important;
}

/* Store logo — flat, no coloured box */
.coupon-modal .coupon-header.ck-mhd .coupon-store-thumb img {
  max-height:    38px !important;
  max-width:     110px !important;
  width:         auto !important;
  height:        auto !important;
  object-fit:    contain !important;
  border-radius: 6px !important;
  border:        none !important;
  background:    transparent !important;
  box-shadow:    none !important;
}

/* Minimal 32 px circle close button */
.coupon-modal .coupon-header .close.ck-close {
  position:        static !important;      /* pull out of main.css absolute */
  top:             auto !important;
  right:           auto !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  background:      transparent !important;
  transition:      background 0.15s ease !important;
  flex-shrink:     0 !important;
}

.coupon-modal .coupon-header .close.ck-close:hover {
  background: #F3F4F6 !important;
}

/* ── 10e. Body ── */
.coupon-modal .coupon-content.ck-mbody {
  padding:    28px 24px 28px !important;
  width:      100% !important;
  margin:     0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ── 10f. Headline ── */
.coupon-modal .ck-headline {
  margin-bottom: 22px !important;
}

.coupon-modal .ck-modal-title {
  font-size:   22px !important;
  font-weight: 700 !important;
  color:       #111827 !important;
  margin:      0 0 8px !important;
  line-height: 1.3 !important;
}

.coupon-modal .ck-modal-sub {
  font-size:   14px !important;
  color:       #6B7280 !important;
  margin:      0 !important;
  line-height: 1.5 !important;
}

/* ── 10g. Code box ── */
.coupon-modal .modal-code {
  background: transparent !important;
  text-align: left !important;
  padding:    0 !important;
}

/* Override any Semantic UI action-input or dashed-ticket styles */
.coupon-modal .modal-code .coupon-code.ck-code-row {
  display:       flex !important;
  align-items:   center !important;
  gap:           0 !important;
  background:    #F9FAFB !important;
  border:        1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding:       6px 6px 6px 16px !important;
  box-sizing:    border-box !important;
  width:         100% !important;
  /* reset Section 6 ticket-button overrides */
  height:        auto !important;
  min-height:    56px !important;
  overflow:      visible !important;
  position:      static !important;
}

/* Code input — monospace, prominent */
.coupon-modal .modal-code .coupon-code.ck-code-row input.code-text {
  flex:           1 1 auto !important;
  font-family:    'Courier New', Courier, monospace !important;
  font-size:      18px !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  color:          #111827 !important;
  background:     transparent !important;
  border:         none !important;
  outline:        none !important;
  padding:        0 !important;
  text-align:     left !important;
  max-width:      none !important;
  width:          auto !important;
  min-width:      0 !important;
  /* kill main.css dashed border */
  border-right-color: transparent !important;
  box-shadow:         none !important;
}

/* Copy button — dark, solid */
.coupon-modal .modal-code .coupon-code.ck-code-row .ck-copy {
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             6px !important;
  background:      #111827 !important;
  color:           #FFFFFF !important;
  border:          none !important;
  border-radius:   10px !important;
  padding:         11px 20px !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  cursor:          pointer !important;
  transition:      background 0.15s ease,
                   transform  0.10s ease !important;
  white-space:     nowrap !important;
  text-decoration: none !important;
  box-shadow:      none !important;
  /* reset Section 6 absolute-position overrides */
  position:        static !important;
  left:            auto !important;
  top:             auto !important;
  width:           auto !important;
  height:          auto !important;
  min-width:       0 !important;
}

.coupon-modal .modal-code .coupon-code.ck-code-row .ck-copy:hover {
  background: #1F2937 !important;
}

.coupon-modal .modal-code .coupon-code.ck-code-row .ck-copy:active {
  transform: scale(0.97) !important;
}

/* Copied state — green feedback */
.coupon-modal .modal-code .coupon-code.ck-code-row .ck-copy.copied,
.coupon-modal .modal-code .ck-copy.copied {
  background: #16A34A !important;
  transform:  scale(1) !important;
}

.ck-copy-icon {
  flex-shrink: 0 !important;
}

/* ── 10h. Expiry row ── */
.coupon-modal .ck-modal-meta {
  margin-top: 18px !important;
  text-align: center !important;
}

.coupon-modal .ck-expiry {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         5px !important;
  font-size:   13px !important;
  color:       #9CA3AF !important;
}

.coupon-modal .ck-expiry svg {
  flex-shrink: 0 !important;
  color:       #9CA3AF !important;
}

/* ── 10i. Trust line ── */
.coupon-modal .ck-trust {
  margin-top:    12px !important;
  margin-bottom: 0 !important;
  font-size:     12px !important;
  color:         #9CA3AF !important;
  text-align:    center !important;
}

/* ── 10j. Hide removed sections ── */
.coupon-modal .ui.clearing.divider,
.coupon-modal footer.clearfix,
.coupon-modal .rating-box,
.coupon-modal .share-url-box,
.coupon-modal .modal-coupon-meta {
  display: none !important;
}

/* ── 10k. Mobile ── */
@media screen and (max-width: 600px) {
  .coupon-modal.ui.modal {
    width:         100% !important;
    max-width:     100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin:        0 !important;
  }

  .coupon-modal .coupon-content.ck-mbody {
    padding: 22px 18px 28px !important;
  }

  .coupon-modal .modal-code .coupon-code.ck-code-row {
    flex-direction: column !important;
    align-items:    stretch !important;
    padding:        14px !important;
    gap:            10px !important;
    min-height:     auto !important;
  }

  .coupon-modal .modal-code .coupon-code.ck-code-row input.code-text {
    text-align: center !important;
    font-size:  16px !important;
  }

  .coupon-modal .modal-code .coupon-code.ck-code-row .ck-copy {
    justify-content: center !important;
    padding:         13px 18px !important;
    font-size:       15px !important;
  }

  .coupon-modal .ck-modal-title {
    font-size: 19px !important;
  }
}