/* LightLife — style komponentów (prefiks ll-). Konsumowane przez komponenty React z _ds_bundle.js. */

/* ===== Button ===== */
.ll-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:var(--radius-md);font:600 15px/1 var(--font-body);color:var(--text-heading);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.ll-btn:active{transform:scale(.98)}
.ll-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ll-btn--md{height:48px;padding:0 24px}
.ll-btn--lg{height:56px;padding:0 30px;font-size:16px}
.ll-btn--primary{background:var(--ink);color:var(--text-on-inverse)}
.ll-btn--primary:hover{background:#2A2F34;box-shadow:var(--shadow-lg)}
.ll-btn--secondary{background:var(--white);border-color:var(--border-strong);color:var(--text-heading)}
.ll-btn--secondary:hover{background:var(--cream);border-color:var(--ink-4)}
.ll-btn--link{background:none;border:0;color:var(--text-link);padding:0;height:auto}
.ll-btn--link:hover{opacity:.72}
.ll-btn[disabled],.ll-btn--disabled{opacity:.45;pointer-events:none}

/* ===== IconButton ===== */
.ll-iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--radius-full);border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.ll-iconbtn:active{transform:scale(.95)}
.ll-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ll-iconbtn--sm{width:36px;height:36px}
.ll-iconbtn--md{width:44px;height:44px}
.ll-iconbtn--lg{width:56px;height:56px}
.ll-iconbtn--primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-md)}
.ll-iconbtn--primary:hover{background:#2A2F34;box-shadow:var(--shadow-lg)}
.ll-iconbtn--outline{background:var(--white);border-color:var(--border-strong);color:var(--text-heading)}
.ll-iconbtn--outline:hover{background:var(--cream)}
.ll-iconbtn--ghost{background:transparent;color:var(--text-heading)}
.ll-iconbtn--ghost:hover{background:var(--sand)}

/* ===== Badge ===== */
.ll-badge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:var(--radius-full);font:600 11.5px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;border:1px solid var(--border-strong);background:var(--white);color:var(--text-heading);white-space:nowrap}
.ll-badge--soft{background:var(--gold-100);border-color:var(--gold-200);color:var(--gold-600)}
.ll-badge--inverse{background:var(--ink);border-color:var(--ink);color:#fff}
.ll-badge__star{color:var(--gold);font-size:12px;line-height:1}

/* ===== Card ===== */
.ll-card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg)}
.ll-card--pad-md{padding:20px}
.ll-card--pad-lg{padding:28px}
.ll-card--shadow-sm{box-shadow:var(--shadow-sm)}
.ll-card--shadow-md{box-shadow:var(--shadow-md)}
.ll-card--interactive{cursor:pointer;transition:box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.ll-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.ll-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ll-card__title{font:600 16px/1.3 var(--font-body);color:var(--text-heading)}
.ll-card__action{font:600 12.5px/1 var(--font-body);color:var(--text-link);cursor:pointer;background:none;border:0;padding:0}
.ll-card__action:hover{opacity:.72}

/* ===== Tabs ===== */
.ll-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-soft)}
.ll-tab{appearance:none;background:none;border:0;cursor:pointer;padding:10px 14px;font:600 14px/1 var(--font-body);color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur) var(--ease-out)}
.ll-tab:hover{color:var(--text-heading)}
.ll-tab--active{color:var(--text-heading);border-bottom-color:var(--gold)}

/* ===== Avatar ===== */
.ll-avatar{border-radius:var(--radius-full);object-fit:cover;background:var(--gold-100);color:var(--gold-600);display:inline-flex;align-items:center;justify-content:center;font:600 14px/1 var(--font-body);overflow:hidden;flex:none}

/* ===== Formularze ===== */
.ll-field{display:flex;flex-direction:column;gap:8px}
.ll-label{font:600 13px/1.2 var(--font-body);color:var(--text-heading)}
.ll-input{height:48px;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--white);font:500 15px/1.4 var(--font-body);color:var(--text-heading);transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);width:100%}
.ll-input::placeholder{color:var(--text-faint)}
.ll-input:hover{border-color:var(--ink-4)}
.ll-input:focus{outline:none;border-color:var(--gold);box-shadow:var(--focus-ring)}
.ll-input--error,.ll-input--error:hover{border-color:var(--danger)}
.ll-input--error:focus{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-100)}
textarea.ll-input{height:auto;padding:12px 16px;resize:vertical}
.ll-hint{font:var(--text-caption);color:var(--text-muted)}
.ll-hint--error{color:var(--danger)}
.ll-select-wrap{position:relative}
.ll-select-wrap .ll-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-3)}
select.ll-input{appearance:none;padding-right:42px;cursor:pointer}

