/* Kaliputih Resto — component classes. Loaded via styles.css so consumers get them
   with the tokens. Every value resolves to a token; no raw colours here. */

/* ============ Button ============ */
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-h-md);padding:0 22px;border:var(--border-width) solid transparent;border-radius:var(--radius-pill);font-family:var(--font-secondary);font-size:13px;font-weight:var(--weight-regular);letter-spacing:var(--tracking-wide);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:var(--transition-control);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.kp-btn--sm{height:var(--control-h-sm);padding:0 16px;font-size:11px;gap:8px}
.kp-btn--lg{height:var(--control-h-lg);padding:0 32px;font-size:15px;letter-spacing:var(--tracking-wider)}
.kp-btn--block{display:flex;width:100%}
.kp-btn:active:not(:disabled){transform:translateY(1px)}
.kp-btn:disabled,.kp-btn[aria-disabled=true]{opacity:.38;cursor:not-allowed;transform:none}
.kp-btn--primary{background:var(--kp-rust);color:var(--text-on-accent)}
.kp-btn--primary:hover:not(:disabled){background:var(--kp-rust-700)}
.kp-btn--secondary{background:var(--kp-navy);color:var(--text-on-dark)}
.kp-btn--secondary:hover:not(:disabled){background:var(--kp-navy-700)}
.kp-btn--outline{background:transparent;color:var(--kp-navy);border-color:var(--kp-navy)}
.kp-btn--outline:hover:not(:disabled){background:var(--kp-navy);color:var(--text-on-dark)}
.kp-btn--ghost{background:transparent;color:var(--kp-navy)}
.kp-btn--ghost:hover:not(:disabled){background:var(--kp-navy-050)}
.kp-btn--whatsapp{background:var(--channel-whatsapp);color:var(--kp-white)}
.kp-btn--whatsapp:hover:not(:disabled){background:#186139}
.kp-btn--on-dark.kp-btn--outline{color:var(--text-on-dark);border-color:var(--border-on-dark)}
.kp-btn--on-dark.kp-btn--outline:hover:not(:disabled){background:var(--kp-off-white);color:var(--kp-navy);border-color:var(--kp-off-white)}

/* ============ IconButton ============ */
.kp-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md);padding:0;border:var(--border-width) solid transparent;border-radius:var(--radius-pill);background:transparent;color:var(--kp-navy);cursor:pointer;transition:var(--transition-control)}
.kp-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.kp-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.kp-iconbtn--square{border-radius:var(--radius-md)}
.kp-iconbtn:hover:not(:disabled){background:var(--kp-navy-050)}
.kp-iconbtn:active:not(:disabled){transform:translateY(1px)}
.kp-iconbtn:disabled{opacity:.38;cursor:not-allowed}
.kp-iconbtn--solid{background:var(--kp-rust);color:var(--text-on-accent)}
.kp-iconbtn--solid:hover:not(:disabled){background:var(--kp-rust-700)}
.kp-iconbtn--outline{border-color:var(--border-subtle);background:var(--surface-card)}
.kp-iconbtn--outline:hover:not(:disabled){border-color:var(--kp-navy);background:var(--surface-card)}
.kp-iconbtn--on-dark{color:var(--text-on-dark)}
.kp-iconbtn--on-dark:hover:not(:disabled){background:rgba(249,248,237,.14)}

