/* ProAdvice component styles. Every value comes from a token in tokens/.
   Direction-agnostic: use logical properties (inline-start/end) so RTL works with no overrides. */

/* ---------- Icon ---------- */
.pa-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:inherit}
.pa-icon>svg{width:100%;height:100%;display:block}

/* ---------- Button ---------- */
.pa-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);font-family:var(--font-text);font-weight:var(--fw-semibold);font-size:var(--fs-button);line-height:var(--lh-button);letter-spacing:0;border:var(--border-width) solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control);-webkit-tap-highlight-color:transparent}
.pa-btn:disabled,.pa-btn[aria-disabled=true]{cursor:not-allowed;opacity:.45}
.pa-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pa-btn--sm{height:var(--control-h-sm);padding-inline:var(--sp-5);font-size:var(--fs-body-sm);border-radius:var(--radius-sm)}
.pa-btn--md{height:var(--control-h-md);padding-inline:var(--sp-7)}
.pa-btn--lg{height:var(--control-h-lg);padding-inline:var(--sp-8);font-size:var(--fs-body)}
.pa-btn--block{width:100%}
.pa-btn--primary{background:var(--brand-primary);color:var(--text-on-brand)}
.pa-btn--primary:hover:not(:disabled){background:var(--brand-primary-hover)}
.pa-btn--primary:active:not(:disabled){background:var(--brand-primary-active)}
.pa-btn--secondary{background:var(--surface-card);color:var(--brand-primary);border-color:var(--border-default)}
.pa-btn--secondary:hover:not(:disabled){background:var(--brand-primary-subtle);border-color:var(--border-brand)}
.pa-btn--secondary:active:not(:disabled){background:var(--brand-primary-subtle);border-color:var(--brand-primary)}
.pa-btn--ghost{background:transparent;color:var(--brand-primary)}
.pa-btn--ghost:hover:not(:disabled){background:var(--brand-primary-subtle)}
.pa-btn--danger{background:var(--status-error-solid);color:#fff}
.pa-btn--danger:hover:not(:disabled){filter:brightness(.92)}
.pa-btn--quiet{background:transparent;color:var(--text-secondary)}
.pa-btn--quiet:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}

/* ---------- IconButton ---------- */
.pa-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-width) solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.pa-iconbtn:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}
.pa-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pa-iconbtn:disabled{opacity:.45;cursor:not-allowed}
.pa-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.pa-iconbtn--md{width:var(--control-h-md);height:var(--control-h-md)}
.pa-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.pa-iconbtn--solid{background:var(--brand-primary);color:var(--text-on-brand)}
.pa-iconbtn--solid:hover:not(:disabled){background:var(--brand-primary-hover);color:var(--text-on-brand)}
.pa-iconbtn--outline{border-color:var(--border-default);color:var(--text-secondary)}
.pa-iconbtn--danger{background:var(--status-error-solid);color:#fff}
.pa-iconbtn--danger:hover:not(:disabled){background:var(--status-error-solid);filter:brightness(.92);color:#fff}

/* ---------- Card ---------- */
.pa-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.pa-card--flat{box-shadow:none}
.pa-card--raised{box-shadow:var(--shadow-md)}
.pa-card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.pa-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-default)}
.pa-card--interactive:active{box-shadow:var(--shadow-sm)}

