:root{--purple:#8038f5;--ink:#241b3b;--muted:#8b809d;--line:#e9e1f5;--green:#25aa6d}
*{box-sizing:border-box}
body{margin:0;background:#f7f4fd;color:var(--ink);font:16px}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b892ff;outline-offset:3px}
a{color:var(--purple);text-decoration:none}
[hidden]{display:none!important}

  .success-card {
    text-align: center;
    max-width: 520px;
    width: 100%;
    padding: 2rem 1.5rem;
  }

  .success-icon-wrap {
    width: 150px;
    height: 150px;
    background-color: #e7f9ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2.25rem;
    animation: pop-in 0.45s cubic-bezier(0.25, 1.3, 0.5, 1) both;
  }

  .success-icon-wrap svg {
    width: 70px;
    height: 70px;
  }

  .success-icon-wrap svg path {
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: draw-check 0.45s ease-out 0.35s forwards;
  }

  @keyframes pop-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    70% {
      transform: scale(1.08);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes draw-check {
    to {
      stroke-dashoffset: 0;
    }
  }

  .success-title {
    font-weight: 800;
    font-size: 2rem;
    color: #1b1b3a;
    margin-bottom: 0.75rem;
  }

  .success-subtitle {
    color: #8a8fa3;
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .btn-dashboard {
    background: linear-gradient(90deg, #4a3ff0, #b445e0);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 50px;
  }
  .btn-dashboard:hover {
    color: #fff;
    opacity: 0.92;
  }

  .btn-website {
    border: 2px solid #6a3ff0;
    color: #6a3ff0;
    font-weight: 700;
    padding: 0.7rem 1.75rem;
    border-radius: 50px;
    background: transparent;
  }
  .btn-website:hover {
    background: #f2edfd;
    color: #6a3ff0;
  }

  .download-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: #6a3ff0;
    text-decoration: underline;
    font-weight: 500;
  }
  .download-link:hover {
    color: #4a3ff0;
  }

.offer{background:#1e1433;color:white;text-align:center;padding:9px 18px;font-size:14px;font-weight:600}
.nav{background:white;border-bottom:1px solid #eee8f7}
.nav-inner{max-width:1240px;margin:auto;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 25px}
.logo{font-size:25px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:8px}
.logo span{display:grid;place-items:center;width:30px;height:30px;background:var(--purple);color:white;border-radius:9px;font-size:22px}
.steps{list-style:none;display:flex;gap:24px;margin:0;padding:0}
.steps li{width:90px;text-align:center;border-top:4px solid #eae1f7;padding-top:8px;font-size:11.5px;font-weight:700;color:#8d819d}
.steps .done,.steps .current{border-color:var(--purple);color:var(--purple)}
.nav-end{font-size:13px;display:flex;gap:22px;align-items:center;justify-content:end}
.secure{color:var(--green);font-weight:600}
.nav-end a{color:var(--muted);border-left:1px solid var(--line);padding-left:22px}
.wrap{max-width:1140px;margin:auto;padding:27px 25px 40px}
.intro{text-align:center;margin-bottom:23px}
.intro h1{font-size:25px;font-weight:800;letter-spacing:-.75px;margin:0 0 8px}
.intro h1 span{color:var(--purple)}
.intro p{color:var(--muted);margin:0}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;font-size:11.5px; color:#6B6480; font-weight: bold;}
.tick{color:var(--green);font-weight:800;margin-right:5px}
.layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);gap:38px;align-items:start}
.section{margin-bottom:28px}
.section-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.number{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--purple);color:white;font-size:12px;font-weight:700}
.section-title h2{font-size:15px}
.section-title p{font-size:11px;color:var(--muted);margin:0;line-height:1.7;}
.billing-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.billing{display:flex;gap:3px;background:#eae2f5;padding:1px;border-radius:25px}
.billing button{border:0;border-radius:25px;padding:7px 18px;font-size:11px;font-weight:600;background:transparent;color:#827291}
.billing button.selected{background:var(--purple);color:white}
.saving{font-size:11px;font-weight:700;color:#22a463;background:#e5f8e9;padding:6px 12px;border-radius:20px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan{position:relative;background:white;border:1px solid var(--line);border-radius:13px;padding:20px 13px 15px;min-height:237px;text-align:left;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.plan:hover{transform:translateY(-2px);border-color:#b18aff}
.plan.selected{border:2px solid #a66aff;padding:19px 12px 14px;background:#fcfaff;     position: relative;}
.plan.selected:before {
    content: "SELECTED";
    position: absolute;
    bottom: 0px;
    right: 0;
    background: var(--purple);
    border-radius: 15px 0px 11px 0px;
    font-size: 9px;
    line-height: 20px;
    color: #fff;
    width: 55px;
    text-align: center;
    height: 20px;
}
.popular{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--purple);color:white;border-radius:12px;font-size:10px;font-weight:400;padding:0px 9px}
.plan-name{font-weight:750;font-size:13px}
.radio{display:inline-block;width:12px;height:12px;border:1.5px solid #ded4ec;border-radius:50%;margin-right:5px;vertical-align:-1px}
.selected .radio{border:4px solid var(--purple)}
.plan-desc{font-size:10px;color:var(--muted);margin:0px 0 12px;line-height:16px}
.price{font-size:24px;letter-spacing:-.8px;font-weight:800}
.price small{font-size:11px;letter-spacing:0;color:#84768f;font-weight:400}
.billed{font-size:10px;color:var(--muted);margin:3px 0 10px;line-height:16px}
.features{font-size:10px;line-height:1.95;margin-bottom:12px}
.features i{font-style:normal;color:var(--green);font-weight:700}
.plan-foot{font-size:10px;color:#9a8ea7;margin-top:auto}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
label{display:block;font-size:9px;font-weight:750;letter-spacing:.3px;margin-bottom:5px}
label span{color:var(--muted);font-weight:400}
input{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;line-height:20px;color:var(--ink);font-size:12px}
input::placeholder{color:#a197ad}
input:focus{border-color:var(--purple); color:var(--black)}
.methods{display:flex;gap:8px;margin-bottom:13px}
.method{flex:1;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px;font-size:11px;font-weight:600;color:var(--ink)}
.method.active{color:var(--purple);border:1.5px solid var(--purple)}
.method small{font-size:8px;color:var(--green);margin-left:9px}
.payment-box{background:white;border:1px solid var(--line);border-radius:12px;padding:20px}
.payment-top{display:flex;align-items:center;gap:16px}
.qr-placeholder{background:#f2eaff;color:var(--purple);width:68px;height:68px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.qr-placeholder svg{width:38px;height:38px}
.payment-box h3{font-size:12px;margin:0 0 6px}
.payment-box p{font-size:11px;line-height:1.6;color:var(--muted);margin:0}
.amount-row{display:grid;grid-template-columns:1fr 160px;align-items:center;gap:18px;border-top:1px solid #f0eaf7;padding-top:16px;margin-top:18px}
.amount-row label{font-size:11px;margin:0}
.amount-row small{display:block;margin-top:5px;font-size:11px;font-weight:400;color:var(--muted)}
#payment{text-align:center;margin-top:15px}
#qr{display:block;width:230px;max-width:100%;margin:12px auto}
#expiry{display:block;font-size:11px;color:var(--muted)}
.secondary{border:1px solid #e0d0fa;border-radius:8px;background:#f3ecff;color:var(--purple);padding:10px 16px;font-size:11px;font-weight:600;margin:14px 4px 0}
#message{white-space:pre-line;overflow-wrap:anywhere;font-size:12px;margin-top:12px;line-height:1.6}
#message:empty{display:none}
.error{color:#b42318!important}
.success{color:#148450!important}
.summary{position:sticky;top:24px;background:linear-gradient(145deg,#33116b,#491c98);color:white;border-radius:17px;padding:24px;box-shadow:0 12px 35px #3f197812}
.summary-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.summary h2{font-size:15px;margin:0}
.change{border:0;padding:0;background:none;color:#cdb6ed;font-size:11px}
.summary-plan{display:flex;justify-content:space-between;gap:12px;border:1px solid #ffffff0d;border-radius:9px;background:#ffffff12;padding:13px;font-size:12px;font-weight:700}
.summary-plan small{display:block;font-weight:400;font-size:11px;color:#bda4da;margin-top:5px}
.costs{font-size:11px;margin:18px 0}
.costs div{display:flex;justify-content:space-between;gap:18px;margin-bottom:5px;color:#cbb6e6}
.costs dt,.costs dd{margin:0}
.costs dd{color:#fff;font-weight:600}
.costs .discount dt,.costs .discount dd{color:#a1e7b3}
.summary-note{border:1px dashed #ffffff30;border-radius:8px;padding:10px 12px;color:#d5c3ed;font-size:11px;line-height:1.6}
.total-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff20;margin-top:20px;padding-top:19px;font-size:13px;font-weight:700}
.total-row strong{font-size:25px;letter-spacing:-.7px}
.total-note{text-align:right;font-size:10px;color:#bba2d8;margin-top:4px}
.pay{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:0;border-radius:10px;background:#fff;color:var(--purple);padding:12px;margin:15px 0 10px;font-size:13px;font-weight:750;box-shadow:0 4px 14px #21104425}
.pay svg{width:17px;height:17px}
.assurances{list-style:none;margin:0;padding:0;font-size:11px;line-height:2;color:#e2d6f2}
.assurances .tick{color:#91e5a4}
.next{border-top:1px solid #ffffff20;padding-top:17px;margin-top:20px}
.next h3{font-size:10px;letter-spacing:.8px;color:#bca2dc;margin:0 0 12px}
.next p{display:flex;align-items:center;gap:8px;font-size:11px;color:#cbb7e2;margin:8px 0}
.next p span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff18;
    font-size: 9px;
    line-height: 2px;
}
.powered{text-align:center;font-size:10px;color:#b79fd1;margin:24px 0 2px}
.powered b{font-style:italic;color:#ded0ef}
.footer{text-align:center;font-size:11px;color:#a094ad;margin-top:26px}
.card-fields{display:grid;gap:14px;margin-top:18px}
.provider-label{margin-top:18px}
select{width:100%;padding:8px 12px;line-height:20px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit;font-size:12px}
select:focus-visible{outline:3px solid #b892ff;outline-offset:3px}
.payment-box label{font-size:9px}
#payment-form label {margin-bottom: 0;}
#payment-form input {border-radius: 4px;}
.layout section:last-child {margin-bottom: 0px;}
@media(max-width:850px){
  .layout{gap:22px;grid-template-columns:minmax(0,1fr) 290px}
  .wrap{padding:22px 18px}
  .summary{padding:20px}
  .nav-end .secure{display:none}
  .plans{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .plan{padding-left:10px;padding-right:10px}
  .plan.selected{padding-left:9px;padding-right:9px}
  .price{font-size:21px}
  .saving{font-size:10px;padding:6px 8px !important;}
  .intro p{font-size:12px;}
  .method{padding: 5px 5px;}
}
@media(max-width:680px){
  .nav-inner{height:65px;padding:0 16px}
  .nav-end{display:none}
  .steps{gap:10px}
  .steps li{width:54px;font-size:10px}
  .logo{font-size:21px}
  .intro h1{font-size:23px;line-height:1.3}
  .trust{gap:0px 10px;font-size:10px}
  .layout{grid-template-columns:1fr}
  .summary{position:static;padding:25px}
  .wrap{padding:24px 16px}
  .plans{gap:9px}
  .plan{min-height:225px}
  .price{font-size:18px}
  .details-grid{gap:13px 10px}
  .billing-row{gap:8px}
  .billing button{padding:7px 16px}
  .section:last-child{margin-bottom:0}
}
@media(max-width:370px){
  .plans{grid-template-columns:1fr}
  .plan{min-height:auto}
  .details-grid{grid-template-columns:1fr}
  .amount-row{grid-template-columns:1fr}
  .steps li{width:44px}
}


#payment-success {
  border: 0;
  border-radius: 18px;
  padding: 32px;
  max-width: min(420px, 90vw);
  text-align: center;
  box-shadow: 0 20px 70px #0003;
}
#payment-success::backdrop { background: #102a4366; }
#payment-success h2 { color: #148450; }
#payment-success p { overflow-wrap: anywhere; margin: 18px 0; }

/* ---------- Payment result pages (success / fail) ---------- */
.fail-icon-wrap { background-color: #fdecec; }
.fail-icon-wrap svg { width: 70px; height: 70px; }
.success-subtitle strong { color: #1b1b3a; }
button.download-link { background: none; border: 0; padding: 0; cursor: pointer; }
.result-details { margin: 0 auto 2rem; padding: 1rem 1.25rem; max-width: 420px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.result-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.result-details > div:last-child { border-bottom: 0; }
.result-details dt { font-weight: 500; color: var(--muted); }
.result-details dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.result-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.result-note:empty { display: none; }

/* ---------- Invoice (PDF / print) ---------- */
.invoice-doc { width: 720px; max-width: 100%; margin: 0 auto; padding: 32px; background: #fff; color: #241b3b; font: 13px/1.5 Arial, Helvetica, sans-serif; text-align: left; }
.inv-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid #8038f5; }
.inv-logo { height: 36px; margin-bottom: 10px; }
.inv-muted { color: #6b6280; max-width: 300px; }
.inv-meta { text-align: right; }
.inv-title { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #8038f5; margin-bottom: 6px; }
.inv-parties { display: flex; justify-content: space-between; gap: 24px; margin: 24px 0; }
.inv-parties > div { flex: 1; }
.inv-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8038f5; margin-bottom: 6px; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th { background: #f4effd; text-align: left; font-size: 12px; padding: 10px; }
.inv-table td { padding: 12px 10px; border-bottom: 1px solid #e9e1f5; vertical-align: top; }
.inv-table th:last-child, .inv-num { text-align: right; white-space: nowrap; }
.inv-totals { margin: 16px 0 0 auto; width: 260px; }
.inv-totals > div { display: flex; justify-content: space-between; padding: 6px 10px; }
.inv-grand { background: #8038f5; color: #fff; font-weight: 700; border-radius: 6px; font-size: 15px; }
.inv-foot { margin-top: 36px; font-size: 11px; color: #8b809d; text-align: center; }
body.inv-print { background: #fff; }
@media print { body.inv-print .invoice-doc { padding: 0; width: auto; } }

/* ---------- Bank return tab ---------- */
.return-spinner { width: 64px; height: 64px; margin: 3rem auto 2rem; border: 6px solid #eae1f7; border-top-color: #8038f5; border-radius: 50%; animation: return-spin 0.9s linear infinite; }
@keyframes return-spin { to { transform: rotate(360deg); } }

/* ---------- Phone field (intl-tel-input) ---------- */
.iti{width:100%;display:block}
.iti__flag-container{z-index:5}
.iti__country-list{z-index:50;min-width:280px;max-width:min(360px,85vw);font-size:13px;border-radius:8px;border-color:var(--line)}
.iti--separate-dial-code .iti__selected-flag{background:#f7f3fd;border-radius:8px 0 0 8px}
.iti__selected-dial-code{font-size:12px;color:var(--ink)}
input[aria-invalid="true"]{border-color:#d92d20}
.field-error{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:#b42318}

/* ---------- Field validation ---------- */
.field-error.field-hint{color:var(--muted)}
.hint-link{background:none;border:0;padding:0;color:var(--purple);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* ---------- Popup (same design as the homepage popup in includes/footer.php) ---------- */
.upload-error-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;display:flex;align-items:center;justify-content:center;height:100vh;padding:16px}
.upload-error-overlay[hidden]{display:none!important}
.upload-error-card{background:#fff;border-radius:16px;padding:40px 32px;max-width:420px;width:90%;text-align:center;font-family:inherit}
.upload-error-icon{width:70px;height:70px;border-radius:50%;background:#f5a623;color:#fff;font-size:34px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.upload-error-card h3{font-size:26px;margin-bottom:12px}
.upload-error-card p{color:#444;margin-bottom:24px;line-height:1.5}
.upload-error-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.upload-error-actions .theme-btn-main{color:#fff;text-decoration:none}
.upload-error-cancel{background:#fff;color:var(--purple);border:2px solid var(--purple);border-radius:50px;padding:0 28px;height:60px;font-weight:700;font-size:16px;cursor:pointer;transition:background .2s}
.upload-error-cancel:hover{background:#f4effd}
body.modal-open-checkout{overflow:hidden}

/* ---------- Plan cards: visibility + "Enhanced Plans" contact card ---------- */
.plan[hidden]{display:none!important}
a.secure{text-decoration:none}
a.secure:hover{text-decoration:underline}
.plan-contact{cursor:default}
.plan-contact:hover{transform:none;border-color:var(--line)}
.plan-contact .price{display:inline-block;width:max-content;letter-spacing:-.5px}
.contact-sales{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--purple);color:var(--purple);border-radius:50px;padding:7px 12px;font-size:11px;font-weight:700;text-decoration:none;transition:background .15s}
.contact-sales:hover{background:#f4effd;color:var(--purple)}

/* ---------- Popup buttons: same size / shape as the checkout's buttons ---------- */
.upload-error-actions .popup-btn{display:inline-flex;align-items:center;justify-content:center;min-width:110px;margin:0;padding:10px 16px;font-size:11px;font-weight:600;border-radius:8px;line-height:28px;text-decoration:none;font-family:inherit}
.upload-error-actions .popup-btn-primary{background:var(--purple);border:1px solid var(--purple);color:#fff}
.upload-error-actions .popup-btn-primary:hover{background:#6d28e0;color:#fff}
.upload-error-actions .popup-btn.secondary:hover{background:#eadcff}

/* ---------- QR placeholder height while the Razorpay image loads ---------- */
#qr.qr-loading{min-height:520px;width:230px;background:#f6f2fc;border-radius:8px}

/* ---------- Header: help link without the divider ---------- */
.nav-end a.secure{border:none;color:var(--green)}   /* green, as before it became a link */

/* ---------- Field states: green + check when valid, red + "!" on error ---------- */
label .req{color:var(--ink);margin-left:1px}
label .req[hidden]{display:none}
#payment-form input.is-valid,#payment-form input[aria-invalid="true"]{padding-right:38px;background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
#payment-form input.is-valid{border-color:#1f9d55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%231f9d55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#payment-form input[aria-invalid="true"]{border-color:#d92d20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fde8e8'/%3E%3Cpath d='M8 4v5' stroke='%23d92d20' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1' fill='%23d92d20'/%3E%3C/svg%3E")}
#payment-form input.is-valid:focus{border-color:#1f9d55}
#payment-form input[aria-invalid="true"]:focus{border-color:#d92d20}

/* ---------- Plan cards: columns that turn into a swipe slider ---------- */
/* --cols  = cards per row (desktop 3, tablet 2, phone 1).                 */
/* When there are more cards than columns, JS adds .is-slider: the row     */
/* scrolls sideways and shows --peek cards, so the next card is half       */
/* visible (in the middle both neighbours peek). No dots, no arrows.       */
.plans{--cols:3;--peek:2.5;--gap:12px;--visible:var(--cols);display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:12px 2px 10px;margin:-12px -2px -10px;scrollbar-width:thin;scrollbar-color:#c9c3d4 transparent}
.plans.is-slider{--visible:var(--peek)}
.plans > .plan{flex:0 0 calc((100% - var(--gap) * (var(--visible) - 1)) / var(--visible));min-width:0;scroll-snap-align:center}
.plans::-webkit-scrollbar{height:6px}
.plans::-webkit-scrollbar-thumb{background:#c9c3d4;border-radius:6px}
.plans::-webkit-scrollbar-track{background:transparent}
.plans:not(.is-slider){scrollbar-width:none}
.plans:not(.is-slider)::-webkit-scrollbar{display:none}
@media(max-width:850px){.plans{--cols:2;--peek:1.5;--gap:7px}}
@media(max-width:680px){.plans{--gap:9px}}
@media(max-width:480px){.plans{--cols:1;--peek:1.2}}
/* main.css hides <br> inside .section-title on phones, which ran the plan
   features into one line; keep one feature per line in the cards. */
.plans .features br{display:initial!important}

/* ---------- Result pages: copy button next to the Payment ID ---------- */
.result-details dd{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border:1px solid var(--line);border-radius:6px;background:#f7f3fd;color:var(--purple);padding:0;cursor:pointer;transition:background .15s}
.copy-btn:hover{background:#eadcff}
.copy-btn.copied{background:#e5f8e9;border-color:#bfe8cd;color:#1f9d55}
#yearly-nudge[hidden]{display:none!important}
/* Name on card + card number share a row; on phones they stack (a card number needs the width). */
@media(max-width:480px){.card-fields > .details-grid:first-child{grid-template-columns:1fr}}

/* ---------- Success / failed screen ---------- */
.success-icon-wrap{width:100px;height:100px}
.success-card{padding:0}

/* ---------- Invoice: supplier details under the logo ---------- */
.inv-supplier{color:#6b6280;font-weight:400}