/* === your existing CSS (unchanged) === */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      background: #f0f2f5;
      color: #111114;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .page-wrap { min-height: 100%; display: grid; place-items: center; padding: 32px; }
    .card { background:#fff; border-radius:36px; box-shadow:0 2px 6px rgba(16,24,40,.04), 0 12px 24px rgba(16,24,40,.06); padding: 25px }
    .headline { margin:0 0 clamp(28px,4.5vw,44px); font-weight:800; line-height:1.2; letter-spacing:.01em; font-size:24px !important;text-align:center; }
    .pill-form { width:100%; }
    .pill { display:grid; grid-template-columns:1fr max-content; align-items:center; gap:clamp(12px,1.2vw,20px); background:#f3f5ff; border-radius:88px; padding:0; outline:1px solid rgba(29,41,57,.06); }
    .pill-input { border:none; background:transparent; font-size:clamp(18px,1.6vw,28px); padding:clamp(14px,1.6vw,22px) clamp(18px,2vw,28px); width:100%; color:#1d2939; }
    .pill-input::placeholder{ color:#6b7280; } .pill-input:focus{ outline:none; }
    .pill-btn { border:none; cursor:pointer; font-weight:700; font-size:18px; padding:auto; border-radius:64px; color:#fff; background:linear-gradient(180deg,#ff3b30,#e60012);transition:transform .06s, box-shadow .2s, filter .2s; }
    .pill-btn:hover{ filter:brightness(1.05);background-color: color(srgb 0.905 0 0.0262); } .pill-btn:active{ transform:translateY(1px);  }
    .hint { margin:14px 18px 0; font-size:clamp(12px,1vw,16px); color:#ef4444; min-height:1em;text-align:center; }
    .sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }


    .pill-btn {
border: medium;
cursor: pointer;
font-weight: 700;
font-size: 18px;
border-radius: 64px;
color: rgb(255, 255, 255);
background: color(display-p3 0.9176 0.2 0.1373);
/* box-shadow: rgba(230, 0, 18, 0.35) 0px 6px 16px; */
transition: transform 0.06s, box-shadow 0.2s, filter 0.2s;
padding: 14px;
}


    @media (max-width:680px){ .pill{ grid-template-columns:1fr; padding:8px; } .pill-btn{ width:100%; justify-self:end; } }

    .container { max-width:900px;xmin-width:600px; margin:24px auto; display:block; align-items:start; gap:28px 48px; overflow:auto; }
    .container.ld-container { max-width:780px; margin:124px auto; display:block; align-items:start; gap:28px 48px; overflow:auto; }

    .left { float:left; }
    .left .sn b { font-weight:800; }
    .usage .row { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:16px;  }
    .texts .main { 

    color: var(--Color-Text-Primary, #231F20);
font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B";
font-size: 15px;
font-style: normal;
font-weight: 350;
line-height: 24px;
letter-spacing: 0.15px;

 }

 .sn, .usage{
  font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B";
 }
    .texts .bold { font-weight:900; } .texts .muted { color:#7a828d; font-weight:800;font-size:13px;font-family:inherit;}
    .texts .sub {
      color: #5e5c5c;
      font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B";
      font-size: 13px;
      font-style: normal;
      font-weight: 350;
      line-height: normal;
      letter-spacing: 0.15px;
      font-weight: 500;
      }

    .right { text-align:right; }
    .renew { display:inline-flex; align-items:center; gap:10px; font-size:15px; margin-bottom:8px; }
    .expiry .date { 
    	color: var(--Color-Text-Primary, #1D1D1F);
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B";";
		font-size: 12px;
		font-style: normal;
		font-weight: 350;
		line-height: normal;

    } 

    .expiry .date b{
      font-weight: 500 !important;
      font-size: 13px;
    }

    .expiry .remain { font-size:12px; color:#9b9390; margin-top:4px; }

    .switch { position:relative; display:inline-block; width:45px; height:20px; vertical-align:middle; }
    .switch input{ display:none; }
    .slider{ position:absolute; inset:0; background:#e7e3de; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); transition: background .2s; }
		.slider::after {
		content: "";
		position: absolute;
		top: 1px;
		left: 2px;
		width: 18px;
		height: 18px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 2px 4px rgba(0,0,0,.15);
		transition: transform .2s;
		}
    .switch input:checked + .slider{ background:#22c55e; } .switch input:checked + .slider::after{ transform: translateX(24px); }

    .circle { width:64px; height:64px; display:grid; place-items:center; }

    .sn,.usage{
    	color: var(--Color-Text-Primary, #231F20);
		font-size: 14px;
		font-style: normal;
		font-weight: 325;
		line-height: 20px; /* 133.333% */
    }

    .usage{
    	font-weight: bold;
    }

  /* ===== Scoped styles ===== */
#addonsUI {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
display: inline-block;
width: 100%;
border-top: thin solid rgba(128, 128, 128, 0.1);
margin-top: 20px;
padding-top: 20px;
}
  #addonsUI * { box-sizing: border-box; }

  /* Tabs */
  #addonsUI .au-tabs { display: flex; align-items: center; gap: 28px; margin: 8px 0 20px; }
  #addonsUI .au-tab {
    background: none; border: 0; padding: 8px 0 12px; cursor: default;
    font-size: 15px; font-weight: 800; color: #a3a3a3;
  }
  #addonsUI .au-tab.au-active { color: #e53935; position: relative; }
  #addonsUI .au-tab.au-active .au-underline {
    position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0;
    width: 36px; height: 4px; background: #e53935; border-radius: 3px;
    display: inline-block;
  }

  /* Add-on pill card */
  #addonsUI .au-card {
    display: inline-flex; align-items: center; gap: 22px;
    background: #fff; border-radius: 20px; padding: 22px 28px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    transition: box-shadow .2s ease, transform .05s ease;
  }
  #addonsUI .au-card:focus-visible { outline: 2px solid #e53935; outline-offset: 2px; }
  #addonsUI .au-card:hover { box-shadow: 0 12px 28px rgba(16, 24, 40, 0.10); }
  #addonsUI .au-card:active { transform: translateY(1px); }

  #addonsUI .au-price { font-size: 19px; font-weight: 900; letter-spacing: 0.01em; color: #1f2937; }
  #addonsUI .au-vsep { width: 1px; height: 32px; background: #e5e7eb; }
  #addonsUI .au-desc { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; color: #374151; font-weight: 700; }

  /* Small peach check-dot */
  #addonsUI .au-dot {
    width: 14px; height: 14px; border-radius: 50%;
    display: inline-block;
    background: radial-gradient(circle at center, #ffffff 45%, #ef6f6f 46% 46%, #f7b7b7 47% 100%);
    box-shadow: inset 0 0 0 2px #ef6f6f;
  }

  /* CTA */
  #addonsUI .au-cta {
    -webkit-appearance: none; appearance: none;
    display: block; margin: 24px 0 0;
    width: clamp(300px, 40vw, 560px); 
    border: 0; border-radius: 999px;
    font-size: 22px; font-weight: 900; letter-spacing: .01em;
    color: #fff; background: #f3b3b3; /* disabled look */
    box-shadow: 0 12px 28px rgba(229, 57, 53, .18);
    cursor: not-allowed;
    transition: filter .2s ease, transform .05s ease, background .2s ease;
  }
  #addonsUI .au-cta:not([disabled]) {
    cursor: pointer;
    background: color(srgb 0.8979 0.2213 0.2061);
    box-shadow: none;
  }
  #addonsUI .au-cta:not([disabled]):hover { filter: brightness(1.03); }
  #addonsUI .au-cta:not([disabled]):active { transform: translateY(1px); }

  /* Selected state (optional visual tick) */
  #addonsUI .au-card.au-selected {
    box-shadow: 0 12px 30px rgba(229, 57, 53, 0.18);
    border-color: #ffd9d6;
  }

  /* Screen reader live region */
  #addonsUI .au-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
  #serial{
	border: none;
	background-color: transparent;
  }

  /* ===== Scoped styles ===== */
  #addonsUI { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
  #addonsUI * { box-sizing: border-box; }

  /* Tabs */
  #addonsUI .au-tabs { display: flex; align-items: center; gap: 28px; margin: 8px 0 20px; }
  #addonsUI .au-tab {
    background: none; border: 0; padding: 8px 0 12px; cursor: pointer;
    font-size: 14px; font-weight: 800; color:#58595B; position: relative;
  }
  #addonsUI .au-tab .au-underline {
    position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0;
    width: 36px; height: 4px; background: #e53935; border-radius: 3px;
    opacity: 0; transform: translateY(2px); transition: opacity .2s ease, transform .2s ease;
  }
  #addonsUI .au-tab.au-active { color: #e53935; }
  #addonsUI .au-tab.au-active .au-underline { opacity: 1; transform: translateY(0); }

  /* Panels */
  #addonsUI .au-panels { margin-top: 4px; }
  #addonsUI .au-panel { display: none; }
  #addonsUI .au-panel.au-active { display: block; }

  /* Add-on pill card */
  #addonsUI .au-card {
    display: inline-flex; align-items: center; gap: 22px;
    background: #fff; border-radius: 20px; padding: 22px 28px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    transition: box-shadow .2s ease, transform .05s ease;
  }
  #addonsUI .au-card:focus-visible { outline: 2px solid #e53935; outline-offset: 2px; }
  #addonsUI .au-card:hover { box-shadow: 0 12px 28px rgba(16, 24, 40, 0.10); }
  #addonsUI .au-card:active { transform: translateY(1px); }
  #addonsUI .au-card.au-selected { box-shadow: 0 12px 30px rgba(229, 57, 53, 0.18); border-color: #ffd9d6; }

  #addonsUI .au-price { font-size: 14px; font-weight: 900; letter-spacing: 0.01em; color: #1f2937; }
  #addonsUI .au-vsep { width: 1px; height: 32px; background: #e5e7eb; }
  #addonsUI .au-desc { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: #374151; font-weight: 700; }

  /* Small peach check-dot */
  #addonsUI .au-dot {
    width: 14px; height: 14px; border-radius: 50%;
    display: inline-block;
    background: radial-gradient(circle at center, #ffffff 45%, #ef6f6f 46% 46%, #f7b7b7 47% 100%);
    box-shadow: inset 0 0 0 2px #ef6f6f;
  }

  /* CTA */
  #addonsUI .au-cta {
    -webkit-appearance: none; appearance: none;
    display: block; margin: 24px auto;
    width: auto; 
    border: 0; border-radius: 999px;
    font-size: 16px; font-weight: 900; letter-spacing: .01em;
    color: #fff; background: #f3b3b3; /* disabled look */
    box-shadow: 0 12px 28px rgba(229, 57, 53, .18);
    cursor: not-allowed;
    transition: filter .2s ease, transform .05s ease, background .2s ease;
  }
  #addonsUI .au-cta:not([disabled]) { cursor: pointer; background: color(srgb 0.8979 0.2213 0.2061); }
  #addonsUI .au-cta:not([disabled]):hover { filter: brightness(1.03); }
  #addonsUI .au-cta:not([disabled]):active { transform: translateY(1px); }

  /* Plan placeholder */
  #addonsUI .au-note { color:#9ca3af; font-weight:700; padding: 8px 2px; }

  /* Screen reader live region */
  #addonsUI .au-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }

  /* ===== Data Plan card styles (scoped under #addonsUI) ===== */
  #addonsUI .dp-grid{display:block;gap:26px;align-items:stretch;flex-wrap:wrap;}

  #addonsUI .dp-card{
    appearance:none;background:#fff;border:1.5px solid #f1f1f1;border-radius:10px;
    display:flex;align-items:center;padding:0px;min-width:350px;
    box-shadow:none;
    transition:box-shadow .2s,transform .04s,border-color .2s; position:relative;
    cursor:pointer;float: left;margin-right: 10px;
  }
  #addonsUI .dp-card:hover{box-shadow:0 12px 28px rgba(16,24,40,.10);}
  #addonsUI .dp-card:active{transform:translateY(1px);}
  #addonsUI .dp-card:focus-visible{outline:2px solid #e53935;outline-offset:3px;}

  /* Selected card */
  #addonsUI .dp-card.dp-selected{border-color:#f25a4e;}
  #addonsUI .dp-card.dp-selected .dp-tick{
    display:block; position:absolute; top:4px; right:8px; width:18px; height:18px; border-radius:50%;
    background:#e53935; 
  }
  #addonsUI .dp-card.dp-selected .dp-tick::after{
    content:""; position:absolute; left:7px; top:7px; width:19px; height:8px; border:3px solid #fff;
    border-top:0; border-left:0; transform:rotate(45deg);
  }

  /* Price slab */
  #addonsUI .dp-price-col{display:flex;align-items:center;justify-content:center;padding:24px 32px;border-radius:16px;}
  #addonsUI .dp-price{font-size:18px;font-weight:900;letter-spacing:.01em;color:#1f2937;}
  #addonsUI .dp-selected .dp-price-col{background:#e53935;color:#fff;border-radius:8px 0px 0px 8px;}
  #addonsUI .dp-selected .dp-price-col .dp-price{color:#fff;}

  /* Divider (unselected card) */
  #addonsUI .dp-vsep{width:1px;height:40px;background:#e5e7eb;}

  /* Features */
  #addonsUI .dp-feats{display:flex;flex-direction:column;gap:12px;font-size: 12px }
  #addonsUI .dp-feat{display:flex;align-items:center;gap:12px;font-size:14px;color:#1f2937;padding:0px 13px}
  #addonsUI .dp-bullet{
    width:14px;height:14px;border-radius:50%;display:inline-block;background:#111; position:relative;
  }
  #addonsUI .dp-bullet::after{
    content:""; position:absolute; left:4px; top:4px; width:6px; height:4px; border:2px solid #fff;
    border-top:0;border-left:0; transform: rotate(135deg) scaleY(-1);
  }

  #addonsUI .dp-card.dp-selected .dp-tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 6px;
  height: 8px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(135deg) scaleY();
  }
