/** Shopify CDN: Minification failed Line 226:13 Expected identifier but found whitespace Line 226:15 Unexpected "{" Line 226:25 Expected ":" Line 227:8 Expected identifier but found whitespace Line 227:10 Unexpected "{" Line 227:20 Expected ":" Line 248:13 Expected identifier but found whitespace Line 248:15 Unexpected "{" Line 248:25 Expected ":" Line 249:8 Expected identifier but found whitespace ... and 13 more hidden warnings **/ /** * assets/myaiga.css * --------------------------------------------------------------------------- * myAiga✓ — component styles. * * Colours/sizing come from CSS custom properties set inline by * snippets/myaiga-design-tokens.liquid (rendered once in theme.liquid ) * so merchants can restyle from Theme Settings without editing CSS. * * Visibility rule (req #13 — never show guests as members): * Elements with [data-myaiga-view="member"] are hidden by default and * only revealed once . * Elements with [data-myaiga-view="non-member"] are shown by default and * hidden once membership is confirmed. * This means a logged-out visitor / JS-disabled browser always sees the * safe non-member state first (graceful degradation, req #32). * --------------------------------------------------------------------------- */ :root { --myaiga-primary: #d11a29; --myaiga-secondary: #111111; --myaiga-savings: #d11a29; --myaiga-badge-text: #ffffff; --myaiga-badge-bg: #d11a29; --myaiga-radius: 6px; --myaiga-border: var(--border-color, #ebebeb); --myaiga-muted-bg: #f7f7f7; } /* ---- Visibility gating -------------------------------------------------- */ [data-myaiga-view="member"] { display: none; } [data-myaiga-view="non-member"] { display: revert; } html[data-myaiga-status="member"] [data-myaiga-view="member"] { display: revert; } html[data-myaiga-status="member"] [data-myaiga-view="non-member"] { display: none; } /* pending/expired: treat like non-member for pricing, but status text differs */ [data-myaiga-status-text] { display: none; } html[data-myaiga-status="member"] [data-myaiga-status-text="member"] { display: revert; } html[data-myaiga-status="non_member"] [data-myaiga-status-text="non_member"], html:not([data-myaiga-status]) [data-myaiga-status-text="non_member"] { display: revert; } html[data-myaiga-status="expired"] [data-myaiga-status-text="expired"] { display: revert; } html[data-myaiga-status="pending"] [data-myaiga-status-text="pending"] { display: revert; } /* ---- Badge --------------------------------------------------------------- */ .myaiga-badge { display: inline-flex; align-items: center; gap: var(--myaiga-badge-gap, 6px); max-width: 100%; padding: var(--myaiga-badge-padding-y, 4px) var(--myaiga-badge-padding-x, 10px); border-radius: var(--myaiga-badge-radius, var(--myaiga-radius)); background: var(--myaiga-badge-bg); color: var(--myaiga-badge-text); font-family: var(--myaiga-badge-font-family, inherit); font-size: var(--myaiga-badge-font-size, 12px); font-weight: var(--myaiga-badge-font-weight, 700); letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: var(--myaiga-badge-border-width, 0) solid var(--myaiga-badge-border-color, transparent); } .myaiga-badge--shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04); } /* Style variants (settings.myaiga_badge_style) */ .myaiga-badge--outline { background: #fff; color: var(--myaiga-secondary); } .myaiga-badge--solid { background: var(--myaiga-badge-bg); color: var(--myaiga-badge-text); border-width: 0; } .myaiga-badge--ribbon { background: #fff; color: var(--myaiga-secondary); border-radius: 3px; position: relative; } .myaiga-badge--ribbon::after { content: ""; position: absolute; top: 100%; right: 6px; border-width: 4px 4px 0 4px; border-style: solid; border-color: var(--myaiga-badge-border-color, var(--myaiga-primary)) transparent transparent transparent; } .myaiga-badge__icon, .myaiga-badge__image { width: 14px; height: 14px; object-fit: contain; flex: none; border-radius: 2px; } .myaiga-badge__text { overflow: hidden; text-overflow: ellipsis; } .myaiga-badge__check-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 1px 5px; border-radius: 3px; background: var(--myaiga-badge-check-bg, #111); color: var(--myaiga-badge-check-color, #fff); font-size: 0.85em; font-weight: 800; line-height: 1.5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Placement on product-card media */ .myaiga-badge-slot { position: absolute; top: 10px; z-index: 3; max-width: calc(100% - 20px); pointer-events: none; } .myaiga-badge-slot--start { left: 10px; } .myaiga-badge-slot--end { right: 10px; } .myaiga-badge-slot .myaiga-badge { pointer-events: auto; } .myaiga-badge-slot--inline { position: static; display: flex; justify-content: var(--myaiga-badge-alignment, start); max-width: 100%; margin: var(--myaiga-badge-margin, 6px) 0; pointer-events: auto; } /* ---- Price block ---------------------------------------------------------- */ .myaiga-price { display: flex; flex-direction: column; align-items: var(--myaiga-price-alignment, start); gap: var(--myaiga-price-row-gap, 2px); margin: var(--myaiga-price-margin-top, 8px) 0 var(--myaiga-price-margin-bottom, 8px); padding: var(--myaiga-price-padding-y, 0) var(--myaiga-price-padding-x, 0); max-width: 100%; font-family: var(--myaiga-price-font-family, inherit); text-align: var(--myaiga-price-alignment, start); } .myaiga-price--highlight { background: var(--myaiga-muted-bg); border: 1px solid var(--myaiga-border); border-radius: var(--myaiga-radius); } .myaiga-price__row { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: var(--myaiga-price-alignment, start); width: 100%; gap: 6px; } .myaiga-price__member-label { font-weight: 700; color: var(--myaiga-primary); } .myaiga-price__member-value { font-weight: var(--myaiga-price-font-weight, 700); font-size: var(--myaiga-price-font-size, 18px); color: var(--myaiga-secondary); } .myaiga-price__member-value--stacked { color: var(--myaiga-price-value-color, var(--myaiga-primary)); font-size: calc(var(--myaiga-price-font-size, 18px) * 1.15); } .myaiga-price__row--stacked-label { margin-top: 2px; } .myaiga-price__row--stacked-label .myaiga-price__member-label { color: var(--myaiga-primary); font-weight: 700; font-size: 13px; text-transform: lowercase; } .myaiga-price__nonmember-label { font-size: var(--myaiga-was-price-font-size, 12px); font-weight: var(--myaiga-was-price-font-weight, 400); color: #6b6b6b; } .myaiga-price__nonmember-value { text-decoration: line-through; opacity: 0.7; font-size: var(--myaiga-was-price-font-size, 12px); font-weight: var(--myaiga-was-price-font-weight, 400); } .myaiga-price__row--was { gap: 4px 6px; line-height: 1.3; } /* ========================================================= myAiga Price Info Tooltip ========================================================= */ .myaiga-price__info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; background: {{ settings.myaiga_tooltip_icon_background | default: '#1D4ED8' }}; color: {{ settings.myaiga_tooltip_icon_color | default: '#FFFFFF' }}; font-size: 12px; font-weight: 700; cursor: pointer; z-index: 100; } /* Popup background box */ .myaiga-price__info-icon::after { content: attr(data-tooltip); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 450px; padding: 20px 24px; background: {{ settings.myaiga_tooltip_background | default: '#111827' }}; color: {{ settings.myaiga_tooltip_text_color | default: '#FFFFFF' }}; border-radius: {{ settings.myaiga_tooltip_border_radius | default: 7 }}px; font-size: 14px; line-height: 1.6; font-weight: 400; text-align: center; white-space: normal; overflow-wrap: break-word; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.30); opacity: 0; visibility: hidden; pointer-events: none; z-index: 999999; transition: opacity 0.2s ease, visibility 0.2s ease; } /* Display popup */ .myaiga-price__info-icon:hover::after, .myaiga-price__info-icon:focus::after { opacity: 1; visibility: visible; } /* Icon hover */ .myaiga-price__info-icon:hover, .myaiga-price__info-icon:focus { background: {{ settings.myaiga_tooltip_icon_hover_background | default: '#0F3CA8' }}; color: {{ settings.myaiga_tooltip_icon_hover_color | default: '#FFFFFF' }}; } /* Mobile */ @media screen and (max-width: 749px) { .myaiga-price__info-icon::after { width: calc(100% - 32px); max-width: 380px; padding: 18px 20px; font-size: 13px; } } .myaiga-price__info-icon:hover::after, .myaiga-price__info-icon:focus::after { transform: translateY(0); } .myaiga-price__info-icon::before { left: auto; right: 3px; transform: none; } } .myaiga-price__savings { font-size: 12px; font-weight: 600; color: var(--myaiga-savings); } .myaiga-price__confirmed { font-size: 12px; font-weight: 600; color: var(--myaiga-primary); display: flex; align-items: center; gap: 4px; } .myaiga-price__upsell { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .myaiga-price__upsell a, .myaiga-price__upsell button { color: var(--myaiga-primary); text-decoration: underline; background: none; border: none; padding: 0; font: inherit; cursor: pointer; } /* Card-scale variant (smaller footprint, no layout shift) */ .myaiga-price--card { margin: 4px 0; font-size: 12px; } .myaiga-price--totals { margin: 6px 0 0; font-size: 12px; align-items: flex-end; text-align: right; } .myaiga-price--totals .myaiga-price__row { justify-content: flex-end; } .myaiga-price--totals .myaiga-price__member-value { font-size: 15px; } .myaiga-price--card .myaiga-price__member-value { font-size: calc(var(--myaiga-price-font-size, 18px) - 2px); } /* ---- Exclusive-discount banner (bottom of product card) ------------------- */ .myaiga-exclusive-banner { display: flex; align-items: center; justify-content: var(--myaiga-banner-alignment, center); gap: 6px; flex-wrap: wrap; padding: var(--myaiga-banner-padding-y, 8px) 10px; background: var(--myaiga-banner-bg); color: var(--myaiga-banner-text-color); font-family: var(--myaiga-banner-font-family, inherit); font-size: var(--myaiga-banner-font-size, 12px); font-weight: 600; border-radius: var(--myaiga-banner-radius, 0 0 6px 6px); text-align: center; margin-top: var(--myaiga-banner-margin-top, 0); } .myaiga-exclusive-banner .myaiga-badge__check-chip { margin-left: 2px; } .myaiga-exclusive-banner__chip { background: var(--myaiga-banner-check-bg, #111); color: var(--myaiga-banner-check-color, #fff); } .myaiga-exclusive-banner--solid { font-weight: 700; letter-spacing: 0.01em; } .myaiga-exclusive-banner--shadow { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05); } .myaiga-exclusive-banner--full-bleed { width: calc(100% + (var(--myaiga-card-padding, 15px) * 2)); margin-left: calc(var(--myaiga-card-padding, 15px) * -1); margin-right: calc(var(--myaiga-card-padding, 15px) * -1); margin-top: var(--myaiga-banner-margin-top, 12px); margin-bottom: calc(var(--myaiga-card-padding, 15px) * -1); } /* ---- Button --------------------------------------------------------------- */ .myaiga-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--myaiga-radius); background: var(--myaiga-primary); color: #fff; font-weight: 600; font-size: 13px; text-decoration: none; border: 1px solid var(--myaiga-primary); cursor: pointer; max-width: 100%; } .myaiga-button:hover { opacity: 0.9; } .myaiga-button:focus-visible, .myaiga-badge:focus-visible { outline: 2px solid var(--myaiga-primary); outline-offset: 2px; } .myaiga-button--outline { background: transparent; color: var(--myaiga-primary); } /* ---- Gate (member-exclusive message) --------------------------------------- */ .myaiga-gate { padding: 14px 16px; border: 1px solid var(--myaiga-border); border-radius: var(--myaiga-radius); text-align: left; } .myaiga-gate__message { margin: 0 0 10px; font-weight: 500; } /* ---- Cart banner ------------------------------------------------------------ */ .myaiga-cart-blocks { display: flex; flex-direction: column; } .myaiga-cart-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: var(--myaiga-status-box-padding, 20px); border-radius: var(--myaiga-status-box-radius, var(--myaiga-radius)); background: var(--myaiga-status-box-bg, var(--myaiga-muted-bg)); color: var(--myaiga-status-box-text-color, inherit); margin: var(--myaiga-status-box-margin-top, 12px) 0 var(--myaiga-status-box-margin-bottom, 0); } .myaiga-cart-banner--accent { border-left: var(--myaiga-status-box-accent-width, 4px) solid var(--myaiga-status-box-accent-color, var(--myaiga-primary)); } .myaiga-cart-banner--shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .myaiga-cart-banner__icon { display: inline-flex; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; flex: none; } .myaiga-icon--lock::before { content: "🔒"; font-size: 14px; } .myaiga-icon--star::before { content: "⭐"; font-size: 14px; } .myaiga-icon--tag::before { content: "🏷️"; font-size: 14px; } .myaiga-icon--gift::before { content: "🎁"; font-size: 14px; } .myaiga-icon--calendar::before { content: "📅"; font-size: 14px; } .myaiga-icon--person::before { content: "👤"; font-size: 14px; } .myaiga-icon--shield::before { content: "🛡️"; font-size: 14px; } .myaiga-icon--shield-dollar::before { content: "🛡️"; font-size: 14px; } .myaiga-icon--refresh::before { content: "🔄"; font-size: 14px; } .myaiga-icon--headset::before { content: "🎧"; font-size: 14px; } .myaiga-icon--check::before { content: "✓"; font-size: 14px; } .myaiga-icon--crown::before { content: "👑"; font-size: 14px; } .myaiga-icon--diamond::before { content: "💎"; font-size: 14px; } .myaiga-icon--heart::before { content: "❤️"; font-size: 14px; } .myaiga-icon--rocket::before { content: "🚀"; font-size: 14px; } .myaiga-icon--medal::before { content: "🏅"; font-size: 14px; } .myaiga-icon--sparkle::before { content: "✨"; font-size: 14px; } .myaiga-icon--money::before { content: "💰"; font-size: 14px; } .myaiga-icon--card::before { content: "💳"; font-size: 14px; } .myaiga-icon--truck::before { content: "🚚"; font-size: 14px; } .myaiga-icon--bell::before { content: "🔔"; font-size: 14px; } .myaiga-icon--handshake::before { content: "🤝"; font-size: 14px; } .myaiga-icon--target::before { content: "🎯"; font-size: 14px; } .myaiga-icon--flame::before { content: "🔥"; font-size: 14px; } .myaiga-icon--thumbsup::before { content: "👍"; font-size: 14px; } .myaiga-icon--globe::before { content: "🌐"; font-size: 14px; } .myaiga-icon-circle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--myaiga-status-box-icon-circle-bg, #fbe1e1); } .myaiga-icon-circle .myaiga-icon { margin-right: 0; } .myaiga-icon-circle .myaiga-icon::before { font-size: 20px; } .myaiga-icon-circle--small { width: 36px; height: 36px; } .myaiga-icon-circle--small .myaiga-icon::before { font-size: 16px; } .myaiga-icon-circle--plan { width: 40px; height: 40px; background: var(--myaiga-status-box-icon-circle-bg, #fbe1e1); } .myaiga-icon-circle--plan .myaiga-icon::before { font-size: 16px; } .myaiga-icon-circle--white { background: #fff; } .myaiga-icon-circle--white .myaiga-icon--check::before { color: var(--myaiga-nonmember-savings-solid-bg, var(--myaiga-primary)); font-weight: 800; } .myaiga-cart-banner__status { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .myaiga-cart-banner__row { display: flex; align-items: flex-start; gap: 14px; } .myaiga-cart-banner__text { min-width: 0; } .myaiga-cart-banner__title { font-weight: 700; font-size: var(--myaiga-status-box-title-size, 15px); display: flex; align-items: center; gap: 6px; } .myaiga-cart-banner__title-accent, .myaiga-cart-banner__amount-accent { color: var(--myaiga-status-box-accent-color, var(--myaiga-primary)); } .myaiga-cart-banner__subtitle { font-size: 13px; color: #666; margin: 4px 0 8px; font-weight: 400; } .myaiga-cart-banner__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--myaiga-status-box-bullet-size, 13px); } .myaiga-cart-banner__list li { display: flex; align-items: center; gap: 6px; } .myaiga-cart-banner__cta { flex: none; } .myaiga-savings-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; padding: 6px 0; color: var(--myaiga-savings); text-decoration: none; } a.myaiga-savings-line { cursor: pointer; transition: opacity 0.12s ease; } a.myaiga-savings-line:hover { opacity: 0.92; } .myaiga-savings-line--nonmember { font-weight: 800; color: var(--myaiga-nonmember-savings-color, var(--myaiga-primary)); background: var(--myaiga-nonmember-savings-bg, #fff); border-radius: var(--myaiga-nonmember-savings-radius, var(--myaiga-radius)); padding: var(--myaiga-nonmember-savings-padding-y, 10px) var(--myaiga-nonmember-savings-padding-x, 16px); margin: var(--myaiga-nonmember-savings-margin-top, 12px) 0 var(--myaiga-nonmember-savings-margin-bottom, 0); } .myaiga-savings-line--plain { font-size: var(--myaiga-nonmember-savings-font-size, 18px); } .myaiga-savings-line--card { align-items: center; box-shadow: 0 2px 10px rgba(209, 26, 41, 0.08); transition: transform 0.12s ease, box-shadow 0.12s ease; } .myaiga-savings-line--card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(209, 26, 41, 0.14); } .myaiga-savings-line--solid { background: var(--myaiga-nonmember-savings-solid-bg, var(--myaiga-primary)); color: var(--myaiga-nonmember-savings-solid-text-color, #fff); display: flex; align-items: center; gap: 14px; } .myaiga-savings-line--solid .myaiga-savings-line__amount { color: var(--myaiga-nonmember-savings-solid-text-color, #fff); font-size: calc(var(--myaiga-nonmember-savings-font-size, 20px) * 1.2); margin-left: auto; } .myaiga-savings-line__text { display: flex; flex-direction: column; gap: 2px; } .myaiga-savings-line--solid .myaiga-savings-line__label { font-size: 16px; font-weight: 700; } .myaiga-savings-line__subtitle { font-size: 12px; font-weight: 400; opacity: 0.9; } .myaiga-savings-line__label { display: flex; align-items: center; gap: 8px; font-size: 14px; } .myaiga-savings-line__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--myaiga-nonmember-savings-color, var(--myaiga-primary)); color: #fff; font-size: 12px; flex: none; } .myaiga-savings-line__amount { display: flex; align-items: center; gap: 6px; font-size: var(--myaiga-nonmember-savings-font-size, 20px); font-weight: 800; } .myaiga-savings-line__arrow { font-size: 16px; opacity: 0.6; } /* ---- Member savings summary (expandable) --------------------------------- */ .myaiga-savings-summary { border-radius: var(--myaiga-radius); background: var(--myaiga-savings-summary-bg, #ffc107); color: var(--myaiga-savings-summary-text-color, #1a1a1a); margin: 10px 0; overflow: hidden; } .myaiga-savings-summary__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-align: left; } .myaiga-savings-summary__check { flex: none; color: #1a7a2e; font-weight: 800; } .myaiga-savings-summary__title { flex: 1; font-weight: 700; font-size: 14px; } .myaiga-savings-summary__amount { color: var(--myaiga-savings-summary-amount-color, var(--myaiga-primary)); } .myaiga-savings-summary__chevron { flex: none; transition: transform 0.15s ease; } .myaiga-savings-summary.is-expanded .myaiga-savings-summary__chevron { transform: rotate(180deg); } .myaiga-savings-summary__breakdown { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: -2px; padding-top: 10px; } .myaiga-savings-summary__breakdown p { margin: 0; font-size: 13px; } .myaiga-handling-fee { font-size: 12px; display: flex; align-items: center; gap: 6px; } .myaiga-handling-fee[data-myaiga-fee-waived] { color: var(--myaiga-primary); } /* ---- Checkout note ------------------------------------------------------- */ .myaiga-checkout-note { padding: 10px 14px; border-radius: var(--myaiga-radius); background: var(--myaiga-muted-bg); font-size: 12px; margin: 10px 0; display: flex; align-items: center; gap: 6px; } /* ---- Account widget -------------------------------------------------------- */ .myaiga-account-widget { padding: 20px; border: 1px solid var(--myaiga-border); border-radius: var(--myaiga-radius); margin-bottom: 24px; } .myaiga-account-widget__header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .myaiga-account-widget__title { font-weight: 700; font-size: 16px; margin: 0; } .myaiga-account-widget__benefits { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .myaiga-account-widget__benefits li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .myaiga-account-widget__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .myaiga-account-widget__rewards { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--myaiga-border); font-size: 13px; } /* ---- Nav item -------------------------------------------------------------- */ .myaiga-nav-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; } .myaiga-nav-item__icon { width: 16px; height: 16px; flex: none; } /* ---- Debug panel ------------------------------------------------------------ */ .myaiga-debug { position: fixed; bottom: 12px; left: 12px; z-index: 9999; max-width: min(360px, calc(100vw - 24px)); max-height: 50vh; overflow: auto; background: #111; color: #0f0; font: 11px/1.5 monospace; padding: 10px 12px; border-radius: 6px; opacity: 0.92; } /* ---- Responsive ------------------------------------------------------------- */ @media screen and (max-width: 749px) { .myaiga-cart-banner { flex-direction: column; align-items: stretch; } .myaiga-cart-banner__cta { width: 100%; } .myaiga-button { width: 100%; } .myaiga-price__row { row-gap: 2px; } .myaiga-exclusive-banner { font-size: calc(var(--myaiga-banner-font-size, 12px) - 1px); } } /* Never let a badge overlap/clip the card image or wrap oddly */ .myaiga-badge-slot, .myaiga-badge { max-width: 100%; } /* Screen-reader only utility, reused from theme where available */ .myaiga-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Cart plan selector (radio style) ----------------------------------- */ .myaiga-plan-selector { border: 1px solid var(--myaiga-border); border-radius: var(--myaiga-radius); margin: 16px 0; overflow: hidden; background: #fff; } .myaiga-plan-selector__head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--myaiga-border); } .myaiga-plan-selector__heading { font-weight: 700; font-size: 16px; margin: 0; color: var(--myaiga-secondary); } .myaiga-plan-selector__subheading { font-size: 13px; color: #777; margin: 2px 0 0; } .myaiga-member-signin { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-top: 9px; padding: 7px 11px; border: 1px solid var(--myaiga-primary); border-radius: 7px; background: #fff; color: var(--myaiga-primary); text-decoration: none; font-size: 12px; line-height: 1.3; transition: opacity .15s ease, background-color .15s ease; } .myaiga-member-signin:hover { background: var(--myaiga-status-box-icon-circle-bg, #fbe1e1); opacity: .92; } .myaiga-member-signin__prompt { color: var(--myaiga-secondary); font-weight: 600; } .myaiga-member-signin__action { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } @media screen and (max-width: 520px) { .myaiga-member-signin { width: 100%; justify-content: center; text-align: center; } } .myaiga-radio-options { display: flex; flex-direction: column; } .myaiga-radio-option { display: flex; align-items: flex-start; gap: var(--myaiga-plan-card-gap, 12px); padding: var(--myaiga-plan-card-padding, 18px); cursor: pointer; border-bottom: 1px solid var(--myaiga-border); background: #fff; position: relative; } .myaiga-radio-option:last-of-type { border-bottom: none; } .myaiga-radio-option.is-selected { background: var(--myaiga-status-box-icon-circle-bg, #fbe1e1); box-shadow: inset 0 0 0 1px var(--myaiga-primary); } .myaiga-radio-option--skip { background: #fff; } .myaiga-radio-option__input { margin-top: 10px; flex: none; width: 20px; height: 20px; accent-color: var(--myaiga-primary); } .myaiga-radio-option__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .myaiga-radio-option__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .myaiga-radio-option__label { font-weight: 700; font-size: 15px; color: var(--myaiga-secondary); } .myaiga-radio-option__badge { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--myaiga-primary); border: 1px solid var(--myaiga-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; flex: none; } .myaiga-radio-option__subtext { font-size: 12px; color: #777; } .myaiga-radio-option__subtext--warn { color: var(--myaiga-primary); font-weight: 600; } .myaiga-radio-option__description { display: block; font-size: 12px; color: #555; line-height: 1.4; margin-top: 2px; } .myaiga-radio-option__inline-benefits { display: flex; flex-wrap: wrap; row-gap: var(--myaiga-plan-benefits-row-gap, 4px); column-gap: var(--myaiga-plan-benefits-column-gap, 12px); font-size: 12px; font-weight: 600; color: var(--myaiga-secondary); margin-top: var(--myaiga-plan-benefits-margin-top, 2px); } .myaiga-radio-option__inline-benefits span { display: inline-flex; align-items: center; gap: var(--myaiga-plan-benefits-icon-gap, 6px); } .myaiga-radio-option__inline-benefits span span:first-child { color: var(--myaiga-primary); } .myaiga-radio-option__bullets { list-style: none; margin: var(--myaiga-plan-benefits-margin-top, 2px) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--myaiga-plan-benefits-row-gap, 4px); font-size: 13px; } .myaiga-radio-option__bullets li { display: flex; align-items: flex-start; gap: var(--myaiga-plan-benefits-icon-gap, 6px); } .myaiga-radio-option__bullets li span:first-child { color: var(--myaiga-primary); flex: none; } .myaiga-radio-option__bullets--computed { margin-top: 6px; } .myaiga-radio-option__trial { font-size: 12px; font-weight: 700; color: var(--myaiga-secondary); margin: 4px 0 0; line-height: 1.5; } .myaiga-radio-option__terms { font-size: 11px; color: #777; margin: 0; line-height: 1.5; } .myaiga-radio-option__terms a { color: inherit; text-decoration: underline; } .myaiga-radio-option__pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; } .myaiga-radio-option__price { font-weight: 800; font-size: 20px; color: var(--myaiga-price-value-color, var(--myaiga-primary)); white-space: nowrap; } .myaiga-radio-option__period { font-weight: 400; font-size: 12px; color: #777; } .myaiga-radio-option__equivalent { font-size: 11px; color: #777; white-space: nowrap; } .myaiga-radio-option__chevron { flex: none; font-size: 16px; color: #999; margin-top: 8px; } /* ---- Trust badges footer ------------------------------------------------- */ .myaiga-trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px; border-top: 1px solid var(--myaiga-border); } .myaiga-trust-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .myaiga-trust-badge .myaiga-icon::before { font-size: 18px; } .myaiga-trust-badge__text { display: flex; flex-direction: column; font-size: 10px; line-height: 1.3; } .myaiga-trust-badge__text strong { font-weight: 700; color: var(--myaiga-secondary); } .myaiga-trust-badge__text span { color: #777; } @media screen and (max-width: 520px) { .myaiga-trust-badges { grid-template-columns: repeat(2, 1fr); } .myaiga-radio-option__pricing { align-items: flex-start; text-align: left; margin-top: 4px; } .myaiga-radio-option { flex-wrap: wrap; } } /* ---- Cart plan selector: dropdown style --------------------------------- */ .myaiga-plan-dropdown { width: 100%; padding: 12px 36px 12px 14px; border: none; border-bottom: 1px solid var(--myaiga-border); font-size: 14px; font-weight: 600; background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; cursor: pointer; } .myaiga-plan-dropdown::-ms-expand { display: none; } .myaiga-plan-dropdown__details { padding: 16px; } .myaiga-plan-dropdown__details:empty { display: none; } /* ---- Cart subtotal savings highlight ------------------------------------ */ .myaiga-subtotal-highlight { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--myaiga-radius); background: var(--myaiga-subtotal-highlight-bg, #fdecea); color: var(--myaiga-subtotal-highlight-text-color, var(--myaiga-primary)); font-weight: 700; font-size: 13px; margin: 10px 0; } .myaiga-subtotal-highlight--expandable { display: block; padding: 0; overflow: hidden; } .myaiga-subtotal-highlight__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: inherit; text-align: left; } .myaiga-subtotal-highlight__right { display: flex; align-items: center; gap: 8px; flex: none; } .myaiga-subtotal-highlight__chevron { transition: transform 0.15s ease; font-size: 12px; } .myaiga-subtotal-highlight.is-expanded .myaiga-subtotal-highlight__chevron { transform: rotate(180deg); } .myaiga-subtotal-highlight__breakdown { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: -2px; background: var(--myaiga-subtotal-breakdown-bg, rgba(255, 255, 255, 0.5)); } .myaiga-subtotal-highlight__breakdown p { margin: 0; font-size: 12px; font-weight: 600; padding-left: 10px; border-left: 2px solid var(--myaiga-primary); } .myaiga-subtotal-highlight__breakdown p.myaiga-subtotal-highlight__note { font-weight: 700; color: var(--myaiga-primary); } /* V27: Service Fee member display */ .myaiga-price [data-myaiga-service-fee] .myaiga-price__member-value, [data-myaiga-service-fee] .myaiga-price__member-value { white-space: nowrap; }