/* ==========================================================================
   Allora Pilates — components
   Plain-CSS ports of components/core/*.jsx, components/forms/*.jsx and
   components/navigation/Tabs.jsx. Class names mirror the React props:
   .btn--{variant} .btn--{size}, .badge--{tone}, .card--{variant}, .tab.is-active …
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button — Button.jsx (primary / secondary / outline / ghost · sm / md / lg)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);
  line-height:1.2;text-decoration:none;text-align:center;white-space:nowrap;
  border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
  padding:14px 28px;font-size:var(--text-body-md);
  transition:background-color var(--motion),color var(--motion),border-color var(--motion),opacity var(--motion);
  -webkit-tap-highlight-color:transparent;
}
.btn--sm{padding:10px 20px;font-size:var(--text-body-sm)}
.btn--md{padding:14px 28px;font-size:var(--text-body-md)}
.btn--lg{padding:18px 36px;font-size:var(--text-body-lg)}
.btn--block{display:flex;width:100%}
@media (max-width:480px){.btn{white-space:normal;max-width:100%}}

.btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}
.btn--primary:active{background:var(--accent-active);border-color:var(--accent-active)}

.btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--color-brown-900)}
.btn--secondary:hover{background:var(--color-brown-900);color:var(--text-on-dark)}
.btn--secondary:active{background:var(--color-brown-700);border-color:var(--color-brown-700);color:var(--text-on-dark)}

.btn--outline{background:transparent;color:var(--accent-hover);border-color:var(--accent)}
.btn--outline:hover{background:var(--surface-card);color:var(--accent-active)}
.btn--outline:active{background:var(--border-subtle)}

.btn--ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.btn--ghost:hover{background:var(--surface-card)}
.btn--ghost:active{background:var(--border-subtle)}

/* on dark surfaces (hero, testimonial band, footer) */
.on-dark .btn--secondary,.btn--on-dark{color:var(--text-on-dark);border-color:var(--text-on-dark)}
.on-dark .btn--secondary:hover,.btn--on-dark:hover{background:var(--text-on-dark);color:var(--text-primary)}
.on-dark .btn--ghost{color:var(--text-on-dark)}
.on-dark .btn--ghost:hover{background:rgba(251,247,240,.12)}

.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* --------------------------------------------------------------------------
   Badge + Tag — Badge.jsx
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:1.2;
  padding:6px 14px;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap;
}
.badge--gold{background:var(--color-tan-300);color:var(--color-brown-900)}
.badge--dark{background:var(--color-brown-900);color:var(--text-on-dark)}
.badge--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.on-dark .badge--outline{color:var(--text-on-dark);border-color:rgba(251,247,240,.4)}

.tag{
  display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);line-height:1.2;padding:8px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);background:var(--surface-raised);color:var(--text-secondary);
  cursor:pointer;text-decoration:none;
  transition:background-color var(--motion),color var(--motion),border-color var(--motion);
}
.tag:hover{border-color:var(--border-strong);color:var(--text-primary)}
.tag.is-selected,.tag[aria-pressed="true"],.tag.current-cat{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.tag:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --------------------------------------------------------------------------
   Card — Card.jsx (surface / raised / dark) + Divider.jsx
   -------------------------------------------------------------------------- */
.card{border-radius:var(--radius-lg);padding:var(--space-6);position:relative}
.card--surface{background:var(--surface-card);border:1px solid var(--border-subtle)}
.card--raised{background:var(--surface-raised);box-shadow:var(--shadow-md);border:none}
.card--dark{background:var(--surface-dark);color:var(--text-on-dark);border:none}
.card--xl{border-radius:var(--radius-xl)}
.card--tight{padding:var(--space-5)}
.card--flush{padding:0;overflow:hidden}
.card--dark .divider{border-top-color:rgba(251,247,240,.18)}
a.card{display:block;color:inherit;text-decoration:none}

.divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--space-5) 0}
.divider--inset{margin:var(--space-5) var(--space-6)}

