/* ==========================================================================
   Zotok — components.css
   Shared UI components used across pages.
   Load after main.css, before dark.css.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */

/* ── Button Sizes ─────────────────────────────────────────────────────────── */
.btn-sm {
   padding: 8px 12px !important;
   gap: 6px;
}

.btn-md {
   padding: 10px 16px !important;
   gap: 8px;
}

/* ── Base Button ──────────────────────────────────────────────────────────── */
.btn {
   border-radius: 10px;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   font-family: inherit;
   font-size: 14px;
   line-height: 18px;
   letter-spacing: -0.09px;
   cursor: pointer;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-duration: .15s;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}

.btn img,
.btn svg {
   width: 18px;
   height: 18px;
   display: block;
   flex-shrink: 0;
}

.btn svg {
   --stroke-0: currentColor;
   --fill-0: currentColor;
}

/* ── Primary Button ───────────────────────────────────────────────────────── */
.btn-primary {
   background: #0067ff;
   border: none;
   font-weight: 600;
   color: white;
}

.btn-primary:hover {
   background: #0055d4;
}

.modal-foot .btn-primary,
.modal-foot .btn-secondary {
   flex: 1;
}

/* ── Secondary Button ─────────────────────────────────────────────────────── */
.btn-secondary {
   background: white;
   border: 1px solid #e8e6e0;
   font-weight: 500;
   color: #34322d;
}

.btn-secondary:hover {
   background: #f0f0ef;
}

/* ── Tertiary Button ──────────────────────────────────────────────────────── */
.btn-tertiary {
   background: #ffffff;
   border: none;
   display: inline-flex;
   font-weight: 500;
   color: #34322d;
   white-space: nowrap;
}

.btn-tertiary:hover {
   background: #f0eeec;
}

/* ── Danger Button ────────────────────────────────────────────────────────── */
.btn-danger {
   background: none;
   border: 1px solid #dd360c;
   font-weight: 500;
   color: #dd360c;
}

.btn-danger:hover {
   background: rgba(221, 54, 12, 0.06);
}

/* ── Icon Button ──────────────────────────────────────────────────────────── */
.btn-icon {
   justify-content: center;
   background: white;
   border: 1px solid #e8e6e0;
   padding: 8px;
}

.btn-icon:hover {
   background: #f0f0ef;
}


/* ==========================================================================
   Checkbox
   ========================================================================== */

/* ── Checkbox ─────────────────────────────────────────────────────────────── */
.checkbox {
   width: 18px;
   height: 18px;
   border-radius: 4px;
   border: 1.5px solid #d0cfc9;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   background: white;
   display: block;
   flex-shrink: 0;
   transition-property: background-color, border-color;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-duration: .15s;
}

.checkbox:checked {
   background-color: #0067ff;
   border-color: #0067ff;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9.5 10,3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px 12px;
}

.checkbox:indeterminate {
   background-color: #0067ff;
   border-color: #0067ff;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0.5' width='8' height='1' rx='0.5' fill='white'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 10px 2px;
}

/* ==========================================================================
   Radio
   ========================================================================== */

/* ── Radio ────────────────────────────────────────────────────────────────── */
.radio {
   width: 22px;
   height: 22px;
   flex-shrink: 0;
   border: 1.5px solid rgba(0, 0, 0, 0.18);
   border-radius: 50%;
   box-sizing: border-box;
   transition: border-color 0.15s, background-color 0.15s;
}

.radio.selected {
   border-color: #0067ff;
   background: #0067ff;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
}