/* ============================================================================
   CJS picker panels — the dark "choose your platform & edition" box.
   Shared by:
     - homepage slider  templates/__master/Panels/Header_banner.html (every slide's .fc27-panel)
     (product pages use their own compact strip styles: lib/cjs_promo_pickers.php)
   Everything is scoped under .cjs-promo. Colour theme = data-p on .fc27-panel.
   ============================================================================ */
.cjs-promo{position:relative;height:444px;overflow:hidden;background:#07122a center/cover no-repeat;font-family:'Open Sans',Arial,sans-serif;color:#fff;text-align:left}
.cjs-promo *{box-sizing:border-box}
.cjs-promo a{text-decoration:none;color:inherit}
@keyframes cjsPulse{0%{box-shadow:0 0 0 0 rgba(61,255,160,.6)}70%{box-shadow:0 0 0 9px rgba(61,255,160,0)}100%{box-shadow:0 0 0 0 rgba(61,255,160,0)}}
@keyframes cjsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* per-platform theme: JS sets data-p on the panel; everything below reads these vars */
.fc27-panel{--acc:#107c10;--hi:#3ddc3d;--glow:rgba(16,124,16,.55)}
.fc27-panel[data-p="1"]{--acc:#0055b8;--hi:#3aa0ff;--glow:rgba(0,85,184,.6)}
.fc27-panel[data-p="2"]{--acc:#2a475e;--hi:#66c0f4;--glow:rgba(42,71,94,.75)}
.fc27-panel[data-p="3"]{--acc:#e8392e;--hi:#ff7a5c;--glow:rgba(232,57,46,.5)}
.fc27-panel[data-p="4"]{--acc:#0067c0;--hi:#4cc2ff;--glow:rgba(0,103,192,.6)}   /* Windows */
.fc27-panel[data-p="5"]{--acc:#c43e1c;--hi:#ff8c5a;--glow:rgba(196,62,28,.55)}  /* Office */
.fc27-panel[data-p="6"]{--acc:#6b3fd6;--hi:#b69cff;--glow:rgba(107,63,214,.55)} /* Microsoft 365 */
.fc27-panel[data-p="7"]{--acc:#c78a00;--hi:#ffc83d;--glow:rgba(199,138,0,.5)}   /* bundles */
.fc27-panel[data-p="8"]{--acc:#c4000f;--hi:#ff5a6a;--glow:rgba(196,0,15,.55)}   /* Switch Online */
.fc27-panel[data-p="9"]{--acc:#0082c8;--hi:#3ed3ff;--glow:rgba(0,130,200,.55)}  /* Switch games */
.fc27-panel[data-p="10"]{--acc:#d98a00;--hi:#ffd84a;--glow:rgba(217,138,0,.5)}  /* Switch DLC */
.fc27-panel[data-p="11"]{--acc:#169c46;--hi:#1ed760;--glow:rgba(22,156,70,.55)}  /* Spotify */
.fc27-panel{flex:0 0 45%;max-width:430px;margin:18px 18px 18px 0;padding:15px;border-radius:16px;position:relative;overflow:hidden;background:rgba(6,14,30,.72);border:1px solid var(--hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;box-shadow:0 20px 40px rgba(0,0,0,.35),0 0 30px -8px var(--glow);transition:border-color .35s,box-shadow .35s}
.fc27-panel::before{content:"";position:absolute;left:-20%;right:-20%;top:-60%;height:120%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.55;pointer-events:none;transition:background .35s}
.fc27-panel>*{position:relative}
.fc27-panel-h{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#b9c9d6;margin-bottom:10px}
.fc27-tabs{--i:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:rgba(0,0,0,.35);border-radius:10px;padding:4px;margin-bottom:10px}
.fc27-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,4));border-radius:7px;background:linear-gradient(135deg,var(--acc),var(--hi));box-shadow:0 4px 16px var(--glow);transform:translateX(calc(var(--i) * 100%));transition:transform .35s cubic-bezier(.3,1.3,.5,1),background .35s}
.cjs-promo .fc27-tabs button{position:relative;z-index:1;-webkit-appearance:none;appearance:none;border:0;background:none;color:#c9d6e0;font:700 12px/1 'Open Sans',Arial,sans-serif;padding:7px 2px;margin:0;cursor:pointer;border-radius:7px;transition:color .25s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px}
.cjs-promo .fc27-tabs button img{width:16px;height:16px;border-radius:4px;flex-shrink:0;filter:grayscale(1) brightness(1.4);opacity:.75;transition:filter .25s,opacity .25s}
.cjs-promo .fc27-tabs button:hover{color:#fff}
.cjs-promo .fc27-tabs button.is-on{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cjs-promo .fc27-tabs button.is-on img{filter:none;opacity:1}
.fc27-lists{flex:1;min-height:0}
.cjs-promo .fc27-list{list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:6px}
.cjs-promo .fc27-list.is-on{display:flex;animation:cjsIn .35s ease}
.cjs-promo .fc27-plat{list-style:none;display:flex;align-items:center;gap:8px;margin:0 0 2px;padding:0 2px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--hi)}
.cjs-promo .fc27-plat img{width:22px;height:22px;border-radius:5px}
/* owl.carousel.css + HTMLHead force every slider img to width:100% / height:444px - pin the logos */
#top-slider .cjs-promo .fc27-tabs button img{width:16px!important;height:16px!important;display:block}
#top-slider .cjs-promo .fc27-plat img{width:22px!important;height:22px!important;display:block}
.cjs-promo .fc27-opt{display:flex;align-items:center;margin:0;padding:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--hi);border-radius:10px;transition:background .2s,border-color .2s,transform .2s;list-style:none}
.cjs-promo .fc27-opt:hover{background:var(--glow);border-color:var(--hi);transform:translateX(3px)}
.fc27-opt>a{flex:1;display:flex;align-items:center;gap:10px;padding:6px 12px;min-width:0;min-height:46px}
.fc27-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cjs-promo .fc27-opt>a:hover{color:#fff}
.fc27-ed{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc27-tags{display:flex;gap:4px;flex-shrink:0}
.fc27-tags em{font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.12);color:#d6e6f0;text-transform:uppercase;white-space:nowrap}
.fc27-tags em.t-fast{background:rgba(255,216,74,.16);color:#ffd84a}
.fc27-tags em.t-top{background:#ff3b3b;color:#fff}
.fc27-go{margin-left:auto;color:var(--hi);font-weight:700;transition:transform .2s}
.cjs-from+.fc27-go{margin-left:0}
.cjs-promo .cjs-from{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;font-size:9px;line-height:1.15;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#b9c9d6}
.cjs-promo .cjs-from .product-in-price{display:block;margin:0;padding:0;background:none;font-size:17px;font-weight:800;letter-spacing:0;text-transform:none;color:#fff}
.fc27-opt:hover .fc27-go{transform:translateX(3px)}
.fc27-reg{display:flex;gap:3px;padding-right:10px}
.cjs-promo .fc27-reg a{font-size:10px;font-weight:700;padding:3px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.28);color:#d6e6f0;transition:all .2s}
.cjs-promo .fc27-reg a:hover{background:var(--hi);border-color:var(--hi);color:#06121f}
/* FC Points packs under the Xbox editions: compact 3-up grid so the list still fits the 444px slide */
.cjs-promo .fc27-sub{list-style:none;margin:0;padding:0 2px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--hi)}
.cjs-promo .fc27-ptsrow{list-style:none;margin:-2px 0 0;padding:0}
.cjs-promo .fc27-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
.cjs-promo .fc27-pt{list-style:none;margin:0;padding:0}
.cjs-promo .fc27-pt>a{position:relative;display:flex;flex-direction:column;gap:1px;height:100%;padding:3px 9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--hi);border-radius:9px;transition:background .2s,border-color .2s,transform .2s}
.cjs-promo .fc27-pt>a:hover{background:var(--glow);border-color:var(--hi);transform:translateY(-2px);color:#fff}
.cjs-promo .fc27-pt.is-best>a{border-color:var(--hi)}
.fc27-pt b{font-size:16px;font-weight:800;line-height:1.15;color:#fff}
.cjs-promo .fc27-pt .cjs-from{margin:0;flex-direction:row;align-items:baseline;gap:4px}
.cjs-promo .fc27-pt .cjs-from .product-in-price{font-size:14px}
.cjs-promo a.fc27-all{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--hi);text-align:right}
.cjs-promo a.fc27-all:hover{color:#fff}
.cjs-promo .fc27-pt .fc27-badge{position:absolute;top:-10px;right:6px;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--hi);color:#06121f}
@container (max-width:760px){
  .fc27-panel{flex-basis:52%;margin:12px 12px 12px 0;padding:12px}
  .fc27-tags em.t-top{display:none}
  .fc27-ed{font-size:13px}
  .cjs-promo .fc27-tabs button{font-size:11px}
  #top-slider .cjs-promo .fc27-tabs button img{display:none}
  /* narrow chips: drop the "from" label so "£113.20" fits */
  .cjs-promo .fc27-pt>a{padding:3px 7px}
  .cjs-promo .fc27-pt .cjs-from{font-size:0;gap:0}
  .cjs-promo .fc27-pt .cjs-from .product-in-price{font-size:13px}
}