/* Cave product UI: CSS-only components. Every value is a token from tokens.json. Logical properties throughout, so the same markup works left-to-right and right-to-left. */
:root{--ui-font:var(--font-sans)}
[dir="rtl"]{--ui-font:var(--font-ar-text)}
.cv-ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
.cv-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(.cv-btn,.cv-icon-btn,.cv-tab,.cv-nav-item,.cv-link,.cv-powered__link,.cv-footer__links a):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Button */
.cv-btn{--h:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--h);padding:0 var(--space-3);border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--ink);font:500 14px/20px var(--ui-font);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard)}
.cv-btn--sm{--h:32px;padding:0 var(--space-12);font-size:13px}
.cv-btn--lg{--h:48px;padding:0 var(--space-4)}
.cv-btn--block{display:flex;width:100%}
.cv-btn--primary{background:var(--accent-strong);color:var(--on-accent-strong)}
.cv-btn--primary:hover,.cv-btn--primary:active{background:var(--accent-strong-hover)}
.cv-btn--secondary{border-color:var(--border-strong)}
.cv-btn--secondary:hover,.cv-btn--tertiary:hover{background:var(--surface-hover)}
.cv-btn--tertiary{color:var(--accent-text)}
.cv-btn--danger{background:var(--danger);color:var(--on-danger)}
.cv-btn--danger:hover,.cv-btn--danger:active{background:var(--danger-hover)}
.cv-btn:disabled,.cv-btn[aria-disabled="true"]{background:var(--disabled-bg);border-color:transparent;color:var(--disabled-fg);cursor:not-allowed}
.cv-btn[aria-busy="true"]{cursor:progress}
.cv-spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:cv-spin .8s linear infinite}
@keyframes cv-spin{to{transform:rotate(360deg)}}
.cv-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);cursor:pointer}
.cv-icon-btn:hover{background:var(--surface-hover)}
.cv-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* Field */
.cv-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.cv-label{font:500 13px/20px var(--ui-font);color:var(--ink)}
.cv-input{box-sizing:border-box;width:100%;min-height:40px;padding:0 var(--space-12);border:1px solid var(--border-strong);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--ink);font:400 14px/20px var(--ui-font);transition:border-color var(--duration-fast) var(--easing-standard)}
textarea.cv-input{padding:var(--space-12);min-height:88px;resize:vertical}
.cv-input::placeholder{color:var(--ink-muted)}
.cv-input:focus{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:var(--focus-ring)}
.cv-input[aria-invalid="true"]{border-color:var(--error-fg)}
.cv-input:disabled{background:var(--disabled-bg);border-color:transparent;color:var(--disabled-fg);cursor:not-allowed}
.cv-help{font:400 12px/16px var(--ui-font);color:var(--ink-muted)}
.cv-error{display:flex;align-items:center;gap:var(--space-1);font:500 12px/16px var(--ui-font);color:var(--error-fg)}
.cv-error .cv-icon{width:16px;height:16px}

/* Badge */
.cv-badge{--dot:var(--ink-muted);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--ink-muted);font:500 12px/16px var(--ui-font);white-space:nowrap}
.cv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot)}
.cv-badge--brand{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--accent-text);--dot:var(--accent-text)}
.cv-badge--success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg);--dot:var(--success-solid)}
.cv-badge--warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg);--dot:var(--warning-solid)}
.cv-badge--error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-fg);--dot:var(--error-solid)}
.cv-badge--info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-fg);--dot:var(--info-solid)}

/* Card and stat */
.cv-card{box-sizing:border-box;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.cv-card__title{margin:0;font:600 18px/28px var(--ui-font)}
.cv-card__sub{margin:0;font:400 14px/20px var(--ui-font);color:var(--ink-muted)}
[dir="rtl"] .cv-card__title{font-weight:700;line-height:30px}
.cv-stat{display:flex;flex-direction:column;gap:var(--space-1)}
.cv-stat__label{font:500 13px/20px var(--ui-font);color:var(--ink-muted)}
.cv-stat__value{font:600 28px/36px var(--ui-font);font-variant-numeric:tabular-nums;color:var(--ink)}
.cv-stat__meta{display:flex;align-items:center;gap:var(--space-2);font:400 12px/16px var(--ui-font);color:var(--ink-muted)}

/* Page header and toolbar */
.cv-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.cv-page-title{margin:0;font:600 24px/32px var(--ui-font);color:var(--ink)}
[dir="rtl"] .cv-page-title{font-weight:700;line-height:36px}
.cv-page-sub{margin:var(--space-1) 0 0;font:400 14px/20px var(--ui-font);color:var(--ink-muted)}
.cv-toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* Data table */
.cv-table-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.cv-table-scroll{overflow-x:auto}
.cv-table{width:100%;border-collapse:separate;border-spacing:0;font:400 14px/20px var(--ui-font);color:var(--ink)}
.cv-table th{padding:var(--space-12) var(--space-3);border-block-end:1px solid var(--border);background:var(--surface-sunken);color:var(--ink-muted);font:600 12px/16px var(--ui-font);text-align:start;white-space:nowrap}
.cv-table td{padding:var(--space-12) var(--space-3);border-block-end:1px solid var(--border);vertical-align:middle}
.cv-table tbody tr:last-child td{border-block-end:0}
.cv-table tbody tr:hover td{background:var(--surface-hover)}
.cv-table .cv-num{text-align:end;font-variant-numeric:tabular-nums}
.cv-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-block-start:1px solid var(--border);font:400 13px/20px var(--ui-font);color:var(--ink-muted)}