body select:focus, body input:not([type=submit]):not([type=radio]):not([type=file]):not([type=checkbox]):focus, body input:focus, body textarea:focus {
box-shadow: none;
}

  /* Responsive */
  @media (max-width:680px){

        #addonsUI .dp-card{
      margin-bottom: 20px;
    }
    .pill {
      border-radius: 20px;
    }
    #addonsUI .dp-card{min-width:100%; flex:1;}
    #addonsUI .dp-price-col--selected{min-width:140px;}
  }

  :root{
    --pill-bg: #FFF6E8;      /* soft amber tint */
    --pill-fg: #D98B12;      /* amber text */
    --pill-icon: #F2A53A;    /* icon fill */
    --pill-icon-dark:#E08D12;/* icon gradient */
  }

  .pill-alert{
    display:flex;
    align-items:center;
    gap:14px;
    max-width: 1040px;                 /* optional */
    padding: 10px 22px;
    border-radius: 999px;               /* full pill */
    background: var(--pill-bg);
    color: var(--pill-fg);
     margin-bottom: 20px;
     display: none;
     font-weight: 500;
  }

  .pill-alert__icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 50%;
    color:#fff;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, var(--pill-icon), var(--pill-icon-dark));
    text-indent: -0.5px; /* centers the glyph optically */
  }

  .pill-alert__text{
    margin:0;font-size:14px;font-weight: 500;
  }

  /* Optional: responsive size tweaks */
  @media (max-width: 520px){
    .pill-alert{ padding:12px 16px; font-size:14px; }
    .pill-alert__icon{ width:24px; height:24px; font-size:14px; }
  }

  .container.card{
  	display: none;
  }

    :root{
    --pill-s-bg: #eef8ec;       /* soft green tint */
    --pill-s-fg: #2e7d32;       /* success text green */
    --pill-s-icon1: #59c15a;    /* icon gradient top */
    --pill-s-icon2: #2e7d32;    /* icon gradient bottom */
  }

  .pill-success{
    display:none;
    align-items:center;
    gap:14px;
    max-width: 1040px;          /* optional */
    padding: 10px 12px;
    border-radius: 999px;       /* full pill */
    background: var(--pill-s-bg);
    color: var(--pill-s-fg);
    font: 14px;
    margin-bottom: 20px;
    font-weight: 500;
  }

  .pill-success__icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 50%;
    color:#fff;
    font-weight: 800;
    line-height: 1;
    background: #378c3a;
    text-indent: -0.5px; /* optical centering */
    margin-right: 5px;
  }

  .pill-success__text{ margin:0;font-size:14px;font-weight: 500; }

  /* Responsive tweak */
  @media (max-width:520px){

    #addonsUI .dp-card{
      margin-bottom: 20px;
    }
    .pill-success{ padding:10px 16px; font-size:14px; }
    .pill-success__icon{ width:24px; height:24px; font-size:14px; }
  }

  .grey{
    color: var(--Color-Text-Primary, #7c7c7c) !important;
  }

    body.ttm-lock{ overflow:hidden; }
  #tt-auto-modal[hidden]{ display:none; }

  /* Strong frosted-glass background behind BOTH modals */
  #tt-auto-modal .ttm-backdrop,
  #tt-card-modal .ttc-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.45);            /* dim */
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);   /* main blur */
    will-change: backdrop-filter;
    z-index: 9998;
  }
  #tt-auto-modal .ttm-dialog{
    position:fixed; inset:0; margin:auto; width:min(620px,92vw);
    background:#fff; border-radius:26px; padding:28px 28px 24px;
    box-shadow: 0 18px 70px rgba(0,0,0,.25);
    z-index:9999;
  }
  #tt-auto-modal .ttm-x{
    position:absolute; right:16px; top:10px; border:0; background:transparent;
    font-size:28px; line-height:1; cursor:pointer; color:#9aa0a6;
  }
  #tt-auto-modal h3{
    text-align:center; margin:8px 0 18px; font-size:28px; font-weight:800; color:#1f2937;
  }
  #tt-auto-modal .ttm-field{ margin-bottom:14px; }
  #tt-auto-modal input, #tt-auto-modal select{
    width:100%; height:56px; border:0; border-radius:28px;
    background:#f4f6ff; padding:0 18px; font-size:16px; color:#111;
  }
  #tt-auto-modal .ttm-split{ display:flex; gap:12px; align-items:baseline; }
  #tt-auto-modal .ttm-select{ position:relative; min-width:240px; }
  #tt-auto-modal .ttm-select select{ appearance:none; padding-right:34px; }
  #tt-auto-modal .ttm-caret{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:#1f2937; }

  #tt-auto-modal .ttm-next{
    display:block; width:260px; height:46px; margin:20px auto 0;
    border:0; border-radius:999px; font-weight:800; color:#fff;
    background:color(display-p3 0.8941 0.1961 0.1333);
    cursor:pointer;
  }
  #tt-auto-modal .ttm-error{ text-align:center; color:#e11d48;margin-top:10px; }

  body.ttc-lock{ overflow:hidden; }
  #tt-card-modal[hidden]{ display:none; }

  #tt-card-modal .ttc-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    z-index:9998;
  }
  #tt-card-modal .ttc-dialog{
    position:fixed; inset:0; margin:auto; width:min(560px,92vw);
    background:#fff; border-radius:26px; padding:28px 28px 24px;
    box-shadow: 0 18px 70px rgba(0,0,0,.25);
    z-index:9999;
  }
  #tt-card-modal .ttc-x{
    position:absolute; right:16px; top:10px; border:0; background:transparent;
    font-size:28px; line-height:1; cursor:pointer; color:#9aa0a6;
  }
  #tt-card-modal h3{
    text-align:center; margin:8px 0 18px; font-size:28px; font-weight:800; color:#1f2937;
  }
  #tt-card-modal .ttc-field{ margin-bottom:14px; }
  #tt-card-modal input{
    width:100%; height:56px; border:0; border-radius:28px;
    background:#f4f6ff; padding:0 18px; font-size:16px; color:#111;
  }
  #tt-card-modal .ttc-row{ display:flex; gap:12px; }
  #tt-card-modal .ttc-actions{
    justify-content:space-between; align-items:center; gap:16px; margin-top:14px;
  }
  #tt-card-modal .ttc-skip{
    background:transparent; border:0; color:#e53935; font-weight:800; cursor:pointer;width: 50%;
  }
  #tt-card-modal .ttc-submit{
    min-width:220px; height:42px; border:0; border-radius:999px; color:#fff;
    font-weight:800; background:#FF0000;
    box-shadow:0 12px 28px rgba(229,57,53,.18); cursor:pointer;
  }
  #tt-card-modal .ttc-error{ text-align:center; color:#e11d48;margin-top:10px; }



  #tt-auto-modal .ttm-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(620px,92vw);
  background: #fff;
  border-radius: 26px;
  padding: 28px 28px 24px;
  box-shadow: 0 18px 70px rgba(0,0,0,.25);
  z-index: 9999;
  height: fit-content;
  }


  #tt-card-modal .ttc-dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(560px,92vw);
