/*
 * My Speed Secrets dashboard — styles for the [ss_*] components and the WooCommerce endpoint content.
 * Layout, headings and section backgrounds are set in Divi on the My Account page; this file only styles
 * what the shortcodes output. Brand: Speed Secrets red #D10024, blue #253DA4 (Divi accent), ink #262626.
 */
:root {
  --ss-red: #D10024; --ss-red-deep: #A8001D; --ss-blue: #253DA4; --ss-blue-deep: #1B2E7A; --ss-link: #374BA0;
  --ss-ink: #262626; --ss-muted: #5A6577; --ss-label: #6B7588;
  --ss-surface: #ffffff; --ss-alt: #F5F7FB; --ss-tint: #EDF1FA; --ss-border: #E3E7EF; --ss-border-strong: #D3DAE8;
  --ss-green: #1F8A4C; --ss-green-bg: #E6F5EC;
  --ss-font-heading: 'Merriweather Sans', Helvetica, Arial, sans-serif; --ss-font-body: 'Cabin', Helvetica, Arial, sans-serif;
  --ss-radius: 12px; --ss-radius-sm: 8px; --ss-radius-pill: 999px;
  --ss-shadow: 0 1px 2px rgba(20, 30, 60, 0.05), 0 8px 24px -16px rgba(20, 30, 60, 0.25);
}