/* Empty state and skeleton */
.cv-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-4);text-align:center}
.cv-empty__mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent-text)}
.cv-empty__mark .cv-icon{width:28px;height:28px}
.cv-empty__title{margin:var(--space-2) 0 0;font:600 18px/28px var(--ui-font);color:var(--ink)}
.cv-empty__body{margin:0;max-width:44ch;font:400 14px/20px var(--ui-font);color:var(--ink-muted)}
.cv-empty .cv-btn{margin-block-start:var(--space-2)}
.cv-skeleton{display:block;height:12px;border-radius:var(--radius-sm);background:var(--surface-hover);animation:cv-pulse 1.4s ease-in-out infinite}
@keyframes cv-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cv-skeleton{animation:none}.cv-spinner{animation-duration:2.4s}}

/* Dialog and toast */
.cv-scrim{display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:var(--scrim)}
.cv-dialog{box-sizing:border-box;width:100%;max-width:440px;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-overlay)}
.cv-dialog__title{margin:0;font:600 18px/28px var(--ui-font)}
[dir="rtl"] .cv-dialog__title{font-weight:700;line-height:30px}
.cv-dialog__body{margin:var(--space-2) 0 0;font:400 14px/20px var(--ui-font);color:var(--ink-muted)}
.cv-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-block-start:var(--space-4)}
.cv-toast{max-width:min(420px,100%);display:flex;align-items:center;gap:var(--space-12);box-sizing:border-box;max-width:420px;padding:var(--space-12) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-menu);font:400 14px/20px var(--ui-font)}
.cv-toast__icon{--c:var(--info-fg);color:var(--c)}
.cv-toast--success .cv-toast__icon{--c:var(--success-fg)}
.cv-toast--warning .cv-toast__icon{--c:var(--warning-fg)}
.cv-toast--error .cv-toast__icon{--c:var(--error-fg)}
.cv-toast__action{margin-inline-start:auto;font-weight:600;color:var(--accent-text);background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:inherit}

/* Banner */
.cv-banner{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-12) var(--space-3);border:1px solid var(--info-border);border-radius:var(--radius-control);background:var(--info-bg);color:var(--info-fg);font:400 14px/20px var(--ui-font)}
.cv-banner--success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.cv-banner--warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.cv-banner--error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-fg)}
.cv-banner__text{flex:1;min-width:0}
.cv-banner__title{font-weight:600}
.cv-banner__action{margin-inline-start:auto;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Tabs */
.cv-tabs{display:flex;gap:var(--space-1);border-block-end:1px solid var(--border);overflow-x:auto}
.cv-tab{padding:var(--space-12) var(--space-3);margin-block-end:-1px;border:0;border-block-end:2px solid transparent;background:none;color:var(--ink-muted);font:500 14px/20px var(--ui-font);white-space:nowrap;cursor:pointer}
.cv-tab:hover{color:var(--ink)}
.cv-tab[aria-selected="true"]{border-block-end-color:var(--accent-strong);color:var(--ink);font-weight:600}

/* Navigation */
.cv-sidebar{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-1);width:256px;max-width:100%;padding:var(--space-3);border-inline-end:1px solid var(--border);background:var(--surface-raised);color:var(--ink)}
.cv-nav-section{padding:var(--space-3) var(--space-12) var(--space-1);color:var(--ink-muted);font:600 12px/16px var(--ui-font)}
.cv-nav-item{display:flex;align-items:center;gap:var(--space-12);min-height:40px;padding:0 var(--space-12);border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font:500 14px/20px var(--ui-font);text-align:start;text-decoration:none;cursor:pointer}
.cv-nav-item:hover{background:var(--surface-hover)}
.cv-nav-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.cv-bottomnav{display:flex;border-block-start:1px solid var(--border);background:var(--surface-raised)}
.cv-bottomnav .cv-nav-item{flex:1;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:var(--space-1) 0;border-radius:0;font-size:12px;line-height:16px}
.cv-bottomnav .cv-nav-item[aria-current="page"]{background:transparent}