background: #fff;
border-radius: 26px;
padding: 28px 28px 24px;
box-shadow: 0 18px 70px rgba(0,0,0,.25);
z-index: 9999;
height: fit-content;
}

/* Blur the page content itself when modal is open (fallback) */
.modal-blur-target{
  transition: filter .25s ease;
}

@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  body.ttm-lock .modal-blur-target,
  body.ttc-lock .modal-blur-target{
    filter: blur(10px) saturate(1.05);
  }
}

/* ===== Enable Plan Auto-Renew (3rd popup) ===== */
#tt-arn-modal[hidden] { display: none; }

/* Backdrop (strong blur, dim) */
#tt-arn-modal .ttm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  z-index: 9998;
}

/* Dialog shell */
#tt-arn-modal .ttm-dialog{
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, 92vw);
  max-width: 680px;
  background: #ffffff;
  border-radius: 26px;
  padding: 28px 32px 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  z-index: 9999;
}

/* Title & close */
#tt-arn-modal h3#ttarn-title{
  margin: 6px 0 18px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: .2px;
}
#tt-arn-modal .ttm-x{
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #9aa0a6;
  cursor: pointer;
}
#tt-arn-modal .ttm-x:hover{ color:#6b7280; }

/* Fields */
#tt-arn-modal .ttm-field,
#tt-arn-modal .ttc-field{ margin-bottom: 14px; }

