/* ========================================================================= Air: airfluencers · Self-service checkout stylesheet Ported from the design-system base (`_design-previews/air-base.css`). Hub integration notes --------------------- * Self-hosted Lexend (woff2, font-display:swap) replaces the Google-Fonts ; Tabler's icon-font CDN is replaced by an inline SVG sprite (`static/img/icons.svg`) consumed via `.ic` + ``. * EVERY rule is scoped under the `.checkout` root that the base template puts on , so these styles can never leak into the rest of Hub. * Font `src` uses URLs relative to THIS file's location (`static/styles/checkout/ -> ../../fonts/lexend/...`). The browser resolves them against the stylesheet URL, so they work no matter what `STATIC_URL` resolves to (here it is a BASE_DIR path). Templates still reference this stylesheet and every asset through `{% static %}`. * Production deploy recommendation: switch the `staticfiles` STORAGES backend to `whitenoise.storage.CompressedManifestStaticFilesStorage` for hashed, far-future-cacheable assets. Left as-is here so the dev stack keeps serving unhashed files. Sections: 0. Fonts 6. Step indicator 1. Tokens 7. Forms 2. Reset / base 8. Order summary 3. Layout / shell 9. Plan cards 4. Header / footer 10. Badges / alerts / utilities 5. Buttons ========================================================================= */ /* ---- 0. Fonts (self-hosted Lexend) ------------------------------------ */ @font-face{ font-family:'Lexend';font-style:normal;font-weight:300;font-display:swap; src:url("../../fonts/lexend/lexend-latin-300-normal.woff2") format("woff2"); } @font-face{ font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap; src:url("../../fonts/lexend/lexend-latin-400-normal.woff2") format("woff2"); } @font-face{ font-family:'Lexend';font-style:normal;font-weight:500;font-display:swap; src:url("../../fonts/lexend/lexend-latin-500-normal.woff2") format("woff2"); } @font-face{ font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap; src:url("../../fonts/lexend/lexend-latin-600-normal.woff2") format("woff2"); } @font-face{ font-family:'Lexend';font-style:normal;font-weight:700;font-display:swap; src:url("../../fonts/lexend/lexend-latin-700-normal.woff2") format("woff2"); } /* ---- 1. Tokens --------------------------------------------------------- */ .checkout{ /* ---- brand: blue→magenta (fully tokenized: re-theme by editing ONLY this block; e.g. for Air pink set --brand:#ed276a / --brand-rgb:237,39,106 / --brand-grad pink) ---- */ --brand:#1769fd; --brand-rgb:23,105,253; --brand-strong:#1560e0; --brand-grad:linear-gradient(90deg,#1769fd 0%,#dd00fd 100%); --brand-tint:#eaf1ff; --brand-line:#d3e2ff; --brand-ring:rgba(var(--brand-rgb),.18); --btn-shadow:0 6px 16px rgba(var(--brand-rgb),.22); /* legacy aliases: older rules referencing --blue/--magenta now resolve to brand */ --blue:var(--brand); --magenta:#dd00fd; --ink:#0b0b14; --ink-2:#26262f; --muted:#6c6c7a; --muted-2:#a6a6b4; --surface:#f5f5f7; --surface-soft:#f7f3ff; --tint:var(--brand-tint); --tint-line:var(--brand-line); --line:#ececf3; --field-bg:#fbfbfd; --field-border:#dfe1ec; --success:#1d9e75; --success-bg:#e6f6ef; --success-line:#bfe6d6; --success-ink:#0f6e56; --warn:#c77900; --warn-bg:#fff5e6; --warn-line:#ffe2b0; --warn-ink:#8a5300; --danger:#e24b4a; --danger-bg:#fdeceb; --danger-line:#f6cbca; --danger-ink:#a3302f; --info:#2f6df0; --info-bg:#eef4ff; --info-line:#d5e2ff; --info-ink:#0b3aa0; /* pending = warn alias (older screens reference --pending-*) */ --pending-bg:var(--warn-bg); --pending-line:var(--warn-line); --pending-ink:var(--warn-ink); --grad-cta:var(--brand-grad); --grad-head:linear-gradient(270deg,var(--brand) 18.95%,var(--ink) 100%); /* shape + elevation */ --r-card:24px; --r-form:20px; --r-field:9999px; --r-pill:9999px; --shadow-soft:0 1px 2px rgba(20,20,40,.04),0 4px 16px rgba(20,20,40,.05); --shadow-lift:0 2px 4px rgba(20,20,40,.05),0 12px 28px rgba(20,20,40,.09); --shadow-pop:0 1px 2px rgba(20,20,40,.05),0 18px 48px rgba(var(--brand-rgb),.14); --ring:0 0 0 3px var(--brand-ring); /* spacing scale (consistent rhythm across every screen) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --shell-max:1120px; --shell-narrow:560px; } /* ---- 2. Reset / base --------------------------------------------------- */ .checkout *,.checkout *::before,.checkout *::after{box-sizing:border-box;margin:0;padding:0} body.checkout{ font-family:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:radial-gradient(1200px 520px at 50% -160px,#f3efff 0%,var(--surface) 58%) no-repeat, var(--surface); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; min-height:100vh; display:flex; flex-direction:column; } .checkout img,.checkout svg{display:block;max-width:100%} .checkout a{color:var(--blue);text-decoration:none} .checkout a:hover{text-decoration:underline} .checkout button{font-family:inherit} /* SVG sprite icon. Inherits colour via currentColor; sized per context below to mirror the original Tabler icon-font sizes. */ .checkout .ic{width:1em;height:1em;flex:none;stroke-width:2;vertical-align:middle} /* one consistent focus ring everywhere (keyboard only) */ .checkout :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-pill)} .checkout a:focus-visible{border-radius:6px} .checkout .field input:focus-visible,.checkout .field select:focus-visible,.checkout .field textarea:focus-visible{border-radius:var(--r-field)} .checkout .field textarea:focus-visible{border-radius:16px} .checkout .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* animations + interaction helpers (design parity) */ @keyframes ax-spin{to{transform:rotate(360deg)}} @keyframes ax-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .checkout .ax-fade{animation:ax-fade .3s ease} .checkout .ax-spinner{width:40px;height:40px;border-radius:50%; border:3px solid var(--brand-line);border-top-color:var(--brand); animation:ax-spin .8s linear infinite;margin:26px auto 10px} @media(prefers-reduced-motion:reduce){ .checkout *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---- 3. Layout / shell ------------------------------------------------- */ .checkout .shell{flex:1 0 auto;width:100%;max-width:var(--shell-max); margin:0 auto;padding:var(--s-8) var(--s-6) var(--s-9)} .checkout .shell--narrow{max-width:640px} .checkout .shell--wide{max-width:var(--shell-max)} .checkout .page-head{text-align:center;margin-bottom:var(--s-8)} .checkout .eyebrow{font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .checkout .page-head h1{font-size:clamp(27px,4.4vw,38px);line-height:1.14;font-weight:600; letter-spacing:-.025em;margin:12px 0 12px;color:var(--ink)} .checkout .page-head .sub{font-size:16px;font-weight:300;color:var(--muted); max-width:560px;margin:0 auto} /* two-column checkout layout (form + summary). Collapses at 860px. NOTE: renamed from the base's `.checkout` to `.co` so it can't clash with the `.checkout` scope root on (which would force display:grid). */ .checkout .co{display:grid;grid-template-columns:minmax(0,1fr) 392px; gap:var(--s-7);align-items:start} .checkout .co__main{min-width:0} .checkout .co__aside{min-width:0;position:sticky;top:var(--s-6)} /* generic split (value-prop + form), e.g. enterprise */ .checkout .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7);align-items:start} @media(max-width:860px){ .checkout .co,.checkout .split{grid-template-columns:1fr;gap:var(--s-6)} .checkout .co__aside{position:static;order:-1} .checkout .split .split__aside{order:-1} } /* ---- 4. Header / footer ------------------------------------------------ */ .checkout .site-header{width:100%;border-bottom:1px solid var(--line); background:rgba(255,255,255,.72);backdrop-filter:saturate(150%) blur(8px); position:sticky;top:0;z-index:20} .checkout .site-header__inner{max-width:var(--shell-max);margin:0 auto; padding:14px var(--s-6);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)} .checkout .brand{display:inline-flex;align-items:center;gap:10px} .checkout .brand__logo{height:22px;width:auto;display:block} .checkout .brand:hover{text-decoration:none} .checkout .site-header__aside{font-size:13px;color:var(--muted);display:inline-flex; align-items:center;gap:7px} .checkout .site-header__aside .ic{width:16px;height:16px;color:var(--success)} /* compact avatar-only account-menu trigger (initials icon → dropdown) */ .checkout .acct-menu__trigger--avatar{gap:5px;padding:4px 9px 4px 4px} .checkout .site-footer{flex-shrink:0;border-top:1px solid var(--line); background:rgba(255,255,255,.5)} .checkout .site-footer__inner{max-width:var(--shell-max);margin:0 auto;padding:22px var(--s-6); display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap} .checkout .site-footer__links{display:flex;gap:var(--s-6);flex-wrap:wrap} .checkout .site-footer__links a{color:var(--muted);font-size:13px;font-weight:400} .checkout .site-footer__links a:hover{color:var(--ink)} .checkout .secure-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px; font-weight:500;color:var(--success-ink);background:var(--success-bg); border:1px solid var(--success-line);padding:7px 14px;border-radius:var(--r-pill)} .checkout .secure-badge .ic{width:16px;height:16px} .checkout .site-footer__copy{font-size:12px;color:var(--muted-2);width:100%;text-align:center; margin-top:6px} @media(max-width:640px){ .checkout .site-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--s-4)} } /* ---- 5. Buttons -------------------------------------------------------- */ .checkout .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; border:none;border-radius:var(--r-pill);padding:14px 22px; font-weight:600;font-size:14px;line-height:1;letter-spacing:.005em; color:#fff;background-image:var(--grad-cta);cursor:pointer; transition:transform .12s ease,filter .18s ease,box-shadow .15s ease; box-shadow:var(--btn-shadow);text-decoration:none} .checkout .btn:hover{transform:translateY(-1px);filter:brightness(1.04);text-decoration:none} .checkout .btn:active{transform:translateY(0)} .checkout .btn .ic{width:18px;height:18px} .checkout .btn--block{width:100%} .checkout .btn--lg{padding:16px 24px;font-size:15px} .checkout .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1.5px solid var(--field-border);border-radius:var(--r-pill); padding:13px 22px;font-weight:600;font-size:14px;line-height:1; color:var(--blue);background:#fff;cursor:pointer; transition:border-color .15s ease,background .15s ease;text-decoration:none} .checkout .btn-ghost:hover{border-color:#c2cbe6;background:#fafbff;text-decoration:none} .checkout .btn-ghost .ic{width:18px;height:18px} .checkout .btn-ghost--block{width:100%} .checkout .btn-google{display:inline-flex;align-items:center;justify-content:center;gap:11px; width:100%;border:1.5px solid var(--field-border);border-radius:var(--r-pill); padding:13px 22px;font-weight:600;font-size:14px;line-height:1; color:var(--ink);background:#fff;cursor:pointer; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;text-decoration:none} .checkout .btn-google:hover{border-color:#c2cbe6;background:#fafbff; box-shadow:0 2px 10px rgba(20,20,40,.06);text-decoration:none} .checkout .btn-google svg{width:18px;height:18px;flex:none} .checkout .link-back{display:inline-flex;align-items:center;gap:6px;font-size:14px; font-weight:500;color:var(--muted)} .checkout .link-back:hover{color:var(--ink);text-decoration:none} .checkout .link-back .ic{width:18px;height:18px} /* "ou" divider */ .checkout .divider{display:flex;align-items:center;gap:14px;color:var(--muted-2); font-size:13px;margin:var(--s-5) 0} .checkout .divider::before,.checkout .divider::after{content:"";flex:1;height:1px;background:var(--line)} /* ---- 6. Step indicator ------------------------------------------------- */ .checkout .steps{display:flex;align-items:flex-start;justify-content:center; gap:0;margin:0 auto var(--s-7);max-width:520px} .checkout .step{display:flex;flex-direction:column;align-items:center;gap:9px; flex:1;text-align:center;position:relative} .checkout .step__num{width:34px;height:34px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:14px;font-weight:600; background:#fff;color:var(--muted);border:1.5px solid var(--field-border); position:relative;z-index:1;transition:all .2s ease} .checkout .step__num .ic{width:18px;height:18px} .checkout .step__label{font-size:13px;font-weight:500;color:var(--muted)} /* connector line between steps */ .checkout .step:not(:last-child)::after{content:"";position:absolute;top:17px; left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:var(--line);z-index:0} .checkout .step.is-done .step__num{background:var(--success);border-color:var(--success);color:#fff} .checkout .step.is-done .step__label{color:var(--ink)} .checkout .step.is-done:not(:last-child)::after{background:var(--success)} .checkout .step.is-active .step__num{background-image:var(--grad-cta);border-color:transparent; color:#fff;box-shadow:0 4px 14px rgba(var(--brand-rgb),.30)} .checkout .step.is-active .step__label{color:var(--ink);font-weight:600} /* ---- 7. Forms ---------------------------------------------------------- */ .checkout .card-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-form); padding:var(--s-7);box-shadow:var(--shadow-soft)} .checkout .card-form__title{font-size:20px;font-weight:600;letter-spacing:-.01em} .checkout .card-form__intro{font-size:14px;font-weight:300;color:var(--muted);margin-top:6px} .checkout .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-4)} .checkout .form-grid .col-2{grid-column:1 / -1} @media(max-width:520px){.checkout .form-grid{grid-template-columns:1fr} .checkout .form-grid .col-2{grid-column:auto}} .checkout .field{display:flex;flex-direction:column;gap:7px} .checkout .field > label{font-size:14px;font-weight:500;color:var(--ink-2)} .checkout .field .req{color:var(--magenta);margin-left:2px} .checkout .field .opt{color:var(--muted-2);font-weight:400;font-size:12px;margin-left:6px} .checkout .field input,.checkout .field select,.checkout .field textarea{ width:100%;font-family:inherit;font-size:15px;color:var(--ink); background:var(--field-bg);border:1.5px solid var(--field-border); border-radius:var(--r-field);padding:13px 16px;transition:border-color .15s ease,background .15s ease; -webkit-appearance:none;appearance:none} .checkout .field input::placeholder,.checkout .field textarea::placeholder{color:var(--muted-2)} .checkout .field input:hover,.checkout .field select:hover,.checkout .field textarea:hover{border-color:#cdd2e4} .checkout .field input:focus,.checkout .field select:focus,.checkout .field textarea:focus{ border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-ring)} .checkout .field textarea{border-radius:16px;resize:vertical;min-height:108px;line-height:1.5} .checkout .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c6c7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer} .checkout .field .help{font-size:12.5px;color:var(--muted);line-height:1.45} .checkout .field .error-text{font-size:12.5px;color:var(--danger-ink); display:none;align-items:center;gap:5px} .checkout .field .error-text .ic{width:14px;height:14px} /* error state: also covers Django's default

output */ .checkout .field.has-error input,.checkout .field.has-error select,.checkout .field.has-error textarea{ border-color:var(--danger);background:#fffafa} .checkout .field.has-error .error-text{display:flex} .checkout .field.has-error .help{display:none} .checkout .field .errorlist{list-style:none;display:flex;flex-direction:column;gap:4px; font-size:12.5px;color:var(--danger-ink)} .checkout .field .errorlist li{display:flex;align-items:center;gap:5px} /* password field with show/hide toggle */ .checkout .field--pass{position:relative} .checkout .field--pass input{padding-right:48px} .checkout .field__control{position:relative} .checkout .pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px; display:inline-flex;align-items:center;justify-content:center; border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:50%} .checkout .pass-toggle:hover{color:var(--ink);background:var(--surface)} .checkout .pass-toggle .ic{width:19px;height:19px} /* checkbox */ .checkout .check{display:flex;align-items:flex-start;gap:11px;cursor:pointer; font-size:14px;line-height:1.5;color:var(--ink-2)} .checkout .check input{position:absolute;opacity:0;width:0;height:0} .checkout .check__box{flex:none;width:20px;height:20px;border-radius:6px;margin-top:1px; border:1.5px solid var(--field-border);background:#fff; display:inline-flex;align-items:center;justify-content:center; transition:all .15s ease} .checkout .check__box .ic{width:15px;height:15px;color:#fff;opacity:0;transform:scale(.6);transition:all .15s ease} .checkout .check input:checked + .check__box{background-image:var(--grad-cta);border-color:transparent} .checkout .check input:checked + .check__box .ic{opacity:1;transform:scale(1)} .checkout .check input:focus-visible + .check__box{box-shadow:var(--ring)} .checkout .check a{font-weight:500} /* ---- 8. Order summary -------------------------------------------------- */ .checkout .summary{background:#fff;border:1px solid var(--line);border-radius:var(--r-card); padding:var(--s-6);box-shadow:var(--shadow-soft)} .checkout .summary__eyebrow{font-size:12px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .checkout .summary__head{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--s-3);margin-top:8px} .checkout .summary__plan{font-size:22px;font-weight:600;letter-spacing:-.01em} .checkout .summary__chip{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--blue); background:var(--tint);border:1px solid var(--tint-line); padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;margin-top:2px} .checkout .summary__desc{font-size:13.5px;font-weight:300;color:var(--muted);margin-top:8px} /* billing-cycle toggle (Mensal / Anual) */ .checkout .cycle{display:flex;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-pill);padding:4px;margin-top:var(--s-5);position:relative} .checkout .cycle input{position:absolute;opacity:0;width:0;height:0} .checkout .cycle label{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--muted); padding:9px 10px;border-radius:var(--r-pill);cursor:pointer; transition:color .2s ease,background .2s ease;display:flex;align-items:center; justify-content:center;gap:7px;white-space:nowrap} .checkout .cycle label .save{font-size:11px;font-weight:600;color:var(--success); background:var(--success-bg);padding:2px 7px;border-radius:var(--r-pill)} .checkout .cycle input:checked + label{color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(20,20,40,.08)} .checkout .cycle input:checked + label .save{color:var(--success)} .checkout .cycle input:focus-visible + label{box-shadow:var(--ring)} .checkout .summary__change{display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-size:13.5px;font-weight:600;color:var(--blue);padding:9px 16px;border-radius:var(--r-pill); border:1px solid var(--tint-line);background:var(--tint); transition:background .15s,border-color .15s,transform .15s} .checkout .summary__change:hover{background:#e2ecff;border-color:var(--brand-line);text-decoration:none; transform:translateX(-2px)} .checkout .summary__change .ic{width:16px;height:16px} .checkout .summary__section-title{font-size:13px;font-weight:600;color:var(--ink); margin-top:var(--s-6);margin-bottom:var(--s-3)} .checkout .summary__list{list-style:none;display:flex;flex-direction:column;gap:10px} .checkout .summary__list li{display:flex;gap:9px;font-size:13.5px;line-height:1.4;color:var(--ink-2)} .checkout .summary__list .ic{width:17px;height:17px;color:var(--success);margin-top:1px} .checkout .summary__divider{height:1px;background:var(--line);margin:var(--s-6) 0 var(--s-5)} .checkout .summary__row{display:flex;align-items:baseline;justify-content:space-between; font-size:14px;color:var(--muted);margin-bottom:11px} .checkout .summary__row span:last-child{color:var(--ink-2);font-weight:500} .checkout .summary__total{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px} .checkout .summary__total .lbl{font-size:15px;font-weight:600;color:var(--ink)} .checkout .summary__total .val{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .checkout .summary__total .val small{font-size:13px;font-weight:400;color:var(--muted);margin-left:3px} .checkout .summary__note{font-size:12px;color:var(--muted-2);margin-top:10px;line-height:1.45} /* ---- 9. Plan cards (pricing) ------------------------------------------- */ .checkout .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);align-items:stretch} @media(max-width:980px){.checkout .plan-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.checkout .plan-grid{grid-template-columns:1fr}} .checkout .plan{position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:var(--r-card); padding:28px 24px 26px;box-shadow:var(--shadow-soft);height:100%} .checkout .plan--feat{background:linear-gradient(180deg,#f4f0ff 0%,#fff 38%); border-color:var(--brand-line);box-shadow:var(--shadow-pop)} .checkout .plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;padding:6px 16px;border-radius:var(--r-pill);white-space:nowrap} .checkout .plan__name{font-size:24px;font-weight:600;letter-spacing:-.01em} .checkout .plan__tag{font-size:13px;font-weight:300;color:var(--muted);margin-top:8px;min-height:60px} .checkout .plan__price{margin-top:14px;min-height:82px;display:flex;flex-direction:column;justify-content:flex-end} .checkout .plan__price .amt{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em} .checkout .plan__price .per{font-size:13px;color:var(--muted);margin-top:6px} .checkout .plan__price .add{font-size:12px;color:var(--muted);margin-top:3px} .checkout .plan__price .custom{font-size:26px;font-weight:600;line-height:1.15} .checkout .plan .btn,.checkout .plan .btn-ghost{margin-top:20px;width:100%} .checkout .plan__feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:11px} .checkout .plan__feats li{display:flex;gap:9px;font-size:13px;line-height:1.4;color:var(--ink-2)} .checkout .plan__feats .ic{color:var(--magenta);width:16px;height:16px;margin-top:1px} .checkout .plan__term{margin-top:auto;padding-top:22px;font-size:12px;color:var(--muted-2)} /* ---- 10. Badges / alerts / utilities ----------------------------------- */ .checkout .alert{display:flex;gap:13px;align-items:flex-start;border-radius:16px; padding:16px 18px;font-size:14px;line-height:1.5;border:1px solid} .checkout .alert__icon{flex:none;width:22px;height:22px;display:inline-flex;align-items:center; justify-content:center;border-radius:50%;color:#fff;margin-top:1px} .checkout .alert__icon .ic{width:15px;height:15px} .checkout .alert__title{font-weight:600} .checkout .alert--success{background:var(--success-bg);border-color:var(--success-line);color:var(--success-ink)} .checkout .alert--success .alert__icon{background:var(--success)} .checkout .alert--pending{background:var(--pending-bg);border-color:var(--pending-line);color:var(--pending-ink)} .checkout .alert--pending .alert__icon{background:#caa53a} .checkout .alert--danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)} .checkout .alert--danger .alert__icon{background:var(--danger)} /* trust row (padlock + text) */ .checkout .trust{display:flex;align-items:center;gap:11px;background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:13px 16px; font-size:13.5px;color:var(--ink-2);line-height:1.4} .checkout .trust .ic{width:20px;height:20px;color:var(--success)} /* accepted card glyphs */ .checkout .cards-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .checkout .card-glyph{height:30px;width:46px;border:1px solid var(--line);border-radius:7px; background:#fff;display:inline-flex;align-items:center;justify-content:center; font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--muted)} .checkout .card-glyph svg{height:18px;width:auto} .checkout .card-glyph .ic{width:18px;height:18px;color:var(--muted)} /* outcome card (return / confirmation states) */ .checkout .outcome{background:#fff;border:1px solid var(--line);border-radius:var(--r-card); padding:var(--s-8) var(--s-7);box-shadow:var(--shadow-soft);text-align:center; max-width:480px;margin:0 auto} .checkout .outcome__icon{width:64px;height:64px;border-radius:50%;margin:0 auto var(--s-5); display:inline-flex;align-items:center;justify-content:center;color:#fff} .checkout .outcome__icon .ic{width:32px;height:32px} .checkout .outcome__icon--success{background:var(--success);box-shadow:0 8px 24px rgba(29,158,117,.28)} .checkout .outcome__icon--neutral{background:var(--surface);color:var(--muted);border:1px solid var(--line)} .checkout .outcome__icon--pending{background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-line)} .checkout .outcome__icon--danger{background:var(--surface);color:var(--danger)} .checkout .outcome h2{font-size:25px;font-weight:600;letter-spacing:-.01em} .checkout .outcome p{font-size:15px;font-weight:300;color:var(--muted);margin-top:10px; max-width:360px;margin-left:auto;margin-right:auto;line-height:1.55} .checkout .outcome__actions{display:flex;flex-direction:column;gap:12px;margin-top:var(--s-6)} .checkout .outcome__sub{font-size:14px} /* mini plan summary chip-card (confirmation) */ .checkout .mini-plan{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:14px 18px;margin-top:var(--s-6);text-align:left} .checkout .mini-plan__name{font-size:15px;font-weight:600} .checkout .mini-plan__meta{font-size:12.5px;color:var(--muted);margin-top:2px} .checkout .mini-plan__price{font-size:16px;font-weight:700;white-space:nowrap} /* spinner */ .checkout .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--brand-line); border-top-color:var(--brand);animation:checkout-spin .8s linear infinite;margin:0 auto} @keyframes checkout-spin{to{transform:rotate(360deg)}} .checkout .auto-note{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)} /* value-prop list (enterprise) */ .checkout .value-list{list-style:none;display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-6)} .checkout .value-list li{display:flex;gap:14px;align-items:flex-start} .checkout .value-list__ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--tint); color:var(--blue);display:inline-flex;align-items:center;justify-content:center} .checkout .value-list__ic .ic{width:20px;height:20px} .checkout .value-list__t{font-size:15px;font-weight:600} .checkout .value-list__d{font-size:13.5px;font-weight:300;color:var(--muted);margin-top:2px;line-height:1.45} /* generic stack helper + section card */ .checkout .stack > * + *{margin-top:var(--s-5)} .checkout .stack-sm > * + *{margin-top:var(--s-3)} .checkout .card-soft{background:var(--surface-soft);border:1px solid #ece3ff; border-radius:var(--r-form);padding:var(--s-6)} .checkout .muted{color:var(--muted)} .checkout .center{text-align:center} .checkout .state-label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);background:var(--surface); border:1px solid var(--line);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:var(--s-4)} /* index review page */ .checkout .index-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr); gap:var(--s-4);margin-top:var(--s-7)} @media(max-width:680px){.checkout .index-list{grid-template-columns:1fr}} .checkout .index-list a{display:flex;align-items:center;gap:var(--s-4);background:#fff; border:1px solid var(--line);border-radius:18px;padding:18px 20px; box-shadow:var(--shadow-soft);transition:border-color .15s ease,transform .1s ease} .checkout .index-list a:hover{border-color:#d6ddf5;transform:translateY(-1px);text-decoration:none} .checkout .index-list__num{flex:none;width:42px;height:42px;border-radius:12px; background-image:var(--grad-cta);color:#fff;font-weight:600;font-size:15px; display:inline-flex;align-items:center;justify-content:center} .checkout .index-list__t{font-size:15px;font-weight:600;color:var(--ink)} .checkout .index-list__d{font-size:13px;font-weight:300;color:var(--muted);margin-top:2px} /* ========================================================================= S-TIER POLISH UPGRADE LAYER (appended: overrides above at equal specificity) Everything here is additive/overriding so the diff is reviewable in one place. Grouped by the axis it lifts. Safe to fold back into the sections above later. ========================================================================= */ /* ---- U0. Refined tokens ------------------------------------------------ */ .checkout{ /* layered, crisper elevation (Stripe/Linear feel): replaces flat single shadow */ --shadow-soft:0 1px 2px rgba(20,20,40,.04),0 4px 16px rgba(20,20,40,.05); --shadow-pop:0 1px 2px rgba(20,20,40,.05),0 18px 48px rgba(var(--brand-rgb),.14); --shadow-lift:0 2px 4px rgba(20,20,40,.05),0 12px 28px rgba(20,20,40,.09); /* focus ring: 3px brand halo, AA visible on every surface */ --ring:0 0 0 2px #fff,0 0 0 4px rgba(var(--brand-rgb),.55); --ring-tight:0 0 0 2px rgba(var(--brand-rgb),.55); --ease:cubic-bezier(.2,.6,.2,1); } /* tabular, slashed-zero numerals everywhere a number must align/anchor */ .checkout .plan__price .amt,.checkout .summary__total .val,.checkout .summary__row span:last-child, .checkout .mini-plan__price,.checkout .plan__price .custom{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"ss01" 1} @media (prefers-reduced-motion: reduce){ .checkout *,.checkout *::before,.checkout *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} } /* ---- U1. Page head: tighter, more editorial ----------------------------*/ .checkout .page-head{margin-bottom:var(--s-9)} .checkout .eyebrow{letter-spacing:.18em} .checkout .page-head h1{font-size:40px;letter-spacing:-.025em;margin:12px 0 14px} .checkout .page-head .sub{font-size:16.5px;line-height:1.5;color:var(--muted)} @media(max-width:640px){.checkout .page-head h1{font-size:30px}} /* ---- U2. Step indicator → true progress bar (truthful, not clickable) ---*/ .checkout .steps{max-width:440px;margin-bottom:var(--s-9);gap:0} .checkout .step__num{width:32px;height:32px;font-size:13.5px; transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .checkout .step:not(:last-child)::after{top:16px;height:2px;border-radius:2px; background:var(--field-border);transition:background .35s var(--ease)} .checkout .step.is-done:not(:last-child)::after{background:var(--success)} /* the active step's incoming connector reads as "in progress" via the gradient */ .checkout .step.is-active:not(:last-child)::after{ background:linear-gradient(90deg,var(--success) 0%,var(--blue) 65%,var(--field-border) 100%)} .checkout .step.is-active .step__num{box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12),0 4px 14px rgba(var(--brand-rgb),.30)} .checkout .step__label{font-size:12.5px;letter-spacing:.005em} /* ---- U3. Buttons: crisper, accessible disabled + loading ---------------*/ .checkout .btn{padding:15px 24px;letter-spacing:.01em; box-shadow:var(--btn-shadow); transition:transform .12s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease)} .checkout .btn:hover{opacity:1;filter:brightness(1.04);transform:translateY(-1px); box-shadow:0 3px 8px rgba(var(--brand-rgb),.26),0 12px 26px rgba(var(--brand-rgb),.28)} .checkout .btn:active{transform:translateY(0)} .checkout .btn[disabled],.checkout .btn[aria-disabled="true"]{ filter:grayscale(.2) brightness(1);opacity:.55;cursor:not-allowed;box-shadow:none;transform:none} .checkout .btn[aria-busy="true"]{cursor:progress;pointer-events:none} .checkout .btn[aria-busy="true"] > :not(.btn__spin){opacity:.5} .checkout .btn__spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.4); border-top-color:#fff;animation:checkout-spin .7s linear infinite} .checkout .btn-ghost:hover,.checkout .btn-google:hover{transform:translateY(-1px)} .checkout .btn-google{font-weight:500} /* ---- U4. Forms: alignment, density, richer field states ----------------*/ .checkout .card-form{padding:var(--s-8);border-radius:24px} @media(max-width:560px){.checkout .card-form{padding:var(--s-6)}} .checkout .card-form__title{font-size:18px;letter-spacing:-.01em} .checkout .form-grid{gap:var(--s-5) var(--s-5)} .checkout .field > label{font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:.005em} .checkout .field input,.checkout .field select,.checkout .field textarea{ font-size:15px;padding:13px 17px; transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)} .checkout .field input:focus,.checkout .field select:focus,.checkout .field textarea:focus{ box-shadow:var(--ring-tight)} /* valid affirmation: subtle green tick state the JS can toggle via .is-valid */ .checkout .field.is-valid input{border-color:var(--success-line);background:#fff} .checkout .field.is-valid::after{content:"";position:absolute} .checkout .field--pass .pass-toggle{bottom:7px} .checkout .field .error-text{font-weight:500} /* ---- U5. Order summary: anchor the price, intentional cycle control -----*/ .checkout .summary{padding:var(--s-7);border-radius:24px;box-shadow:var(--shadow-lift)} .checkout .summary__plan{font-size:21px} .checkout .summary__total .val{font-size:30px;letter-spacing:-.025em} .checkout .summary__list li{font-size:13.5px} .checkout .summary__list .ic{color:var(--success)} /* the billing cycle, when monthly-only, reads as a definite state: not a dead toggle */ .checkout .cycle--solo{display:flex;align-items:center;gap:var(--s-3);background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-top:var(--s-5)} .checkout .cycle--solo .cyc-active{display:inline-flex;align-items:center;gap:7px;font-size:13.5px; font-weight:600;color:var(--ink)} .checkout .cycle--solo .cyc-active .ic{width:16px;height:16px;color:var(--success)} .checkout .cycle--solo .cyc-soon{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.04em; color:var(--muted);background:#fff;border:1px dashed var(--field-border); padding:4px 10px;border-radius:var(--r-pill)} /* ---- U6. Plan cards: equalised, with hover + selected affordance -------*/ .checkout .plan{padding:30px 26px 28px;border-radius:24px; transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)} .checkout .plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#dfe3f2} .checkout .plan--feat:hover{box-shadow:var(--shadow-pop)} .checkout .plan__name{font-size:22px} .checkout .plan__tag{font-size:13px;line-height:1.45;min-height:60px;margin-top:10px} /* equal price block → CTAs line up across all four cards */ .checkout .plan__price{min-height:88px;margin-top:16px;justify-content:flex-start} .checkout .plan__price .amt{font-size:32px;letter-spacing:-.03em;white-space:nowrap} .checkout .plan__price .custom{font-size:25px;font-weight:600;letter-spacing:-.01em;line-height:1.15; padding-top:2px} .checkout .plan .btn,.checkout .plan .btn-ghost{margin-top:6px} .checkout .plan__feats{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);gap:12px} .checkout .plan__feats li{font-size:13px;color:var(--ink-2)} .checkout .plan__feats .ic{color:var(--blue)} .checkout .plan--feat .plan__feats .ic{color:var(--magenta)} .checkout .plan__badge{letter-spacing:.1em;padding:6px 15px; box-shadow:0 4px 12px rgba(11,11,20,.22)} /* ---- U7. Alerts / trust / outcome: designed states ---------------------*/ .checkout .alert{border-radius:14px;padding:15px 17px;align-items:flex-start} .checkout .alert__title{margin-bottom:2px} .checkout .trust{border-radius:14px;padding:14px 16px;background:var(--success-bg); border-color:var(--success-line)} .checkout .trust strong{font-weight:600} .checkout .outcome{padding:var(--s-9) var(--s-7);border-radius:28px;box-shadow:var(--shadow-lift)} .checkout .outcome__icon{width:68px;height:68px;margin-bottom:var(--s-6)} .checkout .outcome__icon--success{box-shadow:0 0 0 8px rgba(29,158,117,.10),0 10px 28px rgba(29,158,117,.30)} .checkout .outcome__icon--pending{box-shadow:0 0 0 8px rgba(var(--brand-rgb),.06)} .checkout .outcome h2{font-size:24px} .checkout .outcome p{font-size:15px;line-height:1.55} .checkout .mini-plan{border-radius:16px;padding:16px 18px;background:var(--surface); border-color:var(--line)} /* ---- U8. "What happens next" payment hand-off list ----------------------*/ .checkout .next-steps{list-style:none;counter-reset:ns;display:flex;flex-direction:column; gap:var(--s-3);margin-top:var(--s-5)} .checkout .next-steps li{display:flex;gap:13px;align-items:flex-start;font-size:13.5px; line-height:1.45;color:var(--ink-2)} .checkout .next-steps li::before{counter-increment:ns;content:counter(ns);flex:none; width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--blue); font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center; margin-top:1px} /* ---- U9. Signed-in identity chip (social_company) -----------------------*/ .checkout .id-chip{display:flex;align-items:center;gap:12px;background:var(--surface); border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:var(--s-5)} .checkout .id-chip__av{flex:none;width:40px;height:40px;border-radius:50%; background-image:var(--grad-cta);color:#fff;display:inline-flex;align-items:center; justify-content:center;font-weight:600;font-size:16px} .checkout .id-chip__name{font-size:14px;font-weight:600;line-height:1.2} .checkout .id-chip__mail{font-size:12.5px;color:var(--muted);margin-top:2px} .checkout .id-chip__badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px; font-size:11.5px;font-weight:600;color:var(--success-ink)} .checkout .id-chip__badge .ic{width:15px;height:15px;color:var(--success)} /* ---- U10. Either/or payer document (CPF vs CNPJ) ------------------------*/ /* The matching ``.field`` is a flex column (see .checkout .field above); JS toggles ``.is-active`` so only the selected document field is revealed. With JS disabled both fields show and the server validates the chosen one. */ .checkout .doc-field{display:none} .checkout .doc-field.is-active{display:flex} /* ========================================================================= U11. BILLING DASHBOARD (authenticated /settings/billing/: Option B) Reuses the checkout design system; adds management-surface components: account header, plan-summary hero, status badges, alert banners, history table. ========================================================================= */ /* utility: ensure [hidden] always wins over component display (flex/grid) */ .checkout [hidden]{display:none!important} /* account-style page header (replaces the funnel page-head + steps) */ .checkout .acct-head{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-7)} .checkout .acct-head__t h1{font-size:30px;letter-spacing:-.02em;margin:0} .checkout .acct-head__t .sub{font-size:14.5px;color:var(--muted);margin-top:6px} .checkout .acct-head__back{display:inline-flex;align-items:center;gap:7px;font-size:13px; font-weight:500;color:var(--muted)} /* two-column management grid: main + rail */ .checkout .dash{display:grid;grid-template-columns:1fr 340px;gap:var(--s-6);align-items:start} @media(max-width:900px){.checkout .dash{grid-template-columns:1fr}} .checkout .dash__rail{display:flex;flex-direction:column;gap:var(--s-5);position:sticky;top:var(--s-6)} @media(max-width:900px){.checkout .dash__rail{position:static}} /* generic management card */ .checkout .mcard{background:#fff;border:1px solid var(--line);border-radius:24px; padding:var(--s-7);box-shadow:var(--shadow-soft)} @media(max-width:560px){.checkout .mcard{padding:var(--s-6);border-radius:20px}} .checkout .mcard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); margin-bottom:var(--s-5)} .checkout .mcard__title{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--muted)} /* plan-summary hero (current plan, price, next charge) */ .checkout .plan-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5); flex-wrap:wrap} .checkout .plan-hero__name{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .checkout .plan-hero__desc{font-size:14px;color:var(--muted);margin-top:6px;max-width:42ch} .checkout .plan-hero__price{text-align:right;flex:none} .checkout .plan-hero__amt{font-size:30px;font-weight:700;letter-spacing:-.025em; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .checkout .plan-hero__amt small{font-size:14px;font-weight:400;color:var(--muted);margin-left:2px} .checkout .plan-hero__cycle{font-size:12.5px;color:var(--muted);margin-top:2px} /* meta row: next charge / started / users */ .checkout .meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-4); margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)} .checkout .meta__k{display:flex;align-items:flex-start;justify-content:center;gap:6px;font-size:12px; font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.3; min-height:2.7em} .checkout .meta__k .ic{width:15px;height:15px;color:var(--muted)} .checkout .meta__v{font-size:16px;font-weight:600;color:var(--ink);margin-top:5px;text-align:center; font-variant-numeric:tabular-nums} .checkout .meta__v small{font-size:12.5px;font-weight:400;color:var(--muted)} /* status badge: one component, color by state */ .checkout .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; letter-spacing:.01em;padding:5px 12px;border-radius:var(--r-pill);border:1px solid transparent; white-space:nowrap} .checkout .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} .checkout .badge--active{color:var(--success-ink);background:var(--success-bg);border-color:var(--success-line)} .checkout .badge--trial{color:var(--info);background:var(--info-bg);border-color:var(--info-line)} .checkout .badge--warn{color:#9a5b00;background:#fff5e6;border-color:#ffe2b0} .checkout .badge--danger{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-line)} .checkout .badge--muted{color:var(--muted);background:var(--surface);border-color:var(--line)} /* alert banner: state-driven (retry / canceled / pending / trial) */ .checkout .banner{display:flex;gap:14px;align-items:flex-start;border-radius:18px;padding:16px 18px; border:1px solid;margin-bottom:var(--s-6)} .checkout .banner__ic{flex:none;width:38px;height:38px;border-radius:11px;display:inline-flex; align-items:center;justify-content:center} .checkout .banner__ic .ic{width:20px;height:20px} .checkout .banner__body{flex:1;min-width:0} .checkout .banner__t{font-size:14.5px;font-weight:600;line-height:1.3} .checkout .banner__d{font-size:13px;line-height:1.45;margin-top:3px} .checkout .banner__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .checkout .banner--danger{background:var(--danger-bg);border-color:var(--danger-line)} .checkout .banner--danger .banner__ic{background:#fff;color:var(--danger)} .checkout .banner--danger .banner__t{color:var(--danger-ink)} .checkout .banner--danger .banner__d{color:#7a3a39} .checkout .banner--warn{background:#fff8ee;border-color:#ffe2b0} .checkout .banner--warn .banner__ic{background:#fff;color:#c77900} .checkout .banner--warn .banner__t{color:#8a5300} .checkout .banner--warn .banner__d{color:#7a5a2a} .checkout .banner--info{background:var(--info-bg);border-color:var(--info-line)} .checkout .banner--info .banner__ic{background:#fff;color:var(--info)} .checkout .banner--info .banner__t{color:var(--info-ink)} .checkout .banner--info .banner__d{color:#3a5380} /* pending-change inline note */ .checkout .pending-note{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2); background:var(--surface);border:1px dashed var(--field-border);border-radius:12px; padding:11px 14px;margin-top:var(--s-5)} .checkout .pending-note .ic{width:16px;height:16px;color:var(--info);flex:none} /* payment history table */ .checkout .history{width:100%;border-collapse:collapse;font-size:13.5px} .checkout .history thead th{text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--muted);padding:0 14px 12px;border-bottom:1px solid var(--line)} .checkout .history tbody td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle; text-align:center} .checkout .history tbody tr:last-child td{border-bottom:none} .checkout .history tbody tr:hover td{background:var(--surface)} .checkout .history__date{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .checkout .history__sub{font-size:12px;color:var(--muted);margin-top:2px} .checkout .history__amt{font-weight:700;font-variant-numeric:tabular-nums} .checkout .history__inv{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500; color:var(--blue)} .checkout .history__inv .ic{width:15px;height:15px} /* mobile: table → stacked cards */ @media(max-width:620px){ .checkout .history,.checkout .history tbody,.checkout .history tr,.checkout .history td{display:block;width:100%} .checkout .history thead{display:none} .checkout .history tbody tr{border:1px solid var(--line);border-radius:14px;padding:6px 4px;margin-bottom:12px} .checkout .history tbody td{border:none;padding:7px 14px;display:flex;justify-content:space-between; align-items:center;text-align:right} .checkout .history tbody td::before{content:attr(data-label);font-size:11.5px;font-weight:600; text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left} } /* empty state */ .checkout .empty{text-align:center;padding:var(--s-8) var(--s-5);color:var(--muted)} .checkout .empty .ic{width:30px;height:30px;color:var(--field-border);margin-bottom:10px} .checkout .empty p{font-size:14px} /* danger / cancel zone */ .checkout .danger-zone{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); flex-wrap:wrap;margin-top:var(--s-5)} .checkout .danger-zone__t{font-size:13.5px;font-weight:600;color:var(--ink)} .checkout .danger-zone__d{font-size:12.5px;color:var(--muted);margin-top:2px;max-width:46ch} .checkout .btn-danger{background:#fff;border:1px solid var(--danger-line);color:var(--danger-ink); font-weight:600;border-radius:var(--r-pill);padding:11px 20px;font-size:14px;cursor:pointer; display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s} .checkout .btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)} .checkout .btn-danger:focus-visible{outline:none;box-shadow:var(--ring)} /* small inline link-button (e.g. "ver fatura", secondary actions) */ .checkout .btn-soft{display:inline-flex;align-items:center;gap:8px;background:var(--surface); border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13.5px; border-radius:var(--r-pill);padding:10px 18px;cursor:pointer;transition:background .15s,border-color .15s} .checkout .btn-soft:hover{background:#fff;border-color:#d6ddf5;text-decoration:none} /* ========================================================================= U12. PLAN MANAGEMENT (authenticated plans · change-plan review · cancel) Splits the old single-screen dashboard into focused screens. Reuses the checkout primitives (.plan, .btn, .mcard) and adds: an order summary, a current→next flow, an effect note, a consent form, and a lose-access list. ========================================================================= */ /* dashboard: hero lead (name + price line) + top-right entry to the catalog */ .checkout .plan-hero__lead{min-width:0} .checkout .plan-hero__priceline{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:14px; font-variant-numeric:tabular-nums} .checkout .plan-hero__priceline small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)} .checkout .plan-hero__cta{flex:none} @media(max-width:560px){.checkout .plan-hero__cta{width:100%;justify-content:center;margin-top:6px}} /* plan catalog: cards are centered (count varies, unlike the 4-up pricing page) */ .checkout .plan-grid--catalog{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),320px)); justify-content:center} /* plan catalog: current-plan card + disabled marker */ .checkout .plan--current{border-color:var(--success-line); box-shadow:0 0 0 1px var(--success-line),var(--shadow-soft)} .checkout .plan__badge--current{background:var(--success-ink)} /* pricing featured badge → brand (design) */ .checkout .plan--feat .plan__badge{background-image:var(--brand-grad); box-shadow:0 6px 16px rgba(var(--brand-rgb),.32)} /* pricing: monthly-only cycle control (Anual "em breve") */ .checkout .plan-cycle{display:inline-flex;align-items:center;gap:4px;background:#fff; border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-top:26px; box-shadow:var(--shadow-soft)} .checkout .plan-cycle__on{display:inline-flex;align-items:center;gap:7px;font-size:13px; font-weight:600;color:var(--ink);background:var(--surface);padding:9px 20px;border-radius:var(--r-pill)} .checkout .plan-cycle__on .ic{width:15px;height:15px;color:var(--success)} .checkout .plan-cycle__soon{display:inline-flex;align-items:center;gap:8px;font-size:13px; font-weight:500;color:var(--muted-2);padding:9px 18px;cursor:not-allowed} .checkout .plan-cycle__badge{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--muted); background:var(--surface);border:1px dashed var(--field-border);padding:2px 8px;border-radius:var(--r-pill)} .checkout .btn-ghost[aria-disabled="true"]{opacity:.6;pointer-events:none;cursor:default; background:var(--surface);color:var(--muted)} /* order summary (upgrade review) */ .checkout .order{background:#fff;border:1px solid var(--line);border-radius:var(--r-card); padding:var(--s-7);box-shadow:var(--shadow-soft)} @media(max-width:560px){.checkout .order{padding:var(--s-6);border-radius:20px}} .checkout .order__title{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);margin-bottom:var(--s-3)} .checkout .order__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4); padding:13px 0;border-bottom:1px solid var(--line)} .checkout .order__row--total{border-bottom:none;border-top:2px solid var(--ink);margin-top:4px; padding-top:16px;align-items:baseline} .checkout .order__k{display:flex;flex-direction:column;gap:3px;min-width:0} .checkout .order__k-t{font-size:14.5px;font-weight:600;color:var(--ink)} .checkout .order__k-d{font-size:12.5px;color:var(--muted);line-height:1.4;max-width:36ch} .checkout .order__v{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap; font-variant-numeric:tabular-nums} .checkout .order__v--credit{color:var(--success-ink)} .checkout .order__row--total .order__k-t{font-size:16px} .checkout .order__row--total .order__v{font-size:25px;letter-spacing:-.02em} /* current → next flow (downgrade review) */ .checkout .order__flow{display:flex;align-items:stretch;gap:var(--s-3)} .checkout .order__flow-col{flex:1;display:flex;flex-direction:column;gap:4px;padding:16px; border:1px solid var(--line);border-radius:16px;background:var(--surface)} .checkout .order__flow-col--next{border-color:var(--brand-line);background:var(--brand-tint)} .checkout .order__flow-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em; color:var(--muted)} .checkout .order__flow-plan{font-size:17px;font-weight:700;color:var(--ink);margin-top:2px} .checkout .order__flow-price{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .checkout .order__arrow{display:flex;align-items:center;color:var(--muted-2);flex:none} .checkout .order__arrow .ic{width:22px;height:22px} @media(max-width:480px){ .checkout .order__flow{flex-direction:column} .checkout .order__arrow{transform:rotate(90deg);justify-content:center;padding:2px 0} } /* effect note (info line under the summary / lose list) */ .checkout .effect-note{display:flex;gap:11px;align-items:flex-start;background:var(--info-bg); border:1px solid var(--info-line);border-radius:14px;padding:14px 16px;font-size:13px;line-height:1.5; color:#3a5380;margin-top:var(--s-5)} .checkout .effect-note .ic{width:18px;height:18px;color:var(--info);flex:none;margin-top:1px} .checkout .effect-note strong{color:var(--info-ink);font-weight:600} /* change-plan consent + submit */ .checkout .change-form{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)} .checkout .consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5; color:var(--ink-2);cursor:pointer} .checkout .consent input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--blue); cursor:pointer} .checkout .change-form__fine{display:flex;align-items:center;gap:7px;justify-content:center; font-size:12px;color:var(--muted)} .checkout .change-form__fine .ic{width:14px;height:14px;color:var(--muted)} /* cancel screen: lose-access list + keep/cancel actions */ .checkout .lose{background:#fff;border:1px solid var(--line);border-radius:var(--r-card); padding:var(--s-7);box-shadow:var(--shadow-soft)} @media(max-width:560px){.checkout .lose{padding:var(--s-6);border-radius:20px}} .checkout .lose__title{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);margin-bottom:var(--s-5)} .checkout .lose__list{list-style:none;display:flex;flex-direction:column;gap:var(--s-4)} .checkout .lose__item{display:flex;gap:13px;align-items:center} .checkout .lose__ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--surface); display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)} .checkout .lose__ic .ic{width:19px;height:19px} .checkout .lose__body{display:flex;flex-direction:column;gap:2px;min-width:0} .checkout .lose__name{font-size:15px;font-weight:600;color:var(--ink)} .checkout .lose__desc{font-size:12.5px;color:var(--muted);line-height:1.4} .checkout .cancel-actions{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)} .checkout .cancel-actions .btn,.checkout .cancel-actions .btn-danger{width:100%;justify-content:center; padding:14px 24px;font-size:14.5px} /* cancel modal: progressive enhancement over the cancel page (JS opens it) */ .checkout .modal{position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:460px; height:fit-content;max-height:calc(100% - 32px);overflow:auto; border:none;border-radius:22px;padding:26px;background:#fff;color:var(--ink);box-shadow:var(--shadow-pop)} .checkout .modal::backdrop{background:rgba(15,15,30,.5)} .checkout .modal__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none; background:var(--surface);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center; justify-content:center;color:var(--muted);transition:background .15s,color .15s} .checkout .modal__close:hover{background:var(--line);color:var(--ink)} .checkout .modal__close .ic{width:16px;height:16px} .checkout .modal__title{font-size:21px;font-weight:700;letter-spacing:-.01em;padding-right:34px} .checkout .modal__lede{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5} .checkout .modal .lose{background:none;border:none;box-shadow:none;padding:0;margin-top:var(--s-5)} .checkout .modal .lose__title{margin-bottom:var(--s-3)} .checkout .modal__actions{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)} .checkout .modal__actions .btn,.checkout .modal__actions .btn-danger{width:100%;justify-content:center; padding:13px 22px;font-size:14px} /* ========================================================================= U13. ACCOUNT MENU (top-right identity + logout: logged-in management chrome) The product (Search) is separate and unlocked after payment, so the chrome is just: who you are + logout, plus a single contextual "Ir para o Search" shown only where access exists. ========================================================================= */ .checkout .acct-menu{position:relative} .checkout .acct-menu__trigger{display:inline-flex;align-items:center;gap:9px;background:transparent; border:1px solid var(--line);border-radius:9999px;padding:5px 13px 5px 5px;cursor:pointer; transition:border-color .15s var(--ease),background .15s var(--ease)} .checkout .acct-menu__trigger:hover{background:var(--surface);border-color:var(--brand-line)} .checkout .acct-menu__trigger:focus-visible{outline:none;box-shadow:var(--ring)} .checkout .acct-menu__av{width:30px;height:30px;border-radius:50%;background-image:var(--grad-cta);color:#fff; display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none} .checkout .acct-menu__name{font-size:13.5px;font-weight:600;color:var(--ink);max-width:150px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .checkout .acct-menu__chev{width:16px;height:16px;color:var(--muted);stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)} .checkout .acct-menu[open] .acct-menu__chev{transform:rotate(180deg)} @media(max-width:520px){.checkout .acct-menu__name{display:none}} .checkout .acct-menu__pop{position:absolute;right:0;top:calc(100% + 9px);width:256px;background:#fff; border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);padding:7px;z-index:50; opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .15s var(--ease),transform .15s var(--ease)} .checkout .acct-menu[open] .acct-menu__pop{opacity:1;transform:translateY(0);pointer-events:auto} .checkout .acct-menu__id{display:flex;align-items:center;gap:11px;padding:11px 12px 12px} .checkout .acct-menu__id .acct-menu__av{width:38px;height:38px;font-size:15px} .checkout .acct-menu__id .n{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2} .checkout .acct-menu__id .e{font-size:12.5px;color:var(--muted);margin-top:2px;max-width:170px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .checkout .acct-menu__sep{height:1px;background:var(--line);margin:5px 4px} .checkout .acct-menu__link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent; border:none;border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2); cursor:pointer;text-decoration:none;transition:background .12s var(--ease)} .checkout .acct-menu__link:hover{background:var(--surface);text-decoration:none} .checkout .acct-menu__link .ic{width:18px;height:18px;color:var(--muted);flex:none} .checkout .acct-menu__link--danger{color:var(--danger-ink)} .checkout .acct-menu__link--danger .ic{color:var(--danger)} .checkout .acct-menu__link--danger:hover{background:var(--danger-bg)} .checkout .acct-menu__hint{padding:9px 12px 11px;font-size:12px;color:var(--muted);line-height:1.45; display:flex;gap:9px;align-items:flex-start} .checkout .acct-menu__hint .ic{width:16px;height:16px;color:var(--blue);flex:none;margin-top:1px}