.ll-choice{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.3 var(--font-body);color:var(--text-body);cursor:pointer;user-select:none}
.ll-check{appearance:none;width:20px;height:20px;flex:none;margin:0;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--white);cursor:pointer;display:grid;place-items:center;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.ll-check:hover{border-color:var(--ink-4)}
.ll-check:checked{background:var(--ink);border-color:var(--ink)}
.ll-check:checked::after{content:'';width:10px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.ll-check:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ll-radio{appearance:none;width:20px;height:20px;flex:none;margin:0;border:1.5px solid var(--border-strong);border-radius:var(--radius-full);background:var(--white);cursor:pointer;display:grid;place-items:center;transition:border-color var(--dur) var(--ease-out)}
.ll-radio:hover{border-color:var(--ink-4)}
.ll-radio:checked{border-color:var(--ink);border-width:1.5px}
.ll-radio:checked::after{content:'';width:10px;height:10px;border-radius:99px;background:var(--ink)}
.ll-radio:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ll-switch{appearance:none;width:44px;height:26px;flex:none;margin:0;border:0;border-radius:var(--radius-full);background:var(--stone);position:relative;cursor:pointer;transition:background var(--dur) var(--ease-out)}
.ll-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-full);background:var(--white);box-shadow:var(--shadow-sm);transition:left var(--dur) var(--ease-out)}
.ll-switch:checked{background:var(--ink)}
.ll-switch:checked::after{left:21px}
.ll-switch:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ===== Dialog ===== */
.ll-dialog-overlay{position:fixed;inset:0;background:rgba(27,31,35,.44);display:grid;place-items:center;padding:24px;z-index:50}
.ll-dialog{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:460px;width:100%;padding:28px;position:relative}
.ll-dialog__close{position:absolute;top:16px;right:16px}
.ll-dialog__title{font:600 26px/1.15 var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-tight);margin:0 0 10px;padding-right:36px}
.ll-dialog__body{font:400 15px/1.6 var(--font-body);color:var(--text-body)}
.ll-dialog__footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}

/* ===== Toast ===== */
.ll-toast{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px 16px;max-width:380px}
.ll-toast__icon{flex:none;margin-top:1px}
.ll-toast--success .ll-toast__icon{color:var(--gold-600)}
.ll-toast--info .ll-toast__icon{color:var(--blue)}
.ll-toast--error .ll-toast__icon{color:var(--danger)}
.ll-toast__title{font:600 14px/1.3 var(--font-body);color:var(--text-heading)}
.ll-toast__desc{font:var(--text-caption);color:var(--text-muted);margin-top:2px}
.ll-toast__close{margin-left:auto;flex:none}

