/* Visual rules ported directly from the approved single-line prototype. */
#spp-special-banner{display:block;width:100%;margin:0;padding:0;border:0;box-sizing:border-box;container-type:inline-size;font-family:Arial,Helvetica,sans-serif;background:transparent;color:#fff}
#spp-special-banner[hidden],#spp-special-banner [hidden]{display:none!important}
#spp-special-banner *{ box-sizing: border-box; }
#spp-special-banner .spp-banner{ --spp-red: #e32138; position: relative; isolation: isolate; overflow: hidden; min-height: 124px; background: linear-gradient(104deg, #120b0e 0%, #390e19 35%, #200c13 66%, #0e0e12 100%); }
#spp-special-banner .spp-banner::before{ content: ""; position: absolute; z-index: -1; inset: -140% -25%; pointer-events: none; background: radial-gradient(ellipse at 28% 52%, #bf1f3b55, transparent 34%), radial-gradient(ellipse at 65% 60%, #a71d3240, transparent 30%); animation: spp-proto-ambient 9s ease-in-out infinite alternate; }
#spp-special-banner .spp-banner::after{ content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(117deg, transparent 0 56px, #ffffff03 57px 58px); pointer-events: none; }
#spp-special-banner .spp-top-line{ height: 2px; background: linear-gradient(90deg, #4b1520, #d22d44 28%, #f47b7a 51%, #bc2237 75%, #39131d); position: absolute; inset: 0 0 auto; opacity: .8; overflow: hidden; animation: spp-proto-breathe 5s ease-in-out infinite; }
#spp-special-banner .spp-top-line::after{ content: ""; position: absolute; inset: 0 auto 0 -24%; width: 24%; background: linear-gradient(90deg, transparent, #fff2da, transparent); box-shadow: 0 0 12px #ffb3b3; animation: spp-proto-sweep 6s ease-in-out infinite; }
#spp-special-banner .spp-bottom-line{ position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, #ad243033, #e6556566, #ad243033); }
#spp-special-banner .spp-banner-inner{ width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr) 64px; align-items: center; gap: 25px; padding: 22px 65px 22px 35px; min-height: 124px; }
#spp-special-banner .spp-flag-scene{ position: relative; perspective: 450px; display: grid; place-items: center; }
#spp-special-banner .spp-flag-scene::before{ content: ""; position: absolute; inset: -22px; background: radial-gradient(ellipse, #ed234242, transparent 69%); }
#spp-special-banner .spp-flag{ position: relative; width: 94px; height: 63px; overflow: hidden; border-radius: 2px 5px 5px 2px; box-shadow: 0 7px 22px #0006; transform-origin: 0 50%; animation: spp-proto-wave 5s ease-in-out infinite; }
#spp-special-banner .spp-flag img{ display: block; width: 100%; height: 100%; object-fit: cover; }
#spp-special-banner .spp-flag::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #ffffff08, #fff3 25%, #0002 45%, #fff2 70%, #0001); background-size: 240% 100%; animation: spp-proto-fabric 5s ease-in-out infinite; }
#spp-special-banner .spp-banner-copy{ position: relative; min-width: 0; }
#spp-special-banner .spp-title{ margin: 0; font-size: clamp(21px, 2.6cqi, 28px); line-height: 1.16; font-weight: 600; letter-spacing: -.6px; color: #fff9f5; }
#spp-special-banner .spp-close{ position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ffffff24; color: #dac8cb; background: #ffffff05; font-size: 20px; line-height: 1; }
#spp-special-banner[data-motion="off"] .spp-banner::before,#spp-special-banner[data-motion="off"] .spp-top-line,#spp-special-banner[data-motion="off"] .spp-top-line::after,#spp-special-banner[data-motion="off"] .spp-flag,#spp-special-banner[data-motion="off"] .spp-flag::after{ animation: none; }
#spp-special-banner[data-motion="strong"] .spp-banner{ background: linear-gradient(104deg, #1c0b10, #620f25 38%, #350d1d 70%, #100e13); }
#spp-special-banner[data-motion="strong"] .spp-banner::before{ animation-duration: 5s; opacity: 1; }
#spp-special-banner[data-motion="strong"] .spp-top-line{ height: 3px; animation-duration: 3.6s; }
#spp-special-banner[data-motion="strong"] .spp-top-line::after{ animation-duration: 3.8s; }
#spp-special-banner[data-motion="strong"] .spp-flag,#spp-special-banner[data-motion="strong"] .spp-flag::after{ animation-duration: 3.6s; }
#spp-special-banner[data-occasion="memorial"] .spp-banner{ background: linear-gradient(110deg, #141417, #252529 43%, #111114); }
#spp-special-banner[data-occasion="memorial"] .spp-banner::before,#spp-special-banner[data-occasion="memorial"] .spp-flag-scene::before{ display: none; }
#spp-special-banner[data-occasion="memorial"] .spp-top-line{ background: linear-gradient(90deg, #4f4f53, #b2a899 50%, #4f4f53); opacity: .55; height: 1px; }
#spp-special-banner[data-occasion="memorial"] .spp-top-line::after{ display: none; }
#spp-special-banner[data-occasion="memorial"] .spp-bottom-line{ background: #ffffff13; }
@keyframes spp-proto-sweep{ 0%, 12% { transform: translateX(0); opacity: 0; } 22% { opacity: 1; } 70%, 100% { transform: translateX(550%); opacity: 0; } }
@keyframes spp-proto-breathe{ 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes spp-proto-ambient{ from { transform: translateX(-4%) scale(1); opacity: .6; } to { transform: translateX(6%) scale(1.08); opacity: .95; } }
@keyframes spp-proto-wave{ 0%, 100% { transform: rotateY(-9deg) skewY(-1deg); } 50% { transform: rotateY(6deg) skewY(1.4deg); } }
@keyframes spp-proto-fabric{ 0%, 100% { background-position: 0 50%; opacity: .55; } 50% { background-position: 100% 50%; opacity: .85; } }
@container (max-width: 760px){#spp-special-banner .spp-banner-inner{ grid-template-columns: 88px minmax(0, 1fr); padding-left: 25px; gap: 19px; }
#spp-special-banner .spp-flag{ width: 84px; height: 56px; }}
@container (max-width: 490px){#spp-special-banner .spp-banner-inner{ grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 31px 22px 27px; min-height: 173px; }
#spp-special-banner .spp-flag{ width: 56px; height: 38px; }
#spp-special-banner .spp-title{ font-size: 21px; line-height: 1.15; letter-spacing: -.55px; }
#spp-special-banner .spp-close{ width: 28px; height: 28px; right: 4px; top: 3px; font-size: 18px; border-color: transparent; background: transparent; }}
@media (pointer: coarse){#spp-special-banner .spp-close{ width: 44px; height: 44px; right: 0; top: 0; }}
@media (prefers-reduced-motion: reduce){#spp-special-banner *,#spp-special-banner *::before,#spp-special-banner *::after{ animation: none !important; transition: none !important; }}
#spp-special-banner .spp-banner{ min-height: 74px; background: linear-gradient(100deg, #090a0d 0%, #2f0611 26%, #56091c 50%, #25050e 78%, #090a0d 100%); }
#spp-special-banner[data-motion="strong"] .spp-banner{ background: linear-gradient(100deg, #0a090c, #3c0715 30%, #61091e 50%, #2d0610 74%, #0a090c); }
#spp-special-banner .spp-banner::before{ inset: -70% -30%; background: linear-gradient(110deg, transparent 30%, #ed17322b 44%, #ff51622d 48%, transparent 59%); animation: spp-ribbon-light 6s ease-in-out infinite; }
#spp-special-banner .spp-banner::after{ background: radial-gradient(ellipse at 50% 0%, #ff4e4930, transparent 66%); }
#spp-special-banner .spp-banner-inner{ min-height: 74px; grid-template-columns: 78px minmax(0, 1fr); padding: 10px 68px 10px 36px; gap: 26px; max-width: 1040px; margin-inline: auto; }
#spp-special-banner .spp-banner-copy{ text-align: center; }
#spp-special-banner .spp-title{ margin: 0; color: #fff4e9; font-size: clamp(12px, 1.65cqi, 17px); line-height: 1.4; font-weight: 600; letter-spacing: 1.7px; white-space: nowrap; animation: spp-ribbon-message 3.4s ease-in-out infinite; text-shadow: 0 0 18px #ff998536; }
#spp-special-banner .spp-short-message{ display: none; }
#spp-special-banner .spp-top-line{ height: 1px; background: linear-gradient(90deg, transparent, #b9283866 18%, #ffb0a9 50%, #b9283866 82%, transparent); animation: spp-proto-breathe 3.4s ease-in-out infinite; }
#spp-special-banner[data-motion="strong"] .spp-top-line{ height: 1px; animation-duration: 3.4s; }
#spp-special-banner .spp-top-line::after{ width: 30%; height: 2px; box-shadow: 0 0 8px #ffbec0; animation-duration: 4.5s; }
#spp-special-banner .spp-bottom-line{ background: linear-gradient(90deg, transparent, #df64596b, transparent); }
#spp-special-banner .spp-close{ width: 36px; height: 36px; top: 50%; right: 13px; transform: translateY(-50%); background: transparent; border: 0; color: #d5a6ad; font-size: 19px; }
#spp-special-banner .spp-flag-scene{ --spp-flag-width: 74px; }
#spp-special-banner .spp-flag-scene::before{ inset: -6px -20px; background: radial-gradient(ellipse, #e6264340, transparent 72%); }
#spp-special-banner .spp-flag{ width: var(--spp-flag-width); height: calc(var(--spp-flag-width) * 2 / 3); overflow: visible; border-radius: 0; box-shadow: none; animation: none; filter: drop-shadow(0 5px 7px #0009); }
#spp-special-banner .spp-flag img{ opacity: 0; }
#spp-special-banner .spp-flag::after{ display: none; }
#spp-special-banner .spp-flag-slice{ position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 5%); width: calc(5% + .45px); background-size: var(--spp-flag-width) 100%; background-position: calc(var(--i) * var(--spp-flag-width) / -20) center; transform-origin: 50% 50%; animation: spp-ribbon-cloth 2.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.075s); }
#spp-special-banner .spp-flag-slice::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff1, transparent 40%, #0001); }
#spp-special-banner[data-motion="strong"] .spp-flag-slice{ animation-duration: 2.1s; }
#spp-special-banner[data-motion="soft"] .spp-title{ animation-name: spp-ribbon-message-soft; animation-duration: 4.8s; }
#spp-special-banner[data-motion="off"] .spp-title,#spp-special-banner[data-motion="off"] .spp-flag-slice{ animation: none; }
#spp-special-banner[data-occasion="memorial"] .spp-banner{ background: linear-gradient(100deg, #101013, #26262a 50%, #111114); }
#spp-special-banner[data-occasion="memorial"] .spp-title{ color: #ece8e0; text-shadow: none; }
@keyframes spp-ribbon-message{ 0%, 10%, 100% { opacity: 1; text-shadow: 0 0 20px #ffaba870; } 43%, 57% { opacity: .36; text-shadow: 0 0 0 transparent; } 82% { opacity: 1; text-shadow: 0 0 20px #ffaba870; } }
@keyframes spp-ribbon-message-soft{ 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes spp-ribbon-light{ 0%, 100% { transform: translateX(-22%) skewX(-10deg); opacity: .3; } 60% { transform: translateX(22%) skewX(-10deg); opacity: 1; } }
@keyframes spp-ribbon-cloth{ 0%, 100% { transform: translateY(calc(var(--amplitude) * -1)) scaleY(.97); filter: brightness(.8); } 50% { transform: translateY(var(--amplitude)) scaleY(1.03); filter: brightness(1.13); } }
@container (max-width: 760px){#spp-special-banner .spp-banner-inner{ grid-template-columns: 61px minmax(0, 1fr); padding: 10px 50px 10px 24px; gap: 18px; min-height: 68px; }
#spp-special-banner .spp-banner{ min-height: 68px; }
#spp-special-banner .spp-flag-scene{ --spp-flag-width: 60px; }
#spp-special-banner .spp-title{ font-size: 12px; letter-spacing: 1px; }}
@container (max-width: 600px){#spp-special-banner .spp-full-message{ display: none; }
#spp-special-banner .spp-short-message{ display: inline; }
#spp-special-banner .spp-banner-inner{ grid-template-columns: 48px minmax(0, 1fr); padding: 10px 41px 10px 18px; gap: 14px; min-height: 60px; }
#spp-special-banner .spp-banner{ min-height: 60px; }
#spp-special-banner .spp-flag-scene{ --spp-flag-width: 46px; }
#spp-special-banner .spp-title{ font-size: 12px; letter-spacing: 1px; }
#spp-special-banner .spp-close{ right: 0; }}
@container (max-width: 355px){#spp-special-banner .spp-banner-inner{ padding-left: 13px; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
#spp-special-banner .spp-flag-scene{ --spp-flag-width: 39px; }
#spp-special-banner .spp-title{ font-size: 11px; letter-spacing: .55px; }}
@media (pointer: coarse){#spp-special-banner .spp-close{ width: 44px; height: 44px; right: 0; }}
/* Integration safeguards; the approved default appearance is unchanged. */
#spp-special-banner .spp-title{font-family:Arial,Helvetica,sans-serif;text-transform:none}
#spp-special-banner .spp-title.is-short-copy .spp-full-message{display:none}
#spp-special-banner .spp-title.is-short-copy .spp-short-message{display:inline}
#spp-special-banner .spp-title.is-truncated{overflow:hidden;text-overflow:ellipsis}
#spp-special-banner .spp-close{display:grid;place-items:center;padding:0;min-width:0;min-height:0;margin:0;box-shadow:none;font-family:Arial,Helvetica,sans-serif;cursor:pointer}
#spp-special-banner .spp-close:disabled{opacity:1;cursor:default}
#spp-special-banner.is-wave-off .spp-flag-slice{animation:none!important}
#spp-special-banner .spp-flag{direction:ltr}
#spp-special-banner[dir=rtl] .spp-close{right:auto;left:13px}
#spp-special-banner[dir=rtl] .spp-title{letter-spacing:0}
#spp-special-banner.is-paused *,#spp-special-banner.is-paused *::before,#spp-special-banner.is-paused *::after{animation-play-state:paused!important}
@container(max-width:600px){#spp-special-banner[dir=rtl] .spp-close{left:0}}
@media(pointer:coarse){#spp-special-banner[dir=rtl] .spp-close{left:0}}
@media print{#spp-special-banner{display:none!important}}

/* Day palettes and one leading emblem: national flag or day-specific artwork. */
#spp-special-banner .spp-day-art,#spp-special-banner .spp-memorial-ribbon{display:none}
#spp-special-banner.is-day-themed .spp-banner{background:radial-gradient(ellipse at 55% -60%,var(--spp-day-glow),transparent 72%),linear-gradient(105deg,var(--spp-day-edge),var(--spp-day-center) 52%,var(--spp-day-edge))}
#spp-special-banner.is-day-themed .spp-banner::before{background:linear-gradient(110deg,transparent 32%,var(--spp-day-glow) 49%,transparent 62%);opacity:.55}
#spp-special-banner.is-day-themed .spp-banner::after{background:repeating-linear-gradient(118deg,transparent 0 59px,#ffffff04 60px 61px);opacity:.6}
#spp-special-banner.is-day-themed .spp-banner-inner{padding-inline-start:36px;padding-inline-end:68px}
#spp-special-banner.is-day-themed .spp-top-line{background:linear-gradient(90deg,transparent,var(--spp-day-accent),transparent)}
#spp-special-banner.is-day-themed .spp-top-line::after{box-shadow:0 0 8px var(--spp-day-accent);background:linear-gradient(90deg,transparent,#fff8df,transparent)}
#spp-special-banner.is-day-themed .spp-bottom-line{background:linear-gradient(90deg,transparent,var(--spp-day-glow),transparent)}
#spp-special-banner.is-day-themed .spp-title{color:#fff7ed;text-shadow:none;animation-name:spp-day-message}
#spp-special-banner.is-day-themed[data-motion="soft"] .spp-title{animation-name:spp-ribbon-message-soft}
#spp-special-banner.is-day-themed[data-motion="off"] .spp-title{animation:none}
#spp-special-banner.is-day-themed .spp-close{color:var(--spp-day-accent)}
#spp-special-banner[data-emblem="symbol"] .spp-flag-scene{grid-template-columns:minmax(0,1fr)}
#spp-special-banner[data-emblem="symbol"] .spp-day-art{display:block;position:relative;width:84px;height:54px;pointer-events:none;background:var(--spp-day-art) center / contain no-repeat;opacity:1}
#spp-special-banner[data-emblem="remembrance"] .spp-memorial-ribbon{display:block;position:absolute;inset-inline-end:-9px;top:4px;width:18px;height:32px;background:url("../images/special-days/mourning-ribbon.svg") center / contain no-repeat;pointer-events:none}
#spp-special-banner.is-day-themed .spp-flag-scene::before{background:radial-gradient(ellipse,var(--spp-day-glow),transparent 72%)}
#spp-special-banner.is-day-themed[data-occasion="memorial"] .spp-banner::after{opacity:.3}
#spp-special-banner.is-day-themed[data-occasion="memorial"] .spp-title{color:#ede9e2}
@keyframes spp-day-message{0%,100%{opacity:1}50%{opacity:.72}}
@container(max-width:760px){
 #spp-special-banner.is-day-themed .spp-banner-inner{padding-inline-start:24px;padding-inline-end:50px}
 #spp-special-banner[data-emblem="symbol"] .spp-day-art{width:74px;height:48px}
}
@container(max-width:600px){
 #spp-special-banner.is-day-themed .spp-banner-inner{padding-inline-start:18px;padding-inline-end:44px;gap:11px}
 #spp-special-banner[data-emblem="symbol"] .spp-day-art{width:60px;height:40px}
 #spp-special-banner[data-emblem="remembrance"] .spp-memorial-ribbon{inset-inline-end:-7px;top:0;width:14px;height:26px}
 #spp-special-banner.is-day-themed .spp-title{letter-spacing:0}
}
@container(max-width:380px){
 #spp-special-banner.is-day-themed .spp-banner-inner{gap:8px;padding-inline-start:13px;padding-inline-end:44px}
 #spp-special-banner.is-day-themed .spp-flag-scene{--spp-flag-width:39px}
 #spp-special-banner[data-emblem="symbol"] .spp-day-art{width:54px;height:40px}
 #spp-special-banner.is-day-themed .spp-title{letter-spacing:0}
}
#spp-special-banner.is-day-themed[dir="rtl"] .spp-title{letter-spacing:0}
#spp-special-banner[data-theme="new_year"]{--spp-day-edge:#101627;--spp-day-center:#213756;--spp-day-accent:#edcc86;--spp-day-glow:#edcc8627;--spp-day-art:url("../images/special-days/new_year.svg")}
#spp-special-banner[data-theme="february_6"]{--spp-day-edge:#15161c;--spp-day-center:#2d2c31;--spp-day-accent:#d2c5b0;--spp-day-glow:#d2c5b027;--spp-day-art:url("../images/special-days/february_6.svg")}
#spp-special-banner[data-theme="march_8"]{--spp-day-edge:#24132d;--spp-day-center:#572b61;--spp-day-accent:#e9b7dc;--spp-day-glow:#e9b7dc27;--spp-day-art:url("../images/special-days/march_8.svg")}
#spp-special-banner[data-theme="march_18"]{--spp-day-edge:#17181b;--spp-day-center:#3a3329;--spp-day-accent:#ccb488;--spp-day-glow:#ccb48827;--spp-day-art:url("../images/special-days/march_18.svg")}
#spp-special-banner[data-theme="april_23"]{--spp-day-edge:#112c3b;--spp-day-center:#18515d;--spp-day-accent:#8cddd2;--spp-day-glow:#8cddd227;--spp-day-art:url("../images/special-days/april_23.svg")}
#spp-special-banner[data-theme="may_1"]{--spp-day-edge:#221b17;--spp-day-center:#4b3828;--spp-day-accent:#d9af7e;--spp-day-glow:#d9af7e27;--spp-day-art:url("../images/special-days/may_1.svg")}
#spp-special-banner[data-theme="mothers_day"]{--spp-day-edge:#2a1520;--spp-day-center:#623542;--spp-day-accent:#edc2b1;--spp-day-glow:#edc2b127;--spp-day-art:url("../images/special-days/mothers_day.svg")}
#spp-special-banner[data-theme="may_19"]{--spp-day-edge:#0c192b;--spp-day-center:#193857;--spp-day-accent:#e6b378;--spp-day-glow:#e6b37827;--spp-day-art:url("../images/special-days/may_19.svg")}
#spp-special-banner[data-theme="fathers_day"]{--spp-day-edge:#121f2b;--spp-day-center:#304455;--spp-day-accent:#d2b88f;--spp-day-glow:#d2b88f27;--spp-day-art:url("../images/special-days/fathers_day.svg")}
#spp-special-banner[data-theme="july_15"]{--spp-day-edge:#231418;--spp-day-center:#40252a;--spp-day-accent:#cfb7b3;--spp-day-glow:#cfb7b327;--spp-day-art:url("../images/special-days/july_15.svg")}
#spp-special-banner[data-theme="august_17"]{--spp-day-edge:#111d21;--spp-day-center:#283b3f;--spp-day-accent:#b1cac7;--spp-day-glow:#b1cac727;--spp-day-art:url("../images/special-days/august_17.svg")}
#spp-special-banner[data-theme="august_30"]{--spp-day-edge:#310e17;--spp-day-center:#691d2a;--spp-day-accent:#e7c882;--spp-day-glow:#e7c88227;--spp-day-art:url("../images/special-days/august_30.svg")}
#spp-special-banner[data-theme="november_24"]{--spp-day-edge:#0b2426;--spp-day-center:#24504c;--spp-day-accent:#deca96;--spp-day-glow:#deca9627;--spp-day-art:url("../images/special-days/november_24.svg")}
#spp-special-banner[data-theme="december_3"]{--spp-day-edge:#102338;--spp-day-center:#194e65;--spp-day-accent:#97dbdc;--spp-day-glow:#97dbdc27;--spp-day-art:url("../images/special-days/december_3.svg")}

/* Custom messages have no emblem and remain centered in both writing directions. */
#spp-special-banner[data-emblem="none"] .spp-flag-scene{display:none}
#spp-special-banner[data-emblem="none"] .spp-banner-inner{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:68px}
@container(max-width:760px){#spp-special-banner[data-emblem="none"] .spp-banner-inner{padding-inline:50px}}
@container(max-width:600px){#spp-special-banner[data-emblem="none"] .spp-banner-inner{padding-inline:44px}}
