/* =====================================================

   My Clipped Deals — PREMIUM PRINT COUPONS (2-COLUMN) ✅

   - Desktop/Tablet: 2 columns

   - Mobile: 1 column

   - Print: 2 columns



   NON-CONFLICT MASTERPIECE:

   - NOTHING in here touches global .ndc-shell / .ndc-glass-panel

     unless it is scoped under .ndc-clipped-shell.

   - No global :root variables (scoped to clipped page only).

===================================================== */





/* =====================================================

   ✅ FIXES (SCOPED):

   1) Shell spacing ONLY on clipped page

   2) Glass panel styling ONLY on clipped page

   3) Remove duplicate internal header ("My Clipped Deals")

   4) Keep Print/Clear centered under the main page header

===================================================== */



/* Page-scoped design tokens (won’t affect the rest of the site) */

.ndc-clipped-shell{

  --ndc-orange:#ff7a1a;

  --ndc-teal:#009FBD;

  --ndc-ink:#0f172a;

  --paper:#ffffff;

  --paper-2:#f8fafc;

  --line: rgba(15,23,42,0.18);

  --soft: rgba(15,23,42,0.08);

  --shadow: 0 16px 34px rgba(0,0,0,0.14);

}



/* Shell wrapper (ONLY on clipped page) */

.ndc-clipped-shell .ndc-shell{

  max-width:1140px;

  margin:0 auto;

  padding:40px 16px 60px;

}



/* White glass panel BEHIND content only (ONLY on clipped page) */

.ndc-clipped-shell .ndc-glass-panel{

  border-radius: 28px;

  background: rgba(255,255,255,0.90);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 18px 46px rgba(0,0,0,0.22);

  border: 1px solid rgba(255,255,255,0.55);

  padding: 28px 22px 30px;

}



/* If you have a “global wash” elsewhere, ensure we don’t add one here */

.ndc-clipped-shell .ndc-glass-panel::before,

.ndc-clipped-shell .ndc-glass-panel::after{

  content:none !important;

}



/* Hide the duplicate internal title */

.ndc-clipped-shell .ndc-clipped-h{

  display:none !important;

}



/* Remove extra spacing that was intended for the internal title */

.ndc-clipped-shell .ndc-clipped-head{

  margin: 0 0 10px !important;

  padding: 0 !important;

}



/* Center the buttons on the page */

.ndc-clipped-shell .ndc-clipped-actions{

  display:flex;

  justify-content:center;

  align-items:center;

  gap: 12px;

  flex-wrap: wrap;

  width: 100%;

  margin: 10px auto 14px !important;

}



/* Optional: hide the second helper line (since page subtitle already says it) */

.ndc-clipped-shell .ndc-clipped-sub{

  display:none !important;

}



/* Empty state - center the card */

.ndc-clipped-shell .ndc-clipped-empty{

  display: flex !important;

  justify-content: center;

  align-items: center;

  padding: 40px 16px;

  text-align: center;

}



.ndc-clipped-shell .ndc-clipped-empty-card{

  max-width: 500px;

  width: 100%;

  text-align: center;

}



.ndc-clipped-shell .ndc-clipped-empty-card h3{

  margin: 0 0 12px 0;

  color: var(--ndc-orange);

  font-weight: 900;

  font-size: 20px;

}



.ndc-clipped-shell .ndc-clipped-empty-card p{

  margin: 0 0 20px 0;

  color: rgba(15,23,42,0.70);

  font-size: 15px;

  line-height: 1.5;

}



.ndc-clipped-shell .ndc-clipped-empty-card .ndc-btn{

  display: inline-block;

}





/* =====================================================

   GRID — 2 columns by default

===================================================== */



.ndc-clipped-shell .ndc-clipped-grid{

  display:grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 18px;

  align-items: start;

}



/* Mobile: 1 column */

@media (max-width: 620px){

  .ndc-clipped-shell .ndc-clipped-grid{

    grid-template-columns: 1fr;

    gap: 14px;

  }

}





/* =====================================================

   COUPON CARD

===================================================== */



.ndc-clipped-shell .ndc-cpn{

  position: relative;

  background: var(--paper);

  border-radius: 18px;

  box-shadow: var(--shadow);

  overflow: hidden;

  border: 2px solid rgba(0,0,0,0.06);

}



/* Ticket notches */

.ndc-clipped-shell .ndc-cpn::before,

