/* Selected offer cards: Generace comparison-card appearance, 10. 9. 2026. */
@property --offer-card-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html body :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
) {
  --offer-card-color: #ce202f;
  position: relative;
  background: #fff;
  border: 1px solid #879eae !important;
  border-top: 3px solid var(--offer-card-color) !important;
  box-shadow: 0 6px 18px -4px rgb(7 26 45 / 12%), 0 2px 5px rgb(7 26 45 / 5%) !important;
}
html body :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+2) { --offer-card-color: #21b7dd; }
html body :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+3) { --offer-card-color: #1783c7; }
html body :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+4) { --offer-card-color: #7750bb; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
)::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    pointer-events: none;
    background: conic-gradient(from var(--offer-card-angle), transparent 0deg 307deg, color-mix(in srgb, var(--offer-card-color) 13%, transparent) 321deg, color-mix(in srgb, var(--offer-card-color) 60%, transparent) 336deg, rgb(255 255 255 / 68%) 346deg, color-mix(in srgb, var(--offer-card-color) 52%, transparent) 355deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: offer-card-border-flash 7.2s linear infinite;
  }
  :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+2)::after { animation-delay: -1.8s; }
  :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+3)::after { animation-delay: -3.6s; }
  :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
):nth-child(4n+4)::after { animation-delay: -5.4s; }
}
@keyframes offer-card-border-flash { to { --offer-card-angle: 360deg; } }
html.motion-paused body :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
)::after, html body .motion-paused :is(
  .sms-manager #vyuziti .sm-use-grid > article,
  .ekokom-site .ek-benefits > article,
  .ekokom-site #platnost .ek-calendar,
  .intrastat-site .in-benefits > article,
  .marketplace-page .mp-benefits > article,
  .marketplace-page .mp-preparation-grid > article,
  .mlt-page .mlt-benefits > article,
  .assets-page .asset-benefits > article,
  .reports-page .report-benefits > article,
  .oss-page .oss-benefits > article,
  .fiscal-page .period-benefits > article,
  .fiscal-page #souvislosti .custom-period,
  .rs-site #prevzeti .rs-three-grid > article,
  .rs-site #historie .rs-history-grid > article,
  .rs-site #terminy .rs-deadline-board,
  .rs-site #servis .rs-repair-example,
  .prepravci-site #expedice .sm-use-grid > article
)::after { animation-play-state: paused !important; }