/* Secovi Shop — Checkout AR-Certificado-V2 (Core Designer) */ :root { --ar-primary: #c3a776; --ar-primary-hover: #b49764; --ar-primary-soft: rgba(195, 167, 118, 0.12); --ar-primary-border: rgba(195, 167, 118, 0.28); --ar-primary-on: #212c35; --ar-canvas: #f5f7fa; --ar-surface: #ffffff; --ar-surface-soft: rgba(248, 250, 252, 0.6); --ar-border: #e2e8f0; --ar-border-soft: #f1f5f9; --ar-text: #1e293b; --ar-text-body: #64748b; --ar-text-muted: #94a3b8; --ar-success-bg: #ecfdf5; --ar-success-text: #047857; --ar-success-border: #d1fae5; --ar-warning-bg: #fffbeb; --ar-warning-text: #b45309; --ar-warning-border: #fde68a; --ar-danger-bg: #fff1f2; --ar-danger-text: #be123c; --ar-danger-border: #fecdd3; --ar-radius-sm: 0.75rem; --ar-radius-md: 1rem; --ar-radius-lg: 2rem; --ar-font: Inter, "Segoe UI", system-ui, sans-serif; --ar-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05); --ar-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08); --ar-focus: 0 0 0 3px rgba(195, 167, 118, 0.28); --ar-vh: 100dvh; --ar-summary-width: 44%; --ar-main-min-width: 360px; --ar-form-max-width: 680px; --ar-summary-inner-width: 80%; --ar-panel-dark: #212c35; --ar-panel-dark-mid: #222f38; --ar-panel-dark-light: #2a3842; --ar-navy-950: #1a2329; --ar-navy-900: #212c35; --ar-navy-800: #222f38; --ar-navy-700: #2a3842; --ar-gold: #c3a776; --ar-gold-hover: #b49764; --ar-gold-soft: rgba(195, 167, 118, 0.12); --ar-gold-border: rgba(195, 167, 118, 0.35); --ar-text-on-dark: #ffffff; --ar-text-on-dark-muted: #a8b4bc; --ar-checkout-top: 48px; --ar-summary-hero-offset: 62px; --ar-seq-btn: var(--ar-navy-900); --ar-seq-btn-hover: var(--ar-navy-800); --ar-details: var(--ar-gold); --ar-details-hover: var(--ar-gold-hover); --ar-panel-bg: #1c252c; --ar-panel-bg-light: #2a3842; --ar-panel-bg-dark: #1a2329; } *, *::before, *::after { box-sizing: border-box; } /* ── Reset: página isolada ── */ html.secovi-checkout-html { height: 100%; margin: 0; overflow: hidden; } html.secovi-checkout-html body { height: 100%; margin: 0; overflow: hidden; } /* O body fica `static` de propósito. O select2 anexa o dropdown ao com position: absolute, mas calcula o `top` em coordenadas de documento. Se o body for posicionado, ele passa a ser o bloco contentor e qualquer deslocamento seu (a barra de admin empurra o body em 32px) vira um gap equivalente entre o campo e o dropdown. O recorte fullscreen já é feito por .stripe-checkout, que é fixed. */ body.secovi-shop-checkout { position: static; width: 100%; height: var(--ar-vh); margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--ar-canvas); font-family: var(--ar-font); font-size: 14px; line-height: 1.5; color: var(--ar-text); -webkit-font-smoothing: antialiased; } body.secovi-shop-checkout > .woocommerce-notices-wrapper, body.secovi-shop-checkout .stripe-checkout__plugin-hooks { display: none !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } body.secovi-shop-checkout .woocommerce { margin: 0; padding: 0; max-width: none; width: 100%; height: 100%; } body.secovi-shop-checkout .woocommerce > .woocommerce-notices-wrapper { display: none !important; } /* ── Shell fullscreen split (Stripe) ── */ /* z-index baixo de propósito: o dropdown do select2 é anexado ao com z-index 1051 e ficaria atrás do painel se este usasse um valor alto. */ .stripe-checkout { position: fixed; inset: 0; z-index: 1; background: var(--ar-canvas); overflow: hidden; } .stripe-checkout__form { display: grid; grid-template-columns: minmax(var(--ar-main-min-width), 1fr) var(--ar-summary-width); width: 100%; height: 100%; margin: 0; padding: 0; } /* ── Painel direito: resumo escuro ── */ .stripe-checkout__summary { grid-column: 2; width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; background: linear-gradient(165deg, var(--ar-navy-700) 0%, var(--ar-navy-900) 45%, var(--ar-navy-950) 100%); color: var(--ar-text-on-dark); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; --ar-text-on-dark-muted: #a8b4bc; --ar-brand: var(--ar-details, var(--ar-gold)); --ar-brand-hover: var(--ar-details-hover, var(--ar-gold-hover)); --ar-brand-soft: var(--ar-gold-soft); --ar-brand-border: var(--ar-gold-border); --ar-primary: rgba(255, 255, 255, 0.9); --ar-primary-hover: #ffffff; --ar-primary-soft: rgba(255, 255, 255, 0.08); --ar-primary-border: rgba(255, 255, 255, 0.22); --ar-focus: 0 0 0 3px rgba(255, 255, 255, 0.12); } .stripe-checkout__summary::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--ar-details, var(--ar-gold)) 8%, transparent) 0%, color-mix(in srgb, var(--ar-details, var(--ar-gold)) 3%, transparent) 18%, transparent 36% ), radial-gradient( ellipse 75% 40% at 16% 0%, color-mix(in srgb, var(--ar-details, var(--ar-gold)) 6%, transparent) 0%, transparent 55% ), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(42, 56, 66, 0.35) 0%, transparent 55%); pointer-events: none; } .stripe-summary { position: relative; z-index: 1; display: flex; flex-direction: column; width: var(--ar-summary-inner-width); max-width: 100%; max-height: 100%; margin-inline: auto; padding: 24px 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .stripe-summary__pay-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ar-text-on-dark-muted); line-height: 1.3; } .stripe-summary__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 18px; flex-shrink: 0; } .stripe-order-totals .stripe-summary__hero { margin: 0; padding-top: 0; border-top: none; } .stripe-summary__footer { flex-shrink: 0; } .stripe-order-totals .stripe-summary__actions { margin: 12px 0 0; } .stripe-summary__actions { margin: 0; flex-shrink: 0; } .stripe-summary__actions .stripe-steps__next, .stripe-summary__submit { width: 100%; justify-content: center; } .stripe-summary__submit { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: var(--ar-radius-sm); font-family: var(--ar-font); font-size: 14px; font-weight: 800; cursor: pointer; background: var(--ar-success-text); border: 1px solid var(--ar-success-text); color: #fff; transition: background-color 0.15s, border-color 0.15s; } .stripe-summary__submit:hover { background: #065f46; border-color: #065f46; } .stripe-summary__submit:disabled { opacity: 0.7; cursor: wait; } .stripe-summary__actions.is-payment .stripe-summary__next { display: none !important; } .stripe-summary__secure-text { margin: 0 auto; max-width: 36em; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--ar-text-on-dark-muted); text-align: center; } .stripe-summary__secure-text a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-underline-offset: 2px; } .stripe-summary__secure-text a:hover { color: #fff; } .stripe-order-totals .stripe-summary__customer { margin-top: 0; margin-bottom: 8px; padding-top: 0; border-top: none; } .stripe-summary__logo { display: block; width: min(160px, 100%); height: auto; max-height: 32px; object-fit: contain; object-position: left center; } .stripe-summary__logo--header { width: min(160px, 100%); height: 28px; margin: 0; } .stripe-summary__customer { margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .stripe-summary__customer-card { padding: 14px 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--ar-radius-md); backdrop-filter: blur(6px); } .stripe-summary__customer-card p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, 0.88); } .stripe-summary__customer-card p + p { margin-top: 4px; } .stripe-summary__customer-name { font-size: 13px !important; font-weight: 800 !important; color: #fff !important; } .stripe-summary__customer-email, .stripe-summary__customer-address { color: var(--ar-text-on-dark-muted) !important; } .stripe-summary__total { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 0; flex-shrink: 0; } .stripe-summary__total strong, .stripe-summary__total .woocommerce-Price-amount, .stripe-summary__total .amount, .stripe-summary__total bdi { display: block; margin: 0; padding: 0; line-height: 1; } .stripe-summary__total .woocommerce-Price-amount, .stripe-summary__total .amount { color: #fff !important; } .stripe-summary__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .stripe-summary__secure { display: block; margin: 10px 0 14px; padding: 0; flex-shrink: 0; } .stripe-summary__secure svg { flex-shrink: 0; } /* Order items */ .stripe-order-review { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; } .stripe-order-items-wrap { margin: 0 0 16px; padding: 0; overflow: visible; background: none; border: none; border-radius: 0; } .stripe-order-items__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; min-height: 28px; } .stripe-order-items__count { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ar-text-on-dark-muted); text-transform: uppercase; } .stripe-order-items__card { position: relative; padding: 16px 12px 14px; overflow: visible; border-radius: var(--ar-radius-sm); background: rgba(42, 56, 66, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); } .stripe-order-items-wrap.is-carousel { overflow: visible; } .stripe-order-items-wrap.is-carousel .stripe-order-items__card { padding: 12px; } .stripe-order-items__nav { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .stripe-order-items__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .stripe-order-items__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ar-details, var(--ar-gold)) 22%, transparent); border-color: color-mix(in srgb, var(--ar-details, var(--ar-gold)) 50%, transparent); color: var(--ar-details-hover, var(--ar-gold-hover)); } .stripe-order-items__btn:disabled { opacity: 0.35; cursor: not-allowed; } .stripe-order-items__indicator { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.88); min-width: 36px; text-align: center; } .stripe-order-items__separator { opacity: 0.55; margin: 0 1px; } .stripe-order-items-wrap.is-carousel .stripe-order-items__viewport { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 0 4px; margin: 0; -webkit-overflow-scrolling: touch; } .stripe-order-items-wrap.is-carousel .stripe-order-items__viewport::-webkit-scrollbar { display: none; } .stripe-order-items { list-style: none; margin: 0; padding: 0; } .stripe-order-items-wrap.is-carousel .stripe-order-items { display: contents; } .stripe-order-item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 2px 0; border-bottom: none; } .stripe-order-items-wrap.is-carousel .stripe-order-item { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; align-items: start; padding: 4px 0; margin: 0; border-bottom: none; border-radius: 0; background: transparent; border: none; } .stripe-order-item:last-child { border-bottom: none; } .stripe-order-item__media { position: relative; width: 48px; height: 48px; flex-shrink: 0; margin: 2px 0 0 2px; } .stripe-order-item__thumb { width: 48px; height: 48px; border-radius: var(--ar-radius-sm); overflow: hidden; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } .stripe-order-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .stripe-order-item__qty { position: absolute; top: -7px; right: -7px; z-index: 2; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ar-brand, var(--ar-gold)); border: 1px solid color-mix(in srgb, var(--ar-details, var(--ar-gold, #c3a776)) 55%, transparent); color: var(--ar-primary-on, #212c35); font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .stripe-order-item__title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 8px; min-width: 0; width: 100%; padding-right: 22px; } .stripe-order-item__name { font-size: 14px; font-weight: 500; color: #fff; display: inline; line-height: 1.35; flex: 0 1 auto; min-width: 0; padding-right: 0; max-width: 100%; } .stripe-order-item__name a { color: inherit; text-decoration: none; pointer-events: none; } .stripe-order-item__name strong, .stripe-order-item__name .wcc-checkout-parent-title { font-weight: 700; color: inherit; } .stripe-order-item__meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px 10px; width: 100%; min-width: 0; } .stripe-order-item__title .stripe-order-item__variations { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; flex: 0 1 auto; margin-left: 0; min-width: 0; max-width: 100%; } .stripe-order-item__variations { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; margin-left: 0; min-width: 0; max-width: 100%; } .stripe-order-item__pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #edf3ff; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .stripe-order-item__pill-label { opacity: 0.72; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .stripe-order-item__pill-label::after { content: ':'; margin-left: 1px; opacity: 0.85; } .stripe-order-item__pill-value { overflow: hidden; text-overflow: ellipsis; } .stripe-order-item__details { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; } .stripe-order-item__description { margin: 4px 0 0; max-width: 100%; font-size: 12px; line-height: 1.45; color: var(--ar-text-on-dark-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .stripe-order-item__amount { display: inline-flex; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 6px; margin-left: auto; padding-top: 0; padding-right: 0; font-size: 13px; font-weight: 600; color: #fff; text-align: right; flex-shrink: 0; line-height: 1; } .stripe-order-item__remove { position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: color 0.15s ease, opacity 0.15s ease; } .stripe-order-item__remove:hover, .stripe-order-item__remove:focus-visible { background: transparent; border-color: transparent; color: #fecaca; } .stripe-order-item__remove:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; border-radius: 3px; } .stripe-order-item.is-updating .stripe-order-item__remove { opacity: 0.55; pointer-events: none; } .stripe-order-item__stepper { display: inline-flex; align-items: center; height: 22px; padding: 0; gap: 2px; border: 0; border-radius: 0; background: transparent; } .stripe-order-item.is-updating .stripe-order-item__stepper { opacity: 0.7; } .stripe-order-item__stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.78); font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; transition: color 0.15s ease, opacity 0.15s ease; } .stripe-order-item__stepper-btn:hover:not(:disabled) { background: transparent; color: var(--ar-details-hover, var(--ar-gold-hover, #e8d5b0)); } .stripe-order-item__stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; } .stripe-order-item__stepper-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--ar-details, var(--ar-gold)) 70%, transparent); outline-offset: 1px; border-radius: 4px; } .stripe-order-item__stepper-value { min-width: 16px; padding: 0 2px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #fff; text-align: center; line-height: 1; } .stripe-order-item__price, .stripe-order-item__price-sale { color: #fff; white-space: nowrap; } .stripe-order-item__price-original { font-size: 12px; font-weight: 500; color: var(--ar-text-on-dark-muted); text-decoration: line-through; white-space: nowrap; } .stripe-order-item__details .variation, .stripe-order-item__details dl { font-size: 12px; color: var(--ar-text-on-dark-muted); margin: 4px 0 0; } /* Totals */ .stripe-order-totals { border-top: none; padding-top: 0; } .stripe-order-totals__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; padding: 5px 0; font-size: 14px; color: var(--ar-text-on-dark-muted); } .stripe-order-totals__row > span:last-child { flex-shrink: 0; } .stripe-order-totals__coupon-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stripe-order-totals__row--discount { color: #86efac; font-weight: 600; } .stripe-order-totals__row--discount .woocommerce-Price-amount, .stripe-order-totals__row--discount .amount, .stripe-order-totals__coupon-amount .woocommerce-Price-amount, .stripe-order-totals__coupon-amount .amount { color: #86efac !important; } .stripe-order-totals__coupon-value { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .stripe-order-totals__coupon-remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .stripe-order-totals__coupon-remove:hover { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; } .stripe-order-totals__coupon-remove:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .stripe-order-totals__breakdown { display: none; } .stripe-order-totals__row--total { align-items: flex-end; padding: 8px 0 4px; font-size: 14px; font-weight: 700; color: var(--ar-text-on-dark); } .stripe-order-totals__row--total > span:first-child { font-size: 14px; font-weight: 700; color: var(--ar-text-on-dark-muted); } .stripe-order-totals__total { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: right; } .stripe-order-totals__total strong, .stripe-order-totals__total .woocommerce-Price-amount, .stripe-order-totals__total .amount, .stripe-order-totals__total bdi { display: block; margin: 0; padding: 0; line-height: 1; } .stripe-order-totals__total .woocommerce-Price-amount, .stripe-order-totals__total .amount { color: #fff !important; } .stripe-order-totals__shipping table { width: 100%; border: none; } .stripe-order-totals__shipping th, .stripe-order-totals__shipping td { font-size: 14px; color: var(--ar-text-on-dark-muted); padding: 5px 0; border: none; background: transparent; } .stripe-order-totals__shipping td:last-child { text-align: right; color: #fff; } /* Coupon — botão tracejado + dropdown */ .stripe-order-totals .stripe-summary__coupon { margin: 0 0 12px; padding-bottom: 0; border-bottom: none; } .stripe-order-review .stripe-summary__coupon { margin: 0 0 16px; } .stripe-coupon { margin-bottom: 0; } .stripe-coupon__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; background: var(--ar-brand-soft, rgba(195, 167, 118, 0.08)); border: 1.5px dashed var(--ar-brand, #c3a776); border-radius: var(--ar-radius-sm); color: var(--ar-brand, #c3a776); font-family: var(--ar-font); font-size: 12px; font-weight: 600; line-height: 1.35; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, border-radius 0.2s ease; } .stripe-coupon__trigger-main { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; text-align: left; } .stripe-coupon__trigger:hover { border-color: var(--ar-brand-hover, var(--ar-details-hover, #b49764)); background: color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 18%, transparent); color: var(--ar-brand-hover, var(--ar-details-hover, #b49764)); } .stripe-coupon.is-open .stripe-coupon__trigger { border-color: var(--ar-brand-border, color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 45%, transparent)); background: color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 14%, transparent); color: var(--ar-brand, var(--ar-details, #c3a776)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 22%, transparent); } .stripe-coupon__trigger svg { flex-shrink: 0; opacity: 0.9; } .stripe-coupon__chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; margin-top: -2px; } .stripe-coupon.is-open .stripe-coupon__chevron { transform: rotate(-135deg); margin-top: 2px; } .stripe-coupon__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } .stripe-coupon.is-open .stripe-coupon__panel { grid-template-rows: 1fr; } .stripe-coupon__panel-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); padding: 0; background: color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 8%, transparent); border: 1.5px solid var(--ar-brand-border, color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 35%, transparent)); border-top: none; border-radius: 0 0 var(--ar-radius-sm) var(--ar-radius-sm); } .stripe-coupon.is-open .stripe-coupon__panel-inner { opacity: 1; transform: translateY(0); padding: 10px; } .stripe-coupon__form { margin: 0; display: block !important; overflow: visible; } .stripe-coupon__form .form-row, .stripe-coupon__form .clear { display: none !important; } .stripe-coupon__field { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 4px 4px 4px 12px; background: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .stripe-coupon__field:focus-within { border-color: var(--ar-primary); box-shadow: none; } .stripe-coupon__field:hover { border-color: color-mix(in srgb, var(--ar-brand, var(--ar-details, #c3a776)) 60%, transparent); } .stripe-coupon__input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--ar-text) !important; font-size: 12px !important; font-weight: 600 !important; font-family: var(--ar-font) !important; box-shadow: none !important; line-height: 1.4; } .stripe-coupon__input::placeholder { color: var(--ar-text-muted) !important; font-weight: 600; } .stripe-coupon__input:focus { outline: none !important; box-shadow: none !important; } .stripe-coupon__apply { flex-shrink: 0; height: 32px; padding: 0 14px; background: var(--ar-brand, #c3a776); color: #fff !important; border: none; border-radius: var(--ar-radius-sm); font-family: var(--ar-font); font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; box-shadow: 0 1px 2px rgba(195, 167, 118, 0.25); } .stripe-coupon__apply:hover { background: var(--ar-brand-hover, #b49764); color: #fff !important; } .stripe-coupon__apply:disabled { opacity: 0.5; cursor: not-allowed; color: #fff !important; } .stripe-summary__coupon .woocommerce-form-coupon-toggle { display: none !important; } /* ── Painel esquerdo: formulário ── */ .stripe-checkout__main { grid-column: 1; min-width: 0; width: 100%; height: 100%; min-height: 0; background: var(--ar-canvas); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; position: relative; z-index: 2; --ar-primary: var(--ar-gold); --ar-primary-hover: var(--ar-gold-hover); --ar-primary-soft: var(--ar-gold-soft); --ar-primary-border: var(--ar-gold-border); --ar-focus: 0 0 0 3px rgba(195, 167, 118, 0.24); } .stripe-mobile-toggle { display: none; } .stripe-mobile-toggle__text--open, .stripe-mobile-toggle__hint--open { display: none; } .stripe-summary-backdrop { display: none; } .stripe-summary__sheet-bar { display: none; } .stripe-form-column { display: flex; flex-direction: column; flex: 0 1 auto; width: 100%; max-width: var(--ar-form-max-width); max-height: 100%; min-height: 0; margin: 0 auto; padding: 24px 48px; } .stripe-form__header { margin: 0 0 24px; flex-shrink: 0; align-self: flex-start; width: 100%; } .stripe-brand-back { display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; text-align: left; vertical-align: top; } .stripe-brand-back__mark { display: block; flex-shrink: 0; } .stripe-brand-back__logo { display: block; width: 160px; max-width: 100%; height: auto; max-height: 32px; object-fit: contain; object-position: left center; opacity: 0.95; transition: opacity 0.2s ease; } .stripe-brand-back__fallback { display: block; width: 160px; max-width: 100%; font-size: 15px; font-weight: 700; line-height: 32px; color: var(--ar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stripe-brand-back__arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 0; height: 32px; margin: 0; overflow: hidden; border-radius: 50%; background: var(--ar-primary-soft); color: var(--ar-text); opacity: 0; transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, margin 0.22s ease, background 0.15s ease, color 0.15s ease; } .stripe-brand-back__arrow svg { display: block; flex-shrink: 0; } .stripe-brand-back:hover .stripe-brand-back__arrow, .stripe-brand-back:focus-visible .stripe-brand-back__arrow { width: 32px; margin-right: 8px; opacity: 1; } .stripe-brand-back:hover .stripe-brand-back__logo, .stripe-brand-back:focus-visible .stripe-brand-back__logo { opacity: 0.92; } .stripe-brand-back:focus-visible { outline: none; } .stripe-brand-back:focus-visible .stripe-brand-back__mark { outline: 2px solid rgba(195, 167, 118, 0.55); outline-offset: 4px; border-radius: 4px; } .stripe-form { flex: 1 1 auto; width: 100%; max-width: none; margin: 0; padding: 0 0 8px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; position: relative; z-index: 1; } .stripe-section, .stripe-fields, #customer_details, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: block !important; width: 100%; visibility: visible !important; opacity: 1 !important; overflow: visible; } #customer_details { display: flow-root !important; } /* Inline notices — hidden, converted to toasts via JS */ body.secovi-shop-checkout .woocommerce-error, body.secovi-shop-checkout .woocommerce-message, body.secovi-shop-checkout .woocommerce-info, body.secovi-shop-checkout .woocommerce-notices-wrapper .woocommerce-error, body.secovi-shop-checkout .woocommerce-notices-wrapper .woocommerce-message, body.secovi-shop-checkout .woocommerce-notices-wrapper .woocommerce-info, #stripe-checkout .woocommerce-error, #stripe-checkout .woocommerce-message, #stripe-checkout .woocommerce-info, #stripe-checkout .woocommerce-NoticeGroup, .stripe-field__error, .stripe-payment__error, #stripe-payment-error { display: none !important; } .stripe-notices--source { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } body.secovi-shop-checkout > .woocommerce > .woocommerce-notices-wrapper { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Toast stack */ .secovi-toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; } .secovi-toast { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--ar-radius-md); background: var(--ar-surface); box-shadow: var(--ar-shadow-md); border: 1px solid var(--ar-border); border-left: 4px solid var(--ar-primary); pointer-events: auto; transform: translateX(calc(100% + 32px)); opacity: 0; animation: secovi-toast-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .secovi-toast--error { border-left-color: var(--ar-danger-text); background: var(--ar-danger-bg); border-color: var(--ar-danger-border); } .secovi-toast--success { border-left-color: var(--ar-success-text); background: var(--ar-success-bg); border-color: var(--ar-success-border); } .secovi-toast--info { border-left-color: var(--ar-primary); background: var(--ar-primary-soft); border-color: var(--ar-primary-border); } .secovi-toast__icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--ar-primary); margin-top: 1px; } .secovi-toast--error .secovi-toast__icon { background: var(--ar-danger-text); } .secovi-toast--success .secovi-toast__icon { background: var(--ar-success-text); } .secovi-toast--info .secovi-toast__icon { background: var(--ar-primary); } .secovi-toast__text { flex: 1; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ar-text); } .secovi-toast__close { flex-shrink: 0; width: 28px; height: 28px; border: none; background: transparent; color: var(--ar-text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; margin: -2px -4px 0 0; border-radius: var(--ar-radius-sm); } .secovi-toast__close:hover { color: var(--ar-text); background: rgba(15, 23, 42, 0.05); } .secovi-toast.is-leaving { animation: secovi-toast-out 0.28s ease forwards; } @keyframes secovi-toast-in { from { transform: translateX(calc(100% + 32px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes secovi-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(100% + 32px)); opacity: 0; } } /* Checkout modals — processamento e recusa do cartão */ .secovi-modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; padding: 24px; } .secovi-modal.is-open { display: flex; } .secovi-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 35, 41, 0.72); } .secovi-modal.is-processing .secovi-modal__backdrop { pointer-events: none; } .secovi-modal__dialog { position: relative; z-index: 1; width: min(420px, 100%); } .secovi-modal__panel { display: none; flex-direction: column; align-items: center; text-align: center; padding: 32px 28px 28px; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28); } .secovi-modal.is-processing .secovi-modal__panel--processing, .secovi-modal.is-error .secovi-modal__panel--error { display: flex; } .secovi-modal__spinner { width: 44px; height: 44px; margin-bottom: 18px; border: 3px solid rgba(195, 167, 118, 0.28); border-top-color: #c3a776; border-radius: 50%; animation: secovi-spin 0.75s linear infinite; } @keyframes secovi-spin { to { transform: rotate(360deg); } } .secovi-modal__icon { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; background: var(--ar-danger-text); } .secovi-modal__title { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ar-navy-900); } .secovi-modal__text { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ar-text-body); } .secovi-modal__button { margin-top: 22px; min-width: 180px; height: 44px; padding: 0 22px; border: none; border-radius: var(--ar-radius-sm); background: var(--ar-navy-900); color: #fff; font-family: var(--ar-font); font-size: 14px; font-weight: 800; cursor: pointer; } .secovi-modal__button:hover { background: var(--ar-navy-950); } body.secovi-modal-open { overflow: hidden; } /* Sections */ .stripe-section { margin-bottom: 18px; padding: 0; background: transparent; border: none; border-radius: 0; } /* ── Etapas ── */ /* O `[hidden]` do agente de usuário perde para qualquer regra de classe com display. Como a visibilidade das etapas depende dele, reforçamos aqui com a especificidade do id, o que também vence o `display: block !important` das seções. */ #stripe-checkout [hidden] { display: none !important; } .stripe-steps { margin: 0 0 20px; } .stripe-steps__list { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .stripe-steps__item { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; } .stripe-steps__item::after { content: ""; flex: 1 0 12px; height: 2px; min-width: 12px; background: var(--ar-border); border-radius: 2px; } .stripe-steps__item:last-child::after, .stripe-steps__item.is-last-visible::after { display: none; } .stripe-steps__item.is-done::after { background: var(--ar-primary); } .stripe-steps__button { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; border: none; font-family: var(--ar-font); cursor: pointer; } .stripe-steps__button:disabled { cursor: default; } .stripe-steps__num { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; background: var(--ar-surface); border: 1.5px solid var(--ar-border); border-radius: 50%; font-size: 11px; font-weight: 900; color: var(--ar-text-muted); transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .stripe-steps__label { font-size: 12px; font-weight: 700; color: var(--ar-text-muted); white-space: nowrap; transition: color 0.15s; } .stripe-steps__item.is-current .stripe-steps__num { background: var(--ar-primary); border-color: var(--ar-primary); color: #fff; } .stripe-steps__item.is-current .stripe-steps__label { color: var(--ar-text); } .stripe-steps__item.is-done .stripe-steps__num { background: var(--ar-primary-soft); border-color: var(--ar-primary); color: var(--ar-primary-hover); } .stripe-steps__item.is-done .stripe-steps__label { color: var(--ar-primary-hover); } .stripe-steps__button:focus-visible .stripe-steps__num { box-shadow: var(--ar-focus); } /* Ações — Continuar no formulário; Finalizar no resumo. */ .stripe-form__actions { display: flex; flex-direction: column; gap: 0; width: 100%; margin-top: 20px; flex-shrink: 0; } .stripe-form__actions .stripe-steps__next, .stripe-form__actions .stripe-form__submit { width: 100%; justify-content: center; } .stripe-order-totals .stripe-summary__actions { margin: 12px 0 0; } .stripe-summary__actions { margin: 0; flex-shrink: 0; } .stripe-summary__actions .stripe-summary__submit { width: 100%; justify-content: center; } .stripe-step__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .stripe-step__copy { flex: 1 1 auto; min-width: 0; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next, .stripe-checkout__main .stripe-form__actions .stripe-form__submit { background: var(--ar-seq-btn, var(--ar-navy-900)); border-color: var(--ar-seq-btn, var(--ar-navy-900)); color: #fff; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next:hover, .stripe-checkout__main .stripe-form__actions .stripe-form__submit:hover { background: var(--ar-seq-btn-hover, var(--ar-navy-800)); border-color: var(--ar-seq-btn-hover, var(--ar-navy-800)); color: #fff; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next:focus-visible, .stripe-checkout__main .stripe-form__actions .stripe-form__submit:focus-visible { box-shadow: 0 0 0 3px rgba(33, 44, 53, 0.28); } .stripe-steps__next { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--ar-radius-sm); font-family: var(--ar-font); font-size: 14px; font-weight: 800; cursor: pointer; background: var(--ar-primary); border: 1px solid var(--ar-primary); color: #fff; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .stripe-steps__next:hover { background: var(--ar-primary-hover); border-color: var(--ar-primary-hover); } .stripe-steps__back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; margin: 0; padding: 0; background: none; border: none; border-radius: 0; color: var(--ar-text-body); cursor: pointer; transition: color 0.15s; } .stripe-steps__back:hover { color: var(--ar-text); background: none; border-color: transparent; } .stripe-steps__back:focus-visible, .stripe-steps__next:focus-visible { outline: none; box-shadow: var(--ar-focus); } /* Campo com erro de etapa */ #stripe-checkout .form-row.stripe-field--invalid input.input-text, #stripe-checkout .form-row.stripe-field--invalid textarea, #stripe-checkout .form-row.stripe-field--invalid select, #stripe-checkout .form-row.stripe-field--invalid .select2-selection { border-color: var(--ar-danger-border); background: var(--ar-danger-bg); } .stripe-field__error { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--ar-danger-text); } #stripe-checkout .woocommerce-input-wrapper { position: relative; display: block; overflow: visible; } #stripe-checkout #billing_cpf_field input.input-text, #stripe-checkout #billing_cnpj_field input.input-text, #stripe-checkout .form-row.is-looking-up input.input-text { padding-right: 40px; } .stripe-field__status { position: absolute; top: 50%; right: 10px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: none; align-items: center; justify-content: center; pointer-events: none; } .stripe-field--valid .stripe-field__status, .stripe-field--invalid .stripe-field__status, #stripe-checkout .form-row.is-looking-up .stripe-field__status { display: flex; } #stripe-checkout .form-row.is-looking-up .stripe-field__status { background: transparent; color: #c3a776; } .stripe-field__status.is-loading svg { animation: secovi-lookup-spin 0.7s linear infinite; } @keyframes secovi-lookup-spin { to { transform: rotate(360deg); } } .stripe-field--valid .stripe-field__status { background: #d1fae5; color: #047857; } .stripe-field--invalid .stripe-field__status { background: #fecdd3; color: #be123c; } .stripe-field__status svg { display: block; } #stripe-checkout .form-row.stripe-field--valid input.input-text { border-color: var(--ar-success-border); } /* Telas baixas no desktop: aperta o ritmo vertical para a etapa continuar caber inteira. No mobile os campos precisam ficar altos o bastante para o toque e para o iOS não dar zoom (fonte 16px). */ @media (max-height: 800px) and (min-width: 901px) { .stripe-form-column { padding: 18px 32px 0; } .stripe-form { padding-bottom: 18px; } .stripe-steps { margin-bottom: 14px; } .stripe-section { margin-bottom: 12px; } #stripe-checkout .form-row { margin-bottom: 9px; } #stripe-checkout label { margin-bottom: 4px; } #stripe-checkout input[type="text"], #stripe-checkout input[type="email"], #stripe-checkout input[type="tel"], #stripe-checkout input[type="password"], #stripe-checkout input[type="number"], #stripe-checkout select, #stripe-checkout textarea, #stripe-checkout .select2-container--default .select2-selection--single, #stripe-card-details .select2-container--default .select2-selection--single { height: 36px; } .stripe-steps__next { height: 40px; } } .stripe-section__title { margin: 0 0 6px; font-size: 18px; font-weight: 900; color: var(--ar-text); line-height: 1.25; } .stripe-section__subtitle { margin: 16px 0 10px; font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-text-muted); } .stripe-section__desc { margin: 0; font-size: 14px; font-weight: 600; color: var(--ar-text-body); text-transform: none; letter-spacing: normal; } /* Fields */ .stripe-checkout .woocommerce-billing-fields h3, .stripe-checkout .woocommerce-shipping-fields h3, .stripe-checkout .woocommerce-additional-fields h3, .stripe-checkout #order_review_heading { display: none !important; } /* Prefixo #stripe-checkout: os campos ficam dentro de .woocommerce form, então é preciso superar seletores como `.woocommerce form .form-row input.input-text`. */ #stripe-checkout label { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 7px; line-height: 1.4; color: var(--ar-text-body); } #stripe-checkout span.optional, #stripe-card-details span.optional, .stripe-checkout span.optional, .stripe-payment span.optional, #payment span.optional { display: none !important; } #stripe-card-details #asaas-cc-installments_field > label .optional, #asaas-cc-installments_field > label .optional { display: none !important; } /* Duas colunas: cada etapa precisa caber na tela sem barra de rolagem. A grade tem 6 colunas para dar proporções diferentes a cada campo (endereço largo, número estreito). Campos sem span definido ocupam a linha inteira. */ #stripe-checkout .woocommerce-billing-fields__field-wrapper, #stripe-checkout .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(6, 1fr); column-gap: 12px; align-items: start; } #stripe-checkout .form-row { display: block; grid-column: span 6; margin: 0 0 14px; padding: 0; min-width: 0; position: relative; overflow: visible; } #stripe-checkout #billing_first_name_field.is-razao-social { grid-column: span 6; } #stripe-checkout .form-row.secovi-field-hidden { display: none !important; } #stripe-checkout #billing_company_field.secovi-field-hidden { display: none !important; } #stripe-checkout #billing_first_name_field, #stripe-checkout #billing_last_name_field, #stripe-checkout #billing_country_field, #stripe-checkout #billing_postcode_field, #stripe-checkout #billing_address_2_field, #stripe-checkout #billing_neighborhood_field, #stripe-checkout #shipping_first_name_field, #stripe-checkout #shipping_last_name_field, #stripe-checkout #shipping_country_field, #stripe-checkout #shipping_postcode_field, #stripe-checkout #shipping_address_2_field, #stripe-checkout #shipping_neighborhood_field { grid-column: span 3; } #stripe-checkout #billing_cpf_field, #stripe-checkout #billing_cnpj_field, #stripe-checkout #billing_email_field, #stripe-checkout #billing_address_1_field, #stripe-checkout #billing_city_field, #stripe-checkout #shipping_address_1_field, #stripe-checkout #shipping_city_field { grid-column: span 4; } #stripe-checkout #billing_persontype_field, #stripe-checkout #billing_phone_field, #stripe-checkout #billing_number_field, #stripe-checkout #billing_state_field, #stripe-checkout #shipping_number_field, #stripe-checkout #shipping_state_field { grid-column: span 2; } #stripe-checkout input[type="text"], #stripe-checkout input[type="email"], #stripe-checkout input[type="tel"], #stripe-checkout input[type="password"], #stripe-checkout input[type="number"], #stripe-checkout select, #stripe-checkout textarea { width: 100%; height: 44px; padding: 0 14px; font-size: 13px; font-weight: 600; font-family: var(--ar-font); line-height: 1.4; color: var(--ar-text); background: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; appearance: none; } #stripe-checkout textarea { height: auto; min-height: 80px; padding: 10px 12px; } #stripe-checkout input:hover, #stripe-checkout select:hover, #stripe-checkout textarea:hover { border-color: color-mix(in srgb, var(--ar-details, var(--ar-primary, #c3a776)) 60%, transparent); } #stripe-checkout input:focus, #stripe-checkout select:focus, #stripe-checkout textarea:focus { outline: none; border-color: var(--ar-primary); box-shadow: none; } /* Fallback antes do select2 inicializar */ #stripe-checkout select:not(.select2-hidden-accessible) { padding-right: 38px; cursor: pointer; background-color: var(--ar-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; } #stripe-checkout .woocommerce-input-wrapper > .select2-container, #stripe-card-details .woocommerce-input-wrapper > .select2-container { display: block; width: 100% !important; max-width: 100%; min-width: 0; box-sizing: border-box; } #stripe-card-details .form-row, #stripe-card-details p.form-row { margin: 14px 0 0; padding: 0; position: relative; overflow: visible; } #stripe-card-details #asaas-cc-installments_field { margin-top: 12px; } #stripe-card-details select:not(.select2-hidden-accessible) { width: 100%; height: 44px; padding: 0 38px 0 14px; font-size: 13px; font-weight: 600; font-family: var(--ar-font); color: var(--ar-text); background-color: var(--ar-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); box-shadow: none; appearance: none; cursor: pointer; } #stripe-checkout .form-row-first, #stripe-checkout .form-row-last, #stripe-checkout .form-row-wide { width: 100%; float: none; margin-right: 0; clear: none; } #stripe-checkout .woocommerce-invalid input { border-color: var(--ar-danger-text); } /* ── select2 / selectWoo (checkout customizado) ── */ #stripe-checkout .select2-container, #stripe-card-details .select2-container { width: 100% !important; min-width: 0; max-width: 100%; vertical-align: top; } body > .select2-container { z-index: 100010 !important; } body > .select2-container.select2-container--open { position: fixed !important; } #stripe-checkout .select2-container--default .select2-selection--single, #stripe-card-details .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 44px; margin: 0; padding: 0 12px; background: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } #stripe-checkout .select2-container--open.select2-container--below .select2-selection--single, #stripe-card-details .select2-container--open.select2-container--below .select2-selection--single { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #stripe-checkout .select2-container--open.select2-container--above .select2-selection--single, #stripe-card-details .select2-container--open.select2-container--above .select2-selection--single { border-top-left-radius: 0; border-top-right-radius: 0; } #stripe-checkout .select2-container--default .select2-selection--single:hover, #stripe-card-details .select2-container--default .select2-selection--single:hover { border-color: color-mix(in srgb, var(--ar-details, var(--ar-primary, #c3a776)) 60%, transparent); } #stripe-checkout .select2-container--open .select2-selection--single, #stripe-checkout .select2-container--focus .select2-selection--single, #stripe-card-details .select2-container--open .select2-selection--single, #stripe-card-details .select2-container--focus .select2-selection--single { border: 1px solid var(--ar-primary); box-shadow: none; background-image: none; } #stripe-checkout .select2-container--default .select2-selection--single .select2-selection__rendered, #stripe-card-details .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; margin: 0; font-size: 13px; font-weight: 600; font-family: var(--ar-font); line-height: 1.4; color: var(--ar-text); } #stripe-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder, #stripe-card-details .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ar-text-muted); font-weight: 600; } #stripe-checkout .select2-container--default .select2-selection--single .select2-selection__arrow, #stripe-card-details .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; height: 38px; width: 14px; background: none; border: none; } #stripe-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b, #stripe-card-details .select2-container--default .select2-selection--single .select2-selection__arrow b { margin: -2px 0 0 -4px; border: none; width: 7px; height: 7px; border-right: 2px solid var(--ar-text-muted); border-bottom: 2px solid var(--ar-text-muted); transform: rotate(45deg); } #stripe-checkout .select2-container--open .select2-selection--single .select2-selection__arrow b, #stripe-card-details .select2-container--open .select2-selection--single .select2-selection__arrow b { margin-top: 2px; transform: rotate(-135deg); border-right-color: var(--ar-primary); border-bottom-color: var(--ar-primary); } .select2-container { z-index: 100001; } .select2-dropdown { border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); box-shadow: var(--ar-shadow-md); overflow: hidden; font-family: var(--ar-font); } .select2-container--open .select2-dropdown--below { border: 1px solid var(--ar-primary); border-top: none; border-radius: 0 0 var(--ar-radius-sm) var(--ar-radius-sm); box-shadow: 0 8px 16px -6px rgba(26, 35, 41, 0.32); } .select2-container--open .select2-dropdown--above { border: 1px solid var(--ar-primary); border-bottom: none; border-radius: var(--ar-radius-sm) var(--ar-radius-sm) 0 0; box-shadow: 0 -8px 16px -6px rgba(26, 35, 41, 0.32); } .select2-container--default .select2-search--dropdown { padding: 8px; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 10px; font-size: 12px; font-weight: 600; font-family: var(--ar-font); color: var(--ar-text); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--ar-primary); box-shadow: none; } .select2-container--default .select2-results__option { padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--ar-text-body); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--ar-primary); color: #fff; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--ar-primary-soft); color: var(--ar-text); } .select2-results__options { max-height: 260px; } /* O campo de cupom mantém o layout compacto próprio. */ #stripe-checkout .stripe-coupon__input { height: 100%; padding: 0 8px 0 0; border: none; background: transparent; box-shadow: none; } .stripe-form__login { margin-bottom: 20px; padding: 14px 16px; background: var(--ar-primary-soft); border: 1px solid var(--ar-primary-border); border-radius: var(--ar-radius-md); font-size: 12px; font-weight: 600; color: var(--ar-text-body); } .stripe-form__login a { color: var(--ar-primary-hover); font-weight: 700; } /* Shipping */ .stripe-shipping-methods__content ul#shipping_method { list-style: none; margin: 0; padding: 0; } .stripe-shipping-methods__content ul#shipping_method li { margin-bottom: 8px; } .stripe-shipping-methods__content ul#shipping_method label { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); cursor: pointer; font-weight: 600; font-size: 12px; margin: 0; background: var(--ar-surface); text-transform: none; letter-spacing: normal; } .stripe-shipping-methods__content ul#shipping_method li:has(input:checked) label { border-color: var(--ar-primary); box-shadow: none; background: var(--ar-primary-soft); } /* Payment — métodos em cards; cartão na etapa 4. */ #stripe-checkout #payment { margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; } #stripe-checkout #payment div.form-row { margin: 0; padding: 0; } .stripe-payment .wc_payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .stripe-payment .wc_payment_method { position: relative; margin: 0; border: 1.5px solid var(--ar-border); border-radius: 14px; background: var(--ar-surface); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .stripe-payment .wc_payment_method:hover { border-color: color-mix(in srgb, var(--ar-primary) 35%, var(--ar-border)); } .stripe-payment .wc_payment_method.is-selected, .stripe-payment .wc_payment_method:has(input:checked), .stripe-payment .wc_payment_method:focus-within { border-color: var(--ar-primary); box-shadow: none !important; outline: none; background: color-mix(in srgb, var(--ar-primary) 4%, var(--ar-surface)); } .stripe-payment .wc_payment_method > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } #stripe-checkout .wc_payment_method > label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: normal; line-height: 1.3; color: var(--ar-text); } .stripe-steps__item--card[hidden] { display: none !important; } #stripe-checkout .wc_payment_method > label .stripe-pay-method__icon { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } #stripe-checkout .wc_payment_method > label .stripe-pay-icon { display: block; width: 28px; height: 28px; flex: 0 0 28px; filter: none; } .stripe-pay-method__content { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .stripe-pay-method__title { font-size: 14px; font-weight: 800; color: var(--ar-text); } .stripe-pay-method__desc { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ar-text-body); } .stripe-pay-method__check { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--ar-border); border-radius: 50%; position: relative; transition: border-color 0.15s, background 0.15s; } .stripe-payment .wc_payment_method.is-selected .stripe-pay-method__check, .stripe-payment .wc_payment_method:has(input:checked) .stripe-pay-method__check { border-color: var(--ar-primary); background: var(--ar-primary); } .stripe-payment .wc_payment_method.is-selected .stripe-pay-method__check::after, .stripe-payment .wc_payment_method:has(input:checked) .stripe-pay-method__check::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } .stripe-payment--methods .wc_payment_method .payment_box { display: none !important; } .stripe-payment__error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; } .stripe-payment--error .wc_payment_methods { outline: 2px solid #fecdca; border-radius: 14px; } .stripe-card-details { margin-top: 4px; } .stripe-card-details .asaas-cc-form-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stripe-card-details #asaas-cc-number_field, .stripe-card-details #asaas-cc-name_field, .stripe-card-details #asaas-cc-security-code_field, .stripe-payment #asaas-cc-number_field, .stripe-payment #asaas-cc-name_field, .stripe-payment #asaas-cc-security-code_field { grid-column: 1 / -1; } .stripe-card-details #assas-cc-expiration-label_field, .stripe-payment #assas-cc-expiration-label_field { display: none !important; } .stripe-card-details #asaas-cc-expiration-month_field, .stripe-card-details #asaas-cc-expiration-year_field, .stripe-payment #asaas-cc-expiration-month_field, .stripe-payment #asaas-cc-expiration-year_field { grid-column: span 1; } .stripe-card-details .asaas-cc-form-field, .stripe-payment .asaas-cc-form-field { margin: 0 !important; } .stripe-card-details .asaas-cc-form-field label, .stripe-payment .asaas-cc-form-field label { font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .stripe-card-details .asaas-cc-form-field input.input-text, .stripe-payment .asaas-cc-form-field input.input-text { height: 44px; border-radius: 10px; } .stripe-card-details .asaas-cc-form-field label.screen-reader-text, .stripe-payment .asaas-cc-form-field label.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .stripe-card-details .asaas-cc-form-field input.input-text::placeholder, .stripe-payment .asaas-cc-form-field input.input-text::placeholder { color: var(--ar-text-muted); font-weight: 600; opacity: 1; } .stripe-card-number { position: relative; display: block; } .stripe-card-number #asaas-cc-number { padding-right: 56px; } .stripe-card-brand { position: absolute; top: 50%; right: 10px; z-index: 2; width: 42px; height: 28px; transform: translateY(-50%); display: none; align-items: center; justify-content: center; pointer-events: none; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); overflow: hidden; } .stripe-card-brand.is-visible { display: inline-flex; } .stripe-card-brand img { display: block; width: 38px; height: 24px; object-fit: contain; } .stripe-payment .wc_payment_method .payment_box { display: none; margin: 0; padding: 0 14px 14px; font-size: 12px; font-weight: 600; color: var(--ar-text-body); background: transparent; border: none; } .stripe-payment .wc_payment_method.is-selected .payment_box, .stripe-payment .wc_payment_method:has(input:checked) .payment_box { display: block; } .stripe-payment .wc_payment_method .payment_box > p:first-child { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ar-text-body); } .stripe-payment .wc_payment_method .payment_box > p:last-child { margin-bottom: 0; } .stripe-payment.is-credit-open .payment_method_asaas-credit-card .payment_box > p { display: none; } .stripe-payment .asaas-cc-form-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stripe-payment .asaas-cc-form-field { margin: 0 !important; } .stripe-payment .asaas-cc-form-field label { font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .stripe-payment .asaas-cc-form-field input.input-text { height: 40px; border-radius: 10px; } .stripe-payment { position: relative; } #stripe-checkout .woocommerce-privacy-policy-text { margin: 0 0 10px; } #stripe-checkout .woocommerce-privacy-policy-text p { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--ar-text-muted); } .stripe-payment #place_order { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #stripe-payment .form-row.place-order { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .stripe-form__actions .stripe-form__submit { width: 100%; } .stripe-form__footer { margin-top: 12px; font-size: 11px; font-weight: 600; color: var(--ar-text-muted); text-align: center; line-height: 1.5; } /* WooCommerce AJAX */ .stripe-checkout .blockUI.blockOverlay, .stripe-checkout .blockUI.blockMsg { display: none !important; } form.checkout.processing, #order_review.processing { opacity: 1 !important; pointer-events: auto; } #order_review { transition: none !important; } /* Admin bar — o deslocamento fica só em .stripe-checkout, nunca no body. */ body.admin-bar.secovi-shop-checkout { height: calc(var(--ar-vh) - 32px); } body.admin-bar.secovi-shop-checkout .stripe-checkout { top: 32px; height: calc(var(--ar-vh) - 32px); } @media screen and (max-width: 782px) { body.admin-bar.secovi-shop-checkout { height: calc(var(--ar-vh) - 46px); } body.admin-bar.secovi-shop-checkout .stripe-checkout { top: 46px; height: calc(var(--ar-vh) - 46px); } } /* ── Mobile ── */ @media (max-width: 900px) { :root { --ar-summary-width: 100%; --ar-summary-inner-width: 100%; --ar-form-max-width: none; --ar-main-min-width: 0; } html.secovi-checkout-html, html.secovi-checkout-html body, body.secovi-shop-checkout { height: 100%; height: 100svh; max-height: 100svh; min-height: 100svh; } .stripe-checkout { height: 100svh; max-height: 100svh; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .stripe-checkout__form { grid-template-columns: 1fr; min-height: 0; } .stripe-checkout__main { grid-column: 1; width: 100%; min-width: 0; height: 100%; align-items: stretch; justify-content: flex-start; overflow: hidden; } .stripe-checkout__summary { display: none; grid-column: 1; width: 100%; justify-content: flex-start; align-items: stretch; } .stripe-summary-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 190; background: rgba(15, 23, 42, 0.48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .stripe-checkout__summary.is-mobile-open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 200; width: 100%; height: min(86dvh, 720px); max-height: 86dvh; border-radius: 20px 20px 0 0; box-shadow: 0 -18px 48px rgba(10, 16, 22, 0.45); padding-bottom: env(safe-area-inset-bottom); animation: secovi-sheet-up 0.28s ease-out; overflow: hidden; } @keyframes secovi-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .stripe-checkout__summary.is-mobile-open { animation: none; } } .stripe-checkout__summary.is-mobile-open .stripe-summary { width: 100%; max-width: none; max-height: 100%; padding: 4px 20px 20px; margin: 0; } .stripe-checkout__summary.is-mobile-open .stripe-summary__sheet-bar { display: block; flex-shrink: 0; margin: 0 0 8px; } .stripe-summary__sheet-close { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 10px 0 8px; border: none; background: transparent; color: var(--ar-text-on-dark); font-family: var(--ar-font); cursor: pointer; } .stripe-summary__handle { display: block; width: 40px; height: 4px; margin: 0 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.32); } .stripe-summary__sheet-title { font-size: 15px; font-weight: 800; line-height: 1.2; } .stripe-summary__sheet-label { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--ar-text-on-dark-muted); } .stripe-form__actions .stripe-form__submit { display: inline-flex; } .stripe-summary__actions { display: none !important; } .stripe-checkout__summary.is-mobile-open .stripe-summary__actions, .stripe-checkout__summary.is-mobile-open .stripe-summary__secure { display: block !important; } .stripe-form__actions { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; margin: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ar-canvas); border-top: 1px solid var(--ar-border); box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06); z-index: 20; box-sizing: border-box; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next, .stripe-checkout__main .stripe-form__actions .stripe-form__submit, #stripe-checkout.is-order-pay #place_order.stripe-form__submit { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; height: 48px; min-height: 48px; margin: 0; float: none; font-size: 16px; border-radius: 14px; box-sizing: border-box; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next { background: var(--ar-navy-900); border-color: var(--ar-navy-900); color: #fff; } .stripe-checkout__main .stripe-form__actions .stripe-steps__next:hover, .stripe-checkout__main .stripe-form__actions .stripe-steps__next:focus-visible { background: var(--ar-navy-800); border-color: var(--ar-navy-800); color: #fff; } .stripe-checkout__main .stripe-form__actions .stripe-form__submit, #stripe-checkout.is-order-pay #place_order.stripe-form__submit { background: #059669; border-color: #059669; color: #fff; } .stripe-checkout__main .stripe-form__actions .stripe-form__submit:hover, #stripe-checkout.is-order-pay #place_order.stripe-form__submit:hover { background: #047857; border-color: #047857; color: #fff; } .stripe-form__header { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; gap: 14px; width: 100%; margin: 0; padding: 14px 20px 28px; background: linear-gradient(165deg, var(--ar-navy-700) 0%, var(--ar-navy-900) 45%, var(--ar-navy-950) 100%); } .stripe-brand-back__logo { width: 132px; height: 26px; filter: brightness(0) invert(1); opacity: 1; } .stripe-brand-back__fallback { color: #fff; } .stripe-brand-back__arrow { width: 28px; height: 28px; margin-right: 8px; opacity: 1; background: rgba(255, 255, 255, 0.12); color: #fff; } .stripe-mobile-toggle { display: flex; align-items: center; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 16px; box-shadow: none; font-family: var(--ar-font); cursor: pointer; gap: 12px; flex-shrink: 0; text-align: left; -webkit-tap-highlight-color: transparent; } .stripe-mobile-toggle[aria-expanded="true"] { border-color: var(--ar-gold-border); background: rgba(195, 167, 118, 0.12); box-shadow: none; } .stripe-mobile-toggle__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; } .stripe-mobile-toggle__text { font-size: 14px; font-weight: 800; line-height: 1.25; color: #fff; } .stripe-mobile-toggle__hint { font-size: 12px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.62); } .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__text--closed, .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__hint--closed { display: none; } .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__text--open, .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__hint--open { display: inline; } .stripe-mobile-toggle__total { margin-left: auto; font-size: 16px; font-weight: 800; white-space: nowrap; color: #fff; } .stripe-mobile-toggle__total .amount, .stripe-mobile-toggle__total .woocommerce-Price-amount, .stripe-mobile-toggle__total .woocommerce-Price-amount bdi { color: #fff !important; font-size: 16px; font-weight: 800; } .stripe-mobile-toggle__chevron { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--ar-gold); color: var(--ar-navy-900); transition: transform 0.2s ease, background-color 0.15s ease; } .stripe-mobile-toggle__chevron svg { display: block; transition: transform 0.2s ease; } .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__chevron { transform: none; background: #fff; color: var(--ar-navy-900); } .stripe-mobile-toggle[aria-expanded="true"] .stripe-mobile-toggle__chevron svg { transform: rotate(180deg); } .stripe-form-column { flex: 1 1 auto; width: 100%; max-width: none; max-height: none; min-height: 0; padding: 0; } .stripe-form-column > .stripe-form__actions { position: sticky; bottom: 0; margin: 0; width: 100%; } .stripe-form { flex: 1 1 auto; min-height: 0; position: relative; z-index: 1; margin-top: -18px; padding: 20px 20px 16px; background: var(--ar-canvas); border-radius: 20px 20px 0 0; } .stripe-steps { margin: 0 0 18px; } .stripe-steps__list { display: flex; align-items: stretch; width: 100%; gap: 6px; } .stripe-steps__item { flex: 1 1 0; min-width: 0; gap: 0; height: auto; } .stripe-steps__item::after { display: none; } .stripe-steps__button { display: flex; align-items: center; width: 100%; min-height: 20px; padding: 8px 0; gap: 0; background: transparent; } .stripe-steps__button::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--ar-border); transition: background-color 0.2s ease; } .stripe-steps__item.is-done .stripe-steps__button::before, .stripe-steps__item.is-current .stripe-steps__button::before { background: var(--ar-gold); } .stripe-steps__num, .stripe-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .stripe-section__title { font-size: 17px; } .stripe-section__desc { font-size: 13px; } .stripe-form__login { margin-bottom: 14px; font-size: 13px; } #stripe-checkout .form-row { margin-bottom: 12px; } #stripe-checkout label { margin-bottom: 6px; font-size: 12px; } #stripe-checkout input[type="text"], #stripe-checkout input[type="email"], #stripe-checkout input[type="tel"], #stripe-checkout input[type="password"], #stripe-checkout input[type="number"], #stripe-checkout select, #stripe-checkout textarea, #stripe-checkout .select2-container--default .select2-selection--single, #stripe-card-details .select2-container--default .select2-selection--single, .stripe-payment .asaas-cc-form-field input.input-text { height: 48px; padding: 0 14px; font-size: 16px; border-radius: 12px; } #stripe-checkout .wc_payment_method > label { align-items: flex-start; gap: 12px; min-height: 56px; padding: 16px; font-size: 15px; } .stripe-checkout .form-row-first, .stripe-checkout .form-row-last { width: 100%; float: none; margin-right: 0; } #stripe-checkout.is-order-pay .stripe-pay-privacy { margin: 8px 0 0; padding: 0 4px; font-size: 11px; color: var(--ar-text-muted); } #stripe-checkout.is-order-pay .stripe-pay-privacy a { color: var(--ar-navy-900); } #stripe-checkout.is-order-pay .stripe-form { flex: 1 1 auto; min-height: 0; } #stripe-checkout.is-order-pay .stripe-step__head { margin-bottom: 16px; } #stripe-checkout #payment ul.payment_methods, #stripe-checkout #payment .wc_payment_methods, #stripe-checkout .woocommerce-checkout-payment, .woocommerce-checkout #payment ul.payment_methods { border: 0 !important; border-bottom: 0 !important; padding: 0 !important; margin-bottom: 0 !important; background: transparent !important; } #stripe-checkout #payment .payment_box { border: 0 !important; padding: 0 !important; } .stripe-payment .wc_payment_method { border-radius: 16px; } .stripe-pay-method__check { margin-top: 2px; } .stripe-pay-method__title { font-size: 15px; } .stripe-pay-method__desc { font-size: 13px; } } @media (max-width: 620px) { #stripe-checkout .form-row { grid-column: 1 / -1 !important; } } /* Retry payment (order-pay) */ a.stripe-brand-back { text-decoration: none; color: inherit; } #stripe-checkout.is-order-pay #stripe-card-details { display: none; margin: 12px 0 4px; } #stripe-checkout.is-order-pay .stripe-payment.is-credit-open #stripe-card-details { display: block; } #stripe-checkout.is-order-pay .stripe-payment #place_order, #stripe-checkout.is-order-pay #payment .stripe-form__actions { position: static; width: 100%; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: normal; border: 0; } @media (min-width: 901px) { #stripe-checkout.is-order-pay .stripe-form__actions { margin-top: 18px; } } #stripe-checkout.is-order-pay #place_order.stripe-form__submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 24px; border-radius: var(--ar-radius-sm); background: var(--ar-navy-900); border: 1px solid var(--ar-navy-900); color: #fff; font-family: var(--ar-font); font-size: 14px; font-weight: 800; cursor: pointer; } #stripe-checkout.is-order-pay #place_order.stripe-form__submit:hover { background: var(--ar-navy-800); border-color: var(--ar-navy-800); color: #fff; } #stripe-checkout.is-order-pay .woocommerce-privacy-policy-text, #stripe-checkout.is-order-pay .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text { display: none; } #stripe-checkout.is-order-pay .stripe-pay-privacy { margin: 14px 0 0; font-size: 11px; font-weight: 500; line-height: 1.55; color: var(--ar-text-muted); text-align: center; } #stripe-checkout.is-order-pay .stripe-pay-privacy a { color: var(--ar-navy-900); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } #stripe-checkout.is-order-pay .stripe-pay-privacy a:hover { color: var(--ar-gold); } @media (max-width: 900px) { #stripe-checkout.is-order-pay .stripe-form-column > .stripe-form__actions { margin-top: 0; border-top: 1px solid var(--ar-border); box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06); background: var(--ar-canvas); } #stripe-checkout.is-order-pay #place_order.stripe-form__submit { height: 48px; min-height: 48px; width: 100%; font-size: 16px; border-radius: 14px; background: #059669; border-color: #059669; color: #fff; } #stripe-checkout.is-order-pay #place_order.stripe-form__submit:hover { background: #047857; border-color: #047857; color: #fff; } #stripe-checkout.is-order-pay .stripe-pay-privacy { margin: 8px 0 0; color: var(--ar-text-muted); } #stripe-checkout.is-order-pay .stripe-pay-privacy a { color: var(--ar-navy-900); } } /* ── Empty checkout (hub sem loja / carrinho) ── */ body.secovi-checkout-empty { overflow: auto !important; background: #f8f9fb !important; } html.secovi-checkout-html:has(body.secovi-checkout-empty), html.secovi-checkout-html:has(body.secovi-checkout-empty) body { height: auto; min-height: 100%; overflow: auto; background: #f8f9fb; } .stripe-checkout--empty { display: flex; align-items: center; justify-content: center; background: #f8f9fb; padding: 32px 16px; overflow: auto; } .stripe-empty { width: min(460px, 100%); text-align: center; } .stripe-empty__brand { display: flex; justify-content: center; margin: 0 0 8px; } .stripe-empty__brand img { display: block; height: 32px; width: auto; max-width: 180px; object-fit: contain; } .stripe-empty__visual { margin: 0 auto 8px; width: min(260px, 100%); } .stripe-empty__visual img { display: block; width: 100%; height: auto; } .stripe-empty__title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--ar-navy-900); } .stripe-empty__text { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--ar-text-body); } .stripe-empty__back { display: inline-flex; align-items: center; justify-content: center; margin-top: 24px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ar-navy-900); color: #fff !important; font-family: inherit; font-size: 14px; font-weight: 800; text-decoration: none !important; cursor: pointer; } .stripe-empty__back:hover { background: var(--ar-navy-950); } @media (max-width: 767px) { .stripe-checkout--empty { align-items: flex-start; padding: 20px 10px 32px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); } .stripe-empty { width: 100%; padding-top: 12px; } .stripe-empty__visual { width: min(220px, 80%); } .stripe-empty__title { font-size: 20px; } .stripe-empty__back { width: 100%; } }