/* ==========================================================================
Fussspool Public — Mobile-First Responsive Styles
========================================================================== */
/* --- Base / Mobile First --- */
.fussspool-wrap,
.fussspool-coupon-form {
max-width: 100%;
padding: 0 4px;
font-size: 14px;
}
/* Notices */
.fussspool-notice {
padding: 10px 14px;
margin: 10px 0;
border-radius: 4px;
border-left: 4px solid #ccc;
}
.fussspool-notice-success {
background: #d4edda;
border-color: #28a745;
color: #155724;
}
.fussspool-notice-error {
background: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.fussspool-notice-warning {
background: #fff3cd;
border-color: #856404;
color: #533f03;
}
.fussspool-notice p {
margin: 0;
}
/* Forms */
.fussspool-form {
margin: 12px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.fussspool-inline-form {
display: inline-block;
margin: 0;
}
.fussspool-form label {
font-weight: 600;
white-space: nowrap;
}
/* Inputs */
.fussspool-select,
.fussspool-input {
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
min-height: 44px; /* Touch target */
max-width: 100%;
box-sizing: border-box;
}
.fussspool-select {
background: #fff;
appearance: auto;
}
.fussspool-select-sm,
.fussspool-input-sm {
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
min-height: 40px;
max-width: 100%;
box-sizing: border-box;
}
.fussspool-score-input {
width: 56px;
padding: 6px 4px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
font-size: 14px;
min-height: 40px;
box-sizing: border-box;
}
/* Buttons */
.fussspool-btn {
display: inline-block;
padding: 10px 18px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
min-height: 44px;
white-space: nowrap;
text-decoration: none;
line-height: 1.4;
}
.fussspool-btn:hover {
background: #005a87;
color: #fff;
}
.fussspool-btn-sm {
padding: 6px 12px;
font-size: 13px;
min-height: 40px;
}
.fussspool-btn-secondary {
background: #6c757d;
}
.fussspool-btn-secondary:hover {
background: #545b62;
}
.fussspool-btn-danger {
background: #dc3545;
}
.fussspool-btn-danger:hover {
background: #c82333;
}
/* Tables — scrollable wrapper */
.fussspool-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 12px 0;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.fussspool-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
white-space: nowrap;
}
.fussspool-table thead {
background: #f5f5f5;
}
.fussspool-table th,
.fussspool-table td {
padding: 8px 10px;
border-bottom: 1px solid #e0e0e0;
text-align: left;
vertical-align: middle;
}
.fussspool-table th {
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #555;
}
.fussspool-table tbody tr:last-child td {
border-bottom: none;
}
.fussspool-table tbody tr:hover {
background: #fafafa;
}
/* Situation Analysis — inline edit rows */
.fussspool-wi-edit-row {
background: #f0f7ff !important;
}
.fussspool-wi-edit-row td {
padding: 10px 10px;
vertical-align: middle;
}
.fussspool-wi-save-row {
background: #46b450;
}
.fussspool-wi-save-row:hover {
background: #388e3c;
}
/* Standings highlights — current user keeps a row tint; rank is shown via the indicator bar */
.fussspool-current-user {
background-color: #d9edf7 !important;
}
/* Thin left-edge indicator bar replacing full-row colour coding */
.fussspool-standings .fussspool-col-indicator {
position: sticky;
left: 0;
width: 5px;
min-width: 5px;
max-width: 5px;
padding: 0;
background-color: transparent;
z-index: 2;
}
.fussspool-standings tr.fussspool-leader .fussspool-col-indicator {
background-color: #f0b429; /* gold — 1st place */
}
.fussspool-standings tr.fussspool-top-winner .fussspool-col-indicator {
background-color: #0073aa; /* blue — prize positions */
}
thead .fussspool-col-indicator {
background-color: transparent;
z-index: 3;
}
/* Sticky name columns — stay visible when scrolling horizontally */
.fussspool-standings .fussspool-col-arrow {
position: sticky;
left: 5px; /* past indicator */
background: inherit;
background-color: #fff;
z-index: 1;
min-width: 22px;
max-width: 28px;
}
.fussspool-standings .fussspool-col-pos {
position: sticky;
left: 33px; /* 5px indicator + 28px arrow */
background: inherit;
background-color: #fff;
z-index: 1;
min-width: 22px;
max-width: 28px;
}
.fussspool-standings .fussspool-col-user {
position: sticky;
left: 61px; /* 5 + 28 + 28 */
background: inherit;
background-color: #fff;
z-index: 1;
min-width: 80px;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sticky columns pick up current-user row tint */
.fussspool-standings tr.fussspool-current-user .fussspool-col-arrow,
.fussspool-standings tr.fussspool-current-user .fussspool-col-pos,
.fussspool-standings tr.fussspool-current-user .fussspool-col-user {
background-color: #d9edf7 !important;
}
thead .fussspool-col-arrow,
thead .fussspool-col-pos,
thead .fussspool-col-user {
background-color: #fff;
z-index: 3;
position: sticky;
}
/* Compact non-user columns */
.fussspool-standings {
width: 100%;
}
.fussspool-standings th,
.fussspool-standings td {
white-space: nowrap;
padding: 5px 6px;
font-size: 13px;
}
.fussspool-standings .fussspool-col-arrow,
.fussspool-standings .fussspool-col-pos {
text-align: center;
font-size: 12px;
}
.fussspool-standings-title {
margin-bottom: 8px;
font-size: 16px;
}
.fussspool-actual-row {
background-color: #f0fff0 !important;
}
.fussspool-wi-changed {
background-color: #fff !important; /* white to stand out from green actual rows */
}
.fussspool-actual-score {
background-color: #d4edda;
font-weight: 600;
}
/* Total row */
.fussspool-total-row td {
font-weight: 700;
border-top: 2px solid #333;
background: #f9f9f9;
}
/* Mobile-only cells — hidden on desktop, shown inside mobile cards */
.fussspool-mobile-only,
.fussspool-mobile-score { display: none; }
/* Pts tooltip — hidden by default, revealed on hover */
.fussspool-pts-wrap {
cursor: help;
border-bottom: 1px dashed currentColor;
display: inline;
}
.fussspool-table td[data-label="Earned"],
.fussspool-table td[data-label="Pts"] { position: relative; }
.fussspool-pts-tip {
display: none;
position: absolute;
bottom: calc(100% + 4px);
left: 0;
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 11px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
font-weight: normal;
}
.fussspool-table td[data-label="Earned"]:hover .fussspool-pts-tip,
.fussspool-table td[data-label="Pts"]:hover .fussspool-pts-tip { display: block; }
/* Predicted / Actual score chips in mobile card score cells */
.fussspool-score-pred {
font-weight: 600;
font-size: 15px;
color: #333;
}
.fussspool-score-actual {
display: inline-block;
background: #d4edda;
color: #155724;
font-weight: 700;
font-size: 13px;
padding: 1px 6px;
border-radius: 3px;
}
/* O/U OVER / UNDER badge */
.fussspool-ou-result {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-weight: 700;
font-size: 12px;
}
.fussspool-ou-over { background: #d4edda; color: #155724; }
.fussspool-ou-under { background: #f8d7da; color: #721c24; }
/* Flags */
.fussspool-flag {
height: 14px;
vertical-align: middle;
margin-right: 4px;
}
/* Icons */
.fussspool-icon {
height: 16px;
vertical-align: middle;
margin-right: 2px;
}
/* Achievement badges — compact coloured chips that don't overflow */
.fussspool-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 4px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
line-height: 1;
margin-right: 2px;
vertical-align: middle;
}
.fussspool-badge-score { background: #0073aa; color: #fff; }
.fussspool-badge-result { background: #46b450; color: #fff; }
.fussspool-badge-goals { background: #f0ad00; color: #fff; }
.fussspool-badge-winner { background: #9b59b6; color: #fff; }
.fussspool-badge img { height: 14px; vertical-align: middle; }
/* O/U pill inside achievement badge — overrides orange with green/red */
.fussspool-badge.fussspool-ou-over { background: #d4edda; color: #155724; }
.fussspool-badge.fussspool-ou-under { background: #f8d7da; color: #721c24; }
/* Badge key legend below results table */
.fussspool-badge-key {
margin-top: 10px;
font-size: 12px;
color: #555;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.fussspool-badge-key > span { display: inline-flex; align-items: center; gap: 4px; }
/* Points cell (used by JS) */
.fussspool-points-cell {
font-weight: 600;
}
/* --- Tablet and up (≥768px) --- */
@media (min-width: 768px) {
.fussspool-wrap,
.fussspool-coupon-form {
padding: 0;
font-size: 15px;
}
.fussspool-table {
font-size: 14px;
}
.fussspool-table th,
.fussspool-table td {
padding: 10px 14px;
}
/* Keep standings columns compact at all widths */
.fussspool-standings th,
.fussspool-standings td {
padding: 6px 8px;
font-size: 13px;
}
.fussspool-standings .fussspool-col-indicator {
padding: 0;
}
.fussspool-score-input {
width: 64px;
}
}
/* --- Desktop (≥1024px) --- */
@media (min-width: 1024px) {
.fussspool-table {
white-space: normal;
}
.fussspool-table th,
.fussspool-table td {
padding: 10px 16px;
}
}
/* --- Standings: hide detail columns on narrow portrait screens --- */
@media (max-width: 479px) {
/* Show only: indicator + ↕ + # + User + Points; hide +/- and stats columns */
.fussspool-standings .fussspool-col-extra {
display: none;
}
/* Keep Editions and Avg Pts visible on cross-edition standings */
.fussspool-standings .fussspool-col-edition-stat {
display: table-cell;
}
}
/* --- Very small screens: card-like fallback for narrow tables --- */
@media (max-width: 480px) {
.fussspool-form {
flex-direction: column;
align-items: stretch;
}
.fussspool-select,
.fussspool-input {
width: 100%;
display: block;
box-sizing: border-box;
}
.fussspool-table th,
.fussspool-table td {
padding: 6px 8px;
font-size: 12px;
}
.fussspool-score-input {
width: 48px;
font-size: 13px;
}
}
/* ==========================================================================
Mobile card layout — Previous Coupon & Compare Predictions
Stacks each row as a card, with points-priority columns shown first.
Applied below 640px where horizontal scrolling becomes painful.
========================================================================== */
@media (max-width: 640px) {
/* Hide the real thead — labels come from data-label attributes instead */
.fussspool-table-mobile-cards thead {
display: none;
}
.fussspool-table-mobile-cards,
.fussspool-table-mobile-cards tbody {
display: block;
width: 100%;
}
/* Each row becomes a card */
.fussspool-table-mobile-cards tbody tr {
display: flex;
flex-wrap: wrap;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 10px;
padding: 8px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
position: relative;
}
.fussspool-table-mobile-cards tbody tr.fussspool-current-user {
background: #d9edf7 !important;
}
.fussspool-table-mobile-cards tbody tr.fussspool-top-winner {
background: #d4edda !important;
}
.fussspool-table-mobile-cards tbody tr.fussspool-actual-row {
background: #f0fff0 !important;
}
.fussspool-table-mobile-cards tbody tr.fussspool-total-row {
background: #f9f9f9 !important;
font-weight: 700;
border-top: 2px solid #333;
border-radius: 0;
margin-top: 0;
}
/* Each cell is a labelled field */
.fussspool-table-mobile-cards td {
display: flex;
flex-direction: column;
padding: 4px 8px;
border: none;
font-size: 13px;
min-width: 50%;
box-sizing: border-box;
}
/* Label above the value */
.fussspool-table-mobile-cards td::before {
content: attr(data-label);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #888;
margin-bottom: 2px;
}
/* Cells with no label (icon column) take less space */
.fussspool-table-mobile-cards td[data-label=""] {
min-width: 100%;
flex-direction: row;
align-items: center;
gap: 4px;
}
/* ---- Column ordering for Previous Coupon & Compare ----
Layout goal: Time | Home | Away | Earned/Points — visible at a glance.
Predicted, actual, winner cols come next. Odds and detail cols last. */
/* Row 1 — Time spans full width, gives context */
.fussspool-table-mobile-cards td[data-label="Time"] {
order: 1;
min-width: 100%;
font-size: 11px;
color: #666;
padding-bottom: 2px;
}
/* Row 2 — Home and Away side by side (50% each) */
.fussspool-table-mobile-cards td[data-label="Home"],
.fussspool-table-mobile-cards td[data-label="Away"] {
order: 2;
min-width: 50%;
font-weight: 600;
/* Wrap so ::before (label) sits on its own line, flag+name below it */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
/* Label occupies full width — pushes flag+name to next flex line */
.fussspool-table-mobile-cards td[data-label="Home"]::before,
.fussspool-table-mobile-cards td[data-label="Away"]::before {
width: 100%;
flex-shrink: 0;
align-self: flex-start;
/* flag+name content that follows stays on one line */
white-space: nowrap;
}
/* The actual text content (flag img + team name span) must not wrap */
.fussspool-table-mobile-cards td[data-label="Home"] > *,
.fussspool-table-mobile-cards td[data-label="Away"] > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.fussspool-table-mobile-cards td[data-label="Home"] > img.fussspool-flag,
.fussspool-table-mobile-cards td[data-label="Away"] > img.fussspool-flag {
flex-shrink: 0; /* flag never collapses */
overflow: visible;
text-overflow: unset;
}
/* Row 3 — User label (compare table) */
.fussspool-table-mobile-cards td[data-label="User"] {
order: 2;
min-width: 100%;
font-weight: 600;
}
/* Row 3 — Earned + badges on same line, highlighted */
.fussspool-table-mobile-cards td[data-label="Earned"],
.fussspool-table-mobile-cards td[data-label="Points"] {
order: 3;
min-width: 100%;
font-size: 18px;
font-weight: 700;
color: #0073aa;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
margin-bottom: 4px;
flex-direction: row;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Suppress the pseudo-label for Earned in flex-row mode */
.fussspool-table-mobile-cards td[data-label="Earned"]::before,
.fussspool-table-mobile-cards td[data-label="Points"]::before {
min-width: 3em;
flex-shrink: 0;
}
/* Badges sit inline with Earned — pull them to order 3 and hide their own cell label */
.fussspool-table-mobile-cards td[data-label=""] {
order: 3;
min-width: auto;
flex-direction: row;
align-items: center;
gap: 3px;
padding-left: 0;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
margin-bottom: 4px;
}
.fussspool-table-mobile-cards td[data-label=""]::before {
content: none;
}
/* Fix flag stretch — in flex row cells, prevent img from stretching */
.fussspool-table-mobile-cards td img.fussspool-flag {
height: 14px;
width: auto;
align-self: center;
flex-shrink: 0;
}
/* Row 4 — Predicted score and winner */
.fussspool-table-mobile-cards td[data-label="Predicted"],
.fussspool-table-mobile-cards td[data-label="KO Winner"] {
order: 4;
min-width: 50%;
}
/* Row 5 — Actual result and winner */
.fussspool-table-mobile-cards td[data-label="Actual"],
.fussspool-table-mobile-cards td[data-label="Act. Winner"] {
order: 5;
min-width: 50%;
}
/* Row 6 — Max points */
.fussspool-table-mobile-cards td[data-label="Max"] {
order: 6;
min-width: 50%;
}
/* Row 7 — Odds and other detail cols (requires scroll) */
.fussspool-table-mobile-cards td[data-label="1"],
.fussspool-table-mobile-cards td[data-label="X"],
.fussspool-table-mobile-cards td[data-label="2"],
.fussspool-table-mobile-cards td[data-label="Home Score"],
.fussspool-table-mobile-cards td[data-label="Away Score"] {
order: 7;
min-width: 20%;
}
/* Match fixture columns in compare (e.g. "ENG v MLT") */
.fussspool-table-mobile-cards td:not([data-label="Time"]):not([data-label="Home"]):not([data-label="Away"]):not([data-label="User"]):not([data-label="Earned"]):not([data-label="Points"]):not([data-label="Predicted"]):not([data-label="KO Winner"]):not([data-label="Actual"]):not([data-label="Act. Winner"]):not([data-label="Max"]):not([data-label="1"]):not([data-label="X"]):not([data-label="2"]):not([data-label="Home Score"]):not([data-label="Away Score"]):not([data-label="Pred Home"]):not([data-label="Pred Away"]):not([data-label="O/U Goals"]):not([data-label=""]) {
order: 8;
min-width: 50%;
}
/* Actual score highlight still works in card mode */
.fussspool-table-mobile-cards td.fussspool-actual-score {
background: transparent;
font-weight: 600;
}
/* Show mobile-only cells inside cards */
.fussspool-table-mobile-cards .fussspool-mobile-only,
.fussspool-table-mobile-cards .fussspool-mobile-score {
display: flex;
flex-direction: column;
}
/* =========================================================================
COUPON FORM — new card layout (specificity 0,3,1 beats general 0,2,1)
Line 1: Time | Line 2: 1/X/2 odds | Line 3: Home(1)+score | Line 4: Away(2)+score
Line 5: O/U Goals | Line 6: KO Winner | Line 7: Pts
========================================================================= */
/* Override labels and odds prefix */
/* Home/Away labels reinstated inline; width:auto overrides the general width:100% rule */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Home"]::before,
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Away"]::before {
content: attr(data-label);
width: auto;
margin-right: 4px;
margin-bottom: 0;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="1"]::before { content: "(1)"; }
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="X"]::before { content: "(X)"; }
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="2"]::before { content: "(2)"; }
/* Line 1 — Date & Time */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Time"] {
order: 1;
min-width: 100%;
font-size: 12px;
color: #555;
padding-bottom: 4px;
}
/* Line 2 — Odds: 1, X, 2 */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="1"],
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="X"],
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="2"] {
order: 2;
flex: 1 1 auto; /* auto basis = natural content width; lets wrap algorithm push Home to its own line */
font-weight: 600;
align-items: center;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
background: #f7f7f7;
margin: 2px 2px 4px;
padding: 4px 4px;
}
/* Line 3 — Home: flag+label on left, score input on right, always one line.
flex-basis calc(100%-64px) ensures Home+HomeScore fill the row so Away wraps below. */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Home"] {
order: 3;
flex: 1 1 calc(100% - 64px);
min-width: 0;
font-weight: 600;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Home Score"] {
order: 3;
flex: 0 0 64px; /* fixed width — won't grow or shrink */
min-width: 0;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Home Score"]::before { content: ""; }
/* Line 4 — Away: flag+label on left, score input on right, always one line */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Away"] {
order: 4;
flex: 1 1 calc(100% - 64px);
min-width: 0;
font-weight: 600;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Away Score"] {
order: 4;
flex: 0 0 64px;
min-width: 0;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Away Score"]::before { content: ""; }
/* Line 5 — O/U Goals */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="O/U Goals"] {
order: 5;
min-width: 100%;
flex-direction: row;
align-items: center;
font-size: 13px;
color: #555;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="O/U Goals"]::before { content: ""; }
/* Line 6 — KO Winner (KO only); empty cell hidden via :empty */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="KO Winner"] {
order: 6;
min-width: 100%;
flex-direction: row;
align-items: center;
gap: 6px;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="KO Winner"]::before {
content: "KO Winner:";
text-transform: none;
min-width: 6em;
flex-shrink: 0;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="KO Winner"]:empty { display: none; }
/* Line 7 — Pts: highlighted, with tooltip */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Pts"] {
order: 7;
min-width: 100%;
font-size: 18px;
font-weight: 700;
color: #0073aa;
border-top: 1px solid #eee;
border-bottom: none;
padding-top: 6px;
padding-bottom: 0;
margin-top: 2px;
margin-bottom: 0;
flex-direction: row;
align-items: center;
gap: 6px;
}
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Pts"]::before {
text-transform: none;
font-size: 13px;
color: #555;
flex-shrink: 0;
}
/* Total row: no "Pts" label, reset to desktop-style font */
.fussspool-table-mobile-cards.fussspool-coupon-card tr.fussspool-total-row td[data-label="Pts"]::before {
content: none;
}
.fussspool-table-mobile-cards.fussspool-coupon-card tr.fussspool-total-row td[data-label="Pts"] {
font-size: inherit;
color: inherit;
border-top: none;
}
/* Score inputs fill their fixed-width container in coupon card mode */
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Home Score"] .fussspool-score-input,
.fussspool-table-mobile-cards.fussspool-coupon-card td[data-label="Away Score"] .fussspool-score-input {
width: 52px;
min-width: 0;
flex-shrink: 0;
}
/* =========================================================================
PREVIOUS COUPON — new card layout (specificity 0,3,1 beats general 0,2,1)
Line 1: Time | Line 2: 1/X/2 odds | Line 3: Home(1)+pred score | Line 4: Away(2)+pred score
Line 5: O/U Goals | Line 6: KO Winner (if KO) | Line 7: Earned pts + tooltip
Desktop-only columns (Predicted, Max, Actual, Act. Winner) hidden in card mode.
========================================================================= */
/* Override (1)/(2) labels and odds prefix */
/* Home/Away labels suppressed so flag+team+score(s) all sit on one flex line */
/* Home/Away labels reinstated inline; width:auto overrides the general width:100% rule */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Home"]::before,
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Away"]::before {
content: attr(data-label);
width: auto;
margin-right: 4px;
margin-bottom: 0;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="1"]::before { content: "(1)"; }
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="X"]::before { content: "(X)"; }
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="2"]::before { content: "(2)"; }
/* Line 1 — Date & Time: row layout so LIVE badge sits inline with the time */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Time"] {
order: 1;
min-width: 100%;
font-size: 12px;
color: #555;
padding-bottom: 4px;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Time"]::before {
content: none; /* date/time needs no separate label */
}
/* Line 2 — Odds */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="1"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="X"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="2"] {
order: 2;
flex: 1 1 auto; /* auto basis = natural content width; lets wrap algorithm push Home to its own line */
font-weight: 600;
align-items: center;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
background: #f7f7f7;
margin: 2px 2px 4px;
padding: 4px 4px;
}
/* Line 3 — Home: flag+label on left, scores on right, one line.
flex-basis calc(100%-80px) fills the row so Away wraps below. */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Home"] {
order: 3;
flex: 1 1 calc(100% - 80px);
min-width: 0;
font-weight: 600;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Pred Home"] {
order: 3;
flex: 0 0 80px; /* wide enough for "2–1 [chip]" */
min-width: 0;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-wrap: nowrap;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Pred Home"]::before { content: ""; }
/* Line 4 — Away: flag+label on left, scores on right, one line */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Away"] {
order: 4;
flex: 1 1 calc(100% - 80px);
min-width: 0;
font-weight: 600;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Pred Away"] {
order: 4;
flex: 0 0 80px;
min-width: 0;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-wrap: nowrap;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Pred Away"]::before { content: ""; }
/* Line 5 — O/U Goals */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="O/U Goals"] {
order: 5;
min-width: 100%;
flex-direction: row;
align-items: center;
font-size: 13px;
color: #555;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="O/U Goals"]::before { content: ""; }
/* Line 6 — KO Winner (KO qualifier only) */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="KO Winner"] {
order: 6;
min-width: 100%;
flex-direction: row;
align-items: center;
gap: 4px;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="KO Winner"]::before {
content: "KO Winner:";
text-transform: none;
min-width: 6em;
flex-shrink: 0;
}
/* Line 7 — Earned pts + badges + tooltip
Override the general Earned rule (order:3, border-bottom) completely. */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Earned"] {
order: 7;
min-width: 100%;
font-size: 18px;
font-weight: 700;
color: #0073aa;
border-top: 1px solid #eee;
border-bottom: none;
padding-top: 6px;
padding-bottom: 0;
margin-top: 2px;
margin-bottom: 0;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Earned"]::before {
content: "Pts";
min-width: auto;
flex-shrink: 0;
}
/* Hide desktop-only columns in past-card mobile view */
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Predicted"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Max"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Actual"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label="Act. Winner"],
.fussspool-table-mobile-cards.fussspool-past-card td[data-label=""] {
display: none;
}
/* Tooltip shows on tap in mobile (triggered via JS) */
.fussspool-pts-tip.fussspool-tip-visible { display: block; }
/* Compare actual-score row: pill → label → score (match cells only) */
.fussspool-table-mobile-cards tr.fussspool-actual-row td.fussspool-actual-match-cell {
flex-direction: column;
gap: 2px;
}
.fussspool-table-mobile-cards tr.fussspool-actual-row td.fussspool-actual-match-cell::before {
order: 0;
flex-basis: auto;
margin-bottom: 0;
}
.fussspool-table-mobile-cards td.fussspool-compare-match-cell .fussspool-compare-pill {
display: inline-flex;
order: -1; /* before ::before (order 0) → pill appears above label */
margin-left: 0;
}
/* Hide the empty Points cell in the actual row card */
.fussspool-table-mobile-cards tr.fussspool-actual-row td[data-label="Points"] {
display: none;
}
}
/* Live match badge — shown in past predictions, compare, and standings headings */
.fussspool-live-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: #e53935;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
padding: 4px 10px 4px 12px;
border-radius: 50px;
vertical-align: middle;
letter-spacing: 0.3px;
margin-left: 6px;
text-transform: uppercase;
white-space: nowrap;
width: fit-content; /* never stretch beyond content in any flex context */
align-self: flex-start; /* cross-axis: don't stretch in column containers */
}
/* Compare predictions — stacked pill + match code in | */
.fussspool-compare-th {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.fussspool-compare-pill {
margin-left: 0; /* override the inline badge margin-left */
}
/* Desktop (≥641px): pills inside | cells are hidden — the | header carries them */
@media (min-width: 641px) {
.fussspool-compare-table td .fussspool-compare-pill {
display: none;
}
}
.fussspool-live-badge::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
flex-shrink: 0;
}
/* ==========================================================================
SMALL-SCREEN COUPON (≤640px) — two-step list/detail view
========================================================================== */
/* Desktop: xs block hidden; mobile: desktop table hidden */
.fussspool-xs-coupon { display: none; }
@media (max-width: 640px) {
.fussspool-desktop-coupon { display: none; }
.fussspool-xs-coupon { display: block; }
/* ── List view ────────────────────────────────────────────────────── */
.fussspool-xs-list {
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
background: #fff;
}
.fussspool-xs-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid #eee;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.fussspool-xs-item:last-child { border-bottom: none; }
.fussspool-xs-item:active { background: #f5f5f5; }
.fussspool-xs-item-left {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 0;
min-width: 0;
}
.fussspool-xs-time {
font-size: 11px;
color: #888;
white-space: nowrap;
}
.fussspool-xs-fixture {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fussspool-xs-fixture img.fussspool-flag { vertical-align: middle; }
.fussspool-xs-vs { font-weight: 400; color: #999; font-size: 12px; }
.fussspool-xs-item-status {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
max-width: 44%;
text-align: right;
}
.fussspool-xs-status-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
line-height: 1;
}
/* None — red */
.fussspool-xs-item-status[data-status="none"] .fussspool-xs-status-icon {
background: #dc3545;
color: #fff;
}
.fussspool-xs-item-status[data-status="none"] .fussspool-xs-status-text {
font-size: 11px;
color: #dc3545;
}
/* Partial — amber */
.fussspool-xs-item-status[data-status="partial"] .fussspool-xs-status-icon {
background: #f0ad4e;
color: #fff;
}
.fussspool-xs-item-status[data-status="partial"] .fussspool-xs-status-text {
font-size: 11px;
color: #856404;
}
/* Complete — green */
.fussspool-xs-item-status[data-status="complete"] .fussspool-xs-status-icon {
background: #28a745;
color: #fff;
}
.fussspool-xs-item-status[data-status="complete"] .fussspool-xs-status-text {
font-size: 12px;
font-weight: 600;
color: #155724;
}
.fussspool-xs-ko-badge {
font-size: 10px;
font-weight: 700;
background: #e8f4e8;
color: #155724;
border-radius: 3px;
padding: 1px 4px;
margin-left: 3px;
}
.fussspool-xs-item-chevron {
font-size: 20px;
color: #bbb;
flex-shrink: 0;
margin-left: 2px;
line-height: 1;
}
/* ── Total row ────────────────────────────────────────────────────── */
.fussspool-xs-total-row {
text-align: right;
font-size: 13px;
font-weight: 700;
padding: 6px 4px 12px;
color: #333;
}
#fussspool-xs-total {
color: #0073aa;
font-size: 16px;
}
/* ── Detail card ──────────────────────────────────────────────────── */
.fussspool-xs-detail {
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
padding: 14px 12px 12px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.fussspool-xs-detail-time {
font-size: 12px;
color: #666;
margin-bottom: 10px;
}
/* Odds row */
.fussspool-xs-odds-row {
display: flex;
gap: 6px;
margin-bottom: 6px;
}
.fussspool-xs-odds-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ddd;
border-radius: 4px;
background: #f7f7f7;
padding: 6px 4px;
font-weight: 600;
}
.fussspool-xs-odds-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #888;
margin-bottom: 2px;
}
.fussspool-xs-odds-val { font-size: 15px; }
/* Potential pts */
.fussspool-xs-pts-row {
text-align: center;
font-size: 13px;
color: #555;
margin-bottom: 14px;
}
.fussspool-xs-pts-val {
font-weight: 700;
font-size: 16px;
color: #0073aa;
}
/* Teams + scores row */
.fussspool-xs-teams-row {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 10px;
}
.fussspool-xs-team {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
min-width: 0;
}
.fussspool-xs-team-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #888;
letter-spacing: 0.3px;
}
.fussspool-xs-team img.fussspool-flag {
width: auto;
height: 24px;
display: block;
}
.fussspool-xs-team-name {
font-size: 13px;
font-weight: 600;
word-break: break-word;
line-height: 1.2;
}
/* Score inputs in centre column */
.fussspool-xs-scores {
display: flex;
align-items: center;
gap: 6px;
padding-top: 28px; /* align with team name area visually */
flex-shrink: 0;
}
.fussspool-xs-scores .fussspool-score-input {
width: 52px;
height: 48px;
font-size: 22px;
font-weight: 700;
text-align: center;
padding: 4px;
}
.fussspool-xs-score-sep {
font-size: 22px;
font-weight: 700;
color: #aaa;
}
/* KO winner */
.fussspool-xs-ko-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px 10px;
background: #f9f9f9;
border-radius: 4px;
}
.fussspool-xs-ko-label {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.fussspool-xs-ko-row .fussspool-select-sm { flex: 1; }
/* O/U result */
.fussspool-xs-ou-row {
text-align: center;
font-size: 13px;
color: #555;
margin-bottom: 12px;
}
/* Error */
.fussspool-xs-detail-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
color: #721c24;
font-size: 13px;
padding: 8px 10px;
margin-bottom: 10px;
}
/* Back button */
.fussspool-xs-back-btn {
width: 100%;
margin-top: 4px;
}
/* ── Previous Coupon — hide desktop table ─────────────────────────── */
.fussspool-desktop-past { display: none; }
.fussspool-xs-past-coupon { display: block; }
/* ── Past coupon list item — right side (pts + live + badges) ───── */
.fussspool-xs-past-status {
flex-direction: column;
align-items: flex-end;
gap: 3px;
text-align: right;
}
.fussspool-xs-past-list-pts {
font-size: 15px;
font-weight: 700;
color: #0073aa;
white-space: nowrap;
}
.fussspool-xs-past-list-pts--none {
font-size: 12px;
font-weight: 400;
color: #aaa;
}
.fussspool-xs-past-list-badges {
display: flex;
gap: 3px;
justify-content: flex-end;
}
/* Override the coloured icon/text rules for past items */
.fussspool-xs-past-status .fussspool-xs-status-icon,
.fussspool-xs-past-status .fussspool-xs-status-text { display: none; }
/* ── Past detail card — earned row ───────────────────────────────── */
.fussspool-xs-earned-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
font-size: 13px;
color: #555;
margin-bottom: 14px;
}
.fussspool-xs-earned-val {
font-weight: 700;
font-size: 20px;
color: #0073aa;
}
.fussspool-xs-earned-label { font-weight: 600; }
.fussspool-xs-earned-none {
font-size: 13px;
color: #888;
font-style: italic;
text-align: center;
margin-bottom: 14px;
}
/* ── Past detail card — score display (read-only) ─────────────────── */
.fussspool-xs-past-scores {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
padding-top: 22px;
flex-shrink: 0;
}
.fussspool-xs-past-score-row {
display: flex;
align-items: center;
gap: 4px;
}
.fussspool-xs-past-score-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #888;
min-width: 28px;
text-align: right;
}
.fussspool-xs-past-score-num {
font-size: 22px;
font-weight: 700;
min-width: 28px;
text-align: center;
line-height: 1;
}
.fussspool-xs-actual-score-row .fussspool-xs-past-score-num {
color: #155724;
background: #d4edda;
border-radius: 4px;
padding: 2px 4px;
}
.fussspool-xs-actual-score-row .fussspool-xs-score-sep {
color: #155724;
}
/* ── Past detail card — KO winner row ─────────────────────────────── */
.fussspool-xs-past-ko-vals {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.fussspool-xs-ko-pred,
.fussspool-xs-ko-act {
font-size: 13px;
}
.fussspool-xs-ko-pred { color: #555; }
.fussspool-xs-ko-act { font-weight: 600; color: #155724; }
/* ── Past detail card — O/U pair ─────────────────────────────────── */
.fussspool-xs-ou-pair { white-space: nowrap; font-size: 13px; }
/* ── Past coupon total row ─────────────────────────────────────────── */
.fussspool-xs-past-total-row {
text-align: right;
font-size: 13px;
font-weight: 700;
padding: 6px 4px 10px;
color: #333;
}
.fussspool-xs-past-total-row span {
color: #0073aa;
font-size: 16px;
}
}
/* ==========================================================================
PWA Install Banner
========================================================================== */
#fussspool-install-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #0073aa;
color: #fff;
font-size: 14px;
font-weight: 600;
box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
.fussspool-install-text {
flex: 1;
line-height: 1.4;
}
.fussspool-install-action {
background: #fff;
color: #0073aa;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.fussspool-install-action:hover {
background: #d0edf7;
}
.fussspool-install-dismiss {
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
flex-shrink: 0;
}
.fussspool-install-dismiss:hover {
color: #fff;
}
/* ==========================================================================
Edition logo icon — shown next to edition on public pages
========================================================================== */
.fussspool-edition-logo {
max-height: 24px;
max-width: 60px;
width: auto;
height: auto;
object-fit: contain;
vertical-align: middle;
margin-right: 6px;
border-radius: 2px;
}
/* ==========================================================================
Compare Predictions table
========================================================================== */
/* Align User and Points headers to the bottom so they line up with the
match-code portion of the taller two-line match column headers. */
.fussspool-compare-table thead th {
vertical-align: bottom;
}
/* --- Sticky name + points columns (all views except very small ≤480px) -- */
@media (min-width: 481px) {
/* White table background fills any gap behind the sticky columns */
.fussspool-compare-table {
background-color: #fff;
}
.fussspool-compare-table .fussspool-compare-col-user {
position: sticky;
left: 0;
z-index: 2;
background: inherit;
background-color: #fff;
/* min-width matches the Points column's left offset so the two are
always flush — no transparent gap for scrolled content to show through */
min-width: 140px;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fussspool-compare-table .fussspool-compare-col-pts {
position: sticky;
left: 140px; /* matches min-width of user column */
z-index: 2;
background: inherit;
background-color: #fff;
min-width: 55px;
box-shadow: 2px 0 4px rgba(0,0,0,0.07);
}
.fussspool-compare-table thead .fussspool-compare-col-user,
.fussspool-compare-table thead .fussspool-compare-col-pts {
background-color: #f5f5f5;
z-index: 3;
}
.fussspool-compare-table tr.fussspool-current-user .fussspool-compare-col-user,
.fussspool-compare-table tr.fussspool-current-user .fussspool-compare-col-pts {
background-color: #d9edf7 !important;
}
}
/* --- Very small screens (≤480px): 3-column grid layout ----------------- */
/*
col 1 (40%): user name (row 1) + pts (row 2) stacked in left column
col 2-3 (1fr each): match chips auto-placed 2 per row in right columns
*/
@media (max-width: 480px) {
.fussspool-compare-table.fussspool-table-mobile-cards tbody tr {
display: grid;
grid-template-columns: 40% 1fr 1fr;
grid-auto-rows: min-content;
padding: 8px 10px;
gap: 3px 4px;
align-items: start;
}
/* User — left column row 1; no pseudo-label */
.fussspool-compare-table td[data-label="User"] {
grid-column: 1;
grid-row: 1;
min-width: 0;
font-size: 14px;
font-weight: 700;
padding: 2px 0;
flex-direction: row;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fussspool-compare-table td[data-label="User"]::before { display: none; }
/* Points — left column row 2; no pseudo-label */
.fussspool-compare-table td[data-label="Points"] {
grid-column: 1;
grid-row: 2;
min-width: 0;
font-size: 14px;
font-weight: 700;
color: #0073aa;
padding: 2px 0;
flex-direction: row;
align-items: center;
}
.fussspool-compare-table td[data-label="Points"]::before { display: none; }
/* Match chips — auto-placed into cols 2-3, 2 per row */
.fussspool-compare-table td:not([data-label="User"]):not([data-label="Points"]) {
min-width: 0;
font-size: 11px;
padding: 2px 4px;
background: #f0f0f0;
border-radius: 4px;
flex-direction: column;
align-items: flex-start;
}
.fussspool-compare-table td:not([data-label="User"]):not([data-label="Points"])::before {
font-size: 9px;
letter-spacing: 0.2px;
margin-bottom: 1px;
white-space: nowrap;
}
/* Actual row — remove row-gap so the span 100 trick doesn't add ~300px of phantom height.
Must use tbody to match the specificity of the general grid rule above (0,2,2). */
.fussspool-compare-table tbody tr.fussspool-actual-row {
row-gap: 0;
}
/* Actual row — span User across all rows of col 1 so chips can never
backfill into the left column; Points cell is then safe to hide. */
.fussspool-compare-table tr.fussspool-actual-row td[data-label="User"] {
grid-row: 1 / span 100;
align-self: start;
}
.fussspool-compare-table tr.fussspool-actual-row td[data-label="Points"] {
display: none;
}
.fussspool-compare-table tr.fussspool-actual-row
td:not([data-label="User"]):not([data-label="Points"]) {
background: #d4edda;
color: #155724;
font-weight: 600;
}
/* Current-user row — tinted chips */
.fussspool-compare-table tr.fussspool-current-user
td:not([data-label="User"]):not([data-label="Points"]) {
background: #cce4f0;
}
}
/* ==========================================================================
Navigation notification toggle
========================================================================== */
.fussspool-notif-toggle {
display: inline-flex;
align-items: center;
white-space: nowrap;
text-decoration: none;
}
/* Static footer text rendered by wp_footer when no shortcode is present */
.fussspool-notif-footer-text {
text-align: center;
padding: 8px 16px;
font-size: 13px !important;
font-weight: normal !important;
line-height: 1.4;
}
.fussspool-notif-footer-text .fussspool-notif-toggle {
font-size: 13px !important;
font-weight: normal !important;
}
/* on / off / blocked colour hints — keep subtle so they fit any theme */
.fussspool-notif-off { opacity: 0.65; }
.fussspool-notif-blocked { opacity: 0.4; cursor: default; }
/* ==========================================================================
Incomplete coupon reminder banner
========================================================================== */
#fussspool-coupon-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 20px;
background: #0073aa;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
.fussspool-coupon-banner-text {
flex: 1;
text-align: center;
}
.fussspool-coupon-banner-btn {
background: #fff;
color: #0073aa;
border: none;
border-radius: 4px;
padding: 7px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.4;
}
.fussspool-coupon-banner-btn:hover {
background: #d0edf7;
color: #0073aa;
}
.fussspool-coupon-banner-dismiss {
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
font-size: 20px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
flex-shrink: 0;
}
.fussspool-coupon-banner-dismiss:hover {
color: #fff;
}
/* ==========================================================================
WP admin bar guard
Ensures the admin bar keeps its fixed position and correct stacking
regardless of any theme or plugin CSS that might affect the page layout.
========================================================================== */
#wpadminbar {
position: fixed !important;
top: 0 !important;
z-index: 99999 !important;
}
|