#tt-arn-modal input,
#tt-arn-modal select{
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 28px;
  background: #f4f6ff;            /* soft pill */
  padding: 0 18px;
  font-size: 16px;
  color: #111827;
  outline: none;
  transition: box-shadow .15s ease, background .15s ease;
}

#tt-arn-modal input::placeholder{ color:#a1a7b3; }

/* Focus ring */
#tt-arn-modal input:focus,
#tt-arn-modal select:focus{
  box-shadow: 0 0 0 3px rgba(226,6,19,.18);
  background: #f7f8ff;
}

/* Split rows (Country Code + Mobile) and (MM/YY + CCV) */
#tt-arn-modal .ttm-split,
#tt-arn-modal .ttc-row{
  display: flex;
  gap: 12px;
  align-items: baseline;
}
#tt-arn-modal .ttm-split > .ttm-select{ min-width: 240px; position: relative; }
#tt-arn-modal .ttm-split > input{ flex: 1; }
#tt-arn-modal .ttc-row > *{ flex: 1; }

/* Select arrow (if you keep a caret span inside .ttm-select) */
#tt-arn-modal .ttm-select select{ appearance: none; padding-right: 34px; }
#tt-arn-modal .ttm-select .ttm-caret{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #1f2937;
  pointer-events: none;
}

