/**
 * FiBo Plugin – Frontend CSS
 *
 * Filosofia:
 *  - Ei kiinteitä värikoodeja – käytetään teeman / lohkojen (--wp--preset--*) arvoja tai periytymistä
 *  - Ei reset-tyylejä – ei häiritä teemaa
 *  - Ylikirjoitettavissa custom CSS URL:n kautta asetuksista
 *
 * @package FiBo
 */

/* =========================================================================
   Vain layout / spacing (ei värejä)
   ========================================================================= */
:root {
    --fibo-radius:         4px;
    --fibo-gap:            1.5rem;
    --fibo-page-alert-margin-top:    0;
    --fibo-page-alert-margin-bottom: var(--fibo-gap);
}

/* =========================================================================
   Latausanimaatio
   ========================================================================= */
[class^="fibo-"][hidden],
[class*=" fibo-"][hidden] {
    display: none !important;
}

.fibo-loader {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    padding:         2rem;
    color:           inherit;
    opacity:         0.85;
}

.fibo-loader__spinner {
    width:         1.5rem;
    height:        1.5rem;
    border:        3px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: var(--wp--preset--color--primary, currentColor);
    border-radius: 50%;
    animation:     fibo-spin 0.8s linear infinite;
    flex-shrink:   0;
}

@keyframes fibo-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================================
   Ilmoitukset
   ========================================================================= */
.fibo-error,
.fibo-success,
.fibo-note {
    padding:       1rem;
    border:        1px solid currentColor;
    border-radius: var(--fibo-radius);
    margin:        1rem 0;
    color:         inherit;
    background:    transparent;
}

.fibo-error {
    border-width: 0 0 0 4px;
    color: #b91c1c;
    border-left-color: #dc2626;
    background: #fef2f2;
}

.fibo-webstore__payment-error-actions {
    margin-top: 0.75rem;
}

.fibo-success {
    border-width: 0 0 0 4px;
}

.fibo-note {
    border-width: 0 0 0 4px;
}

.fibo-profile__form .fibo-success,
.fibo-login__form .fibo-success {
    padding: 0.75rem 1rem;
    margin:  0.75rem 0;
}

.fibo-page-alert {
    width:         100%;
    max-width:     100%;
    box-sizing:    border-box;
    flex-shrink:   0;
    margin-top:    var(--fibo-page-alert-margin-top);
    margin-bottom: var(--fibo-page-alert-margin-bottom);
    margin-left:   0;
    margin-right:  0;
}

.fibo-profile {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
}

.fibo-profile > .fibo-page-alert {
    order: -1;
}

.fibo-profile > .fibo-loader {
    order: 0;
}

.fibo-profile > .fibo-profile__login-required {
    order: 1;
}

.fibo-profile > .fibo-profile__content {
    order: 2;
}

.fibo-webstore {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
}

.fibo-webstore > .fibo-page-alert {
    order: -1;
}

.fibo-webstore > .fibo-webstore__title {
    order: 0;
}

.fibo-webstore > .fibo-webstore__filters {
    order: 1;
}

.fibo-webstore > .fibo-loader {
    order: 2;
}

.fibo-webstore > .fibo-webstore__grid {
    order: 3;
}

.fibo-webstore > .fibo-webstore__show-all-wrap {
    order: 4;
}

.entry-content > .fibo-profile:first-child,
.entry-content > .fibo-webstore:first-child,
.wp-block-post-content > .fibo-profile:first-child,
.wp-block-post-content > .fibo-webstore:first-child,
main > .fibo-profile:first-child,
main > .fibo-webstore:first-child {
    margin-top: var(--fibo-page-alert-stack-margin-top, 0);
}

/* =========================================================================
   Webstore – suodatuspalkki
   ========================================================================= */
.fibo-webstore__filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.5rem;
    margin-bottom: var(--fibo-gap);
}

