/*
* TAD Meet — Register Here button.
*
* Figma reference: node 547:3459 — pill-shaped teal CTA used on the single
* product page to trigger the URL-driven add-to-cart flow.
*
* Tokens (locked to design — not pulled from theme-tokens.css since the
* pixel-perfect spec is teal #00abb3 with the exact pill geometry):
* - background #00abb3
* - radius 62px (full pill)
* - padding 16px 33px
* - typography Rethink Sans Medium 18px, tracking -0.36px
* - gap label/icon 16px
*
* Hover/focus: subtle darken on the background plus an accessible focus ring
* so keyboard users always see the active control.
*/
.tad-meet-register-btn {
/* Layout: inline-flex so the chevron sits next to the label with a
proper gap; align-items: center keeps the SVG visually balanced. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
/* Shape — pill from Figma. !important on the visible props because
Astra / Hello Elementor Child + Elementor button overrides ship
higher-specificity rules (`.elementor-button`, `body.woocommerce a`)
that win on color, blanking the label. */
padding: 16px 33px;
border: 0;
border-radius: 62px;
background-color: #00abb3 !important;
color: #ffffff !important;
/* Typography — Rethink Sans Medium, exact tracking from spec. */
font-family: 'Rethink Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.36px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
/* Make sure no theme underline / outline leaks in. */
box-shadow: none;
outline: none;
}
.tad-meet-register-btn:hover,
.tad-meet-register-btn:focus,
.tad-meet-register-btn:visited {
/* Discreet darken (~6% black overlay). */
background-color: #009ca3 !important;
color: #ffffff !important;
text-decoration: none;
}
.tad-meet-register-btn__label,
.tad-meet-register-btn__label *,
.tad-meet-register-btn .tad-meet-register-btn__label {
/* Theme rules sometimes target `a > span` directly — force inheritance. */
color: #ffffff !important;
}
.tad-meet-register-btn__icon,
.tad-meet-register-btn__icon * {
color: #ffffff !important;
stroke: #ffffff !important;
}
.tad-meet-register-btn:focus-visible {
/* Accessible focus ring — white inner + teal outer so it's visible on
both light and dark backgrounds. */
outline: 2px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 171, 179, 0.45);
}
.tad-meet-register-btn:active {
background-color: #008c93;
transform: translateY(1px);
}
.tad-meet-register-btn__label {
/* Label inherits font from the anchor; just ensure it sits inline. */
display: inline-block;
}
.tad-meet-register-btn__icon {
/* Locked 16×16 chevron right next to the label. */
width: 16px;
height: 16px;
flex: 0 0 16px;
color: inherit;
}
/* ────────────────────────────────────────────────────────────────────
Cart "Added to cart" notice — wraps the native .woocommerce-message
emitted by wc_print_notices() so the success banner adopts the site's
card look (white background, rounded corners, soft shadow, teal accent)
instead of the default green-checkmark WC styling.
──────────────────────────────────────────────────────────────────── */
.tad-meet-cart-notice {
margin: 24px 0 32px;
}
.tad-meet-cart-notice .woocommerce-message,
.tad-meet-cart-notice ul.woocommerce-message,
.tad-meet-cart-notice .woocommerce-error,
.tad-meet-cart-notice .woocommerce-info {
/* Reset native WC banner (top border, green check, list bullets) and
repaint as a card. `!important` on the visual props because Astra /
Hello Elementor Child ship higher-specificity rules
(`body.woocommerce ul.woocommerce-message`) that win the cascade. */
list-style: none !important;
margin: 0 0 16px !important;
padding: 20px 24px 20px 60px !important;
background: #ffffff !important;
color: #1B3A4B !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
font-family: 'Rethink Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.45;
position: relative;
}
.tad-meet-cart-notice .woocommerce-message::before,
.tad-meet-cart-notice ul.woocommerce-message::before {
/* Replace WC's default checkmark with a teal SVG check that matches the
site identity. Positioned in the left padding gutter. */
content: '';
position: absolute;
top: 50%;
left: 22px;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
color: transparent;
font-size: 0;
}
.tad-meet-cart-notice .woocommerce-error::before,
.tad-meet-cart-notice ul.woocommerce-error::before {
/* Danger-red variant for error banners — same geometry, different
glyph + color. */
content: '';
position: absolute;
top: 50%;
left: 22px;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}
.tad-meet-cart-notice .woocommerce-message a,
.tad-meet-cart-notice .woocommerce-error a,
.tad-meet-cart-notice .woocommerce-info a {
color: #00abb3;
text-decoration: underline;
font-weight: 600;
}
.tad-meet-cart-notice .woocommerce-message a:hover,
.tad-meet-cart-notice .woocommerce-error a:hover,
.tad-meet-cart-notice .woocommerce-info a:hover {
color: #009ca3;
}
/* Hide the .button (usually "View cart") if any — the notice doesn't
need both inline link + button text duplicating the action. Themes
can override by re-declaring display:inline-block. */
.tad-meet-cart-notice .woocommerce-message .button {
display: none;
}
/* Modal do register button (AJAX flow) */
body.tad-meet-register-modal-open { overflow: hidden; }
.tad-meet-register-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: tad-meet-modal-in 0.2s ease-out;
}
.tad-meet-register-modal__backdrop {
position: absolute; inset: 0;
background: rgba(35, 52, 84, 0.55);
}
.tad-meet-register-modal__card {
position: relative;
background: #ffffff;
color: #233454;
max-width: 440px;
width: 100%;
border-radius: 14px;
padding: 40px 32px 32px;
text-align: center;
box-shadow: 0 20px 60px rgba(35, 52, 84, 0.35);
font-family: "Rethink Sans", Georgia, "Times New Roman", Arial, sans-serif;
}
.tad-meet-register-modal__close {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
border: 0; background: transparent;
font-size: 24px; line-height: 1; color: #233454; opacity: 0.6;
cursor: pointer; border-radius: 8px;
}
.tad-meet-register-modal__close:hover { opacity: 1; background: rgba(35,52,84,0.06); }
.tad-meet-register-modal__icon {
width: 56px; height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
background: #00abb3;
color: #ffffff;
display: flex; align-items: center; justify-content: center;
}
.tad-meet-register-modal__title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
color: #233454;
letter-spacing: -0.3px;
}
.tad-meet-register-modal__product {
margin: 0 0 4px;
font-size: 16px;
font-weight: 600;
color: #233454;
}
.tad-meet-register-modal__when {
margin: 0 0 24px;
font-size: 14px;
color: #233454;
opacity: 0.7;
}
.tad-meet-register-modal__actions {
display: flex; flex-direction: column; gap: 10px;
}
/* Elementor / theme injects :visited + :focus + :hover state colors on
generic /