/* ===== Tooltip ===== */
.ll-tooltip{position:relative;display:inline-flex}
.ll-tooltip__bubble{position:absolute;left:50%;background:var(--ink);color:#fff;font:var(--text-caption);padding:6px 10px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);z-index:40}
.ll-tooltip--top .ll-tooltip__bubble{bottom:calc(100% + 8px);transform:translateX(-50%) translateY(3px)}
.ll-tooltip--bottom .ll-tooltip__bubble{top:calc(100% + 8px);transform:translateX(-50%) translateY(-3px)}
.ll-tooltip:hover .ll-tooltip__bubble{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== ProgressBar ===== */
.ll-progress{display:flex;flex-direction:column;gap:8px;min-width:0}
.ll-progress__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 13px/1.2 var(--font-body);color:var(--text-heading)}
.ll-progress__val{font-weight:500;color:var(--text-muted)}
.ll-progress__track{height:6px;border-radius:var(--radius-full);background:var(--sand);overflow:hidden}
.ll-progress__fill{height:100%;border-radius:var(--radius-full);background:var(--blue);transition:width var(--dur-slow) var(--ease-out)}
.ll-progress--gold .ll-progress__fill{background:var(--gold)}
.ll-progress--ink .ll-progress__fill{background:var(--ink)}

/* ===== MealCard ===== */
.ll-meal{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;text-align:left;font-family:var(--font-body);width:100%}
.ll-meal--clickable{cursor:pointer;border-radius:var(--radius-md);transition:background var(--dur) var(--ease-out)}
.ll-meal--clickable:hover{background:var(--cream)}
.ll-meal__img{width:48px;height:48px;border-radius:14px;object-fit:cover;flex:none}
.ll-meal__body{min-width:0;flex:1}
.ll-meal__row1{display:flex;align-items:baseline;gap:8px}
.ll-meal__type{font:700 13.5px/1.2 var(--font-body);color:var(--text-heading)}
.ll-meal__time{font:var(--text-caption);color:var(--text-faint)}
.ll-meal__title{font:500 13px/1.4 var(--font-body);color:var(--text-muted);margin-top:2px}
.ll-meal__kcal{font:600 12.5px/1 var(--font-body);color:var(--text-muted);flex:none}
.ll-meal-detail{display:flex;flex-direction:column;gap:0}
.ll-meal-detail .ll-meal__img{width:56px;height:56px;border-radius:16px}
.ll-meal-detail__type{font:600 11px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-accent)}
.ll-meal-detail__title{font:600 14.5px/1.4 var(--font-body);color:var(--text-heading);margin-top:4px}
.ll-macros{display:flex;gap:20px;padding-top:12px;margin-top:14px;border-top:1px solid var(--border-soft)}
.ll-macro{display:flex;flex-direction:column;gap:3px}
.ll-macro b{font:700 14px/1 var(--font-body);color:var(--text-heading)}
.ll-macro span{font:var(--text-caption);color:var(--text-muted)}

/* ===== MacroRing ===== */
.ll-ring{position:relative;display:inline-grid;place-items:center;flex:none}
.ll-ring svg{display:block;transform:rotate(-90deg)}
.ll-ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.ll-ring__value{font:700 22px/1 var(--font-body);color:var(--text-heading)}
.ll-ring__unit{font:var(--text-caption);color:var(--text-muted)}

/* ===== StatCard ===== */
.ll-stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.ll-stat__label{font:600 13px/1.3 var(--font-body);color:var(--text-heading)}
.ll-stat__value{font:var(--text-stat);color:var(--text-heading);margin-top:2px}
.ll-stat__value small{font:600 13px/1 var(--font-body);color:var(--text-muted)}
.ll-stat__sub{font:var(--text-caption);color:var(--text-muted)}
.ll-stat__spark{margin-top:10px}

/* ===== ChatBubble ===== */
.ll-bubble-row{display:flex;gap:8px;align-items:flex-end}
.ll-bubble-row--user{justify-content:flex-end}
.ll-bubble{max-width:78%;padding:10px 14px;font:500 13.5px/1.5 var(--font-body);border-radius:16px}
.ll-bubble--user{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.ll-bubble--coach{background:var(--cream);color:var(--text-body);border-bottom-left-radius:4px}
.ll-bubble__time{display:block;font:500 10.5px/1 var(--font-body);margin-top:5px;opacity:.6;text-align:right}

/* ===== TabBar ===== */
.ll-tabbar{display:flex;align-items:center;justify-content:space-around;background:var(--white);border-top:1px solid var(--border-soft);padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px))}
.ll-tabbar__item{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10px/1 var(--font-body);color:var(--text-faint);background:none;border:0;cursor:pointer;padding:4px 10px;transition:color var(--dur) var(--ease-out)}
.ll-tabbar__item:hover{color:var(--text-muted)}
.ll-tabbar__item--active{color:var(--text-heading)}
.ll-tabbar__fab{width:48px;height:48px;flex:none;border-radius:var(--radius-full);background:var(--ink);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:var(--shadow-md);margin-top:-20px;transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.ll-tabbar__fab:hover{background:#2A2F34}
.ll-tabbar__fab:active{transform:scale(.94)}

/* ===== FeatureItem ===== */
.ll-feature{display:flex;align-items:center;gap:12px}
.ll-feature .ll-icon{color:var(--gold);flex:none}
.ll-feature__label{font:600 13px/1.45 var(--font-body);color:var(--text-body)}