.fibo-filter-btn {
    padding:          0.4rem 1rem;
    border:           1px solid currentColor;
    border-radius:    999px;
    background:       transparent;
    color:            inherit;
    cursor:           pointer;
    font-size:        0.875rem;
    transition:       opacity 0.15s, border-color 0.15s;
    line-height:      1.4;
    opacity:          0.95;
}

.fibo-filter-btn:hover {
    opacity: 1;
    border-color: var(--wp--preset--color--primary, currentColor);
    color:        var(--wp--preset--color--primary, inherit);
}

.fibo-filter-btn--active {
    background:   var(--wp--preset--color--primary, transparent);
    border-color: var(--wp--preset--color--primary, currentColor);
    color:        var(--wp--preset--color--background, inherit);
    opacity:      1;
}

/* =========================================================================
   Webstore – tuoteruudukko
   ========================================================================= */
.fibo-webstore__title {
    margin-bottom: var(--fibo-gap);
}

.fibo-webstore__grid {
    display:               grid;
    grid-template-columns: repeat(var(--fibo-cols, 3), 1fr);
    gap:                   var(--fibo-gap);
}

.fibo-webstore--cols-2 .fibo-webstore__grid { --fibo-cols: 2; }
.fibo-webstore--cols-3 .fibo-webstore__grid { --fibo-cols: 3; }
.fibo-webstore--cols-4 .fibo-webstore__grid { --fibo-cols: 4; }

@media (max-width: 900px) {
    .fibo-webstore__grid {
        grid-template-columns: repeat(min(var(--fibo-cols, 3), 2), 1fr);
    }
}

@media (max-width: 540px) {
    .fibo-webstore__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Tuotekortti
   ========================================================================= */
.fibo-product-card {
    display:        flex;
    flex-direction: column;
    border:         1px solid currentColor;
    border-radius:  var(--fibo-radius);
    background:     transparent;
    overflow:       hidden;
    transition:     opacity 0.2s, transform 0.2s;
    opacity:        0.98;
}

.fibo-product-card:hover {
    opacity:   1;
    transform: translateY(-2px);
}

.fibo-product-card__hero {
    position:     relative;
    aspect-ratio: 4 / 3;
    min-height:   11rem;
    overflow:     hidden;
    background:   color-mix(in srgb, currentColor 8%, transparent);
}

.fibo-product-card__media {
    margin:     0;
    width:      100%;
    height:     100%;
}

.fibo-product-card__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.fibo-product-card__badges {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.25rem;
    position:   absolute;
    top:        0.5rem;
    left:       0.5rem;
    right:      0.5rem;
    padding:    0;
    min-height: 0;
    z-index:    1;
}

.fibo-product-card__body {
    flex:    1;
    padding: 0.75rem;
}

.fibo-product-card__title {
    font-size:   1rem;
    font-weight: 600;
    margin:      0 0 0.5rem;
    line-height: 1.3;
    color:       inherit;
}

.fibo-product-card__description {
    font-size:  0.875rem;
    margin:     0;
    line-height: 1.5;
    color:       inherit;
    opacity:     0.85;
}

.fibo-product-card__description-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:            0.35rem;
}

.fibo-product-card__description--full {
    margin-top: 0;
}

.fibo-product-card__desc-toggle {
    margin:          0;
    padding:         0;
    border:          0;
    background:      transparent;
    color:           inherit;
    font-size:       0.875rem;
    font-weight:     600;
    line-height:     1.4;
    cursor:          pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    opacity:         0.95;
}

.fibo-product-card__desc-toggle:hover {
    opacity: 1;
}

.fibo-product-card__desc-toggle:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

