/* ============================================================
   ttm.ma — Payment method chooser
   Shown after the customer enters the name for the e-voucher.
   Theme-matched to the main site (dark + gold).
   ============================================================ */

/* ── Pay button ──
   It now opens the payment-method chooser instead of going straight to
   PayPal, so the PayPal-blue styling and logo would be misleading.
   Neutralised here so the 45 buttons in the page need no edits.
   To restore the original PayPal look, delete this block.          */
.pay-btn{background:var(--gold,#C8A96E) !important;color:var(--dark,#0F0D0A) !important;}
.pay-btn:hover{background:var(--gold-light,#E2C98A) !important;box-shadow:0 4px 14px rgba(200,169,110,.28) !important;}
.pay-btn > svg{display:none !important;}
.pay-btn::before{content:'\2726';font-size:9px;line-height:1;opacity:.75;}

#ttmPayOverlay{
  position:fixed;inset:0;z-index:100000;display:none;
  background:rgba(0,0,0,.86);backdrop-filter:blur(4px);
  overflow-y:auto;padding:28px 16px;
  font-family:'Raleway',sans-serif;font-weight:300;
}
#ttmPayOverlay.open{display:block;}

.ttmpay-box{
  max-width:560px;margin:0 auto;background:#1A1710;
  border:1px solid rgba(200,169,110,.45);
  padding:34px 34px 28px;position:relative;
  animation:ttmpayIn .32s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
@keyframes ttmpayIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.ttmpay-close{
  position:absolute;top:12px;right:14px;background:transparent;border:none;
  color:#8A7A62;font-size:24px;line-height:1;cursor:pointer;padding:6px 10px;transition:color .25s;
}
.ttmpay-close:hover{color:#C8A96E;}

.ttmpay-mark{text-align:center;color:#C8A96E;font-size:22px;margin-bottom:10px;}
.ttmpay-title{
  font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:300;
  color:#F5ECD7;text-align:center;line-height:1.3;margin-bottom:8px;
}
.ttmpay-sub{
  text-align:center;font-size:11px;letter-spacing:.14em;color:#8A7A62;
  text-transform:uppercase;margin-bottom:6px;line-height:1.7;
}
.ttmpay-for{
  text-align:center;font-size:12.5px;color:#D4C4A8;margin-bottom:26px;
  padding-bottom:20px;border-bottom:1px solid rgba(200,169,110,.13);
}
.ttmpay-for b{color:#C8A96E;font-weight:500;}

/* ── Method cards ── */
.ttmpay-opt{
  display:block;width:100%;text-align:left;background:#0F0D0A;
  border:1px solid rgba(200,169,110,.20);padding:17px 19px;margin-bottom:12px;
  cursor:pointer;transition:border-color .25s,background .25s,transform .25s;
  font-family:'Raleway',sans-serif;color:#D4C4A8;position:relative;
}
.ttmpay-opt:hover:not(.disabled){border-color:rgba(200,169,110,.62);background:#231F17;transform:translateY(-1px);}
.ttmpay-opt:focus-visible{outline:2px solid #C8A96E;outline-offset:2px;}

.ttmpay-opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.ttmpay-opt-name{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#F5ECD7;font-weight:500;
}
.ttmpay-opt-price{
  font-family:'Cormorant Garamond',serif;font-size:22px;color:#C8A96E;
  white-space:nowrap;line-height:1;
}
.ttmpay-opt-price small{font-family:'Raleway',sans-serif;font-size:11px;color:#8A7A62;}
.ttmpay-opt-desc{font-size:11.5px;color:#8A7A62;line-height:1.7;margin-top:7px;padding-right:70px;}
.ttmpay-opt-go{
  position:absolute;right:19px;bottom:15px;color:#C8A96E;font-size:15px;
  opacity:.55;transition:opacity .25s,transform .25s;
}
.ttmpay-opt:hover:not(.disabled) .ttmpay-opt-go{opacity:1;transform:translateX(3px);}

/* ── Disabled (CMI, pending activation) ── */
.ttmpay-opt.disabled{
  cursor:not-allowed;opacity:.42;filter:grayscale(1);
  border-color:rgba(255,255,255,.10);background:#141210;
}
.ttmpay-opt.disabled .ttmpay-opt-name,
.ttmpay-opt.disabled .ttmpay-opt-price{color:#7C7669;}
.ttmpay-badge-soon{
  display:inline-block;background:rgba(255,255,255,.09);color:#B9AE99;
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:3px 9px;margin-left:9px;vertical-align:middle;font-weight:500;
  border:1px solid rgba(255,255,255,.14);
}
.ttmpay-subopts{margin-top:14px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px;}
.ttmpay-subopt{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 0;font-size:11.5px;color:#8A7A62;
}
.ttmpay-subopt span:first-child{display:flex;align-items:center;gap:9px;}
.ttmpay-subopt span:first-child::before{content:'○';color:#7C7669;font-size:11px;}
.ttmpay-subopt b{color:#9C9280;font-weight:500;font-family:'Cormorant Garamond',serif;font-size:16px;white-space:nowrap;}
.ttmpay-fee{font-size:10px;color:#7C7669;display:block;margin-top:2px;letter-spacing:.04em;}

/* ── Bank transfer panel ── */
.ttmpay-bank{margin-top:4px;}
.ttmpay-amount{
  text-align:center;border:1px solid rgba(200,169,110,.30);background:#0F0D0A;
  padding:18px;margin-bottom:20px;
}
.ttmpay-amount .lbl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#C8A96E;display:block;margin-bottom:7px;}
.ttmpay-amount .val{font-family:'Cormorant Garamond',serif;font-size:34px;color:#F5ECD7;line-height:1;}

.ttmpay-field{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(200,169,110,.09);
}
.ttmpay-field:last-of-type{border-bottom:none;}
.ttmpay-field .k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#C8A96E;flex-shrink:0;}
.ttmpay-field .v{
  font-size:12.5px;color:#F5ECD7;text-align:right;word-break:break-all;
  font-family:'Courier New',monospace;letter-spacing:.02em;
}
.ttmpay-copy{
  background:transparent;border:1px solid rgba(200,169,110,.3);color:#C8A96E;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;
  cursor:pointer;transition:all .25s;flex-shrink:0;font-family:'Raleway',sans-serif;
}
.ttmpay-copy:hover{background:#C8A96E;color:#0F0D0A;}
.ttmpay-copy.done{background:#4A7C6F;border-color:#4A7C6F;color:#fff;}

.ttmpay-note{
  border-left:2px solid #4A7C6F;background:rgba(74,124,111,.09);
  padding:14px 16px;margin:20px 0;font-size:11.5px;line-height:1.8;color:#D4C4A8;
}

/* ── Customer contact, bank transfer (e-mail required, phone optional) ── */
.ttmpay-contact{
  border-top:1px solid rgba(200,169,110,.12);
  margin-top:18px;padding-top:16px;
}
.ttmpay-contact .lgd{
  display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:#C8A96E;margin-bottom:12px;
}
.ttmpay-in{margin-bottom:12px;}
.ttmpay-in:last-child{margin-bottom:0;}
.ttmpay-in label{
  display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:#C8A96E;margin-bottom:6px;
}
.ttmpay-in label .opt{color:#8A7A62;letter-spacing:.1em;text-transform:none;font-size:10px;}
/* 16px, not smaller: iOS Safari zooms the whole page when a focused
   input is under 16px, which throws the modal off-centre on iPhones. */
.ttmpay-in input{
  width:100%;background:#0F0D0A;border:1px solid rgba(200,169,110,.30);
  color:#F5ECD7;padding:12px 13px;font-family:'Raleway',sans-serif;
  font-size:16px;letter-spacing:.02em;border-radius:0;-webkit-appearance:none;
}
.ttmpay-in input:focus{outline:none;border-color:#C8A96E;}
.ttmpay-in input::placeholder{color:#6C5E4A;}
.ttmpay-in input[aria-invalid="true"]{border-color:#A35B4F;}
.ttmpay-err{display:none;color:#E08A7A;font-size:11.5px;line-height:1.6;margin-top:6px;}
.ttmpay-err.on{display:block;}
.ttmpay-sentto{
  margin-top:14px;font-size:11.5px;line-height:1.7;color:#D4C4A8;
}
.ttmpay-sentto b{color:#C8A96E;word-break:break-all;}

/* ── Buttons ── */
.ttmpay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.ttmpay-btn{
  flex:1;min-width:150px;background:#C8A96E;color:#0F0D0A;border:none;
  padding:14px 20px;font-family:'Raleway',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .3s;
  text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.ttmpay-btn:hover{background:#E2C98A;}
.ttmpay-btn.ghost{background:transparent;border:1px solid rgba(200,169,110,.35);color:#C8A96E;}
.ttmpay-btn.ghost:hover{background:rgba(200,169,110,.09);border-color:#C8A96E;}
.ttmpay-btn.wa{background:#25D366;color:#0B2E17;}
.ttmpay-btn.wa:hover{background:#3ee07c;}
.ttmpay-btn:disabled{opacity:.5;cursor:wait;}

.ttmpay-back{
  display:inline-block;margin-top:16px;background:none;border:none;color:#8A7A62;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  font-family:'Raleway',sans-serif;transition:color .25s;padding:4px 0;
}
.ttmpay-back:hover{color:#C8A96E;}

.ttmpay-done{text-align:center;padding:14px 0 4px;}
.ttmpay-done .tick{font-size:34px;color:#4A7C6F;margin-bottom:14px;}
.ttmpay-done p{font-size:13px;line-height:1.85;color:#D4C4A8;margin-bottom:6px;}
.ttmpay-done .ref{
  font-family:'Courier New',monospace;font-size:15px;color:#C8A96E;
  letter-spacing:.08em;margin-top:12px;display:inline-block;
  border:1px dashed rgba(200,169,110,.4);padding:9px 16px;
}

@media(max-width:560px){
  #ttmPayOverlay{padding:14px 10px;}
  .ttmpay-box{padding:26px 18px 22px;}
  .ttmpay-title{font-size:21px;}
  .ttmpay-opt-desc{padding-right:0;}
  .ttmpay-opt-go{display:none;}
  .ttmpay-field{flex-wrap:wrap;gap:6px;}
  .ttmpay-field .v{text-align:left;width:100%;font-size:12px;}
  .ttmpay-actions{flex-direction:column;}
  .ttmpay-btn{width:100%;}
}