/* ---------- Badge / Tag ---------- */
.pa-badge{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--font-text);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-pill);white-space:nowrap}
.pa-badge--square{border-radius:var(--radius-xs)}
.pa-tag{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--font-text);font-size:var(--fs-body-sm);font-weight:var(--fw-regular);color:var(--text-secondary);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-5);transition:var(--transition-control)}
.pa-tag--selected{background:var(--brand-primary-subtle);border-color:var(--brand-primary);color:var(--brand-primary);font-weight:var(--fw-medium)}
button.pa-tag{cursor:pointer}
button.pa-tag:hover{border-color:var(--border-strong)}
button.pa-tag:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Fields ---------- */
.pa-field{display:flex;flex-direction:column;gap:var(--sp-4)}
.pa-field__label{font-family:var(--font-text);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-primary)}
.pa-field__hint{font-size:var(--fs-caption);color:var(--text-muted)}
.pa-field__error{font-size:var(--fs-caption);color:var(--status-error-fg)}
.pa-field__req{color:var(--status-error-fg);margin-inline-start:2px}
.pa-input{font-family:var(--font-text);font-size:var(--fs-body);color:var(--text-primary);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);padding-inline:var(--sp-5);height:var(--control-h-md);width:100%;transition:var(--transition-control)}
.pa-input--lg{height:var(--control-h-lg)}
.pa-input--sm{height:var(--control-h-sm);font-size:var(--fs-body-sm)}
.pa-input::placeholder{color:var(--text-disabled)}
.pa-input:hover:not(:disabled){border-color:var(--border-strong)}
.pa-input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.pa-input:disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.pa-input--invalid{border-color:var(--status-error-solid)}
.pa-input--invalid:focus{box-shadow:0 0 0 3px rgba(217,45,32,.25)}
textarea.pa-input{height:auto;padding-block:var(--sp-5);line-height:var(--lh-body);resize:vertical}
.pa-input-wrap{position:relative;display:flex;align-items:center}
.pa-input-wrap .pa-icon{position:absolute;inset-inline-start:var(--sp-5);color:var(--text-muted);pointer-events:none}
.pa-input-wrap--icon .pa-input{padding-inline-start:calc(var(--sp-5) * 2 + 18px)}
.pa-select{appearance:none;background-image:none;padding-inline-end:var(--sp-9)}
.pa-select-wrap{position:relative;display:block}
.pa-select-wrap .pa-icon{position:absolute;inset-inline-end:var(--sp-5);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}

/* ---------- Choice controls ---------- */
.pa-choice{display:flex;align-items:flex-start;gap:var(--sp-5);cursor:pointer;font-family:var(--font-text);font-size:var(--fs-body-sm);color:var(--text-primary);min-height:var(--tap-min);padding-block:var(--sp-4)}
.pa-choice input{position:absolute;opacity:0;width:0;height:0}
.pa-choice__box{width:20px;height:20px;flex:none;border:var(--border-width-strong) solid var(--border-strong);background:var(--surface-card);display:grid;place-items:center;transition:var(--transition-control);margin-top:1px}
.pa-choice__box--check{border-radius:var(--radius-xs)}
.pa-choice__box--radio{border-radius:var(--radius-pill)}
.pa-choice input:checked + .pa-choice__box{background:var(--brand-primary);border-color:var(--brand-primary)}
.pa-choice input:focus-visible + .pa-choice__box{box-shadow:var(--focus-ring)}
.pa-choice input:disabled + .pa-choice__box{background:var(--surface-disabled);border-color:var(--border-default)}
.pa-choice__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:#fff;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.pa-choice input:checked + .pa-choice__box .pa-choice__dot{opacity:1}
.pa-choice__tick{color:#fff;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.pa-choice input:checked + .pa-choice__box .pa-choice__tick{opacity:1}
.pa-switch{display:inline-flex;align-items:center;gap:var(--sp-5);cursor:pointer;min-height:var(--tap-min)}
.pa-switch input{position:absolute;opacity:0;width:0;height:0}
.pa-switch__track{width:44px;height:24px;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;transition:background-color var(--dur-base) var(--ease-standard);flex:none}
.pa-switch__thumb{position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-standard)}
.pa-switch input:checked + .pa-switch__track{background:var(--brand-primary)}
.pa-switch input:checked + .pa-switch__track .pa-switch__thumb{transform:translateX(20px)}
[dir=rtl] .pa-switch input:checked + .pa-switch__track .pa-switch__thumb{transform:translateX(-20px)}
.pa-switch input:focus-visible + .pa-switch__track{box-shadow:var(--focus-ring)}
.pa-switch input:disabled + .pa-switch__track{opacity:.45}

