/* IPTV Checkout Webhook Form v1.3 - Premium dark style */
:root{--iptv-bg:#0d0f12;--iptv-panel:rgba(255,255,255,.03);--iptv-border:rgba(255,255,255,.10);--iptv-text:#e9edf3;--iptv-muted:rgba(233,237,243,.65);--iptv-muted2:rgba(233,237,243,.45);--iptv-accent:#f2d17a}
.iptv-wf-wrap{max-width:780px;margin:24px auto;position:relative;z-index:999999}
.iptv-wf-card{background:var(--iptv-bg);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.45);color:var(--iptv-text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",sans-serif}
.iptv-wf-top{padding:6px 8px 14px}
.iptv-wf-kicker{display:inline-flex;align-items:center;font-size:12px;font-weight:1000;color:var(--iptv-accent);letter-spacing:.4px;text-transform:uppercase;background:color-mix(in srgb, var(--iptv-accent) 14%, transparent);border:1px solid color-mix(in srgb, var(--iptv-accent) 32%, transparent);padding:6px 10px;border-radius:999px}
.iptv-wf-title{margin-top:10px;font-size:20px;font-weight:1000}
.iptv-wf-sub{margin-top:6px;color:var(--iptv-muted);font-size:13px}
.iptv-wf-badges{margin-top:10px;color:var(--iptv-muted2);font-size:12px;line-height:1.5}
.iptv-wf-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--iptv-panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:6px;gap:6px;margin:10px 0 14px}
.iptv-wf-tab{display:flex;gap:10px;align-items:center;justify-content:center;height:48px;border-radius:14px;border:1px solid transparent;background:transparent;color:rgba(233,237,243,.7);font-weight:1000;cursor:pointer}
.iptv-wf-tab.is-active{background:linear-gradient(180deg,color-mix(in srgb, var(--iptv-accent) 26%, transparent),rgba(255,255,255,.03));border-color:color-mix(in srgb, var(--iptv-accent) 45%, rgba(255,255,255,.12));color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.iptv-wf-tab-ic{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.iptv-wf-tab.is-active .iptv-wf-tab-ic{background:color-mix(in srgb, var(--iptv-accent) 20%, rgba(255,255,255,.06));border-color:color-mix(in srgb, var(--iptv-accent) 35%, rgba(255,255,255,.10))}
.iptv-wf-form{padding:4px 6px 6px}
.iptv-wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:680px){.iptv-wf-grid{grid-template-columns:1fr}}
.iptv-wf-field label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:1000;margin:10px 0 8px;color:rgba(233,237,243,.92)}
.iptv-wf-field .req{color:var(--iptv-accent)}
.iptv-wf-hint{font-size:12px;margin-top:6px;color:var(--iptv-muted2)}
.iptv-wf-field input[type="text"],.iptv-wf-field input[type="email"]{width:100%;height:50px;border-radius:14px;border:1px solid var(--iptv-border);background:rgba(255,255,255,.03);color:var(--iptv-text);padding:0 14px;outline:none}
.iptv-wf-field input::placeholder{color:rgba(233,237,243,.35)}

/* custom dropdown */
.iptv-wf-dd{position:relative}
.iptv-wf-dd-btn{width:100%;height:50px;border-radius:14px;border:1px solid var(--iptv-border);background:rgba(255,255,255,.03);color:var(--iptv-text);padding:0 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.iptv-wf-dd-val{color:rgba(233,237,243,.85);font-weight:900}
.iptv-wf-dd-ic{color:rgba(233,237,243,.65)}
.iptv-wf-dd-menu{position:absolute;left:0;right:0;margin-top:8px;background:#101319;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:8px;display:none;z-index:999;max-height:260px;overflow:auto}
.iptv-wf-dd.is-open .iptv-wf-dd-menu{display:block}
.iptv-wf-dd-item{width:100%;text-align:left;padding:12px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:rgba(233,237,243,.9);cursor:pointer;font-weight:1000}
.iptv-wf-dd-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.iptv-wf-dd-item.is-selected{background:color-mix(in srgb, var(--iptv-accent) 14%, transparent);border-color:color-mix(in srgb, var(--iptv-accent) 30%, transparent);color:#fff}

/* payments */
.iptv-wf-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
/* Mobile: keep payment methods inline (2 per row; extra items wrap) */
@media(max-width:680px){.iptv-wf-pay{grid-template-columns:repeat(2,1fr)}}
.iptv-wf-payopt input{position:absolute;opacity:0;pointer-events:none}
.iptv-wf-paybox{display:grid;grid-template-columns:32px 1fr 26px;gap:10px;align-items:center;height:58px;border-radius:16px;border:1px solid var(--iptv-border);background:rgba(255,255,255,.03);padding:0 14px;cursor:pointer}
.iptv-wf-payicon svg{width:26px;height:26px;fill:rgba(233,237,243,.78)}
.iptv-wf-payname{font-weight:1000}
.iptv-wf-check{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--iptv-accent) 18%, transparent);border:1px solid color-mix(in srgb, var(--iptv-accent) 35%, transparent);color:var(--iptv-accent);opacity:0;transform:scale(.92);transition:.15s ease}
.iptv-wf-payopt.is-selected .iptv-wf-paybox{border-color:color-mix(in srgb, var(--iptv-accent) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--iptv-accent) 12%, transparent),rgba(255,255,255,.03))}
.iptv-wf-payopt.is-selected .iptv-wf-payicon svg{fill:var(--iptv-accent)}
.iptv-wf-payopt.is-selected .iptv-wf-check{opacity:1;transform:scale(1)}