/* ============ Icon ============ */
.kp-icon{display:inline-block;flex:none;fill:currentColor}
/* Standalone icon files in assets/icons/ can also be painted as a CSS mask on a plain element. */
.kp-icon-mask{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* ============ PillLabel (the guide's section capsule) ============ */
.kp-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 22px 8px;border-radius:var(--radius-pill);background:var(--kp-rust);color:var(--text-on-accent);font-family:var(--font-secondary);font-size:12px;letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap}
.kp-pill--navy{background:var(--kp-navy);color:var(--text-on-dark)}
.kp-pill--forest{background:var(--kp-forest);color:var(--text-on-dark)}
.kp-pill--outline{background:transparent;color:var(--kp-rust);box-shadow:inset 0 0 0 1px currentColor}
.kp-pill--sm{padding:5px 14px 6px;font-size:10px}
.kp-pill--on-dark{color:var(--text-on-dark)}
.kp-pill--on-dark.kp-pill--outline{background:transparent;color:var(--text-on-dark);box-shadow:inset 0 0 0 1px var(--border-on-dark)}

/* ============ Badge ============ */
.kp-badge{display:inline-flex;align-items:center;gap:6px;flex:none;height:22px;padding:0 10px;border-radius:var(--radius-pill);font-family:var(--font-secondary);font-size:11px;letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap}
.kp-badge--dot::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor;flex:none}
.kp-badge--neutral{background:var(--kp-sand-200);color:var(--kp-sand-800)}
.kp-badge--accent{background:var(--kp-rust);color:var(--text-on-accent)}
.kp-badge--success{background:var(--status-success-soft);color:var(--status-success)}
.kp-badge--warning{background:var(--status-warning-soft);color:var(--status-warning)}
.kp-badge--danger{background:var(--status-danger-soft);color:var(--status-danger)}
.kp-badge--info{background:var(--status-info-soft);color:var(--status-info)}

/* ============ Tag ============ */
.kp-tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-body);font:var(--type-body-sm);transition:var(--transition-control)}
.kp-tag--selectable{cursor:pointer}
.kp-tag--selectable:hover{border-color:var(--kp-navy)}
.kp-tag--selected{background:var(--kp-navy);border-color:var(--kp-navy);color:var(--text-on-dark)}
.kp-tag--accent{background:var(--kp-rust-050);border-color:var(--kp-rust-100);color:var(--kp-rust-700)}
.kp-tag__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border:0;border-radius:var(--radius-circle);background:transparent;color:inherit;font-size:14px;line-height:1;cursor:pointer;opacity:.6}
.kp-tag__remove:hover{opacity:1}

/* ============ Card ============ */
.kp-card{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.kp-card--flat{box-shadow:none}
.kp-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.kp-card--overlay{box-shadow:var(--shadow-lg);border-color:transparent}
.kp-card--inverse{background:var(--kp-navy);border-color:transparent;color:var(--text-on-dark)}
.kp-card--inverse .kp-card__title{color:var(--text-on-dark)}
.kp-card--accent{background:var(--kp-rust);border-color:transparent;color:var(--text-on-accent)}
.kp-card--accent .kp-card__title{color:var(--text-on-accent)}
.kp-card--interactive{cursor:pointer;transition:var(--transition-control)}
.kp-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--kp-navy-100);transform:translateY(-2px)}
.kp-card--interactive:active{transform:translateY(0)}
.kp-card__media{background:var(--kp-sand-200);position:relative}
.kp-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5)}
.kp-card__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:1.2;letter-spacing:var(--tracking-display);color:var(--text-heading)}
.kp-card__footer{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:var(--border-width) solid var(--border-subtle)}

/* ============ Field shell (Input / Select) ============ */
.kp-field{display:flex;flex-direction:column;gap:7px}
.kp-field__label{font-family:var(--font-secondary);font-size:11px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--kp-navy)}
.kp-field__hint{font:var(--type-caption);color:var(--text-muted)}
.kp-field__error{font:var(--type-caption);color:var(--status-danger)}
.kp-field__req{color:var(--kp-rust)}
.kp-input{width:100%;height:var(--control-h-md);padding:0 14px;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-body);font:var(--type-body);font-size:15px;transition:var(--transition-control)}
textarea.kp-input{height:auto;padding:12px 14px;line-height:var(--leading-normal);resize:vertical}
.kp-input::placeholder{color:var(--kp-sand-600)}
.kp-input:hover:not(:disabled){border-color:var(--kp-sand-400)}
.kp-input:focus{outline:none;border-color:var(--kp-rust);box-shadow:0 0 0 3px var(--kp-rust-050)}
.kp-input:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
.kp-input--invalid{border-color:var(--status-danger)}
.kp-input--invalid:focus{box-shadow:0 0 0 3px var(--status-danger-soft)}
.kp-input--lg{height:var(--control-h-lg);font-size:17px;padding:0 18px}
.kp-input--sm{height:var(--control-h-sm);font-size:14px;padding:0 12px}
.kp-input__wrap{position:relative;display:flex;align-items:center}
.kp-input__wrap .kp-icon{position:absolute;left:14px;color:var(--kp-sand-700);pointer-events:none}
.kp-input__wrap--icon .kp-input{padding-left:42px}

