/* =========================================================================
   Coupon System — cards + storefront coupon box
   ========================================================================= */

/* ---- Coupon card (My Account / designer preview) ---- */
.cpn-card{
  --cpn-bg:#111111; --cpn-accent:#e63946; --cpn-text:#ffffff;
  display:flex; align-items:stretch; border-radius:14px; overflow:hidden;
  background:var(--cpn-bg); color:var(--cpn-text); position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,.12); margin-bottom:16px; min-height:118px;
}
.cpn-left{
  flex:0 0 116px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px 10px; position:relative;
  background:var(--cpn-accent); color:#fff;
}
.cpn-value{ font-weight:800; font-size:17px; line-height:1.25; letter-spacing:.3px; }
.cpn-value i{ display:block; font-size:24px; margin-bottom:4px; }
.cpn-body{ flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.cpn-title{ font-weight:700; font-size:16px; }
.cpn-meta{ font-size:12px; opacity:.75; }
.cpn-body .cpn-desc, .cpn-body p{ font-size:13px; opacity:.85; margin:0; }
.cpn-code-row{ margin-top:6px; }
.cpn-code{
  display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:700; letter-spacing:1.5px; padding:4px 12px; border-radius:6px;
  border:1px dashed currentColor; background:rgba(255,255,255,.10);
}
.cpn-actions{ display:flex; gap:8px; margin-top:10px; }
.cpn-actions .cpn-copy,.cpn-actions .cpn-apply{
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:8px;
  border:none; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; gap:6px;
}
.cpn-actions .cpn-copy{ background:rgba(255,255,255,.15); color:var(--cpn-text); }
.cpn-actions .cpn-copy:hover{ background:rgba(255,255,255,.28); }
.cpn-actions .cpn-apply{ background:var(--cpn-accent); color:#fff; }
.cpn-actions .cpn-apply:hover{ filter:brightness(1.08); }

/* Ticket notch */
.cpn-style-ticket .cpn-left::after,
.cpn-style-ticket .cpn-left::before{
  content:""; position:absolute; right:-9px; width:18px; height:18px;
  border-radius:50%; background:#f3f4f6;
}
.cpn-style-ticket .cpn-left::before{ top:-9px; }
.cpn-style-ticket .cpn-left::after{ bottom:-9px; }
.cpn-style-ticket .cpn-body{ border-left:2px dashed rgba(255,255,255,.35); }

/* Gradient */
.cpn-style-gradient{ background:linear-gradient(135deg,var(--cpn-bg),var(--cpn-accent)); }
.cpn-style-gradient .cpn-left{ background:rgba(0,0,0,.18); }

/* Classic (light) */
.cpn-style-classic{ background:#fff; color:#1a1a1a; border:1px solid #eee; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.cpn-style-classic .cpn-code{ border-color:var(--cpn-accent); color:var(--cpn-accent); background:rgba(0,0,0,.02); }
.cpn-style-classic .cpn-actions .cpn-copy{ background:#f1f1f1; color:#222; }

/* Minimal */
.cpn-style-minimal{ background:#fff; color:#111; border:2px dashed var(--cpn-accent); box-shadow:none; }
.cpn-style-minimal .cpn-left{ background:transparent; color:var(--cpn-accent); }
.cpn-style-minimal .cpn-code{ border-color:#bbb; color:#111; background:#fafafa; }
.cpn-style-minimal .cpn-actions .cpn-copy{ background:#f1f1f1; color:#222; }

/* Dark already default bg */
.cpn-style-dark{ background:#0f0f12; }

@media(max-width:480px){
  .cpn-left{ flex-basis:92px; }
  .cpn-value{ font-size:15px; }
}

/* ---- My Account coupons grid ---- */
.cpn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
@media(max-width:560px){ .cpn-grid{ grid-template-columns:1fr; } }

/* ---- Storefront coupon box (cart / checkout / order-section) ---- */
.mp-coupon-box{ margin:14px 0; }
.mp-coupon-form{ display:flex; gap:8px; }
.mp-coupon-form input[type=text]{
  flex:1; height:48px; border:1.5px solid #e6e6ee; border-radius:12px; background:#fafafc;
  padding:0 16px; font-size:14px; letter-spacing:.5px; text-transform:uppercase;
  outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
.mp-coupon-form input[type=text]:focus{ border-color:var(--mp-primary,#111111); background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.12); }
.mp-coupon-form button{
  height:48px; padding:0 22px; border:none; border-radius:12px;
  background:#101828; color:#fff; font-weight:600; font-size:14px; cursor:pointer;
  white-space:nowrap; transition:background .15s, transform .1s;
  display:inline-flex; align-items:center; gap:6px;
}
.mp-coupon-form button:hover{ background:#000; }
.mp-coupon-form button:active{ transform:scale(.98); }
.mp-coupon-form button:disabled{ opacity:.6; cursor:not-allowed; }
.mp-coupon-msg{ font-size:13px; margin-top:8px; min-height:1px; }
.mp-coupon-msg.is-err{ color:#d33; }
.mp-coupon-msg.is-ok{ color:#1a8a3c; }
.mp-coupon-applied{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#f0fbf3; border:1.5px solid #bfe6cb; border-radius:10px;
  padding:10px 14px; font-size:14px;
}
.mp-coupon-applied .tag{ font-weight:700; color:#1a8a3c; letter-spacing:.5px; }
.mp-coupon-applied .rm{ background:none; border:none; color:#999; cursor:pointer; font-size:18px; line-height:1; }
.mp-coupon-applied .rm:hover{ color:#d33; }
.mp-coupon-toggle{ background:none; border:none; color:#111; font-weight:600; font-size:14px; cursor:pointer; padding:0; text-decoration:underline; }
.row-line.discount span:last-child{ color:#1a8a3c; font-weight:600; }