/* ---------- Feedback ---------- */
.pa-alert{display:flex;gap:var(--sp-5);padding:var(--sp-6);border-radius:var(--radius-md);border:var(--border-width) solid transparent;font-family:var(--font-text);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.pa-alert__title{font-weight:var(--fw-semibold);margin-bottom:2px}
.pa-toast{display:flex;align-items:flex-start;gap:var(--sp-5);background:var(--surface-inverse);color:var(--text-inverse);padding:var(--sp-5) var(--sp-6);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-family:var(--font-text);font-size:var(--fs-body-sm);max-width:420px}
.pa-tooltip{position:relative;display:inline-flex}
.pa-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface-inverse);color:var(--text-inverse);font-family:var(--font-text);font-size:var(--fs-caption);line-height:1.4;padding:var(--sp-4) var(--sp-5);border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard);z-index:20}
.pa-tooltip:hover .pa-tooltip__bubble,.pa-tooltip:focus-within .pa-tooltip__bubble{opacity:1}
.pa-progress{height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.pa-progress__bar{height:100%;background:var(--brand-primary);border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-standard)}
.pa-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-11) var(--sp-8);color:var(--text-muted)}

/* ---------- Navigation ---------- */
.pa-tabs{display:flex;gap:var(--sp-8);border-bottom:var(--border-width) solid var(--border-subtle)}
.pa-tab{appearance:none;background:none;border:0;padding:var(--sp-5) 0;font-family:var(--font-text);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-muted);cursor:pointer;position:relative;transition:color var(--dur-fast) var(--ease-standard);white-space:nowrap}
.pa-tab:hover{color:var(--text-primary)}
.pa-tab[aria-selected=true]{color:var(--brand-primary)}
.pa-tab[aria-selected=true]::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--brand-primary);border-radius:var(--radius-pill)}
.pa-tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.pa-breadcrumb{display:flex;align-items:center;gap:var(--sp-4);font-family:var(--font-text);font-size:var(--fs-body-sm);color:var(--text-muted);flex-wrap:wrap}
.pa-breadcrumb a{color:var(--text-muted);text-decoration:none}
.pa-breadcrumb a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.pa-breadcrumb [aria-current=page]{color:var(--text-primary);font-weight:var(--fw-medium)}
.pa-pagination{display:flex;align-items:center;gap:var(--sp-3)}
.pa-pagination__item{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:var(--border-width) solid transparent;background:transparent;color:var(--text-secondary);font-family:var(--font-text);font-size:var(--fs-body-sm);cursor:pointer;transition:var(--transition-control)}
.pa-pagination__item:hover:not(:disabled){background:var(--surface-sunken)}
.pa-pagination__item[aria-current=true]{background:var(--brand-primary);color:var(--text-on-brand)}
.pa-pagination__item:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Dialog ---------- */
.pa-dialog__scrim{position:fixed;inset:0;background:var(--overlay-scrim);display:grid;place-items:center;padding:var(--sp-8);z-index:50}
.pa-dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;overflow:hidden}
.pa-dialog__head{display:flex;align-items:flex-start;gap:var(--sp-5);padding:var(--sp-8) var(--sp-8) var(--sp-5)}
.pa-dialog__body{padding:0 var(--sp-8) var(--sp-8);color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.pa-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sp-5);padding:var(--sp-6) var(--sp-8);border-top:var(--border-width) solid var(--border-subtle);background:var(--surface-page)}

/* ---------- Avatar ---------- */
.pa-avatar{display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--brand-primary-subtle);color:var(--brand-primary);font-family:var(--font-display);font-weight:var(--fw-semibold);overflow:hidden;flex:none;position:relative}
.pa-avatar img{width:100%;height:100%;object-fit:cover}
.pa-avatar__badge{position:absolute;inset-block-end:-1px;inset-inline-end:-1px;background:var(--surface-card);border-radius:var(--radius-pill);padding:1px;display:grid;place-items:center}

/* ---------- Product primitives ---------- */
.pa-rating{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--font-text);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.pa-rating__stars{display:inline-flex;gap:1px;color:var(--brand-accent)}
.pa-stat{display:flex;flex-direction:column;gap:var(--sp-3)}
.pa-stat__value{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h2);line-height:1.1;color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums}
.pa-stat__label{font-size:var(--fs-caption);color:var(--text-muted)}
.pa-slot{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h-md);min-width:84px;padding-inline:var(--sp-5);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums lining-nums;cursor:pointer;transition:var(--transition-control)}
.pa-slot:hover:not(:disabled){border-color:var(--border-brand);color:var(--brand-primary)}
.pa-slot[aria-pressed=true]{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-on-brand)}
.pa-slot:disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed;text-decoration:line-through}