/* ---- greeting (hero) ---- */
.ss-greet { color: #fff; }
.ss-greet__eyebrow { font-family: var(--ss-font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 10px !important; padding: 0 !important; }
.ss-greet__title { font-family: var(--ss-font-heading); font-weight: 800; font-size: 44px; line-height: 1.08; color: #fff !important; margin: 0 0 12px !important; padding: 0 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.ss-greet__meta { font-family: var(--ss-font-body); font-size: 16px; color: rgba(255,255,255,0.9); margin: 0 !important; padding: 0 !important; }

/* ---- account nav pills ---- */
.ss-acct-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ss-acct-nav li { margin: 0; padding: 0; }
.ss-acct-nav a { display: inline-block; font-family: var(--ss-font-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 11px 16px; border-radius: var(--ss-radius-pill); color: var(--ss-ink) !important; background: var(--ss-surface); border: 1px solid var(--ss-border-strong); text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ss-acct-nav a:hover { background: var(--ss-tint); border-color: var(--ss-blue); }
.ss-acct-nav li.is-current a { background: var(--ss-blue); border-color: var(--ss-blue); color: #fff !important; }
.ss-acct-nav li.ss-acct-nav__item--customer-logout { margin-left: auto; }
.ss-acct-nav li.ss-acct-nav__item--customer-logout a { color: var(--ss-red) !important; border-color: transparent; background: transparent; }
.ss-acct-nav li.ss-acct-nav__item--customer-logout a:hover { background: #FBE9EC; }

/* ---- stat tiles ---- */
.ss-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ss-stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); color: var(--ss-ink) !important; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ss-stat:hover { transform: translateY(-2px); border-color: var(--ss-blue); }
.ss-stat .ss-ico { width: 24px; height: 24px; color: var(--ss-blue); margin-bottom: 6px; }
.ss-stat__n { font-family: var(--ss-font-heading); font-weight: 800; font-size: 32px; line-height: 1; color: var(--ss-ink); }
.ss-stat__n small { font-size: 16px; font-weight: 600; color: var(--ss-label); margin-left: 2px; }
.ss-stat__label { font-family: var(--ss-font-body); font-weight: 600; font-size: 14px; color: var(--ss-muted); }

/* ---- buttons / links / pills ---- */
.ss-btn, .et_pb_module a.ss-btn, #et-boc .et-l .et_pb_module a.ss-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ss-font-body); font-weight: 700; font-size: 15px; line-height: 1; padding: 12px 18px; border-radius: var(--ss-radius-sm); text-decoration: none; border: 1.5px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ss-btn .ss-ico { width: 16px; height: 16px; }
.ss-btn--primary, .et_pb_module a.ss-btn--primary, #et-boc .et-l .et_pb_module a.ss-btn--primary { background: var(--ss-red); color: #fff !important; border-color: var(--ss-red); }
.ss-btn--primary:hover, .et_pb_module a.ss-btn--primary:hover { background: var(--ss-red-deep); border-color: var(--ss-red-deep); }
.ss-btn--outline, .et_pb_module a.ss-btn--outline, #et-boc .et-l .et_pb_module a.ss-btn--outline { background: var(--ss-surface); color: var(--ss-ink) !important; border-color: var(--ss-border-strong); }
.ss-btn--outline:hover, .et_pb_module a.ss-btn--outline:hover { border-color: var(--ss-blue); color: var(--ss-blue) !important; }
.ss-link, .et_pb_module a.ss-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ss-font-body); font-weight: 600; font-size: 15px; color: var(--ss-link) !important; text-decoration: none; }
.ss-link .ss-ico { width: 15px; height: 15px; }
.ss-link:hover { text-decoration: underline; }
.ss-pill { display: inline-block; vertical-align: middle; font-family: var(--ss-font-body); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.04em; padding: 6px 10px; border-radius: var(--ss-radius-pill); }
.ss-pill--on { background: var(--ss-green-bg); color: var(--ss-green); }
.ss-pill--off { background: var(--ss-tint); color: var(--ss-label); }

/* ---- card grids (track walks, playbooks, suggestions) ---- */
.ss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ss-grid--suggest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-card { display: flex; flex-direction: column; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; box-shadow: var(--ss-shadow); transition: transform .15s ease, border-color .15s ease; }
.ss-card:hover { transform: translateY(-2px); border-color: var(--ss-border-strong); }
.ss-card__media { display: block; background: var(--ss-alt); aspect-ratio: 4 / 3; overflow: hidden; }
.ss-card__media img.ss-card__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 10px; box-sizing: border-box; }
.ss-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ss-blue-deep), var(--ss-blue)); color: #fff; }
.ss-card__placeholder .ss-ico { width: 44px; height: 44px; opacity: 0.9; }
.ss-card--trackwalk .ss-card__media, .ss-card--playbook .ss-card__media { aspect-ratio: 1 / 1; }
.ss-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.ss-card__title { font-family: var(--ss-font-heading); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 !important; padding: 0 !important; }
.ss-card__title a { color: var(--ss-ink) !important; text-decoration: none; }
.ss-card__meta { font-family: var(--ss-font-body); font-size: 14px; color: var(--ss-muted); margin: 0 0 6px !important; padding: 0 !important; line-height: 1.4; }
.ss-card__meta .woocommerce-Price-amount { font-weight: 700; color: var(--ss-ink); }
.ss-card__body .ss-btn { margin-top: auto; align-self: flex-start; }
.ss-card.is-suggest .ss-card__media { opacity: 0.92; }

/* ---- "add to your library" strip ---- */
.ss-suggest { margin-top: 36px; padding-top: 28px; border-top: 1px dashed var(--ss-border-strong); }
.ss-suggest__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-suggest__head h3 { font-family: var(--ss-font-heading); font-weight: 700; font-size: 18px; color: var(--ss-ink); margin: 0 !important; padding: 0 !important; }

/* ---- rows (webinars, downloads, subscriptions, orders) ---- */
.ss-list { list-style: none; margin: 0 !important; padding: 0 !important; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); overflow: hidden; }
.ss-list__item { margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--ss-border); }
.ss-list__item:first-child { border-top: 0; }
.ss-list__link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--ss-ink) !important; text-decoration: none; transition: background-color .15s ease; }
.ss-list__link:hover { background: var(--ss-alt); }
.ss-list__link > .ss-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ss-blue); }
.ss-list__thumb { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ss-border); }
.ss-list__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-list__title { font-family: var(--ss-font-body); font-weight: 700; font-size: 16px; line-height: 1.3; }
.ss-list__title .ss-pill { margin-left: 8px; }
.ss-list__meta { font-family: var(--ss-font-body); font-size: 13px; color: var(--ss-muted); white-space: pre-wrap; }
.ss-list__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ss-font-body); font-weight: 700; font-size: 14px; color: var(--ss-link); }
.ss-list__cta .ss-ico { width: 15px; height: 15px; }

/* ---- service cards (Sim Racer Academy, eCourses) ---- */
.ss-service { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 24px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); box-sizing: border-box; }
.ss-service.is-active { border-color: var(--ss-blue); box-shadow: 0 0 0 3px rgba(37, 61, 164, 0.08), var(--ss-shadow); }
.ss-service__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ss-service__head .ss-ico { width: 28px; height: 28px; color: var(--ss-blue); }
.ss-service__title { font-family: var(--ss-font-heading); font-weight: 800; font-size: 20px; color: var(--ss-ink); margin: 0 !important; padding: 0 !important; }
.ss-service__detail { font-family: var(--ss-font-body); font-weight: 600; font-size: 14px; color: var(--ss-label); margin: 0 !important; padding: 0 !important; }
.ss-service__text { font-family: var(--ss-font-body); font-size: 15px; line-height: 1.55; color: var(--ss-muted); margin: 0 !important; padding: 0 0 8px !important; }
.ss-service__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---- services row: equal-height tiles; a column whose card chose not to render (eCourses without an account) collapses ---- */
.ss-equal-row > .et_pb_column { display: flex; flex-direction: column; }
.ss-equal-row > .et_pb_column > .et_pb_module { flex: 1; }
.ss-equal-row > .et_pb_column:has(.ss-service-empty) { display: none; }
.ss-equal-row > .et_pb_column:has(.ss-service-empty) ~ .et_pb_column, .ss-equal-row:has(.ss-service-empty) > .et_pb_column { flex: 1 1 0; width: auto; }
.ss-equal-row:has(.ss-service-empty) > .et_pb_column:last-child { margin-right: 0; }
.ss-tile-text.et_pb_text, .ss-tile-text .et_pb_text_inner, .ss-tile-text .ss-service { height: 100%; }