/* ============ Select ============ */
.kp-select{appearance:none;padding-right:38px;cursor:pointer}
.kp-select__caret{position:absolute;right:16px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--kp-navy);pointer-events:none}

/* ============ Checkbox / Radio ============ */
.kp-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font:var(--type-body-sm);color:var(--text-body)}
.kp-check input{position:absolute;opacity:0;width:0;height:0}
.kp-check__box{position:relative;flex:none;width:20px;height:20px;margin-top:1px;border:var(--border-width-strong) solid var(--kp-navy-300);border-radius:var(--radius-xs);background:var(--surface-card);transition:var(--transition-control)}
.kp-check__box--round{border-radius:var(--radius-circle)}
.kp-check:hover .kp-check__box{border-color:var(--kp-navy)}
.kp-check input:checked+.kp-check__box{background:var(--kp-rust);border-color:var(--kp-rust)}
.kp-check input:checked+.kp-check__box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--kp-off-white);border-width:0 2px 2px 0;transform:rotate(42deg)}
.kp-check input:checked+.kp-check__box--round::after{left:4px;top:4px;width:8px;height:8px;border:0;border-radius:var(--radius-circle);background:var(--kp-off-white);transform:none}
.kp-check input:focus-visible+.kp-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.kp-check--disabled{opacity:.4;cursor:not-allowed}

/* ============ Switch ============ */
.kp-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:var(--type-body-sm)}
.kp-switch input{position:absolute;opacity:0;width:0;height:0}
.kp-switch__track{position:relative;flex:none;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--kp-sand-300);transition:background-color var(--duration-base) var(--ease-standard)}
.kp-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-circle);background:var(--kp-white);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-standard)}
.kp-switch input:checked+.kp-switch__track{background:var(--kp-rust)}
.kp-switch input:checked+.kp-switch__track::after{transform:translateX(20px)}
.kp-switch input:focus-visible+.kp-switch__track{outline:2px solid var(--focus-ring);outline-offset:2px}
.kp-switch--disabled{opacity:.4;cursor:not-allowed}

/* ============ Stepper (party size) ============ */
.kp-stepper{display:inline-flex;align-self:flex-start;align-items:center;gap:0;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card);overflow:hidden}
.kp-stepper__btn{display:flex;align-items:center;justify-content:center;width:44px;height:var(--control-h-md);border:0;background:transparent;color:var(--kp-navy);cursor:pointer;transition:var(--transition-control)}
.kp-stepper__btn:hover:not(:disabled){background:var(--kp-navy-050)}
.kp-stepper__btn:disabled{opacity:.3;cursor:not-allowed}
.kp-stepper__glyph{position:relative;width:13px;height:13px}
.kp-stepper__glyph::before{content:"";position:absolute;top:5.5px;left:0;width:13px;height:2px;background:currentColor}
.kp-stepper__glyph--plus::after{content:"";position:absolute;left:5.5px;top:0;width:2px;height:13px;background:currentColor}
.kp-stepper__value{min-width:52px;text-align:center;font-family:var(--font-body);font-size:17px;font-weight:var(--weight-medium);color:var(--text-heading);font-variant-numeric:tabular-nums}