/* Helper note */
#tt-arn-modal .ttm-note{
  margin: 15px 0 14px;
  text-align: center;
  font-size: 14px;
  color: #4b5563;
}

/* Proceed button */
#tt-arn-modal .ttm-next#ttarn-proceed{
  display: block;
  width: 260px;
  height: 56px;
  margin: 8px auto 4px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: color(srgb 0.8979 0.2213 0.2061);
  cursor: pointer;
}
#tt-arn-modal .ttm-next#ttarn-proceed:disabled{
  opacity: .6; cursor: not-allowed; box-shadow: none;
}

/* Inline error */
#tt-arn-modal .ttm-error#ttarn-err{
  min-height: 20px;
  text-align: center;
  color: #e11d48;
  margin-top: 8px;
  font-size: 14px;
}

/* Small screens */
@media (max-width: 480px){
  #tt-arn-modal .ttm-dialog{ padding: 22px 16px 18px; border-radius: 22px; }
  #tt-arn-modal h3#ttarn-title{ font-size: 22px; margin: 2px 0 14px; }
  #tt-arn-modal .ttm-split,
  #tt-arn-modal .ttc-row{ flex-direction: column; }
  #tt-arn-modal .ttm-split > .ttm-select{ min-width: 100%; }
  #tt-arn-modal .ttm-next#ttarn-proceed{ width: 100%; }
}

