/* Prototype: navigation only. Product cards and renderers use the existing CSS. */
html{scroll-padding-top:170px}
body{padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}
.ux-demo-label{padding:7px 12px;text-align:center;background:#153e2d;color:#fff;font:12px/1.4 system-ui}
.ux-demo-label a{color:inherit;text-decoration:underline}
.ux-tabs{position:fixed;bottom:0;left:0;right:0;z-index:90;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:7px max(6px,calc((100vw - 740px)/2)) calc(7px + env(safe-area-inset-bottom));gap:3px;background:#fff;border-top:1px solid #dce3dc;box-shadow:0 -4px 18px #143e2e10}
.ux-tabs button{border:0;background:none;color:#52665b;font:600 clamp(10px,2.65vw,12px)/1.25 system-ui;min-width:0;min-height:64px;padding:5px 1px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.ux-tabs button>span:first-child{font-size:22px;line-height:26px;height:26px}
.ux-tabs svg{display:block;width:28px;height:28px}
.ux-tab-label{display:block;min-height:2.5em;max-width:100%;text-align:center;white-space:normal;overflow-wrap:normal}
.ux-tabs button[aria-current=page]{background:#e6eee7;color:#153e2d}
.ux-tab-hidden{display:none!important}
.bottom-nav,.quickbar,#univers{display:none!important}
.ux-star-access{max-width:1180px;margin:10px auto 0;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:9px}
.ux-star-access button{display:flex;align-items:center;justify-content:flex-start;gap:10px;background:#fff;border:1px solid #d8dfd9;border-radius:13px;padding:5px 10px 5px 5px;color:#183f2e;font:600 12px/1.3 system-ui;cursor:pointer;min-width:0}
.ux-star-access .ux-star-images{display:flex;flex:none}
.ux-star-access img{width:48px;height:52px;object-fit:contain;border-radius:8px}
.ux-star-access small{display:block;font-size:10px;font-weight:400;margin-top:2px}
.ux-alert-access{white-space:nowrap;min-height:44px;padding:10px!important}
.ux-nav-status{position:fixed;left:12px;right:12px;bottom:82px;z-index:110;background:#163e2e;color:white;padding:14px 18px;border-radius:12px;font:14px/1.4 system-ui;text-align:center}
.ux-subtabs{display:flex;flex-wrap:wrap;gap:7px;padding:13px 0 0}
.ux-subtabs button{font:600 12px/1.3 system-ui;border:1px solid #dce3dc;border-radius:8px;background:#fff;color:#173f31;min-height:40px;padding:9px 13px;cursor:pointer}
.ux-subtabs button[aria-pressed=true]{background:#173f31;color:#fff;border-color:#173f31}
@media(min-width:900px){.ux-tabs button{font-size:13px}.ux-star-access{padding:0 24px}}
@media(prefers-color-scheme:dark){.ux-tabs,.ux-star-access button,.ux-subtabs button{background:#11251c;color:#e4eee6;border-color:#375040}.ux-tabs button{color:#c7d6cb}.ux-tabs button[aria-current=page],.ux-subtabs button[aria-pressed=true]{background:#274936;color:#fff}}
/* One preview per block: full original cards, never a clipped card. */
.ux-preview-grid.ux-preview-1:not(.ux-preview-expanded)>:nth-child(n+2),
.ux-preview-grid.ux-preview-2:not(.ux-preview-expanded)>:nth-child(n+3){display:none!important}
#clubs-list.ux-preview-grid>.club-card{display:block}
#clubs-toggle{display:none!important}
.ux-preview-toggle{display:block;width:100%;margin:12px 0 4px;padding:13px;border:1px solid #b6c7bd;border-radius:12px;background:#fff;color:#153e2d;font:700 14px/1.4 system-ui;cursor:pointer;min-height:48px}
.ux-preview-toggle[hidden]{display:none}
.social-grid .social-media.ux-media-pending{min-height:160px!important;height:160px}
.ux-media-pending .social-media-fallback{gap:10px;align-content:center;padding:20px}
.ux-instagram-load{padding:12px 16px;border:1px solid #ffffff70;border-radius:10px;background:#fff;color:#153e2d;font:700 14px/1.4 system-ui;cursor:pointer}
.ux-instagram-load:disabled{opacity:.6;cursor:progress}
.social-media-fallback a{color:inherit}
@media(prefers-color-scheme:dark){.ux-preview-toggle{background:#16382a;color:#fff;border-color:#375040}}

.ux-offline-note{position:sticky;top:0;z-index:100;padding:12px;margin:0;background:#fff5cf;color:#153e2d;font:14px/1.4 system-ui}


/* Above the fixed tab bar on desktop as well as mobile. */
html[data-ux-active="true"] .back-to-top {
  inset-block-end: calc(7rem + env(safe-area-inset-bottom, 0px));
  z-index: 95;
}

/* The news portal is a one-page shortcut, redundant inside the news tab. */
html[data-ux-active="true"] #country-news-portal { display: none; }

/* Approved Capacitor header, shared by browser and installed PWA. */
.ux-approved-header{position:relative;z-index:41;display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0 auto;padding:12px 16px 14px;box-sizing:border-box}
.ux-approved-header button[data-ux-open="pronos"]{width:100%;min-height:80px;justify-content:space-between;gap:8px;padding:8px;border:1px solid #4b755b;border-radius:20px;background:linear-gradient(115deg,#173f31,#0b291f);color:#fff;box-shadow:0 6px 18px #001d1420}
.ux-approved-header .ux-star-portrait{display:grid;place-items:center;flex:none;padding:4px;background:#f1eee4;border-radius:13px}
.ux-approved-header .ux-star-portrait img{width:40px;height:60px}
.ux-approved-header .ux-star-duel{flex:1;min-width:0;text-align:center;font-size:clamp(13px,3.8vw,16px)}
.ux-approved-header .ux-star-duel small{font-size:clamp(10px,2.9vw,12px);color:#d0dfd5;margin-top:4px}
.ux-account-actions{display:flex;gap:10px}
.ux-account-menu{flex:1;min-width:0}
.ux-account-menu summary,.ux-approved-header .ux-alert-access{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 10px!important;border:1px solid #a9c2b5;border-radius:15px;background:#f2f7f3;color:#173f31;font:650 14px/1.3 system-ui;cursor:pointer;list-style:none}
.ux-approved-header .ux-alert-access{flex:1}
.ux-account-menu summary::-webkit-details-marker{display:none}
.ux-account-menu.is-connected summary:after{content:"";width:7px;height:7px;border-radius:50%;background:#14894d}
.ux-account-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(360px,calc(100% - 32px));box-sizing:border-box;padding:16px;border:1px solid #c4d4cb;border-radius:18px;background:#fff;box-shadow:0 12px 36px #001d1430;color:#173f31;text-align:center;max-height:min(65vh,460px);overflow:auto}
.ux-account-panel p{margin:0 0 12px;font:13px/1.4 system-ui}
.ux-account-panel a{display:block;max-width:none;white-space:normal;overflow-wrap:anywhere;padding:12px;color:inherit;min-height:44px;box-sizing:border-box}
.ux-approved-header button:focus-visible,.ux-account-menu summary:focus-visible{outline:3px solid #40b986;outline-offset:3px}
@media(prefers-color-scheme:dark){.ux-account-menu summary,.ux-approved-header .ux-alert-access,.ux-account-panel{background:#17362a;color:#ecf4ef;border-color:#51715e}}
.ux-account-menu summary:before{content:"";width:19px;height:19px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E") center/contain no-repeat}
.ux-approved-header .ux-alert-access:before{content:"";width:19px;height:19px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4M12 1v1'/%3E%3C/svg%3E") center/contain no-repeat}

/* Keep the sticky brand bar above the scrolling shortcuts (41) and Live (39). */
html[data-ux-active="true"] .app-header {
  z-index: 50;
  background: rgb(250 253 250);
  backdrop-filter: none;
}
/* Only the expanded account panel needs to overlay the ticker. The scrolling
   shortcuts belong to the normal page layer, behind the opaque sticky header. */
.ux-approved-header { z-index: auto; }
.ux-account-panel { z-index: 41; }

/* National palette from configured selections; shared layout and controls. */
body[data-configured-selection="true"] .ux-approved-header button[data-ux-open="pronos"] {
  background: linear-gradient(115deg, var(--country-footer-mid), var(--country-footer-start));
  border-color: var(--accent);
}
body[data-configured-selection="true"] :is(.ux-account-menu summary, .ux-approved-header .ux-alert-access, .ux-preview-toggle) {
  color: var(--accent);
  background: #fff;
  border-color: var(--line);
}
body[data-configured-selection="true"] .ux-tabs button[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
body[data-configured-selection="true"] .ux-approved-header button:focus-visible { outline-color: var(--accent); }

html[data-ux-active="true"] #recent-performance-stats { display:none!important; }