.fibo-product-card__footer {
    padding:        0.75rem;
    border-top:     1px solid currentColor;
    opacity:        0.9;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.fibo-product-card__price {
    display:     flex;
    align-items: baseline;
    gap:         0.25rem;
}

.fibo-product-card__price-amount {
    font-size:   1.25rem;
    font-weight: 700;
    color:       inherit;
}

.fibo-product-card__price-period {
    font-size: 0.8rem;
    opacity:   0.85;
}

/* =========================================================================
   Näytä kaikki
   ========================================================================= */
.fibo-webstore__show-all-wrap {
    display:         flex;
    justify-content: center;
    margin-top:      var(--fibo-gap);
}

.fibo-btn--show-all {
    background:   transparent;
    border:       1px solid currentColor;
    color:        inherit;
    padding:      0.65rem 2rem;
    border-radius: var(--fibo-radius);
    cursor:       pointer;
    font-size:    0.9rem;
    font-weight:  600;
    transition:   opacity 0.15s, background 0.15s, color 0.15s;
}

.fibo-btn--show-all:hover {
    background: var(--wp--preset--color--primary, transparent);
    color:      var(--wp--preset--color--background, inherit);
    opacity:    1;
}

/* =========================================================================
   Badget (tuotekortti kuvan päällä – kiinteät värit luettavuutta varten)
   ========================================================================= */
.fibo-badge {
    display:        inline-block;
    padding:        0.2em 0.65em;
    border-radius:  999px;
    font-size:      0.7rem;
    font-weight:    600;
    line-height:    1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border:         1px solid transparent;
    background:     #1e293b;
    color:          #f8fafc;
    opacity:        1;
    box-shadow:     0 1px 3px rgba(0, 0, 0, 0.25);
}

.fibo-badge--campaign {
    background: #c2410c;
    color:      #fff;
}

.fibo-badge--course {
    background: #0f766e;
    color:      #fff;
}

.fibo-badge--recurring {
    background: #1d4ed8;
    color:      #fff;
}

/* =========================================================================
   Osta-nappi
   ========================================================================= */
.fibo-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    padding:        0.6rem 1.25rem;
    border:         1px solid transparent;
    border-radius:  var(--fibo-radius);
    cursor:         pointer;
    font-size:      0.9rem;
    font-weight:    600;
    line-height:    1;
    transition:     opacity 0.15s;
    text-decoration: none;
    width:          100%;
}

.fibo-btn--buy {
    background: var(--wp--preset--color--primary, ButtonFace);
    color:      var(--wp--preset--color--background, ButtonText);
    border-color: var(--wp--preset--color--primary, currentColor);
}

.fibo-btn--buy:hover {
    opacity: 0.92;
}

/* =========================================================================
   Lomakkeet
   ========================================================================= */
.fibo-form-group {
    margin-bottom: 1rem;
}

.fibo-form-label {
    display:      block;
    font-weight:  600;
    font-size:    0.9rem;
    margin-bottom: 0.35rem;
    color:        inherit;
}

.fibo-form-input {
    display:       block;
    width:         100%;
    padding:       0.55rem 0.75rem;
    border:        1px solid currentColor;
    border-radius: var(--fibo-radius);
    font-size:     1rem;
    color:         inherit;
    background:    transparent;
    box-sizing:    border-box;
    transition:    border-color 0.15s, box-shadow 0.15s;
    line-height:   1.5;
    opacity:       0.98;
}

.fibo-form-input:focus {
    outline:    none;
    border-color: var(--wp--preset--color--primary, currentColor);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 22%, transparent);
}

.fibo-form-input:invalid:not(:placeholder-shown) {
    border-style: dashed;
}

.fibo-form-group--missing-required .fibo-form-label {
    color: #b91c1c;
}

.fibo-form-input--missing-required {
    border-color: #dc2626;
    background: #fef2f2;
}

.fibo-form-input--missing-required:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 24%, transparent);
}

.fibo-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.fibo-birthdate-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 0.5rem;
}

@media (max-width: 540px) {
    .fibo-form-row { grid-template-columns: 1fr; }
}

.fibo-required {
    margin-left: 0.2em;
    font-weight: 700;
}

/* =========================================================================
   Napit – lisätyypit
   ========================================================================= */
.fibo-btn--primary {
    background: var(--wp--preset--color--primary, ButtonFace);
    color:      var(--wp--preset--color--background, ButtonText);
    border-color: var(--wp--preset--color--primary, currentColor);
}