.ndc-clipped-shell .ndc-cpn::after{

  content:"";

  position:absolute;

  top: 54%;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  transform: translateY(-50%);

  background: var(--paper-2);

  border: 2px dotted var(--line);

  z-index: 2;

}

.ndc-clipped-shell .ndc-cpn::before{ left: -14px; }

.ndc-clipped-shell .ndc-cpn::after{ right: -14px; }



/* Top accent bar */

.ndc-clipped-shell .ndc-cpn-head{

  padding: 16px 18px 12px;

  background: linear-gradient(90deg, rgba(0,159,189,0.10), rgba(255,122,26,0.10));

  border-bottom: 1px solid rgba(0,0,0,0.06);

  position: relative;

}

.ndc-clipped-shell .ndc-cpn-head::before{

  content:"";

  position:absolute;

  left:0; right:0; top:0;

  height: 6px;

  background: linear-gradient(90deg, var(--ndc-teal), var(--ndc-orange));

}



/* Business name */

.ndc-clipped-shell .ndc-cpn-brand{

  font-weight: 950;

  letter-spacing: 1px;

  text-transform: uppercase;

  font-size: 14px;

  color: rgba(15,23,42,0.75);

  text-align: center;

}



/* Meta row */

.ndc-clipped-shell .ndc-cpn-meta{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  margin-top: 10px;

  flex-wrap:wrap;

}



.ndc-clipped-shell .ndc-cpn-pill{

  display:inline-flex;

  align-items:center;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(0,159,189,0.35);

  background: rgba(0,159,189,0.10);

  color: rgba(15,23,42,0.85);

  font-weight: 900;

  font-size: 12px;

}



.ndc-clipped-shell .ndc-cpn-date{

  font-size: 12px;

  font-weight: 800;

  color: rgba(15,23,42,0.60);

}



/* Big offer zone */

.ndc-clipped-shell .ndc-cpn-body{

  padding: 16px 18px 14px;

  text-align: center;

  background: var(--paper);

}



.ndc-clipped-shell .ndc-cpn-offer{

  font-weight: 1000;

  font-size: 30px;

  line-height: 1.05;

  color: #0b1220;

  margin: 4px 0 10px;

}



/* Slightly smaller offer on very small phones */

@media (max-width: 380px){

  .ndc-clipped-shell .ndc-cpn-offer{ font-size: 26px; }

}



.ndc-clipped-shell .ndc-cpn-offer--muted{

  font-size: 20px;

  color: rgba(15,23,42,0.75);

}



.ndc-clipped-shell .ndc-cpn-divider{

  height: 0;

  border-top: 2px dashed rgba(15,23,42,0.22);

  margin: 12px 0 12px;

}



/* Terms */

.ndc-clipped-shell .ndc-cpn-terms{

  font-size: 13px;

  line-height: 1.45;

  color: rgba(15,23,42,0.72);

  max-width: 420px;

  margin: 0 auto;

}



/* Footer */

.ndc-clipped-shell .ndc-cpn-foot{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap: 14px;

  padding: 14px 18px 16px;

  background: var(--paper-2);

  border-top: 1px solid rgba(0,0,0,0.06);

}



.ndc-clipped-shell .ndc-cpn-foot-left{

  display:flex;

  align-items:center;

  gap: 10px;

}



.ndc-clipped-shell .ndc-cpn-merchant-logo{

  width: 92px;

  height: 36px;

  object-fit: contain;

  display:block;

}



.ndc-clipped-shell .ndc-cpn-merchant-logo--empty{

  width: 92px;

  height: 36px;

  display:flex;

  align-items:center;

  justify-content:center;

  border: 1px dashed rgba(15,23,42,0.25);

  border-radius: 10px;

  font-weight: 900;

  font-size: 12px;

  color: rgba(15,23,42,0.55);

  background: rgba(255,255,255,0.8);

}



/* NDC badge */

.ndc-clipped-shell .ndc-cpn-ndc-badge{

  text-align:right;

  font-weight: 1000;

  letter-spacing: .6px;

  color: rgba(15,23,42,0.86);

  line-height: 1.0;

}

.ndc-clipped-shell .ndc-cpn-ndc-badge span{

  font-weight: 900;

  color: rgba(15,23,42,0.60);

  font-size: 12px;

}



/* CLIPPED stamp */