/* ============ Tabs ============ */
.kp-tabs{display:flex;gap:var(--space-6);border-bottom:var(--border-width) solid var(--border-subtle)}
.kp-tab{position:relative;padding:0 0 12px;border:0;background:transparent;font-family:var(--font-secondary);font-size:12px;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}
.kp-tab:hover{color:var(--kp-navy)}
.kp-tab--active{color:var(--kp-rust)}
.kp-tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--kp-rust)}
.kp-tabs--pill{gap:6px;border-bottom:0;padding:4px;background:var(--surface-sunken);border-radius:var(--radius-pill)}
.kp-tabs--pill .kp-tab{padding:9px 18px;border-radius:var(--radius-pill)}
.kp-tabs--pill .kp-tab--active{background:var(--kp-navy);color:var(--text-on-dark)}
.kp-tabs--pill .kp-tab--active::after{display:none}

/* ============ Dialog ============ */
.kp-dialog__scrim{position:fixed;inset:0;background:rgba(16,16,56,.6);backdrop-filter:blur(3px);display:grid;place-items:center;padding:var(--space-6);z-index:60}
.kp-dialog{width:100%;max-width:480px;background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);overflow:hidden}
.kp-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) 0}
.kp-dialog__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl);line-height:1.14;color:var(--text-heading)}
.kp-dialog__body{padding:var(--space-4) var(--space-6) var(--space-6);font:var(--type-body);color:var(--text-body)}
.kp-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--surface-raised);border-top:var(--border-width) solid var(--border-subtle)}

/* ============ Toast ============ */
.kp-toast{display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:420px;padding:14px 16px;border-radius:var(--radius-md);background:var(--kp-navy);color:var(--text-on-dark);box-shadow:var(--shadow-lg);font:var(--type-body-sm)}
.kp-toast--success{background:var(--kp-forest)}
.kp-toast--danger{background:var(--kp-rust-700)}
.kp-toast__title{font-family:var(--font-secondary);font-size:12px;letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:3px}
.kp-toast__close{margin-left:auto;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:16px;line-height:1}
.kp-toast__close:hover{opacity:1}

/* ============ Tooltip ============ */
.kp-tooltip{position:relative;display:inline-flex}
.kp-tooltip__bubble{position:absolute;z-index:40;padding:7px 11px;border-radius:var(--radius-sm);background:var(--kp-navy);color:var(--text-on-dark);font:var(--type-caption);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard)}
.kp-tooltip__bubble--visible{opacity:1}
.kp-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.kp-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.kp-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.kp-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* ============ NavBar ============ */
.kp-nav{display:flex;align-items:center;gap:var(--space-8);height:76px;padding:0 var(--gutter-desktop);background:var(--surface-page);border-bottom:var(--border-width) solid var(--border-subtle)}
.kp-nav--inverse{background:var(--kp-navy);border-bottom-color:transparent}
.kp-nav__links{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.kp-nav__link{font-family:var(--font-secondary);font-size:12px;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--kp-navy);text-decoration:none;border:0;background:none;cursor:pointer;padding:6px 0;border-bottom:2px solid transparent;transition:var(--transition-control)}
.kp-nav__link:hover{color:var(--kp-rust);border-bottom-color:var(--kp-rust)}
.kp-nav__link--active{color:var(--kp-rust);border-bottom-color:var(--kp-rust)}
.kp-nav--inverse .kp-nav__link{color:var(--text-on-dark)}
.kp-nav--inverse .kp-nav__link:hover,.kp-nav--inverse .kp-nav__link--active{color:var(--kp-white);border-bottom-color:var(--kp-rust)}
.kp-nav__actions{display:flex;align-items:center;gap:var(--space-3)}

/* ============ Logo ============ */
.kp-logo{display:inline-flex;align-items:center;gap:12px}
.kp-logo img{display:block;height:100%;width:auto}