.fibo-btn--primary:hover {
    opacity: 0.92;
}

.fibo-btn--secondary {
    background:   transparent;
    border:       1px solid currentColor;
    color:        inherit;
}

.fibo-btn--secondary:hover {
    border-color: var(--wp--preset--color--primary, currentColor);
    color:        var(--wp--preset--color--primary, inherit);
}

.fibo-btn--missing-required {
    border-color: #dc2626;
    color: #b91c1c;
}

.fibo-btn--full { width: 100%; }
.fibo-btn:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* =========================================================================
   Login
   ========================================================================= */
.fibo-login {
    max-width: 420px;
}

.fibo-login__form {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.fibo-login__form .fibo-btn--primary {
    margin-top: 0.5rem;
}

.fibo-login__logged-in {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
}

.fibo-login__greeting {
    margin: 0;
    color:  inherit;
    opacity: 0.85;
}

.fibo-login__forgot {
    margin:     1rem 0 0;
    font-size:  0.95rem;
    text-align: center;
}

.fibo-login__forgot a {
    color:           inherit;
    text-decoration: underline;
}

.fibo-error .fibo-error__reset-link {
    text-decoration: underline;
}

.fibo-error .fibo-error__line {
    margin: 0 0 0.35em;
}

.fibo-error .fibo-error__line:last-child {
    margin-bottom: 0;
}

.fibo-error .fibo-error__after-gap {
    margin-top: 0.85em;
}

.fibo-error .fibo-auth-error__link {
    color:           inherit;
    text-decoration: underline;
}

/* Salasanan palautus ([fibo_reset_password]) */
.fibo-reset-password {
    max-width: 420px;
}

.fibo-reset-password__lead {
    margin:      0 0 1rem;
    line-height: 1.45;
}

.fibo-reset-password__back {
    margin:    1.25rem 0 0;
    font-size: 0.95rem;
}

/* =========================================================================
   Profile
   ========================================================================= */
.fibo-profile__section-title {
    font-size:     1.1rem;
    font-weight:   700;
    margin:        1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid currentColor;
    color:         inherit;
    opacity:       0.95;
}

.fibo-profile__section-title:first-child {
    margin-top: 0;
}

.fibo-profile__section-title--primary {
    font-size:   1.28rem;
    margin-top:  0;
    margin-bottom: 0.65rem;
}

.fibo-profile__membership-list--primary {
    font-size:     1.02rem;
    line-height:   1.5;
    margin-bottom: 1.75rem;
}

.fibo-profile__membership-list--primary li {
    margin-bottom: 0.5rem;
}

.fibo-profile__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.75rem;
    opacity: 0.95;
}

.fibo-profile__tabs.fibo-profile__tabs--loading {
    cursor: progress;
}

