.seasonal-widget {
--sw-text:   #ffffff;
--sw-muted:  rgba(255,255,255,.58);
--sw-card:   rgba(255,255,255,.05);
--sw-card-h: rgba(255,255,255,.09);
--sw-line:   rgba(255,255,255,.10);
--sw-brand:  #f5a623;
position: relative;
color: var(--sw-text);
background: linear-gradient(160deg, #1e2f74 0%, #182a63 55%, #13224f 100%);
border-radius: 22px;
padding: 26px 30px 30px;
box-shadow: 0 18px 50px rgba(10,18,48,.35);
overflow: hidden;
} .sw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sw-head-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; flex: 1; }
.sw-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #16224d; background: #c9d4f0; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.seasonal-widget .sw-check { display: block; width: 100%; text-align: center; white-space: nowrap; font-size: 14px; padding: 13px 16px; }
.seasonal-widget .sw-title { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sw-title-main { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sw-title-c { font-weight: 500; opacity: .65; font-size: .62em; }
.sw-logo { height: 34px; width: auto; opacity: .95; }
.sw-sentence { margin: 16px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--sw-muted); } .sw-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.sw-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: 12px; }
.sw-card.has-tip { cursor: default; }
.sw-card.has-tip::after {
content: attr(data-tip);
position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px);
width: max-content; max-width: 240px; padding: 15px 17px;
background: #fff; color: #16224d; border-radius: 16px; box-shadow: 0 18px 48px rgba(8,14,40,.42);
font-size: 12.5px; font-weight: 600; line-height: 1.5; text-transform: none; letter-spacing: 0;
opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 9;
}
.sw-card.has-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.sw-card-k { display: flex; align-items: center; gap: 6px; padding-right: 26px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sw-muted); } .sw-ic { position: absolute; top: 13px; right: 14px; width: 20px; height: 20px; color: rgba(255,255,255,.42); transition: transform .45s cubic-bezier(.22,1,.36,1), color .2s; }
.sw-ic svg { width: 100%; height: 100%; display: block; }
.sw-card:hover .sw-ic { color: #fff; }
.sw-card:hover .sw-ic--sun     { transform: rotate(40deg); }
.sw-card:hover .sw-ic--moon    { transform: rotate(-18deg); }
.sw-card:hover .sw-ic--clock   { transform: rotate(30deg); }
.sw-card:hover .sw-ic--star    { transform: scale(1.2); }
.sw-card:hover .sw-ic--wave    { transform: translateX(2px); }
.sw-card:hover .sw-ic--sunrise { transform: translateY(-2px); }
.sw-card:hover .sw-ic--sunset  { transform: translateY(2px); }
.sw-card-ic { height: 12px; width: 12px; opacity: .8; }
.sw-card-v { font-size: 19px; font-weight: 700; } .sw-body { display: grid; grid-template-columns: 1fr 296px; gap: 26px; margin-top: 24px; align-items: stretch; } .sw-chart-wrap { position: relative; display: flex; flex-direction: column; }
.sw-chart { position: relative; width: 100%; min-height: 256px; flex: 1 1 auto; }
.sw-chart svg { display: block; width: 100%; height: 100%; overflow: visible; } .sw-gridline { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.sw-zeroline { stroke: #5b8def; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; } .sw-area { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .35s; opacity: 0; }
.seasonal-widget.is-in .sw-area.is-on { transform: scaleY(1); opacity: 1; }
.sw-area.is-off { transform: scaleY(0) !important; opacity: 0 !important; } .sw-headline { position: absolute; inset: 0; z-index: 4; pointer-events: none;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
text-align: center; padding: 0 24px; background: rgba(0,0,0,.05); border-radius: 10px;
transition: opacity .18s; }
.sw-chart.is-hovering .sw-headline { opacity: 0; }
.sw-hl-main { font-size: clamp(18px, 2.4vw, 30px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; color: #fff; max-width: 92%; text-shadow: 0 2px 14px rgba(8,14,40,.45); }
.sw-hl-brand { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sw-hl-book { pointer-events: auto; }
.seasonal-widget .sw-hl-book { margin-top: 8px; display: inline-flex; width: auto; font-size: 12.5px; padding: 8px 16px; } .sw-cols { position: absolute; top: 0; left: 0; right: 0; bottom: -58px; display: flex; z-index: 3; }
.sw-col { flex: 1; position: relative; cursor: pointer; }
.sw-col.is-best { background: rgba(255,255,255,.05); }
.sw-col.is-now  { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border-radius: 4px; }
.sw-col.is-hover { background: rgba(255,255,255,.14); border-radius: 4px; } .sw-hovercard {
position: absolute; z-index: 6;
width: 210px; padding: 16px 18px;
background: #fff; color: #16224d;
border-radius: 18px; box-shadow: 0 18px 48px rgba(8,14,40,.42);
opacity: 0; pointer-events: none;
transition: opacity .18s ease; text-align: left;
}
.sw-hovercard.is-show { opacity: 1; pointer-events: auto; }
.sw-hc-rec { background: #203c85; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; text-align: center; }
.sw-hc-m { font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-align: center; margin-bottom: 10px; }
.sw-hc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.5; }
.sw-hc-k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6b7494; }
.sw-hc-v { font-size: 14px; font-weight: 700; color: #16224d; } .sw-hc-bartop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 7px; }
.sw-hc-bar { height: 6px; background: #e7e9f2; border-radius: 999px; overflow: hidden; }
.sw-hc-bar span { display: block; height: 100%; background: #a855f7; border-radius: 999px; transition: width .5s ease; }
.sw-hc-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #6b7494; }
.seasonal-widget .sw-hc-book { display: block; width: 100%; text-align: center; margin-top: 10px;
background: #203c85; color: #fff !important; border-radius: 10px; padding: 9px 14px;
font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.seasonal-widget .sw-hc-book:hover { opacity: .92; } .sw-iconpop {
position: absolute; z-index: 7; width: 264px; max-width: 82%; padding: 20px 22px;
background: #fff; color: #16224d; border-radius: 18px; box-shadow: 0 18px 48px rgba(8,14,40,.42);
opacity: 0; transform: scale(.95); pointer-events: none; transition: opacity .16s, transform .16s; text-align: center;
}
.sw-iconpop.is-show { opacity: 1; transform: scale(1); pointer-events: auto; }
.sw-pop-rec { font-size: 14px; font-weight: 800; }
.sw-pop-sub { font-size: 12px; color: #6b7494; margin: 4px 0 11px; }
.seasonal-widget .sw-pop-book { display: inline-flex; align-items: center; justify-content: center;
background: #203c85; color: #fff !important; border-radius: 9px; padding: 9px 16px;
font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.seasonal-widget .sw-pop-book:hover { opacity: .92; } .sw-axis { display: flex; margin-top: 10px; padding-bottom: 12px; position: relative; z-index: 5; }
.sw-mlabel { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sw-muted); }
.sw-mlabel.is-now { color: #fff; }
.sw-mlabel i { font-style: normal; }
.sw-ml-letter { display: none; }
.sw-ml-full   { display: inline; }
.sw-ml-ic { height: 14px; width: 14px; opacity: .85; }
.sw-ml-ics { display: inline-flex; gap: 4px; align-items: center; } .sw-side { display: flex; flex-direction: column; gap: 16px; }
.sw-side .sw-btn { margin-top: auto; } .sw-panels { display: flex; flex-direction: column; gap: 8px; max-height: 224px; overflow-y: auto; padding-right: 2px;
-webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
.sw-panels::-webkit-scrollbar { width: 0; }
.sw-panel { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px;
padding: 12px 14px; background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: 12px;
transition: opacity .2s, background .2s; }
.sw-panel:not(.is-on) { opacity: .5; }
.sw-sw-swatch { width: 14px; height: 14px; border-radius: 5px; background: var(--c, #fff); }
.sw-panel-ic { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.sw-panel-ic svg { width: 100%; height: 100%; display: block; }
.sw-panel:hover .sw-panel-ic { transform: scale(1.18); }
.sw-panel-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-panel-t { font-size: 13px; font-weight: 700; }
.sw-panel-d { font-size: 11.5px; line-height: 1.35; color: var(--sw-muted); } .sw-toggle { width: 38px; height: 22px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
background: rgba(255,255,255,.18); position: relative; transition: background .2s; }
.sw-toggle span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw-toggle.is-on { background: #a855f7; }
.sw-toggle.is-on span { transform: translateX(16px); } .sw-btns { display: flex; flex-direction: column; gap: 8px; }
.sw-btn { display: block; width: 100%; text-align: center; } @media (max-width: 900px) {
.sw-body { grid-template-columns: 1fr; gap: 20px; }
.sw-panels { max-height: none; mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 640px) {
.seasonal-widget { padding: 20px 16px 24px; border-radius: 18px; }
.sw-cards { grid-template-columns: repeat(2, 1fr); }
.sw-ml-letter { display: inline; }
.sw-ml-full   { display: none; }
.sw-title { font-size: 17px; }
.sw-head { gap: 10px; }
.sw-logo { height: 22px; }
.sw-title-main { font-size: 21px; }
.sw-eyebrow { font-size: 9.5px; letter-spacing: .04em; padding: 3px 9px; }
}