/* ===== Disable Auto-Renew (confirm) ===== */
#tt-disable-modal[hidden]{ display:none; }
#tt-disable-modal .ttd-backdrop{
  position:fixed; inset:0;
  background:rgba(17,24,39,.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  z-index:9998;
}
#tt-disable-modal .ttd-dialog {
position: fixed;
inset: 0;
margin: auto;
width: 500px;
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
z-index: 9999;
text-align: center;
max-height: 250px;
}
#tt-disable-modal #ttd-title{
  margin:0 0 17px; font-size:26px; line-height:1.2;
  font-weight:800; color:#111827; letter-spacing:.2px;
}
#tt-disable-modal .ttd-x{
  position:absolute; right:24px; top:20px;
  border:0; background:transparent; cursor:pointer;
  font-size:30px; line-height:1; color:#9aa0a6;
}
#tt-disable-modal .ttd-x:hover{ color:#6b7280; }
#tt-disable-modal .ttd-body{
  margin:8px auto 22px;
  max-width:720px; font-size:17px; line-height:1.45; color:#111827;
}
#tt-disable-modal .ttd-confirm{
  display:block; margin:8px auto 0;
  width:200px;
  border:0; border-radius:999px; cursor:pointer;
  font-weight:800; font-size:20px; color:#fff;
  background:color(srgb 0.8979 0.2213 0.2061)

}
@media (max-width:560px){
  #tt-disable-modal .ttd-dialog{ padding:24px 18px 22px; border-radius:28px; }
  #tt-disable-modal #ttd-title{ font-size:26px; }
  #tt-disable-modal .ttd-body{ font-size:18px; }
  #tt-disable-modal .ttd-confirm{ width:100%; height:56px; }
}