/* multiselect */
.iptv-wf-ms{position:relative}
.iptv-wf-ms-input{min-height:50px;border-radius:14px;border:1px solid var(--iptv-border);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px}
.iptv-wf-ms-tags{display:flex;flex-wrap:wrap;gap:6px}
.iptv-wf-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px;color:#fff;font-weight:1000}
.iptv-wf-tag button{border:none;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;font-size:14px;line-height:1}
.iptv-wf-ms-btn{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:rgba(233,237,243,.75);cursor:pointer}
.iptv-wf-ms-menu{position:absolute;left:0;right:0;margin-top:8px;background:#101319;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:8px;display:none;z-index:999;max-height:240px;overflow:auto}
.iptv-wf-ms.is-open .iptv-wf-ms-menu{display:block}
.iptv-wf-ms-item{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:rgba(233,237,243,.9);cursor:pointer;font-weight:1000}
.iptv-wf-ms-check{opacity:0;color:var(--iptv-accent)}
.iptv-wf-ms-item.is-selected .iptv-wf-ms-check{opacity:1}
.iptv-wf-ms-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}

/* terms + submit */
.iptv-wf-terms{display:flex;gap:10px;align-items:flex-start;margin:12px 2px 6px;color:rgba(233,237,243,.75);font-size:13px}
.iptv-wf-terms input{margin-top:3px}
.iptv-wf-terms a{color:var(--iptv-accent);text-decoration:none}
.iptv-wf-terms a:hover{text-decoration:underline}
.iptv-wf-submit{width:100%;height:56px;border-radius:16px;border:1px solid color-mix(in srgb, var(--iptv-accent) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--iptv-accent) 18%, transparent),rgba(255,255,255,.02));color:#fff;font-weight:1000;cursor:pointer;margin-top:10px}
.iptv-wf-submit:hover{filter:brightness(1.06)}



/* Desktop: make Terms span full width above button (like mobile) */
@media (min-width: 681px){
  .iptv-wf-grid .iptv-wf-terms{
    grid-column: 1 / -1;
    justify-self: start;
    order: 90;
    margin-top: 14px;
  }
  .iptv-wf-grid .iptv-wf-submit{
    grid-column: 1 / -1;
    order: 100;
    margin-top: 10px;
  }
}

