/**
* tcsync-match.css — Minimal styling for tcsync match listing and add-to-cart form.
*
* Enqueued only on tcsync match product pages and the match-listing page
* (see MatchProductController::enqueueAssets).
*
* Design principles:
* - Use existing theme tokens where possible to avoid clashing with Hello Elementor.
* - Mobile-first layout via CSS Grid on the card list.
* - No hard-coded brand colors on interactive elements (inherit from theme).
* - Sold-out opacity is the only visual treatment operatören requested in CONTEXT.md.
*/
/* ────────────────────────────────────────────
Match listing
──────────────────────────────────────────── */
.tcsync-match-listing {
margin: 24px 0;
}
.tcsync-match-listing .tcsync-match-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.tcsync-match-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.tcsync-match-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
border-color: #cbd5e1;
}
.tcsync-match-card.is-sold-out {
opacity: 0.72;
}
.tcsync-match-card.is-sold-out:hover {
transform: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tcsync-match-link,
.tcsync-match-link:hover,
.tcsync-match-link:focus,
.tcsync-match-link * {
/* !important needed because hello-elementor (and similar themes)
declares `a { text-decoration: underline }` with higher specificity
and we need the whole card to read as a tile, not a link list. */
text-decoration: none !important;
color: inherit;
}
.tcsync-match-link {
display: grid;
grid-template-columns: 84px 1fr;
gap: 14px;
padding: 16px;
/* Inherit the theme font; without this the link element falls back
to user-agent default when Elementor's font loader isn't active. */
font-family: inherit;
}
/* Date pill (left column) */
.tcsync-match-card__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 6px;
padding: 10px 6px;
text-align: center;
line-height: 1.1;
}
.tcsync-match-card__day {
font-size: 1.85em;
font-weight: 700;
color: #0f172a;
}
.tcsync-match-card__month {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
margin-top: 2px;
}
.tcsync-match-card__weekday {
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #64748b;
margin-top: 6px;
}
/* Body (right column) */
.tcsync-match-card__body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.tcsync-match-card__competition {
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.tcsync-match-card__teams {
margin: 0;
font-size: 1.05em;
font-weight: 600;
line-height: 1.3;
color: #0f172a;
}
.tcsync-match-card__home,
.tcsync-match-card__away {
display: inline;
}
.tcsync-match-card__vs {
font-weight: 400;
color: #94a3b8;
padding: 0 4px;
font-size: 0.9em;
}
.tcsync-match-card__footer {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
flex-wrap: wrap;
}
.tcsync-match-card__price {
font-size: 1em;
font-weight: 600;
color: #0f172a;
}
.tcsync-match-card__price--muted {
color: #94a3b8;
font-weight: 500;
text-decoration: line-through;
}
.tcsync-match-card__cta {
font-size: 0.88em;
font-weight: 500;
color: #c8102e; /* Liverpool red */
}
.tcsync-match-card__badge {
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.78em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: #c0392b;
color: #fff;
}
/* ────────────────────────────────────────────
Custom add-to-cart form
────────────────────────────────────────────
Site is a dark-themed travel store (bokaliverpool.com / Hello Elementor child).
Form is treated as an elevated booking card: subtle surface tint, high text
contrast, Liverpool-red brand accent (#c8102e) on focus + CTA.
Tokens (kept inline rather than CSS vars to avoid clashing with theme vars):
surface rgba(255,255,255,0.04) form card background
surface-2 rgba(255,255,255,0.06) input background
border rgba(255,255,255,0.14) input/card border
border-fg rgba(255,255,255,0.28) border on hover
text #fff primary text
text-mute rgba(255,255,255,0.62) labels, muted prices, breakdown
brand #c8102e Liverpool red — focus ring + CTA
brand-hov #a30d24 CTA hover
*/
/* Elementor renders an empty above our card when the
product has no _price meta (we don't set one — pricing is computed client-side).
Hide the empty price block to remove the dead space at the top of the column. */
body.tcsync-match-product .elementor-widget-woocommerce-product-price .price:empty {
display: none;
}
/* Neutralise Elementor's add-to-cart wrapper so the full-bleed card aligns
cleanly with the product title above it. */
body.tcsync-match-product .elementor-widget-woocommerce-product-add-to-cart .elementor-add-to-cart {
margin: 0;
padding: 0;
}
/* The product page Elementor template (#1388) sets the hero section to
`min-height: 90vh` which leaves a huge empty area below the booking card on
our compact-content pages. Override on tcsync products so the section
collapses to its actual content height. */
body.tcsync-match-product .elementor-section.elementor-top-section {
min-height: auto !important;
}
/* Elementor template #1388 lägger bilden + info-kolumnen 50/50.
Vänsterkolumnen har bara woocommerce-product-images, högerkolumnen rymmer
breadcrumbs + titel + pris + beskrivning + hela add-to-cart-formuläret.
På desktop blev formuläret trångt även med 60% kolumn — formulärfälten
(kategori-select, hotell-select, date-range, party-stepper, expandable
rum-block) krymper för mycket sida vid sida med en stor bild.
Lösning: stack kolumnerna 100%/100% på desktop också, komprimera bilden
till en hero-banner (max-höjd 360px, beskuren via object-fit), och låt
formuläret få hela content-bredden. Tablet/mobile stackade redan via
Elementor's defaults — denna regel överstyr bara desktop. */
@media (min-width: 1025px) {
body.tcsync-match-product .elementor-section.elementor-top-section:first-of-type
> .elementor-container {
flex-direction: column !important;
}
body.tcsync-match-product .elementor-section.elementor-top-section:first-of-type
> .elementor-container > .elementor-column {
width: 100% !important;
}
/* Komprimera produktbilden så den inte tar över hero-sektionen när
den nu sträcker sig över hela bredden. */
body.tcsync-match-product .elementor-widget-woocommerce-product-images
.woocommerce-product-gallery__image img,
body.tcsync-match-product .elementor-widget-woocommerce-product-images img {
max-height: 360px;
width: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Booking-card-layout: två kolumner på desktop. Val (Match + Resa)
i vänster bred kolumn, Bokning (pris + CTA + trust) i en sticky
sidebar till höger. Använder grid-template-areas så ordningen blir
robust även när demo-banner och/eller match-meta finns eller saknas
— auto-placement med rad-nummer-räkning bröts när banner sköt allt
en rad neråt. */
body.tcsync-match-product form.tcsync-add-to-cart {
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
grid-template-areas:
"banner banner"
"meta meta"
"match booking"
"trip booking"
"debug debug" !important;
/* min-content på row-tracks så match-cellen inte sträcks ut till
halva booking-höjden — annars uppstår ett tomt vertikalt fält
mellan match-sektionen och trip-sektionen när booking-kolumnen
är hög (totalpris + consent + CTA + trust = ~600px). Med
min-content tar row 3 bara match.content-höjden och row 4 tar
trip.content-höjden; booking spans båda men dess content
ankrar uppe genom align-self. */
grid-template-rows: min-content min-content min-content min-content min-content !important;
column-gap: 32px !important;
row-gap: 24px !important;
align-items: start !important;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-demo-banner {
grid-area: banner;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-match-meta {
grid-area: meta;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-section-match {
grid-area: match;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-section-trip {
grid-area: trip;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-section-booking {
grid-area: booking;
position: sticky;
top: 24px;
align-self: start;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
padding: 20px 22px;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-debug-breakdown {
grid-area: debug;
}
body.tcsync-match-product .tcsync-add-to-cart > .tcsync-section-booking
.tcsync-price-breakdown {
margin-bottom: 16px;
}
}
/* Force top-alignment for column content. Elementor's template config sets
columns to vertically-center their widgets within the section height. With
the image being tall and the right column's content (breadcrumbs+title+
form) being shorter, the right column's breadcrumbs sit halfway down the
image — visually misaligned. Force every column on a tcsync product page
to top-align its content. */
body.tcsync-match-product .elementor-column,
body.tcsync-match-product .elementor-widget-wrap,
body.tcsync-match-product .elementor-element-populated {
align-content: flex-start !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
/* Tighten breadcrumbs spacing — Elementor adds default 15px-20px margin around
widgets which feels heavy stacked above the page title in our card layout. */
body.tcsync-match-product .elementor-widget-woocommerce-breadcrumb,
body.tcsync-match-product .yoast-breadcrumbs {
margin-bottom: 8px !important;
}
body.tcsync-match-product .elementor-widget-woocommerce-product-title {
margin-top: 0 !important;
}
/* Pull the right column tight to the top — Elementor places a 1px spacer +
default column padding above breadcrumbs which adds visible top whitespace. */
body.tcsync-match-product .elementor-widget-spacer {
--spacer-size: 0;
}
body.tcsync-match-product .elementor-widget-spacer .elementor-spacer-inner {
height: 0 !important;
}
.tcsync-add-to-cart {
color: #fff;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 28px;
margin: 0 auto;
width: 100%;
max-width: 1140px;
box-sizing: border-box;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Match-meta-pills — datum, tid, arena, liga som chips överst i kortet.
Ger kunden direkt kontext om vilken match hen bokar. */
.tcsync-add-to-cart .tcsync-match-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0 0 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tcsync-add-to-cart .tcsync-match-meta__pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.95);
font-size: 0.85em;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.3;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
/* Sektioner — bryt upp formuläret visuellt i Match / Resa / Bokning. */
.tcsync-add-to-cart .tcsync-section {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
}
.tcsync-add-to-cart .tcsync-section__heading {
margin: 0 0 -4px;
padding: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* .tcsync-selectors finns inte längre som wrapper för alla fält — vi
använder .tcsync-section istället. Behåll regeln tomt fall-back. */
.tcsync-add-to-cart .tcsync-selectors {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
}
/* Resa-sektionen lägger hotell + vistelse + antal resenärer i 3-col grid
på desktop så fälten ligger horisontellt — de behöver inte var sin
egen rad nu när formuläret är centrerat och max 920px brett. */
.tcsync-add-to-cart .tcsync-trip-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 720px) {
.tcsync-add-to-cart .tcsync-trip-grid {
/* Hotell + Vistelse på rad 1 (lika breda — datum-range behöver
~230px för 'YYYY-MM-DD till YYYY-MM-DD', hotellnamn behöver
~230-280px för 'Holiday Inn Express Liverpool Central').
Antal resenärer på rad 2, vänsterställd så stepper-baren
inte stretches över hela bredden (den är bara ~144px). */
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
align-items: start;
}
.tcsync-add-to-cart .tcsync-trip-grid > .tcsync-field-party {
grid-column: 1 / -1;
justify-self: start;
min-width: 200px;
}
/* Inputs/selects inom trip-grid får inte påverkas av grid-itemets
intrinsic min-content. min-width:0 standard. */
.tcsync-add-to-cart .tcsync-trip-grid > .tcsync-field {
min-width: 0;
}
.tcsync-add-to-cart .tcsync-trip-grid > .tcsync-field input,
.tcsync-add-to-cart .tcsync-trip-grid > .tcsync-field select {
width: 100%;
min-width: 0;
text-overflow: ellipsis;
}
}
.tcsync-add-to-cart .tcsync-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.tcsync-add-to-cart .tcsync-field label {
font-size: 0.78em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.62);
}
.tcsync-add-to-cart .tcsync-field select,
.tcsync-add-to-cart .tcsync-field input[type="number"],
.tcsync-add-to-cart .tcsync-stepper input[type="number"] {
appearance: none;
-webkit-appearance: none;
padding: 12px 14px;
width: 100%;
box-sizing: border-box;
color: #fff;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
font: inherit;
font-size: 1em;
line-height: 1.4;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.tcsync-add-to-cart .tcsync-field select:hover,
.tcsync-add-to-cart .tcsync-field input[type="number"]:hover {
border-color: rgba(255, 255, 255, 0.28);
}
.tcsync-add-to-cart .tcsync-field select:focus,
.tcsync-add-to-cart .tcsync-field input[type="number"]:focus,
.tcsync-add-to-cart .tcsync-stepper input[type="number"]:focus {
outline: none;
border-color: #c8102e;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
background-color: rgba(255, 255, 255, 0.08);
}
/* Native select arrow drawn in CSS so it picks up text color cleanly. */
.tcsync-add-to-cart .tcsync-field select {
background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%);
background-position: right 18px center, right 13px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 38px;
}
.tcsync-add-to-cart .tcsync-field select option {
color: #0f172a;
background: #fff;
}
/* Stepper for "Antal personer" — − / + buttons flank a centered number input.
Theme buttons (Hello Elementor / Woo) carry strong defaults; we win by
raising specificity (form .tcsync-add-to-cart .tcsync-stepper button) and
neutralising the inherited brand color on the buttons themselves. */
.tcsync-add-to-cart .tcsync-stepper {
display: grid;
grid-template-columns: 44px 56px 44px;
align-items: stretch;
height: 44px;
width: max-content;
max-width: 100%;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tcsync-add-to-cart .tcsync-stepper:focus-within {
border-color: #c8102e;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
}
/* Theme buttons (Hello Elementor / Woo) carry strong defaults including
brand-color backgrounds applied with !important. Stepper buttons MUST
neutralise those — using !important here is intentional to defeat the
theme's own !important rules. */
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec,
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc {
appearance: none !important;
-webkit-appearance: none !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
color: #fff !important;
font-size: 1.4em !important;
font-weight: 600 !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.15s ease, color 0.15s ease;
box-shadow: none !important;
border-radius: 0 !important;
text-shadow: none !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
min-height: 0 !important;
user-select: none;
-webkit-user-select: none;
}
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec:hover:not([disabled]),
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc:hover:not([disabled]) {
background: rgba(255, 255, 255, 0.10) !important;
color: #fff !important;
}
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec:active:not([disabled]),
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc:active:not([disabled]) {
background: rgba(200, 16, 46, 0.25) !important;
}
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec:focus,
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc:focus {
outline: none;
}
/* Synlig keyboard-fokus-ring — krävs för a11y, vi tog bort outline
ovan men ersätter med en explicit inset shadow så tab-navigering
visar tydligt vilken stepper-knapp som är fokuserad. */
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec:focus-visible,
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc:focus-visible {
box-shadow: inset 0 0 0 2px #c8102e !important;
background: rgba(200, 16, 46, 0.12) !important;
}
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-dec[disabled],
form.tcsync-add-to-cart .tcsync-stepper > button.tcsync-stepper-inc[disabled] {
color: rgba(255, 255, 255, 0.28);
background: transparent;
cursor: not-allowed;
}
.tcsync-add-to-cart .tcsync-stepper input[type="number"] {
width: 100%;
height: 100%;
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.14);
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0;
padding: 0;
text-align: center;
font-weight: 600;
font-size: 1em;
color: #fff;
-moz-appearance: textfield;
box-shadow: none;
}
.tcsync-add-to-cart .tcsync-stepper input[type="number"]::-webkit-outer-spin-button,
.tcsync-add-to-cart .tcsync-stepper input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tcsync-add-to-cart .tcsync-stepper input[type="number"]:focus {
box-shadow: none;
border-color: rgba(255, 255, 255, 0.14);
background: transparent;
}
/* v4 party-first room-mix UI ----------------------------------------- */
.tcsync-add-to-cart .tcsync-auto-status {
margin: 6px 0 0;
font-size: 0.92em;
color: rgba(255, 255, 255, 0.78);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 5px;
}
.tcsync-add-to-cart .tcsync-auto-status__prefix {
color: rgba(255, 255, 255, 0.65);
}
.tcsync-add-to-cart .tcsync-auto-status strong {
color: #fff;
font-weight: 600;
}
.tcsync-add-to-cart .tcsync-auto-status__hint {
color: rgba(255, 255, 255, 0.55);
}
/* Customize-rooms-knappen — inline-link-style efter composition. Inte
en CTA, bara en sekundär affordance. */
form.tcsync-add-to-cart .tcsync-customize-rooms {
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
color: #c8102e !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 0 0 4px !important;
font: inherit !important;
font-size: inherit !important;
font-weight: 600 !important;
text-decoration: underline !important;
box-shadow: none !important;
min-height: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
form.tcsync-add-to-cart .tcsync-customize-rooms:hover,
form.tcsync-add-to-cart .tcsync-customize-rooms:focus {
color: #fff !important;
background: transparent !important;
}
form.tcsync-add-to-cart .tcsync-reset-auto {
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
color: #c8102e !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 0 0 6px !important;
font: inherit !important;
font-size: 0.92em !important;
font-weight: 600 !important;
text-decoration: underline !important;
box-shadow: none !important;
min-height: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
form.tcsync-add-to-cart .tcsync-reset-auto:hover,
form.tcsync-add-to-cart .tcsync-reset-auto:focus {
color: #fff !important;
background: transparent !important;
}
/* Anpassa-rumstyper-panel — toggle:s av .tcsync-customize-rooms-knappen
ovanför. Hidden by default via hidden-attribute. När öppen visas
som ren panel med rumstyps-rader, ingen separat header eller card-
styling (knappen ovan är den faktiska affordance:n). */
.tcsync-add-to-cart .tcsync-field-room-mix[data-tcsync-role="room-mix-panel"] {
margin: 8px 0 0;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
}
/* HTML5 hidden-attribute ignoreras ibland av theme-CSS som sätter
display: flex/block. Force-hide när hidden så panelen verkligen
inte syns innan kunden klickar customize-knappen. */
.tcsync-add-to-cart .tcsync-field-room-mix[data-tcsync-role="room-mix-panel"][hidden] {
display: none !important;
}
/* Anpassa-rumstyper-rader: kompakt rad med label vänster och liten
centrerad number-input höger. !important behövs eftersom Hello
Elementor / Woo theme sätter input-styling med högre specifity. */
.tcsync-add-to-cart .tcsync-room-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 8px 14px !important;
margin: 0 !important;
width: auto !important;
}
.tcsync-add-to-cart .tcsync-room-row + .tcsync-room-row {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tcsync-add-to-cart .tcsync-room-row-label {
flex: 1 1 auto;
color: rgba(255, 255, 255, 0.92);
font-size: 0.92em;
line-height: 1.3;
}
.tcsync-add-to-cart .tcsync-room-row-label small {
color: rgba(255, 255, 255, 0.52);
font-size: 0.82em;
margin-left: 4px;
font-weight: 400;
}
.tcsync-add-to-cart .tcsync-room-row > .tcsync-room-input,
.tcsync-add-to-cart .tcsync-room-row > input[type="number"].tcsync-room-input {
flex: 0 0 auto !important;
width: 64px !important;
max-width: 64px !important;
min-width: 0 !important;
text-align: center !important;
padding: 6px 8px !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 6px !important;
color: #fff !important;
font: inherit !important;
font-size: 1em !important;
font-weight: 600 !important;
line-height: 1.3 !important;
box-sizing: border-box !important;
}
.tcsync-add-to-cart .tcsync-room-row > .tcsync-room-input::-webkit-outer-spin-button,
.tcsync-add-to-cart .tcsync-room-row > .tcsync-room-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tcsync-add-to-cart .tcsync-room-row > .tcsync-room-input:focus {
border-color: #c8102e !important;
box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.25) !important;
outline: none !important;
}
.tcsync-add-to-cart .tcsync-room-warning {
margin: 0;
padding: 10px 14px;
color: #ff7a8a;
font-size: 0.88em;
border-top: 1px solid rgba(255, 122, 138, 0.25);
background: rgba(200, 16, 46, 0.08);
}
/* Spinner i pris-display när cheapest-mix-fetchen pågår. JS sätter
.is-loading-klassen på total-display/per-person-display och rensar
textinnehållet — ::after blir då den enda synliga delen. */
.tcsync-add-to-cart [data-tcsync-role="total-display"].is-loading,
.tcsync-add-to-cart [data-tcsync-role="per-person-display"].is-loading {
position: relative;
display: inline-block;
min-width: 28px;
min-height: 1em;
vertical-align: middle;
}
.tcsync-add-to-cart [data-tcsync-role="total-display"].is-loading::after,
.tcsync-add-to-cart [data-tcsync-role="per-person-display"].is-loading::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: #c8102e;
border-radius: 50%;
animation: tcsync-spin 0.7s linear infinite;
vertical-align: -0.18em;
}
@keyframes tcsync-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.tcsync-add-to-cart [data-tcsync-role="total-display"].is-loading::after,
.tcsync-add-to-cart [data-tcsync-role="per-person-display"].is-loading::after {
animation: none;
opacity: 0.6;
}
}
/* Consent-checkboxar ovanför CTA. Två required + en optional för
marknadsföring. Linjerar i bredd med "Lägg i kundkorg"-knappen
(samma föräldrabredd, inga laterala paddings eller inset-bakgrund).
Texten medvetet mindre än brödtext så blocket inte konkurrerar visuellt
med totalpriset eller CTA:n. */
.tcsync-add-to-cart .tcsync-consents {
display: flex;
flex-direction: column;
gap: 6px;
margin: 14px 0 12px;
padding: 0;
background: transparent;
border: 0;
}
.tcsync-add-to-cart .tcsync-consent {
display: flex;
align-items: flex-start;
gap: 9px;
cursor: pointer;
font-size: 0.78em;
line-height: 1.4;
color: inherit;
opacity: 0.85;
margin: 0;
padding: 2px 0;
min-height: 22px;
}
.tcsync-add-to-cart .tcsync-consent input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin-top: 1px;
accent-color: #c8102e;
cursor: pointer;
}
.tcsync-add-to-cart .tcsync-consent span {
flex: 1 1 auto;
}
.tcsync-add-to-cart .tcsync-consent a {
color: #c8102e;
text-decoration: underline;
}
.tcsync-add-to-cart .tcsync-consent a:hover,
.tcsync-add-to-cart .tcsync-consent a:focus {
color: #95001d;
}
.tcsync-add-to-cart .tcsync-consent-optional {
margin-top: 4px;
opacity: 0.75;
}
/* Price breakdown panel — luftigare layout för att totalsumman inte
ska kännas ihoptryckt. Vertikalt staplat med större spacing. */
.tcsync-add-to-cart .tcsync-price-breakdown {
margin: 0;
padding: 22px 22px 20px;
background: rgba(200, 16, 46, 0.08);
border: 1px solid rgba(200, 16, 46, 0.22);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.tcsync-add-to-cart .tcsync-line-total {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.tcsync-add-to-cart .tcsync-line {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 0.95em;
}
.tcsync-add-to-cart .tcsync-line-label {
color: rgba(255, 255, 255, 0.62);
}
.tcsync-add-to-cart .tcsync-line-value {
font-variant-numeric: tabular-nums;
color: #fff;
font-weight: 500;
}
.tcsync-add-to-cart .tcsync-line-total {
font-size: 1.1em;
}
.tcsync-add-to-cart .tcsync-line-total .tcsync-line-label {
color: rgba(255, 255, 255, 0.65);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.74em;
}
.tcsync-add-to-cart .tcsync-line-total .tcsync-line-value {
font-size: 2em;
font-weight: 700;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.05;
}
.tcsync-add-to-cart .tcsync-line-per-person {
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.12);
display: flex;
justify-content: space-between;
align-items: baseline;
color: rgba(255, 255, 255, 0.85);
font-size: 0.95em;
}
.tcsync-add-to-cart .tcsync-line-per-person .tcsync-line-label {
color: rgba(255, 255, 255, 0.72);
}
.tcsync-add-to-cart .tcsync-line-per-person .tcsync-line-value {
color: #fff;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* CTA-knappen — vinner uppmärksamheten genom storlek, brand-färg,
och full bredd. Vi använder !important för att slå Hello Elementor /
Woocommerce-tema-defaults som annars vinner specifity-striden. */
form.tcsync-add-to-cart .tcsync-cta-button.single_add_to_cart_button,
form.tcsync-add-to-cart button.tcsync-cta-button {
display: block !important;
width: 100% !important;
margin: 14px 0 8px !important;
padding: 18px 24px !important;
background: #c8102e !important;
background-image: none !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
font: inherit !important;
font-size: 1.15em !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
text-transform: none !important;
text-shadow: none !important;
box-shadow: 0 4px 16px rgba(200, 16, 46, 0.32) !important;
cursor: pointer !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease,
transform 0.05s ease;
min-height: 56px !important;
}
form.tcsync-add-to-cart .tcsync-cta-button:hover:not([disabled]),
form.tcsync-add-to-cart .tcsync-cta-button:focus:not([disabled]) {
background: #a30d24 !important;
box-shadow: 0 6px 20px rgba(200, 16, 46, 0.45) !important;
outline: none !important;
}
form.tcsync-add-to-cart .tcsync-cta-button:active:not([disabled]) {
transform: translateY(1px);
}
form.tcsync-add-to-cart .tcsync-cta-button[disabled] {
background: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.45) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* CTA-undertext — '50% deposit i dag · resterande inför avresa' eller
liknande policy-text just under knappen. Centrerad men läsbar — det
här är viktig deposit-policy som annars kan komma som en överraskning
vid checkout. */
.tcsync-add-to-cart .tcsync-cta-subtext {
margin: 0 0 16px;
padding: 0;
text-align: center;
color: rgba(255, 255, 255, 0.82);
font-size: 0.86em;
line-height: 1.4;
/* Hellre minska font-storleken än bryta texten — '50% deposit i dag
· resterande inför avresa' ska få plats på en rad i sidebar-kortet. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Trust-rad — säker betalning, ombokning, kontakt. Slimmad: kompakt
inline-rad utan border-top, mindre font, så CTA-knappen behåller
uppmärksamheten. */
.tcsync-add-to-cart .tcsync-trust-row {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: center;
}
.tcsync-add-to-cart .tcsync-trust-row__item {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.78em;
line-height: 1.4;
}
/* SVG-checkmark som baseline-aligned ikon — inte ::before-CSS-hack
eftersom hörnen där aldrig hamnar exakt vertikalt mot textens x-höjd
över olika fonter/storlekar. SVG ger pixel-perfect oavsett. */
.tcsync-add-to-cart .tcsync-trust-row__item::before {
content: "";
flex: 0 0 auto;
width: 11px;
height: 11px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Demo-läge banner — alltid synlig längst upp i kortet när
tcsync_demo_mode = on. Tydlig orange-stripe så Erik/operatören direkt ser
att de är i test-läge och inte tror att UI:n är trasig. */
.tcsync-add-to-cart .tcsync-demo-banner {
margin: 0 0 4px;
padding: 10px 14px;
background: rgba(255, 165, 0, 0.16);
border: 1px solid rgba(255, 153, 51, 0.42);
border-radius: 8px;
color: #ffd6a3;
font-size: 0.88em;
line-height: 1.4;
grid-column: 1 / -1;
}
.tcsync-add-to-cart .tcsync-demo-banner strong {
color: #ff9933;
font-weight: 700;
margin-right: 4px;
}
/* Demo-läge oversell-varning — synlig när operatören testar fler resenärer än
tillgängliga biljetter. Tydlig orange-tint så den inte misstas för en
prod-error men ändå syns. */
.tcsync-add-to-cart .tcsync-demo-oversell-warning {
margin: 8px 0 0;
padding: 8px 12px;
background: rgba(255, 165, 0, 0.12);
border-left: 3px solid #ff9933;
color: #ffc88a;
font-size: 0.86em;
line-height: 1.4;
border-radius: 0 4px 4px 0;
}
/* Operatörsvy: debug-panel — diskret, closed by default, ej framträdande.
Tidigare visades den 'open' med stor table som drog ögat. */
.tcsync-add-to-cart > .tcsync-debug-breakdown {
margin: 20px 0 0;
padding: 0;
background: transparent;
border: 1px dashed rgba(255, 255, 255, 0.14);
border-radius: 6px;
color: rgba(255, 255, 255, 0.55);
}
.tcsync-add-to-cart > .tcsync-debug-breakdown > summary {
cursor: pointer;
padding: 8px 12px;
color: rgba(255, 255, 255, 0.52);
font-size: 0.78em;
font-weight: 500;
letter-spacing: 0.02em;
list-style: none;
user-select: none;
-webkit-user-select: none;
}
.tcsync-add-to-cart > .tcsync-debug-breakdown > summary::-webkit-details-marker {
display: none;
}
.tcsync-add-to-cart > .tcsync-debug-breakdown > summary::before {
content: "▸ ";
color: rgba(255, 255, 255, 0.35);
}
.tcsync-add-to-cart > .tcsync-debug-breakdown[open] > summary::before {
content: "▾ ";
}
.tcsync-add-to-cart > .tcsync-debug-breakdown > div {
padding: 0 12px 12px;
font-size: 0.85em;
}
.tcsync-add-to-cart .tcsync-line-breakdown {
display: block;
font-size: 0.85em;
color: rgba(255, 255, 255, 0.72);
margin-top: 4px;
}
.tcsync-add-to-cart .tcsync-line-detail {
display: block;
word-break: break-word;
line-height: 1.5;
}
/* Add-to-cart button — Liverpool red, edge-to-edge with the card.
Negative margin-left/right + width:auto breaks the button out of the card's
28px padding so the CTA spans flush to the card border. The bottom corners
match the card radius (12px), the top corners stay slightly rounded to
visually attach the button to the breakdown above without merging.
Theme button rules (Hello Elementor, Woo `.button.alt`) apply !important
on background/color, so we use !important here to defeat them. */
/* Edge-to-edge CTA-blocket borttaget 2026-06-05 — den nya CTA-regeln
ovan (.tcsync-cta-button) använder brand-färg #c8102e med 18/24-padding,
border-radius 10px, drop-shadow + focus-visible. Det här gamla blocket
spannade knappen utanför kort-padding'en och kolliderade med den nya. */
@media (prefers-reduced-motion: reduce) {
.tcsync-add-to-cart * {
transition: none !important;
}
}
/* ────────────────────────────────────────────
v2: date-range picker + nights breakdown
──────────────────────────────────────────── */
/* Stay range input (text input acting as Flatpickr trigger) */
.tcsync-add-to-cart .tcsync-field-stay .tcsync-stay-range-input {
appearance: none;
-webkit-appearance: none;
padding: 12px 14px;
width: 100%;
box-sizing: border-box;
color: #fff;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
font: inherit;
font-size: 1em;
line-height: 1.4;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.tcsync-add-to-cart .tcsync-field-stay .tcsync-stay-range-input:hover {
border-color: rgba(255, 255, 255, 0.28);
}
.tcsync-add-to-cart .tcsync-field-stay .tcsync-stay-range-input:focus {
outline: none;
border-color: #c8102e;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
background-color: rgba(255, 255, 255, 0.08);
}
/* .tcsync-stay-help borttagen från template 2026-06-05 — texten
"Standard: natt innan och natt efter matchen" var redundant
eftersom date-range:n redan är förvald till samma. */
/* Ticket-category description / consumer_info — operatören 2026-05-25
"info om vad som ingår" per kategori. Populated by JS on category change. */
.tcsync-add-to-cart .tcsync-category-info {
margin: 10px 0 0;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.05);
border-left: 3px solid rgba(200, 16, 46, 0.6);
border-radius: 4px;
font-size: 0.88em;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
.tcsync-add-to-cart .tcsync-category-info ul,
.tcsync-add-to-cart .tcsync-category-info ol {
margin: 0;
padding-left: 1.2em;
}
.tcsync-add-to-cart .tcsync-category-info li {
margin: 2px 0;
}
.tcsync-add-to-cart .tcsync-category-info strong {
color: rgba(255, 255, 255, 0.95);
}
.tcsync-add-to-cart .tcsync-category-info p {
margin: 0 0 6px;
}
.tcsync-add-to-cart .tcsync-category-info p:last-child {
margin-bottom: 0;
}
.tcsync-add-to-cart .tcsync-category-info a {
color: #ff8a99;
}
/* Genvägs-länk under category-dropdown ner till "Vad ingår i biljetterna"-
sektionen. operatör-feedback 2026-05-29: kunder missar info-sektionen längre ner
på sidan. Sober textlänk — inte en knapp — så den inte tävlar med
add-to-cart-knappen om uppmärksamhet. */
.tcsync-add-to-cart .tcsync-ticket-info-jump {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
padding: 0;
font-size: 0.85em;
color: rgba(255, 255, 255, 0.78);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
cursor: pointer;
transition: color 120ms ease;
}
.tcsync-add-to-cart .tcsync-ticket-info-jump:hover,
.tcsync-add-to-cart .tcsync-ticket-info-jump:focus-visible {
color: #ff8a99;
}
.tcsync-add-to-cart .tcsync-ticket-info-jump__arrow {
display: inline-block;
transition: transform 120ms ease;
}
.tcsync-add-to-cart .tcsync-ticket-info-jump:hover .tcsync-ticket-info-jump__arrow,
.tcsync-add-to-cart .tcsync-ticket-info-jump:focus-visible .tcsync-ticket-info-jump__arrow {
transform: translateY(2px);
}
/* "Vad ingår i biljetterna"-sektion på produktsida — operatör-feedback 2026-05-25.
Renderad via TicketCategoryInfoController (auto-hook eller [tcsync_ticket_info]
shortcode). Theme-neutral light styling — Elementor-templaten på operatörens site
har ljus bakgrund i 'Mer information'-sektionen, mörk text behövs för
kontrast. Liverpool-röd används som accent-färg konsekvent med övriga
plugin-touchpoints. */
.tcsync-ticket-info-section {
margin: 18px 0 24px;
}
.tcsync-ticket-info-section__item {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
margin: 0 0 10px;
padding: 0;
}
.tcsync-ticket-info-section__item[open] {
border-color: #c8102e;
box-shadow: 0 1px 4px rgba(200, 16, 46, 0.10);
}
.tcsync-ticket-info-section__summary {
cursor: pointer;
padding: 12px 16px;
font-weight: 600;
font-size: 1em;
color: #1a1a1a;
user-select: none;
list-style: none;
}
.tcsync-ticket-info-section__summary::-webkit-details-marker {
display: none;
}
.tcsync-ticket-info-section__summary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
border-radius: 4px;
}
.tcsync-ticket-info-section__summary::before {
content: "+";
display: inline-block;
width: 1em;
margin-right: 6px;
color: #c8102e;
font-weight: 700;
}
.tcsync-ticket-info-section__item[open] .tcsync-ticket-info-section__summary::before {
content: "−";
}
.tcsync-ticket-info-section__body {
padding: 0 16px 14px;
font-size: 0.95em;
line-height: 1.55;
color: #333;
}
.tcsync-ticket-info-section__body ul,
.tcsync-ticket-info-section__body ol {
margin: 6px 0;
padding-left: 1.3em;
}
.tcsync-ticket-info-section__body li {
margin: 3px 0;
}
.tcsync-ticket-info-section__body p {
margin: 0 0 8px;
}
.tcsync-ticket-info-section__body p:last-child {
margin-bottom: 0;
}
.tcsync-ticket-info-section__body strong {
color: #1a1a1a;
}
.tcsync-ticket-info-section__body a {
color: #c8102e;
text-decoration: underline;
}
/* Match-date flexibility notice (TV-sändning kan flytta matchen). Diskret
en-rads-text under date-range, ingen bakgrund eller bar — den ska bara
informera, inte ta uppmärksamhet. */
.tcsync-add-to-cart .tcsync-match-date-notice {
font-size: 0.78em;
color: rgba(255, 255, 255, 0.55);
margin: 6px 0 0;
padding: 0;
line-height: 1.4;
}
/* Per-night breakdown list */
.tcsync-add-to-cart .tcsync-nights-list {
margin: 0;
padding: 0;
}
.tcsync-add-to-cart .tcsync-nights-list h4 {
font-size: 0.78em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.62);
margin: 0 0 6px;
padding: 0;
}
.tcsync-add-to-cart [data-tcsync-role="nights-breakdown"] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.tcsync-add-to-cart [data-tcsync-role="nights-breakdown"] li {
font-size: 0.88em;
color: rgba(255, 255, 255, 0.72);
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
/* ─────────────────────────────────────────────────────────────────
* Debug breakdown — non-production environments only
* ───────────────────────────────────────────────────────────────── */
.tcsync-debug-breakdown {
margin-top: 16px;
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: 6px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
font-size: 0.9em;
color: rgba(255, 255, 255, 0.85);
}
.tcsync-debug-breakdown[hidden] { display: none; }
.tcsync-debug-breakdown > summary {
cursor: pointer;
user-select: none;
font-weight: 600;
list-style: revert;
padding: 2px 0;
}
.tcsync-debug-breakdown[open] > summary {
margin-bottom: 10px;
}
.tcsync-debug-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.tcsync-debug-table td {
padding: 4px 8px;
vertical-align: top;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tcsync-debug-table tr:last-child td { border-bottom: 0; }
.tcsync-debug-value {
text-align: right;
white-space: nowrap;
}
.tcsync-debug-detail {
color: rgba(255, 255, 255, 0.55);
font-size: 0.88em;
text-align: right;
white-space: nowrap;
}
.tcsync-debug-total td {
font-weight: 700;
border-top: 1px solid rgba(255, 255, 255, 0.25);
padding-top: 8px;
}
.tcsync-debug-note {
margin: 10px 0 0;
font-size: 0.82em;
color: rgba(255, 255, 255, 0.45);
font-style: italic;
}
/* v2.2 — rooms + person-count helper */
.tcsync-add-to-cart .tcsync-field-rooms + .tcsync-field-rooms {
margin-top: 12px;
}
.tcsync-add-to-cart .tcsync-room-help {
margin: 6px 0 0;
font-size: 0.88em;
color: rgba(255, 255, 255, 0.72);
}
.tcsync-add-to-cart .tcsync-room-help #tcsync-person-count {
color: rgba(255, 255, 255, 0.95);
font-variant-numeric: tabular-nums;
}
/* Tidigare dubbel-definition av .tcsync-room-warning här (2026-06-05)
togs bort — regeln på rad ~704 är den auktoritativa och använder
brand-färg #c8102e konsekvent med övriga error-states. */
/* -------------------------------------------------------------------------
* WC notices som toasts — JS (tcsync-notice-toast.js) flyttar
* notice-elementen till en fixed-position container längst upp till höger.
* Animeras in från höger, auto-dismiss efter 5 sek, klick = manual close.
*
* Wrapper-styling: transparent + 0-padding så att den ursprungliga
* placeringen i flow:n (mellan headers) inte tar plats medan JS hinner
* flytta noticen.
* ----------------------------------------------------------------------- */
.woocommerce-notices-wrapper {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
/* Toast-container: fixed, top-right, ovanpå allt annat */
.tcsync-toast-container {
position: fixed;
top: 90px; /* under site-header */
right: 24px;
z-index: 99999;
width: auto;
max-width: 420px;
pointer-events: none; /* container fångar inga klick — bara toasts gör det */
}
/* Toast-element (= flyttad notice). Mörk box, drop-shadow. */
.tcsync-toast-container .tcsync-toast {
pointer-events: auto;
display: block;
background-color: #1a1a1a !important;
color: #fff !important;
border: 0 !important;
border-left: 4px solid #c8102e !important;
border-radius: 4px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
padding: 14px 18px !important;
margin: 0 0 10px !important;
max-width: 420px;
list-style: none !important;
cursor: pointer;
/* Slide-in från höger + fade */
transform: translateX(120%);
opacity: 0;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}
.tcsync-toast-container .tcsync-toast--visible {
transform: translateX(0);
opacity: 1;
}
.tcsync-toast-container .tcsync-toast--leaving {
transform: translateX(120%);
opacity: 0;
}
.tcsync-toast-container .tcsync-toast li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
color: #fff !important;
background: transparent !important;
}
.tcsync-toast-container .tcsync-toast a {
color: #fff !important;
text-decoration: underline;
}
.tcsync-toast-container .tcsync-toast a.button {
display: inline-block;
background: #c8102e !important;
color: #fff !important;
text-decoration: none;
padding: 6px 14px !important;
border-radius: 3px !important;
margin-top: 10px;
margin-left: 0 !important;
font-size: 0.9em;
float: none !important;
}
.tcsync-toast-container .tcsync-toast::before {
color: #c8102e !important;
}
/* Mobil: full-bredd minus marginal */
@media (max-width: 600px) {
.tcsync-toast-container {
top: 70px;
left: 10px;
right: 10px;
max-width: none;
}
.tcsync-toast-container .tcsync-toast {
max-width: none;
}
}
/* -------------------------------------------------------------------------
* Stripe checkout-form — dark theme override.
*
* Stripe-pluginens stripe-styles.css sätter:
* .wc-stripe-elements-field { border: 1px solid #ddd; background: #fff; }
*
* Det ger en ful vit/grå ram + vit bakgrund inuti kortformuläret i dark theme.
* Vi byter bg till mörk + matchar bordsfärg.
* ----------------------------------------------------------------------- */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
background-color: #1a1a1a !important;
border: 1px solid #333 !important;
}
/* Stripes UPE-wrapper (Unified Payment Element, används av Link) ritar en vit
* ram runt hela kort-blocket. Erik rapporterade "irriterande vitt streck runt
* kortuppgifterna" 2026-05-18 — det är denna outer wrapper.
*
* Tema sätter border-{top,bottom,left,right}-color separat, så shorthand-
* border räcker inte — override per kant. */
.payment_method_stripe .wc-stripe-upe-element,
.payment_method_stripe .StripeElement,
li.payment_method_stripe > .payment_box,
.wc_payment_methods li.wc_payment_method.payment_method_stripe {
background-color: #1a1a1a !important;
border: 1px solid #333 !important;
border-top-color: #333 !important;
border-right-color: #333 !important;
border-bottom-color: #333 !important;
border-left-color: #333 !important;
border-radius: 4px;
}
/* Den yttre payment_box-ramen ska INTE ha sin egen ram över Stripe-wrappern. */
.payment_method_stripe .payment_box,
.payment_method_stripe .payment_box::before,
.payment_method_stripe .payment_box::after {
border: none !important;
border-color: transparent !important;
background: transparent !important;
padding: 0 !important;
}
/* Tema-default på .form-row / .input-text inom Stripe-blocket — ofta vit
* border-bottom som blir den irriterande linjen Erik ser. */
.payment_method_stripe .form-row,
.payment_method_stripe .form-row > *,
.payment_method_stripe input,
.payment_method_stripe .input-text {
border-color: #333 !important;
border-top-color: #333 !important;
border-bottom-color: #333 !important;
border-left-color: #333 !important;
border-right-color: #333 !important;
}