.ndc-clipped-shell .ndc-cpn-stamp{

  position:absolute;

  right: 14px;

  top: 12px;

  padding: 7px 10px;

  border-radius: 12px;

  background: rgba(255,122,26,0.12);

  border: 2px dashed rgba(255,122,26,0.55);

  color: rgba(255,122,26,0.95);

  font-weight: 1000;

  letter-spacing: 1px;

  font-size: 12px;

  transform: rotate(10deg);

  z-index: 3;

}



/* Actions (screen-only) */

.ndc-clipped-shell .ndc-cpn-actions{

  display:flex;

  gap:0;

  padding: 12px 18px 18px;

  justify-content:center;

  align-items:center;

  background: var(--paper);

}



.ndc-clipped-shell .ndc-cpn-view{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 10px 14px;

  border-radius: 999px;

  text-decoration:none;

  font-weight: 950;

  background: var(--ndc-teal);

  color:#fff;

}



.ndc-clipped-shell .ndc-cpn-remove{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 10px 14px;

  border-radius: 999px;

  border: none;

  font-weight: 950;

  background: var(--ndc-orange);

  color:#fff;

  cursor:pointer;

}





/* =====================================================

   PRINT RULES — 2 columns, no shadows, strong border

===================================================== */

@media print {

  html, body { background:#fff !important; }



  .ndc-clipped-shell .ndc-clipped-grid{

    grid-template-columns: repeat(2, minmax(0,1fr)) !important;

    gap: 12px !important;

  }



  .ndc-clipped-shell .ndc-cpn{

    box-shadow:none !important;

    border: 2px solid #222 !important;

    page-break-inside: avoid !important;

    break-inside: avoid !important;

  }



  .ndc-clipped-shell .ndc-cpn-actions{ display:none !important; }



  .ndc-clipped-shell .ndc-cpn-stamp{

    border: 2px dashed #444 !important;

    color:#111 !important;

    background: transparent !important;

  }

}

/* =====================================================

   PRINT: ONLY COUPONS (NO SITE HEADER/FOOTER/UI)

===================================================== */

@media print {



  /* Tell browser we want clean print margins */

  @page { margin: 10mm; }



  html, body { background:#fff !important; }



  /* Hide Nicepage header/footer + any sticky bars */

  header,

  .u-header,

  .u-footer,

  footer,

  .u-sticky-fixed,

  .ndc-header-float,

  .ndc-clipped-actions,     /* Print/Clear buttons */

  .ndc-cpn-actions {        /* Per-coupon action buttons */

    display: none !important;

  }



  /* Hide common “URL/date/page” chrome if injected as elements */

  .u-backlink,

  .u-print,

  .site-footer,

  .site-header {

    display: none !important;

  }



  /* Remove glass/shadows so paper looks crisp */

  .ndc-clipped-shell .ndc-shell,

  .ndc-clipped-shell .ndc-glass-panel{

    box-shadow: none !important;

    background: transparent !important;

    border: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  /* Force 2 columns on print (you already had this; kept here too) */

  .ndc-clipped-shell .ndc-clipped-grid{

    grid-template-columns: repeat(2, minmax(0,1fr)) !important;

    gap: 12px !important;

  }



  /* Make every coupon card consistent */

  .ndc-clipped-shell .ndc-cpn{

    box-shadow: none !important;

    border: 2px solid #222 !important;

    page-break-inside: avoid !important;

    break-inside: avoid !important;

  }



  /* Consistent typography + keep big offer text */

  .ndc-clipped-shell .ndc-cpn-brand{

    font-size: 12px !important;

    letter-spacing: 0.8px !important;

  }



  .ndc-clipped-shell .ndc-cpn-offer{

    font-size: 28px !important;   /* big, but less likely to overflow */

    line-height: 1.05 !important;

    margin: 6px 0 10px !important;

  }



  /* Prevent layout wobble: give the offer zone a consistent height */

  .ndc-clipped-shell .ndc-cpn-body{

    min-height: 170px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

  }



  /* Stamp stays, but simplify ink for printer */

  .ndc-clipped-shell .ndc-cpn-stamp{

    background: transparent !important;

    border: 2px dashed #444 !important;

    color:#111 !important;

  }



  /* Optional: lighten the notch dots for printers */

  .ndc-clipped-shell .ndc-cpn::before,

  .ndc-clipped-shell .ndc-cpn::after{

    border-color: rgba(0,0,0,0.35) !important;

  }

}

/* =====================================================

   PRINT: REMOVE CLIPPED STAMP (PREVENT OVERLAP)

===================================================== */

@media print {



  .ndc-clipped-shell .ndc-cpn-stamp{

    display: none !important;

  }



}