/* --------------------------------------------------------------------------
   Input / Select / Textarea — Input.jsx
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-sans);width:100%}
.field__label,.form-row label,.woocommerce form .form-row label{
  font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-secondary);line-height:1.3;
}
.field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.field__error{font-size:var(--text-caption);color:var(--color-error)}

.input,.select,.textarea,
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],
input[type="search"],input[type="number"],input[type="date"],select,textarea{
  font-family:var(--font-sans);font-size:var(--text-body-md);line-height:1.4;color:var(--text-primary);
  padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border-strong);
  background:var(--surface-raised);outline:none;width:100%;appearance:none;-webkit-appearance:none;
  transition:border-color var(--motion),box-shadow var(--motion);
}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}
.input:hover,.select:hover,.textarea:hover,input:hover,select:hover,textarea:hover{border-color:var(--accent)}
.input:focus,.select:focus,.textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(218,196,140,.45);
}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea,.input.is-error{border-color:var(--color-error)}
.select,select{
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C4E3A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
textarea,.textarea{min-height:140px;resize:vertical}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-card)}

/* --------------------------------------------------------------------------
   Checkbox / Radio / Switch — Checkbox.jsx, Radio.jsx, Switch.jsx
   Real <input> stays in the DOM (visually hidden) for accessibility.
   -------------------------------------------------------------------------- */
.choice{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-size:var(--text-body-md);color:var(--text-primary);cursor:pointer;line-height:1.4;position:relative;
}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choice__box{
  width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);background:var(--surface-raised);
  transition:background-color var(--motion),border-color var(--motion),box-shadow var(--motion);
}
.choice--checkbox .choice__box{border-radius:6px}
.choice--checkbox .choice__box::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--text-on-accent);opacity:0;transform:scale(.6);transition:opacity var(--motion),transform var(--motion)}
.choice--checkbox input:checked + .choice__box{background:var(--accent);border-color:var(--accent)}
.choice--checkbox input:checked + .choice__box::after{opacity:1;transform:scale(1)}

.choice--radio .choice__box{border-radius:var(--radius-pill)}
.choice--radio .choice__box::after{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:var(--accent);opacity:0;transform:scale(.6);transition:opacity var(--motion),transform var(--motion)}
.choice--radio input:checked + .choice__box{border-color:var(--accent)}
.choice--radio input:checked + .choice__box::after{opacity:1;transform:scale(1)}

.choice--switch .choice__box{
  width:40px;height:22px;border:none;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;
}
.choice--switch .choice__box::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--surface-raised);transition:left var(--motion);
}
.choice--switch input:checked + .choice__box{background:var(--accent)}
.choice--switch input:checked + .choice__box::after{left:20px}

.choice input:focus-visible + .choice__box{box-shadow:0 0 0 3px rgba(218,196,140,.55)}
.choice input:disabled + .choice__box{opacity:.5}
.choice input:disabled ~ *{cursor:not-allowed}

/* --------------------------------------------------------------------------
   Tabs — Tabs.jsx (pill tab row; active = brown-900 fill)
   -------------------------------------------------------------------------- */
.tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.tab{
  font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);line-height:1.2;padding:10px 20px;border-radius:var(--radius-pill);
  border:none;cursor:pointer;background:transparent;color:var(--text-secondary);text-decoration:none;
  transition:background-color var(--motion),color var(--motion);
}
.tab:hover{background:var(--surface-card);color:var(--text-primary)}
.tab.is-active,.tab[aria-selected="true"]{background:var(--color-brown-900);color:var(--text-on-dark)}
.tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.tab-panel[hidden]{display:none}

/* --------------------------------------------------------------------------
   Eyebrow label — type-pairing.card.html
   -------------------------------------------------------------------------- */
.eyebrow{
  display:block;font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--accent-hover);margin:0 0 var(--space-3);
}
.on-dark .eyebrow{color:var(--color-gold-400)}

/* --------------------------------------------------------------------------
   Text link with arrow — "Zobacz cały grafik →"
   -------------------------------------------------------------------------- */
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-weight:var(--weight-semibold);
  color:var(--accent-hover);text-decoration:none;transition:color var(--motion),gap var(--motion);
}
.link-arrow::after{content:"→"}
.link-arrow:hover{color:var(--accent-active);gap:10px}
.on-dark .link-arrow{color:var(--color-gold-400)}

/* --------------------------------------------------------------------------
   Notice (WooCommerce messages, form feedback)
   -------------------------------------------------------------------------- */
.notice-box,.woocommerce-message,.woocommerce-info,.woocommerce-error{
  font-family:var(--font-sans);font-size:var(--text-body-sm);color:var(--text-primary);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:14px 18px;margin:0 0 var(--space-5);list-style:none;
}
.woocommerce-error{border-color:rgba(181,72,47,.4)}