#tt-disable-modal .ttd-dialog {
position: fixed;
inset: 0;
margin: auto;
width: 500px;
background: #fff;
border-radius: 20px;
padding: 36px 40px 32px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
z-index: 9999;
text-align: center;
max-height: 250px;
}

#tt-arn-modal .ttm-dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(680px, 92vw);
max-width: 680px;
background: #ffffff;
border-radius: 26px;
padding: 28px 32px 24px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
z-index: 9999999;
height: fit-content;
}

#addonsUI .au-cta:not([disabled]) {
cursor: pointer;
background-color: #FF0000;
}

#addonsUI .dp-selected .dp-price-col {
background: color(display-p3 0.9176 0.2 0.1373);
color: #fff;
border-radius: 8px 0px 0px 8px;
}


/* Inline errors under each field */
#tt-arn-modal .field-error{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #e11d48; /* red-500 */
}

/* Red focus ring + subtle background for invalid inputs */
#tt-arn-modal input.is-invalid,
#tt-arn-modal select.is-invalid{
  box-shadow: 0 0 0 3px rgba(225,29,72,.18) !important;
  background: #fff1f2 !important; /* rose-50 */
}

/* ===== 8-field modal: per-field errors + two-column layout ===== */
#tt-arn-modal .field-error {
margin-top: 6px;
font-size: 13px;
color: #e11d48;
background-color: color(display-p3 1 0.835 0.849);
padding: 10px 20px;
border-radius: 20px;
display: inline-block;
/* min-width: 250px; */
width: max-content;
}

/* highlight invalid inputs */
#tt-arn-modal input.is-invalid,
#tt-arn-modal select.is-invalid{
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .18);
  background: #fff5f6;
}

/* two-column layout for Exp / CVV */
#tt-arn-modal .ttc-row{
  display: flex;
  gap: 12px;
}
#tt-arn-modal .ttc-row .two-column{
  flex: 1;
  display: flex;
  flex-direction: column; /* so .field-error stacks under the input */
}
#tt-arn-modal .ttc-row .two-column input{
  width: 100%;
}

/* stack on small screens */
@media (max-width: 480px){
  #tt-arn-modal .ttc-row{ flex-direction: column; }
}

  /* per-field error + invalid ring (shared with 3rd modal) */
  #tt-auto-modal .field-error,
  #tt-card-modal .field-error{
    margin-top:6px;font-size:13px;color:#e11d48;
  }
  #tt-auto-modal input.is-invalid,
  #tt-auto-modal select.is-invalid,
  #tt-card-modal input.is-invalid,
  #tt-card-modal select.is-invalid{
    box-shadow:0 0 0 3px rgba(225,29,72,.18);
    background:#fff5f6;
  }


  #tt-auto-modal .field-error,
  #tt-card-modal .field-error,
  #tt-arn-modal  .field-error{
    margin-top:6px;font-size:13px;color:#e11d48;
    background-color: color(display-p3 1 0.835 0.849);
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    /* min-width: 250px; */
    width: max-content;
  }
  #tt-auto-modal input.is-invalid,
  #tt-auto-modal select.is-invalid,
  #tt-card-modal input.is-invalid,
  #tt-card-modal select.is-invalid,
  #tt-arn-modal  input.is-invalid,
  #tt-arn-modal  select.is-invalid{
    box-shadow:0 0 0 3px rgba(225,29,72,.18);
    background:#fff5f6;
  }