/* ============================================================
   Kanah Buyer Mock — the UI Elements kit, namespaced, flattened.
   Source: the UI Elements folder, one Uiverse component stylesheet per subfolder, recolored to the brand on 14 Sep 2026
   and flattened on 17 Sep 2026 to the Figma screen (Kanah-Buyer-Mock-Alignment-Spec.md §4.3): no drop shadows,
   no hairline strokes since 18 Sep 2026 (fills separate the pieces), spread-only rings for focus and selection.
   Every selector starts with .kit- and every keyframe with kit- so nothing collides with the app.
   Tokens come from styles.css (:root). Sizes are adapted to the app; behaviour is the original.
   ============================================================ */

/* From Uiverse.io by gharsh11032000 — recolored to the Kanah brand. CTA / login button.
   Flattened to the file's primary button: 40 high, radius 12, dark fill that deepens on hover, no shadow.
   The original choreography stays: on hover the arrow leaves to the right, a second arrow enters from the left and the label shifts. */
.kit-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 44px;border:0;font-family:var(--font-sans);font-size:20px;background:var(--side);border-radius:12px;font-weight:600;color:#fff;cursor:pointer;overflow:hidden;transition:background .6s cubic-bezier(.23,1,.32,1);white-space:nowrap;text-decoration:none}
.kit-cta svg{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;fill:#fff;z-index:9;transition:all .8s cubic-bezier(.23,1,.32,1)}
.kit-cta .arr-1{right:16px}
.kit-cta .arr-2{left:-25%}
.kit-cta .text{position:relative;z-index:1;transform:translateX(0);transition:all .8s cubic-bezier(.23,1,.32,1)}
.kit-cta:hover,.kit-cta.is-on{background:var(--green);color:#fff}
.kit-cta:hover .arr-1,.kit-cta.is-on .arr-1{right:-25%}
.kit-cta:hover .arr-2,.kit-cta.is-on .arr-2{left:16px}
.kit-cta:hover .text,.kit-cta.is-on .text{transform:translateX(12px)}
.kit-cta:focus-visible{outline:0;box-shadow:0 0 0 4px var(--focus)}
.kit-cta:active{scale:.96}
.kit-cta.block{width:100%}

/* From Uiverse.io by Codecite — recolored to the Kanah brand. Submit button; flattened to the same fill as the CTA at inline width. */
.kit-submit{border:0;border-radius:12px;height:40px;padding:0 20px;font-family:var(--font-sans);font-size:15px;font-weight:600;color:#fff;background:var(--side);cursor:pointer;transition:background var(--t-fast) var(--ease);white-space:nowrap}
.kit-submit:hover{background:var(--green)}
.kit-submit:focus-visible{outline:0;box-shadow:0 0 0 4px var(--focus)}
.kit-submit:active{opacity:.7}
.kit-submit.small{height:36px;padding:0 16px;font-size:14px}

/* From Uiverse.io by mrhyddenn — recolored to the Kanah brand. Completion checkbox, wrapped as a task row. */
.kit-task{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:12px 14px;border:0;border-radius:12px;background:var(--paper);position:relative;transition:background .25s var(--ease),opacity .4s var(--ease)}
.kit-task:hover{background:var(--strip)}
.kit-task.done{opacity:.6}
.kit-task .body{display:block;width:100%;text-align:left;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.kit-task .body b{display:block;font-weight:600;font-size:14px}
.kit-task .body small{display:block;color:var(--muted);font-size:12.5px}
.kit-task .body:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus);border-radius:6px}
.kit-cbx{position:absolute;opacity:0;width:0;height:0}
.kit-check{position:relative;width:18px;height:18px;margin-top:2px;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kit-check:before{content:"";position:absolute;top:-15px;left:-15px;width:48px;height:48px;border-radius:50%;background:var(--strip);opacity:0;transition:opacity .2s ease}
.kit-check svg{position:relative;z-index:1;width:18px;height:18px;fill:none;stroke:var(--hair);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:all .2s ease}
.kit-check svg path{stroke-dasharray:60;stroke-dashoffset:0}
.kit-check svg polyline{stroke-dasharray:22;stroke-dashoffset:66}
.kit-task:hover .kit-check:before{opacity:1}
.kit-task:hover .kit-check svg{stroke:var(--green)}
.kit-cbx:checked+.kit-check svg{stroke:var(--green)}
.kit-cbx:checked+.kit-check svg path{stroke-dashoffset:60;transition:all .3s linear}
.kit-cbx:checked+.kit-check svg polyline{stroke-dashoffset:42;transition:all .2s linear;transition-delay:.15s}
.kit-cbx:focus-visible+.kit-check:before{opacity:1;box-shadow:0 0 0 3px var(--focus)}
.kit-cbx:disabled+.kit-check{cursor:default}

/* From Uiverse.io by gagan-gv — recolored to the Kanah brand. Selector; a green mark with a soft ring when chosen. */
.kit-radio{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border:0;border-radius:12px;background:var(--field);cursor:pointer;transition:background .3s var(--ease);position:relative}
.kit-radio input{position:absolute;opacity:0;width:0;height:0}
.kit-radio .rmark{position:relative;width:20px;height:20px;border-radius:50%;background:var(--hair);transition:all .5s;margin-top:1px;flex:0 0 20px}
.kit-radio .rmark::after{content:"";position:absolute;display:none;left:7px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kit-radio input:checked~.rmark{background:var(--green);box-shadow:0 0 0 5px var(--focus)}
.kit-radio input:checked~.rmark::after{display:block}
.kit-radio:has(input:checked){background:var(--forest-wash)}
.kit-radio input:focus-visible~.rmark{box-shadow:0 0 0 4px var(--focus)}
.kit-radio b{display:block;font-size:14px}
.kit-radio small{display:block;color:var(--muted);font-size:12.5px}
.kit-radio .disc{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.kit-radio img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px}

/* From Uiverse.io by cuzpq — recolored to the Kanah brand. Switch; the track slides between the mist and the green. */
.kit-switch{appearance:none;-webkit-appearance:none;width:54px;height:28px;border-radius:99em;background:linear-gradient(to right,var(--ring-future) 50%,var(--green) 50%) no-repeat;background-size:205%;background-position:0;transition:.4s;position:relative;cursor:pointer;flex:0 0 54px;margin:0}
.kit-switch::before{content:"";width:20px;height:20px;position:absolute;top:4px;left:4px;background:linear-gradient(to right,var(--ring-future) 50%,var(--green) 50%) no-repeat;background-size:205%;background-position:100%;border-radius:50%;transition:.4s}
.kit-switch:checked{background-position:100%}
.kit-switch:checked::before{left:calc(100% - 24px);background-position:0}
.kit-switch:focus-visible{outline:0;box-shadow:0 0 0 4px var(--focus)}

/* From Uiverse.io by satyamchaudharydev — recolored to the Kanah brand. Horizontal loader; the bar runs in the green. */
.kit-loader{display:block;width:130px;height:4px;border-radius:30px;background:var(--strip);position:relative;overflow:hidden}
.kit-loader::before{content:"";position:absolute;background:var(--green);top:0;left:0;width:0;height:100%;border-radius:30px;animation:kit-moving 1s ease-in-out infinite}
.kit-loader.wide{width:100%}
@keyframes kit-moving{50%{width:100%}100%{width:0;right:0;left:unset}}

/* From Uiverse.io by bedirhan-arslan — recolored to the Kanah brand. Card input; filled by default, a ring on focus. */
.kit-field{position:relative;padding-top:18px}
.kit-field input{width:100%;padding:10px 14px;outline:0;border:1px solid transparent;border-radius:12px;background:var(--field);color:var(--ink);font-family:var(--font-sans);font-size:15px;font-weight:500;transition:.3s ease-in-out}
.kit-field input:hover{border-color:var(--hair)}
.kit-field input:focus{background:var(--paper);box-shadow:0 0 0 3px var(--focus)}
.kit-field span{position:absolute;left:0;top:18px;padding:10px 14px;color:var(--muted);font-size:15px;font-weight:600;transition:.3s ease-in-out;pointer-events:none}
.kit-field input:focus+span,.kit-field input:valid+span{transform:translateY(-32px) translateX(-6px) scale(.85);color:var(--green)}

/* From Uiverse.io by opMorn — recolored to the Kanah brand. Underline input; the label lifts and the underline draws. */
.kit-line{position:relative;padding-top:18px}
.kit-line input{width:100%;border:0;border-bottom:2px solid var(--hair);padding:6px 0;background:transparent;color:var(--ink);font-family:var(--font-sans);font-size:20px;outline:0}
.kit-line input.code{font-size:22px;letter-spacing:.14em}
.kit-line .lbl{position:absolute;top:24px;left:0;color:var(--muted);transition:all .3s ease;pointer-events:none;font-size:16px}
.kit-line input:focus~.lbl,.kit-line input:valid~.lbl{top:0;font-size:13px;color:var(--green)}
.kit-line .ul{position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:all .3s ease}
.kit-line input:focus~.ul,.kit-line input:valid~.ul{transform:scaleX(1)}
.kit-line.error input{border-bottom-color:var(--attn)}
.kit-line.error .lbl{color:var(--attn)}

/* From Uiverse.io by nazar-gavrylyk — recolored to the Kanah brand. Download and open; a green circle inside a hairline pill. */
.kit-dl{background:transparent;border:2px solid var(--hair);display:flex;align-items:center;border-radius:50px;width:160px;cursor:pointer;transition:all .4s ease;padding:5px;position:relative;font-family:var(--font-sans)}
.kit-dl::before{content:"";position:absolute;inset:0;background:var(--green);width:8px;height:8px;transition:all .4s ease;border-radius:100%;margin:auto;opacity:0;visibility:hidden}
.kit-dl .input{display:none}
.kit-dl .title{font-size:15px;color:var(--green);font-weight:600;transition:all .4s ease;position:absolute;right:18px;bottom:14px;text-align:center}
.kit-dl .title:last-child{opacity:0;visibility:hidden}
.kit-dl .circle{height:42px;width:42px;border-radius:50%;background:var(--green);display:flex;justify-content:center;align-items:center;transition:all .4s ease;position:relative;box-shadow:0 0 0 0 var(--focus);overflow:hidden}
.kit-dl .circle .icon{width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .4s ease;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kit-dl .circle .square{aspect-ratio:1;width:14px;border-radius:2px;background:var(--green);opacity:0;visibility:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .4s ease}
.kit-dl .circle::before{content:"";position:absolute;left:0;top:0;background:var(--ring-future);width:100%;height:0;transition:all .4s ease}
.kit-dl:has(.input:checked){width:54px;animation:kit-installed .4s ease 3.5s forwards}
.kit-dl:has(.input:checked)::before{animation:kit-rotate 3s ease-in-out .4s forwards}
.kit-dl .input:checked+.circle{animation:kit-pulse 1s forwards,kit-circleDelete .2s ease 3.5s forwards;rotate:180deg}
.kit-dl .input:checked+.circle::before{animation:kit-installing 3s ease-in-out forwards}
.kit-dl .input:checked+.circle .icon{opacity:0;visibility:hidden}
.kit-dl .input:checked~.circle .square{opacity:1;visibility:visible}
.kit-dl .input:checked~.title{opacity:0;visibility:hidden}
.kit-dl .input:checked~.title:last-child{animation:kit-showInstalled .4s ease 3.5s forwards}
@keyframes kit-pulse{0%{scale:.95;box-shadow:0 0 0 0 var(--focus)}70%{scale:1;box-shadow:0 0 0 16px rgba(23,76,59,0)}100%{scale:.95;box-shadow:0 0 0 0 rgba(23,76,59,0)}}
@keyframes kit-installing{from{height:0}to{height:100%}}
@keyframes kit-rotate{0%{transform:rotate(-90deg) translate(27px) rotate(0);opacity:1;visibility:visible}99%{transform:rotate(270deg) translate(27px) rotate(270deg);opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes kit-installed{100%{width:150px;border-color:var(--green)}}
@keyframes kit-circleDelete{100%{opacity:0;visibility:hidden}}
@keyframes kit-showInstalled{100%{opacity:1;visibility:visible;right:56px}}

/* From Uiverse.io by nazar-gavrylyk — recolored to the Kanah brand. Option menu; a field-toned surface with no stroke. */
.kit-menu{width:200px;background:var(--field);border-radius:12px;padding:12px 0;display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans);border:0}
.kit-menu .sep{border-top:1px solid var(--hair)}
.kit-menu ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0 10px;margin:0}
.kit-menu li{display:flex;align-items:center;color:var(--ink);gap:10px;transition:background var(--t-fast) ease,color var(--t-fast) ease;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
.kit-menu li svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-fast) ease;flex:0 0 18px}
.kit-menu li:hover{background:var(--hair);color:var(--green)}
.kit-menu li:hover svg{stroke:var(--green)}
.kit-menu li:active{transform:scale(.99)}
.kit-menu ul:last-child li{color:var(--amber)}
.kit-menu ul:last-child li svg{stroke:var(--amber)}
.kit-menu ul:last-child li:hover{background:var(--clay-wash)}
.kit-menu li p{margin:0}

/* From Uiverse.io by Yaya12085 — recolored to the Kanah brand. Browse and upload; a flat card, a dashed dropzone. */
.kit-upload{width:100%;max-width:360px;border-radius:12px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px;gap:6px;background:var(--paper);font-family:var(--font-sans)}
.kit-upload .header{width:100%;min-height:150px;border:2px dashed var(--ring-future);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--strip);gap:6px;transition:background .3s var(--ease)}
.kit-upload .header:hover{background:var(--field)}
.kit-upload .header svg{height:52px;width:52px;stroke:var(--green);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kit-upload .header p{text-align:center;color:var(--ink);font-size:13.5px;max-width:24ch;margin:0}
.kit-upload .footer{background:var(--field);width:100%;height:40px;padding:8px 10px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;transition:background .2s ease}
.kit-upload .footer:hover{background:var(--strip)}
.kit-upload .footer svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kit-upload .footer p{margin:0;flex:1;text-align:center}
.kit-upload input{display:none}
.kit-upload .footer:focus-within{box-shadow:0 0 0 3px var(--focus)}