/* ============================================================================
   Tamm Coupon UI — شكل خانة كود الخصم + تذكرة الخصم + الاحتفال
   (بيتحمّل بعد tamm-ui.css)
   ============================================================================ */

.tc-mount { margin: 16px 0; }

/* ---------- الحالة العادية: خانة الكود ---------- */
.tc { font-family: inherit; }
.tc-idle { display: grid; gap: 8px; }

.tc-label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tamm-navy, #122b54); font-size: 12px; font-weight: 800; cursor: pointer;
}
.tc-label svg { color: var(--tamm-cyan, #35c6d8); flex: none; }

.tc-field {
  display: flex; align-items: stretch; margin: 0;
  border: 1.5px solid var(--tamm-line, #dfe7f0); border-radius: 15px;
  background: #fff; overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 52, 93, .04);
  transition: border-color .2s, box-shadow .2s;
}
.tc-field:focus-within {
  border-color: var(--tamm-cyan, #35c6d8);
  box-shadow: 0 0 0 4px rgba(53, 198, 216, .16);
}
.tc-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
  color: var(--tamm-ink, #0f2040); font-size: 14px; font-weight: 800; letter-spacing: .12em;
  text-align: center; text-transform: uppercase; font-family: inherit;
}
.tc-input::placeholder { color: #9aa8bd; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tc-input:disabled { opacity: .6; }

.tc-apply {
  flex: none; min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin: 4px; padding: 0 16px; border: 0; border-radius: 11px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--tamm-blue, #1957a6), #2a7fd4);
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  transition: transform .15s, filter .2s, box-shadow .2s;
  box-shadow: 0 6px 14px rgba(25, 87, 166, .25);
}
.tc-apply:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.tc-apply:active:not(:disabled) { transform: scale(.96); }
.tc-apply:disabled { cursor: default; opacity: .85; }
.tc-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: tcSpin .7s linear infinite;
}
@keyframes tcSpin { to { transform: rotate(360deg); } }

.tc-msg { min-height: 0; font-size: 11.5px; font-weight: 700; color: #c8323c; line-height: 1.7; }
.tc-msg:empty { display: none; }
.tc-has-error .tc-field { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .1); }
.tc-login-link {
  margin-inline-start: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tamm-blue, #1957a6); font: inherit; font-weight: 800; text-decoration: underline;
}
.tc-shake .tc-field { animation: tcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes tcShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}

/* ---------- بعد النجاح: تذكرة الخصم ---------- */
.tc-ticket-wrap { filter: drop-shadow(0 10px 18px rgba(18, 43, 84, .2)); }
.tc-ticket {
  --stub: 118px; --notch: 10px;
  position: relative; display: grid; grid-template-columns: 1fr var(--stub); overflow: hidden;
  border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #0f2b52 0%, #1957a6 62%, #1f7fb8 100%);
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.tc-ticket::before { /* بريق خفيف في الخلفية */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(53, 198, 216, .35), transparent 52%);
}
.tc-t-main { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 16px; min-width: 0; }
.tc-t-badge {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px;
  color: #0f2b52; background: linear-gradient(135deg, #8fe3ee, #35c6d8);
  box-shadow: 0 0 0 4px rgba(53, 198, 216, .22);
}
.tc-t-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.tc-t-text small { color: rgba(255, 255, 255, .72); font-size: 10.5px; font-weight: 700; }
.tc-t-text strong {
  font-size: 17px; font-weight: 900; letter-spacing: .1em; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-t-text em { font-style: normal; color: #8fe3ee; font-size: 11px; font-weight: 800; }
.tc-t-remove {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); cursor: pointer;
  transition: background .2s, transform .2s;
}
.tc-t-remove:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); }

.tc-t-stub {
  position: relative; display: grid; place-content: center; gap: 2px; padding: 10px 8px; text-align: center;
  color: #4a2f00; background: linear-gradient(160deg, #ffe08a, #f3b13f);
}
.tc-t-stub::before { /* خط التقطيع */
  content: ""; position: absolute; top: 14px; bottom: 14px; right: 0; width: 0;
  border-right: 2px dashed rgba(74, 47, 0, .28);
}
.tc-t-stub small { font-size: 10.5px; font-weight: 800; opacity: .8; }
.tc-t-stub b { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 24px; font-weight: 900; line-height: 1.1; }
.tc-t-stub b i { font-style: normal; font-size: 11px; font-weight: 800; }

.tc-shine {
  position: absolute; inset: 0; pointer-events: none; transform: translateX(120%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
}
.tc-pop { animation: tcPop .65s cubic-bezier(.2, 1.35, .3, 1) both; }
.tc-pop .tc-shine { animation: tcShine 1.15s .25s ease-out both; }
.tc-pop .tc-t-badge { animation: tcBadge .7s .15s cubic-bezier(.2, 1.6, .3, 1) both; }
@keyframes tcPop { 0% { opacity: 0; transform: scale(.82) translateY(8px); } 60% { opacity: 1; transform: scale(1.035); } 100% { transform: none; } }
@keyframes tcShine { to { transform: translateX(-120%); } }
@keyframes tcBadge { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }

/* ---------- سطر الإجمالي بعد الخصم (صفحة المنتج) ---------- */
.tc-summary { display: none; }
.tc-summary.show {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -6px 0 16px; padding: 11px 15px; border-radius: 13px;
  color: #166854; background: #edfbf5; border: 1px solid #c4eddc;
  font-size: 12.5px; font-weight: 800; animation: tcSlide .4s ease both;
}
.tc-sum-vals { display: inline-flex; align-items: baseline; gap: 9px; }
.tc-sum-vals s { color: #7c8da3; font-size: 12px; font-weight: 700; }
.tc-sum-vals b { font-size: 18px; font-weight: 900; color: #0f6b52; }
@keyframes tcSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- إشعار الاحتفال ---------- */
.tc-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10250; }
.tc-toast {
  position: fixed; z-index: 10300; top: 16px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 28px);
  display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 18px; border-radius: 18px;
  color: #fff; background: linear-gradient(135deg, #0f2b52, #1957a6);
  box-shadow: 0 18px 44px rgba(9, 26, 50, .38), 0 0 0 1px rgba(255, 255, 255, .1) inset;
  transform: translateY(-160%); opacity: 0;
  transition: transform .55s cubic-bezier(.2, 1.3, .3, 1), opacity .35s;
}
.tc-toast.in { transform: none; opacity: 1; }
.tc-toast.out { transform: translateY(-160%); opacity: 0; transition: transform .4s ease-in, opacity .4s; }
.tc-toast-emoji { font-size: 30px; line-height: 1; animation: tcBounce 1s .2s ease both; }
@keyframes tcBounce { 0%, 100% { transform: none; } 30% { transform: translateY(-9px) rotate(-12deg); } 60% { transform: translateY(0) rotate(10deg); } }
.tc-toast-body { display: grid; gap: 2px; }
.tc-toast-body strong { font-size: 15px; font-weight: 900; }
.tc-toast-body strong b { color: #ffd36b; font-size: 19px; font-variant-numeric: tabular-nums; }
.tc-toast-body small { color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 700; }

/* ---------- العربة: ملخّص السعر ---------- */
.cart-price-breakdown { gap: 9px; margin: 14px 0 6px; }
.cart-price-breakdown > div { align-items: center; }
.cart-price-breakdown > .cart-discount-line {
  display: none; padding: 9px 12px; border-radius: 11px; color: #166854; background: #edfbf5; border: 1px solid #c4eddc; font-weight: 800;
}
.cart-price-breakdown > .cart-discount-line.show { display: flex; animation: tcSlide .4s ease both; }
.cart-discount-line em { margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #166854; font-style: normal; font-size: 11px; letter-spacing: .06em; }
.cart-total-amount { display: inline-flex; align-items: baseline; gap: 10px; }
.cart-total-old { display: none; color: #8a99ae; font-size: 14px; font-weight: 700; }
.cart-total-old.show { display: inline; }
.cart-total-row.has-saving span:last-child { color: #0f6b52; }

/* ---------- موبايل ---------- */
@media (max-width: 480px) {
  .tc-ticket { --stub: 96px; }
  .tc-t-main { padding: 12px 12px; gap: 9px; }
  .tc-t-badge { width: 32px; height: 32px; }
  .tc-t-text strong { font-size: 15px; }
  .tc-t-stub b { font-size: 20px; }
  .tc-apply { min-width: 80px; padding: 0 12px; }
  .tc-toast { padding: 10px 16px 10px 14px; }
  .tc-toast-body strong { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-pop, .tc-pop .tc-shine, .tc-pop .tc-t-badge, .tc-shake .tc-field, .tc-toast-emoji,
  .tc-summary.show, .cart-price-breakdown > .cart-discount-line.show { animation: none !important; }
  .tc-toast, .tc-toast.out { transition: opacity .2s; transform: none; }
}