/* Auth card: the Cave account screens (sign in, register, reset). The title is
   the account name, "Cave", in the display face; the products are named only in the context line. */
.cv-auth{box-sizing:border-box;width:100%;max-width:400px;margin-inline:auto;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--ink)}
.cv-auth__brand{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.cv-auth__logo{width:40px;height:40px;object-fit:contain}
.cv-auth__name{font:400 32px/40px var(--font-display)}
[dir="rtl"] .cv-auth__name{font-family:var(--font-ar-display);font-size:28px;line-height:48px}
.cv-auth__sub{margin:var(--space-1) 0 0;text-align:center;font:400 14px/20px var(--ui-font);color:var(--ink-muted)}
.cv-auth__context{margin:var(--space-1) 0 var(--space-4);text-align:center;font:400 12px/16px var(--ui-font);color:var(--ink-muted)}
.cv-auth__form{display:flex;flex-direction:column;gap:var(--space-3)}

/* Add-on card, quantity stepper and order bar */
.cv-addon{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-12);min-width:0;padding:var(--space-3);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--ink)}
.cv-addon.is-selected{border-color:var(--accent-strong);outline:1px solid var(--accent-strong);outline-offset:-2px}
.cv-addon__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.cv-addon__title{margin:0;font:600 16px/24px var(--ui-font)}
.cv-addon__desc{margin:0;color:var(--ink-muted);font:400 13px/20px var(--ui-font)}
.cv-addon__list{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none;font:400 14px/20px var(--ui-font)}
.cv-addon__list li{display:flex;align-items:center;gap:var(--space-2)}
.cv-addon__list .cv-icon{width:18px;height:18px;color:var(--accent-text)}
.cv-addon__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.cv-addon__now{font:700 22px/28px var(--ui-font)}
.cv-addon__was{color:var(--ink-muted);font:400 13px/20px var(--ui-font);text-decoration:line-through}
.cv-addon__unit{margin:0;color:var(--ink-muted);font:400 12px/16px var(--ui-font)}
.cv-addon__note{margin:0;color:var(--ink-muted);font:500 13px/20px var(--ui-font)}
.cv-addon__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-block-start:auto}
.cv-stepper{display:inline-flex;align-items:center;gap:var(--space-1)}
.cv-stepper output{min-width:28px;text-align:center;font:600 14px/20px var(--ui-font);font-variant-numeric:tabular-nums}
.cv-orderbar{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-12) var(--space-3);background:var(--surface-raised);border:1px solid var(--accent-strong);border-radius:var(--radius-md)}
.cv-orderbar__sum{margin:0;color:var(--ink-muted);font:400 13px/20px var(--ui-font)}
.cv-orderbar__total{margin:0;font:700 18px/24px var(--ui-font)}

/* Powered by Cave: the caption, the Cave mark and the name, one link to www.cave.technology. The same
   in every Cave app and page; in Arabic the caption and name are Arabic and the row mirrors by itself. */
.cv-powered{display:inline-flex;align-items:center;gap:6px;font:400 12px/20px var(--ui-font);color:var(--ink-muted)}
.cv-powered__link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-muted);font-weight:600;text-decoration:none}
.cv-powered__link:hover{text-decoration:underline}
.cv-powered__mark{width:16px;height:16px;object-fit:contain}

/* Footer: a product's page footer. Its own logo, Powered by Cave, the copyright line, a row of links. */
.cv-footer{border-block-start:1px solid var(--border);background:var(--surface-raised);color:var(--ink-muted)}
.cv-footer__stack{display:flex;flex-direction:column;align-items:center;padding:36px var(--space-3) var(--space-32);text-align:center}
.cv-footer__logo{display:block;height:40px;width:auto;object-fit:contain}
.cv-footer .cv-powered{margin-block-start:10px}
.cv-footer__copy{margin:var(--space-3) 0 0;font:400 14px/20px var(--ui-font)}
.cv-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:5px var(--space-4);margin:14px 0 0;padding:0;list-style:none}
.cv-footer__links a{display:inline-block;padding-block:3px;color:var(--ink-muted);font:500 13px/20px var(--ui-font);text-decoration:none}
.cv-footer__links a:hover{color:var(--accent-text);text-decoration:underline}