.fibo-profile__tab {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.fibo-profile__tabs.fibo-profile__tabs--loading .fibo-profile__tab {
    pointer-events: none;
}

.fibo-profile__tab[disabled] {
    cursor: progress;
    opacity: 0.85;
}

.fibo-profile__tab:hover {
    border-color: var(--wp--preset--color--primary, currentColor);
}

.fibo-profile__tab.is-active {
    background: var(--wp--preset--color--primary, transparent);
    color: var(--wp--preset--color--background, inherit);
    border-color: var(--wp--preset--color--primary, currentColor);
}

.fibo-profile__tab.fibo-profile__tab--loading {
    position: relative;
    padding-right: 1.85rem;
}

.fibo-profile__tab.fibo-profile__tab--loading::after {
    content: '';
    position: absolute;
    right: 0.65rem;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.375rem;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: fibo-spin 0.8s linear infinite;
}

.fibo-profile__tab.fibo-profile__tab--has-missing {
    border-color: #b91c1c;
    color: #b91c1c;
}

.fibo-profile__tab.fibo-profile__tab--has-missing:hover {
    border-color: #991b1b;
    color: #991b1b;
}

.fibo-profile__tab.fibo-profile__tab--has-missing.is-active {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.fibo-profile__tab-panel[hidden] {
    display: none !important;
}

.fibo-profile__readonly {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   0.5rem 1.5rem;
    margin-bottom:         1rem;
}

.fibo-profile__value {
    margin:    0;
    font-size: 1rem;
    color:     inherit;
}

.fibo-profile__value--status-active {
    color: green;
    font-weight: 600;
}

.fibo-profile__value--status-starting {
    color: blue;
    font-weight: 600;
}

.fibo-profile__value--status-ended {
    color: red;
    font-weight: 600;
}

.fibo-profile__help {
    font-size: 0.85rem;
    color:     inherit;
    opacity:   0.82;
    margin:    0 0 1rem;
}

.fibo-profile__required-banner-item + .fibo-profile__required-banner-item {
    margin-top: 0.35rem;
}

.fibo-profile__actions {
    margin-top: 1rem;
    display:    flex;
    gap:        0.75rem;
}

.fibo-profile__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.fibo-profile__radio-option,
.fibo-profile__checkbox-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    font-size: 0.95rem;
}

.fibo-profile__checkbox-option {
    cursor: pointer;
}

.fibo-profile__membership-list {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.fibo-profile__membership-list li {
    margin-bottom: 0.35rem;
}

.fibo-profile__visit-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.fibo-profile__visit-tile {
    border: 1px solid currentColor;
    border-radius: var(--fibo-radius);
    padding: 0.75rem;
    background: transparent;
}

.fibo-profile__visit-tile-label {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

.fibo-profile__visit-tile-value {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.fibo-profile__payments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fibo-profile__invoice-history-btn {
    width:         auto;
    flex:          0 0 auto;
    align-self:    flex-start;
    padding:       0.35rem 0.65rem;
    font-size:     0.78rem;
    font-weight:   600;
    line-height:   1.2;
}

.fibo-invoices-table,
.fibo-visits-table,
.fibo-invoice-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.fibo-invoices-table th,
.fibo-invoices-table td,
.fibo-visits-table th,
.fibo-visits-table td,
.fibo-invoice-details-table th,
.fibo-invoice-details-table td {
    border: 1px solid currentColor;
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-size: 0.9rem;
    opacity: 0.95;
}

.fibo-invoice-toggle {
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.2rem;
    color: inherit;
}

.fibo-visits-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.fibo-visits-history {
    margin-top: 1rem;
}

.fibo-visits-history__toggle {
    width: 100%;
    text-align: left;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: var(--fibo-radius);
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.fibo-visits-history__toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fibo-visits-history__content {
    border: 1px solid currentColor;
    border-top: none;
    border-bottom-left-radius: var(--fibo-radius);
    border-bottom-right-radius: var(--fibo-radius);
    padding: 0.6rem;
}

.fibo-visits-history__pager {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.fibo-visits-heatmap {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.fibo-visits-heatmap th,
.fibo-visits-heatmap td {
    border: 1px solid currentColor;
    padding: 0.35rem 0.45rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.95;
}

.fibo-visits-heatmap__hour {
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
}

.fibo-visits-heatmap__cell {
    min-width: 2.3rem;
    transition: background-color 0.15s ease;
}

.fibo-visits-heatmap__cell--lvl-0 {
    background: transparent;
}

.fibo-visits-heatmap__cell--lvl-1 {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.fibo-visits-heatmap__cell--lvl-2 {
    background: color-mix(in srgb, currentColor 26%, transparent);
}

.fibo-visits-heatmap__cell--lvl-3 {
    background: color-mix(in srgb, currentColor 40%, transparent);
}

.fibo-visits-heatmap__cell--lvl-4 {
    background: color-mix(in srgb, currentColor 56%, transparent);
}

.fibo-profile__password-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fibo-profile__password-row > div {
    flex: 1 1 auto;
    min-width: 0;
}

.fibo-profile__password-row .fibo-btn[data-fibo-action="toggle-password-change"] {
    flex: 0 0 calc(50% - 0.375rem);
}

.fibo-profile__login-required {
    padding:       1.5rem;
    border:        1px solid currentColor;
    border-radius: var(--fibo-radius);
}

.fibo-profile__login-prompt {
    margin:        0 0 1.25rem;
    color:         inherit;
    opacity:       0.85;
    font-size:     0.95rem;
}

/* =========================================================================
   Ostovirran kirjautuminen (vanha + uusi asiakas samassa modaalissa)
   ========================================================================= */
.fibo-auth-divider {
    border:        0;
    border-top:    1px solid color-mix(in srgb, currentColor 18%, transparent);
    margin:        1.25rem 0;
}

.fibo-auth-new-heading {
    margin:        0 0 1rem;
    font-size:     1rem;
    font-weight:   600;
}

.fibo-auth-consent-row {
    margin-top:    0.25rem;
    margin-bottom: 0.5rem;
}

.fibo-auth-consent-label {
    display:        flex;
    align-items:    flex-start;
    gap:            0.55rem;
    cursor:         pointer;
    font-size:      0.92rem;
    line-height:    1.45;
    color:          inherit;
}

.fibo-auth-consent-checkbox {
    margin-top:   0.2rem;
    flex-shrink:  0;
    width:        1rem;
    height:       1rem;
}

.fibo-auth-consent-text a {
    text-decoration: underline;
    color:           inherit;
}

/* =========================================================================
   Maksulinkki-modali
   ========================================================================= */
.fibo-checkout-modal {
    position:   fixed;
    inset:      0;
    z-index:    100000;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    1rem;
    box-sizing: border-box;
}

.fibo-checkout-modal[hidden] {
    display: none !important;
}

.fibo-checkout-modal__backdrop {
    position: absolute;
    inset:    0;
    background: color-mix(in srgb, CanvasText 45%, transparent);
    cursor:   pointer;
}

.fibo-checkout-modal__panel {
    position:   relative;
    z-index:    1;
    max-width:  32rem;
    width:      100%;
    max-height: 90vh;
    overflow:   auto;
    padding:    1.5rem;
    background: var(--wp--preset--color--background, Canvas);
    color:      var(--wp--preset--color--foreground, CanvasText);
    border-radius: var(--fibo-radius);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.fibo-checkout-modal__title {
    margin:      0 0 0.75rem;
    font-size:   1.15rem;
}

.fibo-checkout-modal__icon-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, Canvas 88%, transparent);
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fibo-checkout-modal__icon-close:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.fibo-checkout-modal__intro {
    margin:      0 0 1rem;
    font-size:   0.9rem;
    color:       inherit;
    opacity:     0.85;
}

.fibo-checkout-modal__table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
    margin-bottom:   1rem;
}

.fibo-checkout-modal__table th,
.fibo-checkout-modal__table td {
    padding:     0.5rem 0.25rem;
    border-bottom: 1px solid currentColor;
    text-align:  left;
    opacity: 0.9;
}

.fibo-checkout-modal__table tfoot th {
    border-bottom: none;
    font-weight:   700;
}

.fibo-checkout-modal__form {
    margin: 0 0 0.75rem;
}

.fibo-checkout-modal__submit {
    width: 100%;
}

.fibo-checkout-modal__close {
    width:           100%;
    background:      transparent;
    border:          1px solid currentColor;
    color:           inherit;
    padding:         0.5rem;
    border-radius:   var(--fibo-radius);
    cursor:          pointer;
    font-size:       0.9rem;
    opacity:         0.9;
}

.fibo-checkout-modal [data-auth-switch="to-login"] {
    font-size: 0.8rem;
    padding:   0.4rem 0.85rem;
}

.fibo-checkout-modal--payment-methods .fibo-checkout-modal__panel {
    max-width: min(92vw, 36rem);
}

.fibo-payment-methods {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap:                   0.65rem;
    margin:                0 0 1rem;
}

.fibo-payment-method-card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              0;
    min-height:       4.25rem;
    padding:          0.65rem 0.5rem;
    margin:           0;
    border:           1px solid currentColor;
    border-radius:    var(--fibo-radius);
    background:       transparent;
    cursor:           pointer;
    font:             inherit;
    color:            inherit;
    text-align:       center;
    transition:       border-color 0.15s ease, opacity 0.15s ease;
}

.fibo-payment-method-card:hover,
.fibo-payment-method-card:focus-visible {
    outline:      none;
    border-color: var(--wp--preset--color--primary, currentColor);
    opacity:      1;
}

.fibo-payment-method-card__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    min-height:      3rem;
}

.fibo-payment-method-card__icon img {
    display:    block;
    max-width:  100%;
    max-height: 3rem;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

.fibo-payment-method-card__label {
    display: none;
    font-size: 0.78rem;
    line-height: 1.25;
}

.fibo-payment-method-card.is-fallback .fibo-payment-method-card__icon {
    display: none;
}

.fibo-payment-method-card.is-fallback .fibo-payment-method-card__label {
    display: block;
}

/* =========================================================================
   Webstore result
   ========================================================================= */
.fibo-webstore-result {
    border: 1px solid currentColor;
    border-radius: var(--fibo-radius);
    background: transparent;
    padding: 1.25rem;
    max-width: 44rem;
}

.fibo-webstore-result__title {
    margin: 0 0 0.5rem;
}

.fibo-webstore-result__message {
    margin: 0 0 1rem;
    color: inherit;
    opacity: 0.85;
}

.fibo-webstore-result__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fibo-webstore-result--success,
.fibo-webstore-result--failure {
    border-width: 0 0 0 4px;
}

/* =========================================================================
   Profiilin täydennys – wizard (ei suljettava modaali)
   ========================================================================= */
body.fibo-wizard-lock {
    overflow: hidden;
}

.fibo-wizard__modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

.fibo-wizard__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #000 45%, transparent);
    pointer-events: none;
}

.fibo-wizard__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    margin: auto;
    align-self: center;
    padding: var(--fibo-gap);
    border-radius: var(--fibo-radius);
    background: var(--wp--preset--color--background, #fff);
    color: inherit;
    box-shadow: 0 8px 32px color-mix(in srgb, #000 18%, transparent);
    max-height: min(90vh, 40rem);
    overflow-y: auto;
}

.fibo-wizard__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.fibo-wizard__intro {
    margin: 0 0 1rem;
}

.fibo-wizard__intro-password-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1rem;
}

.fibo-wizard__intro-password-head .fibo-wizard__intro {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.fibo-wizard__pwd-req-tip {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
}

.fibo-wizard__pwd-req-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: help;
}

.fibo-wizard__pwd-req-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 55%, transparent);
    outline-offset: 2px;
}

.fibo-wizard__pwd-req-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.5rem 0.65rem;
    border-radius: var(--fibo-radius, 6px);
    background: var(--wp--preset--color--foreground, #1e1e1e);
    color: var(--wp--preset--color--background, #fff);
    font-size: 0.8125rem;
    line-height: 1.35;
    box-shadow: 0 4px 14px color-mix(in srgb, #000 22%, transparent);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.fibo-wizard__pwd-req-tip:hover .fibo-wizard__pwd-req-panel,
.fibo-wizard__pwd-req-tip:focus-within .fibo-wizard__pwd-req-panel,
.fibo-wizard__pwd-req-tip.is-open .fibo-wizard__pwd-req-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.fibo-wizard__actions {
    margin-top: 1.25rem;
}

.fibo-wizard__next {
    width: 100%;
}

/* Maa / postinumero-haun ulkomaatila — Suomi-kenttä ~80 %, Muu ~20 % samalla rivillä */
.fibo-country-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}

.fibo-country-inline .fibo-country-input {
    flex: 4 1 0%;
    min-width: 0;
}

.fibo-country-inline .fibo-country-other-btn {
    flex: 1 1 0%;
    min-width: 0;
    align-self: stretch;
    white-space: nowrap;
}