/* ---- Divi blurbs used as static service tiles (class set in the module) ---- */
.ss-tile.et_pb_blurb { height: 100%; }
.ss-tile.et_pb_blurb .et_pb_blurb_content { max-width: 100%; }
.ss-tile.et_pb_blurb .et_pb_module_header a { color: var(--ss-ink); }

/* ---- empty states ---- */
.ss-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; background: var(--ss-surface); border: 1px dashed var(--ss-border-strong); border-radius: var(--ss-radius); }
.ss-empty p { font-family: var(--ss-font-body); font-size: 15px; color: var(--ss-muted); margin: 0 !important; padding: 0 !important; }

/* ---- section headings written in Divi text modules get a consistent "row head" ---- */
.ss-row-head h2, .ss-row-head h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ss-row-head h2 a, .ss-row-head h3 a { font-family: var(--ss-font-body); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ---- dashboard vs endpoint vs guest: which Divi sections show ---- */
body.ss-acct-endpoint .ss-dash-only, body.ss-acct-guest .ss-dash-only { display: none !important; }
body.ss-acct-dashboard .ss-endpoint-only { display: none !important; }
body.ss-acct-guest .ss-acct-nav { display: none; }

/* ---- endpoint screens: shorter hero so the content is in view ---- */
body.ss-acct-endpoint .ss-hero.et_pb_section, body.ss-acct-guest .ss-hero.et_pb_section { padding-top: 56px !important; padding-bottom: 44px !important; }
body.ss-acct-endpoint .ss-greet__title { font-size: 34px; }

/* ---- WooCommerce endpoint content inside the Divi page ---- */
.ss-wc-content { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 28px 30px; font-family: var(--ss-font-body); }
.ss-wc-content .woocommerce-MyAccount-content { width: 100%; float: none; text-align: left; }
.ss-wc-content h2, .ss-wc-content h3, .ss-wc-content legend { font-family: var(--ss-font-heading); font-weight: 700; color: var(--ss-ink); }
.ss-wc-content table.shop_table { width: 100%; border: 0; border-collapse: collapse; font-size: 15px; }
.ss-wc-content table.shop_table th { font-family: var(--ss-font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-label); background: var(--ss-alt); border: 0; padding: 12px 14px; }
.ss-wc-content table.shop_table td { border: 0; border-top: 1px solid var(--ss-border); padding: 14px; vertical-align: middle; }
.ss-wc-content table.shop_table .button, .ss-wc-content .woocommerce-button, .ss-wc-content .button, .ss-wc-content button.button, .ss-wc-content a.wc-forward { display: inline-block; font-family: var(--ss-font-body) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; padding: 10px 14px !important; margin: 2px 4px 2px 0; border-radius: var(--ss-radius-sm) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1.5px solid var(--ss-border-strong) !important; text-decoration: none !important; }
.ss-wc-content .button:hover, .ss-wc-content a.wc-forward:hover { border-color: var(--ss-blue) !important; color: var(--ss-blue) !important; }
.ss-wc-content button.button[type="submit"], .ss-wc-content .woocommerce-Button.button, .ss-wc-content .button.pay, .ss-wc-content a.wc-forward.button.view, .ss-wc-content .button.subscription_renewal_early, .ss-wc-content .woocommerce-form-login .button { background: var(--ss-red) !important; color: #fff !important; border-color: var(--ss-red) !important; }
.ss-wc-content .woocommerce-form-row label { font-weight: 600; color: var(--ss-ink); }
.ss-wc-content .input-text, .ss-wc-content input[type="text"], .ss-wc-content input[type="email"], .ss-wc-content input[type="password"], .ss-wc-content input[type="tel"], .ss-wc-content select { border: 1px solid var(--ss-border-strong); border-radius: var(--ss-radius-sm); padding: 10px 12px; font-family: var(--ss-font-body); font-size: 15px; width: 100%; box-sizing: border-box; background: #fff; }
.ss-wc-content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ss-wc-content .woocommerce-Addresses::before, .ss-wc-content .woocommerce-Addresses::after, .ss-wc-content .col2-set::before, .ss-wc-content .col2-set::after { display: none; }
.ss-wc-content .woocommerce-Address { width: auto; float: none; padding: 20px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); }
.ss-wc-content .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ss-wc-content .woocommerce-Address-title h3 { font-size: 18px; margin: 0; }
.ss-wc-content .woocommerce-Address-title .edit { font-weight: 600; color: var(--ss-link); }
.ss-wc-content form.woocommerce-form-login, .ss-wc-content form.login { max-width: 460px; margin: 0 auto !important; padding: 28px !important; border: 1px solid var(--ss-border) !important; border-radius: var(--ss-radius) !important; }
.ss-wc-content #customer_login > h2, .ss-wc-content .woocommerce-form-login + h2 { text-align: center; }
.ss-wc-content .col2-set .col-1, .ss-wc-content .col2-set .col-2, .ss-wc-content .u-column1, .ss-wc-content .u-column2 { float: none; width: auto; max-width: none; }
.ss-wc-content .woocommerce-form-login h2, .ss-wc-content #customer_login h2 { font-size: 24px; }
.ss-wc-content .woocommerce-notices-wrapper .woocommerce-message, .ss-wc-content .woocommerce-notices-wrapper .woocommerce-info, .ss-wc-content .woocommerce-notices-wrapper .woocommerce-error { border-top-color: var(--ss-blue); background: var(--ss-alt); border-radius: var(--ss-radius-sm); }
.ss-wc-content .woocommerce-MyAccount-navigation { display: none; }
.ss-wc-content .woocommerce-pagination, .ss-wc-content .woocommerce-pagination--without-numbers { margin-top: 18px; display: flex; gap: 8px; justify-content: space-between; }
.ss-wc-content mark.order-status { background: var(--ss-tint); color: var(--ss-ink); padding: 3px 8px; border-radius: 4px; font-size: 13px; }
.ss-wc-content .woocommerce-column--billing-address, .ss-wc-content .woocommerce-column--shipping-address { float: none; width: auto; }
.ss-wc-content .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ss-wc-content .wc-memberships-members-area-actions .button { white-space: nowrap; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .ss-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ss-greet__title { font-size: 32px; }
  .ss-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ss-stat { padding: 16px; }
  .ss-stat__n { font-size: 26px; }
  .ss-grid, .ss-grid--suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ss-card__body { padding: 12px 14px 14px; }
  .ss-card__title { font-size: 15px; }
  .ss-btn, .et_pb_module a.ss-btn { padding: 11px 14px; font-size: 14px; }
  .ss-acct-nav ul { gap: 6px; }
  .ss-acct-nav a { font-size: 14px; padding: 10px 13px; }
  .ss-acct-nav li.ss-acct-nav__item--customer-logout { margin-left: 0; }
  .ss-list__link { flex-wrap: wrap; padding: 12px 14px; }
  .ss-list__cta { width: 100%; justify-content: flex-end; padding-left: 36px; }
  .ss-wc-content { padding: 18px 16px; }
  .ss-wc-content .woocommerce-Addresses, .ss-wc-content .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  .ss-wc-content table.shop_table_responsive td { display: flex; justify-content: space-between; text-align: right; }
  .ss-wc-content table.shop_table_responsive td::before { text-align: left; font-weight: 700; color: var(--ss-label); }
}
@media (max-width: 420px) {
  .ss-grid, .ss-grid--suggest { grid-template-columns: 1fr; }
}

/* 0.2.0 (Nov 2026): merged Webinars/Masterclasses list, Playbooks "not owned yet" box */
.ss-list .ss-list__item, .ss-missing li { list-style: none; } /* Divi gives li a disc marker; it shows in the 2-column list */
.ss-missing { list-style: none; margin: 4px 0 18px !important; padding: 0 !important; }
.ss-missing li { padding: 7px 0; border-bottom: 1px solid var(--ss-border); line-height: 1.35; }
.ss-missing li:last-child { border-bottom: 0; }
.ss-missing a { color: var(--ss-ink); font-weight: 600; text-decoration: none; }
.ss-missing a:hover { text-decoration: underline; }
@media (min-width: 981px) {
  .ss-owned-narrow .ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-list--webinar { column-count: 2; column-gap: 0; }
  .ss-list--webinar .ss-list__item { break-inside: avoid; }
}