/*
 * My Account: Subscriptions tab (cards, welcome banner, empty state) and the "Manage" sections of the Subscriptions and Memberships tabs,
 * with their confirmation dialog and "Manage" menu (account-self-service.js). Moved out of the inline <style> blocks of
 * SubscriptionsCustomizationService / MemberDashboardService.
 */
.flexwoomemberships-welcome-banner { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 24px; margin-bottom: 24px; }
.flexwoomemberships-welcome-banner h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: #0f172a; }
.flexwoomemberships-welcome-banner p { margin: 0; font-size: 14px; color: #475467; line-height: 1.5; }
.flexwoomemberships-empty-state-wrap { padding: 24px 0; }
.flexwoomemberships-empty-state-notice { font-size: 15px; color: #475467; margin-bottom: 16px; }

.flexwoomemberships-as-intro { color: #475467; font-size: 14px; margin: 0 0 20px; }
.flexwoomemberships-as-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 0 0 24px; }
.flexwoomemberships-as-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e7ec; border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .2s ease, transform .2s ease; }
.flexwoomemberships-as-card:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .08); transform: translateY(-2px); }
.flexwoomemberships-as-card-top { align-items: flex-start; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.flexwoomemberships-as-card-name { font-size: 17px; font-weight: 600; margin: 0; color: #101828; }
.flexwoomemberships-as-card-number { color: #98a2b3; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 14px; }
.flexwoomemberships-as-badge { border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 4px 11px; white-space: nowrap; }
.flexwoomemberships-as-card-meta { border-top: 1px solid #f0f2f5; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.flexwoomemberships-as-card-meta-row { align-items: center; display: flex; font-size: 13px; justify-content: space-between; gap: 12px; }
.flexwoomemberships-as-card-meta-label { color: #98a2b3; }
.flexwoomemberships-as-card-meta-value { color: #344054; font-weight: 500; text-align: right; }
.flexwoomemberships-as-card-total { color: #101828; font-size: 13px; font-weight: 600; }
.flexwoomemberships-as-card-action { margin: 16px 0 0; }

.flexwoomemberships-manage-section { background: #fff; border: 1px solid #e4e7ec; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin: 0 0 24px; padding: 24px; }
.flexwoomemberships-manage-heading { color: #101828; font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.flexwoomemberships-manage-subtitle { color: #667085; font-size: 13px; margin: 0 0 18px; }
.flexwoomemberships-self-service { display: flex; flex-direction: column; gap: 12px; }
.flexwoomemberships-self-service-row { background: #fbfbfc; border: 1px solid #e4e7ec; border-radius: 12px; padding: 16px 18px; transition: box-shadow .2s ease; }
.flexwoomemberships-self-service-row:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }
.flexwoomemberships-self-service-row strong { color: #101828; font-size: 14px; }
.flexwoomemberships-self-service-row > .flexwoomemberships-as-badge { margin-left: 8px; }
.flexwoomemberships-self-service-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.flexwoomemberships-self-service-actions select { border: 1px solid #d0d5dd; border-radius: 8px; font-size: 13px; height: 38px; padding: 0 10px; max-width: 100%; }
.flexwoomemberships-self-service-actions .button { border-radius: 8px; font-size: 13px; font-weight: 600; min-height: 38px; line-height: 1.2; padding: 9px 16px; }
.flexwoomemberships-self-service-cancel { background: #fef3f2 !important; border-color: #fef3f2 !important; color: #b42318 !important; }
.flexwoomemberships-self-service-message { font-size: 13px; margin: 10px 0 0; }
.flexwoomemberships-self-service-message:empty { display: none; margin: 0; }
.flexwoomemberships-self-service-message a.button { margin-left: 8px; }

/* "Manage" menu */
.fwss-menu { position: relative; }
.fwss-menu > summary { list-style: none; cursor: pointer; }
.fwss-menu > summary::-webkit-details-marker { display: none; }
.fwss-menu-arrow { margin-left: 6px; font-size: .85em; }
.fwss-menu-list { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: auto; min-width: 260px; max-width: min(360px, 90vw); background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 12px 28px rgba(16, 24, 40, .14); padding: 6px; display: flex; flex-direction: column; }
.fwss-menu-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer; color: #101828; font: inherit; }
.fwss-menu-item:hover, .fwss-menu-item:focus { background: #f9fafb; outline: none; }
.fwss-menu-item.is-danger strong { color: #b42318; }
.fwss-menu-desc { font-size: 12.5px; color: #667085; }
.fwss-menu-desc p { margin: 0; }

/* Confirmation dialog */
body.fwss-open { overflow: hidden; }
.fwss-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.fwss-dialog { background: #fff; border-radius: 14px; box-shadow: 0 24px 48px rgba(16, 24, 40, .24); width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; box-sizing: border-box; color: #344054; }
.fwss-dialog-body { font-size: 14px; line-height: 1.55; }
.fwss-dialog-body p { margin: 0 0 10px; }
.fwss-dialog-body .fwss-effect { color: #475467; font-weight: 600; }
.fwss-dialog-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.fwss-dialog-buttons .button { border-radius: 8px; font-weight: 600; min-height: 38px; padding: 9px 16px; }
.fwss-dialog-confirm.is-danger { background: #d92d20; border-color: #d92d20; color: #fff; }

.flexwoomemberships-thankyou-subscription-summary h2 { font-size: 16px; }