/* Terms Toggle */
.iptv-wf-terms-row{ margin: 14px 0 18px; }
.iptv-wf-toggle{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  user-select:none;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.iptv-wf-toggle:hover{
  border-color: rgba(255,255,255,0.14);
}
.iptv-wf-toggle input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.iptv-wf-toggle-ui{
  width:56px;
  height:30px;
  border-radius:999px;
  position:relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  flex: 0 0 auto;
}
.iptv-wf-toggle-ui:after{
  content:"";
  position:absolute;
  top:50%;
  left:4px;
  width:22px;
  height:22px;
  transform: translateY(-50%);
  border-radius:50%;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .18s ease, background .18s ease;
}
.iptv-wf-toggle-text{
  color: rgba(255,255,255,0.82);
  font-size:14px;
  line-height:1.35;
}
.iptv-wf-toggle-text a{
  color: var(--iptv-accent);
  text-decoration:none;
  font-weight:600;
}
.iptv-wf-toggle-text a:hover{ text-decoration: underline; }

.iptv-wf-toggle input:focus + .iptv-wf-toggle-ui{
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 3px;
}
.iptv-wf-toggle input:checked + .iptv-wf-toggle-ui{
  background: color-mix(in oklab, var(--iptv-accent) 55%, rgba(255,255,255,0.08));
  border-color: color-mix(in oklab, var(--iptv-accent) 45%, rgba(255,255,255,0.14));
}
.iptv-wf-toggle input:checked + .iptv-wf-toggle-ui:after{
  transform: translate(26px, -50%);
  background: #fff;
}

/* Disabled submit */
.iptv-wf-submit.is-disabled,
.iptv-wf-submit:disabled{
  opacity: .55 !important;
  filter: saturate(.6);
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ── SMART PHONE INPUT ── */
.iptv-wf-field--full { grid-column: 1 / -1; }

.iptv-wf-phone {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: visible;
  transition: border-color .2s, box-shadow .2s;
}
.iptv-wf-phone:focus-within {
  border-color: rgba(201,168,76,.45);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.iptv-wf-phone.is-valid   { border-color: rgba(46,204,113,.45); }
.iptv-wf-phone.is-invalid { border-color: rgba(255,90,90,.45); }

/* Country code button */
.iptv-wf-phone-cc { position: relative; flex-shrink: 0; }
.iptv-wf-cc-btn {
  display: flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 10px 0 14px;
  background: transparent; border: none;
  border-right: 1px solid rgba(255,255,255,.08);
  color: #e9edf3; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background .15s;
  border-radius: 14px 0 0 14px;
}
.iptv-wf-cc-btn:hover { background: rgba(255,255,255,.04); }
.iptv-wf-cc-flag { font-size: 18px; line-height: 1; }
.iptv-wf-cc-code { color: rgba(201,168,76,1); font-size: 13px; font-weight: 800; letter-spacing: .3px; min-width: 32px; }
.iptv-wf-cc-arrow { font-size: 10px; color: rgba(233,237,243,.45); transition: transform .2s; }
.iptv-wf-phone-cc.is-open .iptv-wf-cc-arrow { transform: rotate(180deg); color: rgba(201,168,76,.8); }

/* Dropdown menu */
.iptv-wf-cc-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 300px; z-index: 99999;
  background: #101319;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.iptv-wf-phone-cc.is-open .iptv-wf-cc-menu { display: block; }

.iptv-wf-cc-search-wrap { padding: 10px 10px 6px; }
.iptv-wf-cc-search {
  width: 100%; height: 38px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #e9edf3; font-family: inherit; font-size: 13px;
  padding: 0 12px; outline: none;
}
.iptv-wf-cc-search::placeholder { color: rgba(233,237,243,.35); }
.iptv-wf-cc-search:focus { border-color: rgba(201,168,76,.35); }

.iptv-wf-cc-list {
  max-height: 220px; overflow-y: auto; padding: 4px 8px 8px;
}
.iptv-wf-cc-list::-webkit-scrollbar { width: 4px; }
.iptv-wf-cc-list::-webkit-scrollbar-track { background: transparent; }
.iptv-wf-cc-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,.25); border-radius: 99px; }

.iptv-wf-cc-option {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  color: rgba(233,237,243,.9); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .12s;
}
.iptv-wf-cc-option:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); }
.iptv-wf-cc-option.is-active { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.25); color: #fff; }
.iptv-wf-cc-opt-flag { font-size: 18px; flex-shrink: 0; }
.iptv-wf-cc-opt-name { flex: 1; }
.iptv-wf-cc-opt-dial { font-size: 12px; color: rgba(201,168,76,.7); font-weight: 800; }

/* Phone number text input */
.iptv-wf-phone-input {
  flex: 1; height: 48px;
  background: transparent; border: none; outline: none;
  color: #e9edf3; font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 0 12px; letter-spacing: .3px;
}
.iptv-wf-phone-input::placeholder { color: rgba(233,237,243,.3); font-weight: 400; }

/* Validation status icon */
.iptv-wf-phone-status {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  margin-right: 10px; display: none;
  align-items: center; justify-content: center; font-size: 14px;
  transition: all .2s;
}
.iptv-wf-phone-status.show { display: flex; }
.iptv-wf-phone-status.valid   { background: rgba(46,204,113,.12); color: #2ecc71; }
.iptv-wf-phone-status.invalid { background: rgba(255,90,90,.12);  color: #ff5a5a; }