/**
 * ClingKit Canvas Tool Styles
 *
 * @package ClingKit
 */

/* -------------------------------------------------------------------------
   Google Fonts
------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* -------------------------------------------------------------------------
   CSS Variables
------------------------------------------------------------------------- */
:root {
    --ck-red:         #cc3300;
    --ck-blue:        #006ab2;
    --ck-yellow:      #ffc72c;
    --ck-yellow-border: #e0a900;
    --ck-gray-bg:     #f5f5f5;
    --ck-gray-border: #ddd;
    --ck-text:        #333;
    --ck-text-light:  #666;
}

/* -------------------------------------------------------------------------
   Outer wrapper
------------------------------------------------------------------------- */
#ck-canvas-wrap {
    font-family: 'DM Sans', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
    color: var(--ck-text);
}

/* -------------------------------------------------------------------------
   Phase headings
------------------------------------------------------------------------- */
#ck-upload-phase h2,
#ck-subject-phase h2,
#ck-step-name h2,
#ck-step-type h2,
#ck-step-upload h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ck-red);
    margin-bottom: 10px;
}

/* -------------------------------------------------------------------------
   Onboarding steps (name, type, upload, loading)
------------------------------------------------------------------------- */
#ck-step-name,
#ck-step-type,
#ck-step-upload {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 20px;
}

#ck-step-name p,
#ck-step-type p,
#ck-step-upload p {
    color: var(--ck-text-light);
    font-size: 0.95em;
    margin-bottom: 15px;
}

#ck-pet-name-input {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    border: 2px solid var(--ck-gray-border);
    border-radius: 4px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

#ck-pet-name-input:focus {
    outline: none;
    border-color: var(--ck-blue);
}

#ck-pet-name-error {
    color: #c00;
    font-size: 0.9em;
    margin-bottom: 8px;
}

#ck-btn-name-next {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 28px;
    background: var(--ck-red);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

#ck-btn-name-next:hover {
    background: #aa2900;
}

#ck-step-type .ck-subject-btn,
#ck-step-upload .ck-subject-btn {
    margin-bottom: 12px;
}

#ck-step-type p:last-child,
#ck-step-upload p:last-child {
    margin-top: 16px;
    margin-bottom: 0;
}

/* Back links in onboarding steps - match Go Back / Start Over link style */
#ck-step-type a,
#ck-step-upload a {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ck-red);
    text-decoration: none;
}

#ck-step-type a:hover,
#ck-step-upload a:hover {
    text-decoration: underline;
}

#ck-step-loading {
    text-align: center;
    padding: 60px 0 20px;
}

/* -------------------------------------------------------------------------
   Upload phase
------------------------------------------------------------------------- */
#ck-upload-phase p {
    color: var(--ck-text-light);
    margin-bottom: 15px;
    font-size: 0.95em;
}

#ck-photo-input {
    display: block;
    margin-bottom: 12px;
}

#ck-upload-error {
    color: #c00;
    font-size: 0.9em;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Loading animation
------------------------------------------------------------------------- */
#ck-upload-loading {
    text-align: center;
    padding: 30px 0 10px 0;
}

#ck-lottie-container {
    width: 400px;
    height: 160px;
    margin: 0 auto;
}

#ck-loading-msg {
    font-family: 'Fredoka', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: var(--ck-blue);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   Subject type picker
------------------------------------------------------------------------- */
#ck-subject-phase {
    margin-bottom: 30px;
}

.ck-subject-btn {
    display: inline-block;
    padding: 10px 24px;
    margin-right: 12px;
    background: var(--ck-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

.ck-subject-btn:hover {
    background: #005a96;
}

/* -------------------------------------------------------------------------
   Fitting layout - category bar + canvas (left/main) | kit cart (right)
------------------------------------------------------------------------- */
#ck-fitting-phase {
    display: block;
}

#ck-fitting-topbar {
    display: block;
    width: 100%;
    padding: 0 0 12px 0;
}

#ck-fitting-topbar a {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ck-red);
    text-decoration: none;
}

#ck-fitting-topbar a:hover {
    color: var(--ck-red);
    text-decoration: underline;
}

#ck-fitting-panels {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

#ck-fitting-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* -------------------------------------------------------------------------
   Category pill bar
------------------------------------------------------------------------- */
#ck-category-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ck-category-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid var(--ck-red);
    border-radius: 999px;
    color: var(--ck-red);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.ck-category-pill-active {
    background: var(--ck-red);
    color: #fff;
}

.ck-category-pill-active .ck-category-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.ck-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(204,51,0,0.12);
    color: var(--ck-red);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.ck-category-pill-disabled {
    background: #f4f4f4;
    border-color: #dcdcdc;
    color: #9a9a9a;
    opacity: 0.8;
    cursor: default;
}

.ck-category-pill-disabled .ck-category-count {
    background: #e4e4e4;
    color: #9a9a9a;
}

/* Amber pulse ring - re-engagement nudge after Add to Kit */
@keyframes ck-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 44, 0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 199, 44, 0.6); }
}

.ck-category-pill-pulse {
    animation: ck-pulse-ring 1.2s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   Canvas panel (with drawer overlay)
------------------------------------------------------------------------- */
#ck-panel-canvas {
    border: 1px solid var(--ck-gray-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

#ck-panel-canvas canvas {
    display: block;
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   Accessory drawer - full-canvas overlay, internal scroll only
------------------------------------------------------------------------- */
#ck-accessory-drawer {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 20;
    overflow-y: auto;
}

#ck-drawer-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: #fff;
    border-bottom: 1px solid var(--ck-gray-border);
    z-index: 1;
}

#ck-drawer-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--ck-blue);
    margin: 0;
}

#ck-drawer-count {
    font-family: 'DM Sans', sans-serif;
    color: #9a9a9a;
    font-size: 14px;
    font-weight: 500;
}

#ck-drawer-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    background: #f2f2f2;
    border: none;
    border-radius: 999px;
    color: #555;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

#ck-drawer-close:hover {
    background: #e8e8e8;
}

#ck-drawer-instruction {
    margin: 0;
    padding: 18px 22px 0 22px;
    background: #f4f4f4;
    color: #666;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

#ck-drawer-instruction span {
    font-weight: 700;
    color: #222;
}

.ck-drawer-notice {
    margin: 10px 20px 0 20px;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    color: #c00;
    font-size: 0.85em;
}

#ck-drawer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
    padding: 18px 22px 24px 22px;
    background: #f4f4f4;
}

.ck-drawer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.ck-drawer-card:hover {
    border-color: var(--ck-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

.ck-drawer-card-added {
    border-color: var(--ck-blue);
    box-shadow: 0 0 0 3px rgba(0,106,178,0.12);
}

.ck-drawer-card-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ck-drawer-card-tile img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.ck-drawer-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--ck-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.ck-drawer-card-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ck-red);
    text-align: center;
    line-height: 1.25;
}

/* -------------------------------------------------------------------------
   Re-engagement nudge banner
------------------------------------------------------------------------- */
#ck-nudge-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    padding: 12px 20px;
    background: var(--ck-yellow);
    border-bottom: 1px solid var(--ck-yellow-border);
    color: #5c4400;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
}

.ck-nudge-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5c4400;
    color: #fff;
    font-size: 0.8em;
    margin-left: 4px;
}

/* -------------------------------------------------------------------------
   Canvas corner action buttons
------------------------------------------------------------------------- */
#ck-btn-remove {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    padding: 8px 18px;
    background: #fff;
    border: 1px solid var(--ck-gray-border);
    border-radius: 999px;
    color: var(--ck-red);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#ck-btn-remove:hover {
    background: #fff0f0;
}

#ck-btn-add-to-kit {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    padding: 8px 20px;
    background: var(--ck-red);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: background 0.15s;
}

#ck-btn-add-to-kit:hover:not(:disabled) {
    background: #aa2900;
}

#ck-btn-add-to-kit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ck-cart-error {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    font-size: 0.85em;
    color: #c00;
}

/* Toast confirmation - bottom center, fades after ~2.6s */
#ck-toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    padding: 8px 18px;
    background: #2a2a2a;
    color: #fff;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85em;
}

/* -------------------------------------------------------------------------
   Right panel - kit list
------------------------------------------------------------------------- */
#ck-panel-kit {
    background: var(--ck-gray-bg);
    border: 1px solid var(--ck-gray-border);
    border-radius: 6px;
    padding: 12px;
    max-height: 700px;
    overflow-y: auto;
}

#ck-panel-kit h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ck-blue);
    margin: 0 0 16px 0;
}

#ck-kit-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
}

.ck-kit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.85em;
    color: var(--ck-text);
}

.ck-kit-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-kit-item-price {
    color: var(--ck-text-light);
    font-size: 0.9em;
    flex-shrink: 0;
}

.ck-kit-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--ck-red);
    cursor: pointer;
    font-size: 1.15em;
    line-height: 1;
    padding: 0 0 0 8px;
    flex-shrink: 0;
}

.ck-kit-remove:hover {
    color: #aa2900;
}

/* Subject line item at top of kit panel */
#ck-kit-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px 0;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--ck-gray-border);
}

.ck-kit-subject-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    flex-shrink: 0;
}

.ck-kit-subject-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ck-text);
    flex: 1;
}

.ck-kit-subject-price {
    font-size: 0.85em;
    color: var(--ck-text-light);
    flex-shrink: 0;
}

#ck-kit-actions {
    margin-top: 12px;
}

#ck-btn-view-cart {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: var(--ck-blue);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    transition: background 0.15s;
    box-sizing: border-box;
}

#ck-btn-view-cart:hover {
    background: #005a96;
    color: #fff;
}

/* -------------------------------------------------------------------------
   Step 0.5: Entry choice screen
------------------------------------------------------------------------- */
#ck-step-entry {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 20px;
}

#ck-step-entry h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ck-red);
    margin-bottom: 8px;
}

#ck-step-entry > p {
    color: var(--ck-text-light);
    font-size: 0.95em;
    margin-bottom: 24px;
}

#ck-entry-choices {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

#ck-btn-build-new {
    padding: 10px 28px;
    background: var(--ck-red);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

#ck-btn-build-new:hover {
    background: #aa2900;
}

#ck-btn-show-login {
    padding: 10px 28px;
    background: #fff;
    color: var(--ck-blue);
    border: 2px solid var(--ck-blue);
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

#ck-btn-show-login:hover {
    background: var(--ck-blue);
    color: #fff;
}

#ck-entry-login {
    margin-top: 4px;
}

#ck-entry-login input[type="email"],
#ck-entry-login input[type="password"] {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    border: 2px solid var(--ck-gray-border);
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#ck-entry-login input:focus {
    outline: none;
    border-color: var(--ck-blue);
}

#ck-btn-entry-login {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 28px;
    background: var(--ck-red);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

#ck-btn-entry-login:hover:not(:disabled) {
    background: #aa2900;
}

#ck-btn-entry-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#ck-entry-error {
    color: #c00;
    font-size: 0.9em;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    max-width: 360px;
}

.ck-entry-forgot {
    margin-top: 12px;
    font-size: 0.85em;
}

.ck-entry-forgot a {
    color: var(--ck-text-light);
    text-decoration: underline;
}

.ck-entry-forgot a:hover {
    color: var(--ck-text);
}

/* -------------------------------------------------------------------------
   Step 0: Welcome back screen
------------------------------------------------------------------------- */
#ck-step-welcome {
    max-width: 560px;
    margin: 40px auto;
    padding: 0 20px;
}

#ck-step-welcome h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ck-red);
    margin-bottom: 20px;
}

#ck-saved-subjects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.ck-saved-subject-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 2px solid var(--ck-gray-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
    width: 120px;
    font-family: 'DM Sans', sans-serif;
}

.ck-saved-subject-btn:hover {
    border-color: var(--ck-red);
}

.ck-saved-subject-btn img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
}

.ck-saved-subject-btn span {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ck-text);
}

#ck-welcome-new-pet {
    margin-bottom: 20px;
}

#ck-btn-new-pet {
    padding: 10px 24px;
    background: var(--ck-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

#ck-btn-new-pet:hover {
    background: #005a96;
}

.ck-welcome-logout {
    font-size: 0.85em;
    color: var(--ck-text-light);
    margin: 0;
}

.ck-welcome-logout a {
    color: var(--ck-text-light);
    text-decoration: underline;
}

.ck-welcome-logout a:hover {
    color: var(--ck-text);
}

/* -------------------------------------------------------------------------
   Step 3.5: Auth interstitial
------------------------------------------------------------------------- */
#ck-step-auth {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 20px;
}

#ck-step-auth h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ck-red);
    margin-bottom: 8px;
}

#ck-step-auth > p {
    color: var(--ck-text-light);
    font-size: 0.95em;
    margin-bottom: 20px;
}

#ck-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ck-gray-border);
}

.ck-auth-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--ck-text-light);
    transition: color 0.15s;
}

.ck-auth-tab.active {
    color: var(--ck-red);
    border-bottom-color: var(--ck-red);
}

.ck-auth-panel input[type="email"],
.ck-auth-panel input[type="password"] {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    border: 2px solid var(--ck-gray-border);
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.ck-auth-panel input:focus {
    outline: none;
    border-color: var(--ck-blue);
}

.ck-auth-panel button[type="button"],
#ck-btn-register,
#ck-btn-login {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 28px;
    background: var(--ck-red);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background 0.15s;
}

#ck-btn-register:hover:not(:disabled),
#ck-btn-login:hover:not(:disabled) {
    background: #aa2900;
}

#ck-btn-register:disabled,
#ck-btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#ck-reg-error,
#ck-login-error {
    color: #c00;
    font-size: 0.9em;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
}

.ck-auth-back {
    margin-top: 20px;
}

.ck-auth-back a {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ck-red);
    text-decoration: none;
}

.ck-auth-back a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #ck-fitting-panels {
        grid-template-columns: 1fr;
    }

    #ck-panel-kit {
        max-height: 300px;
    }

    #ck-drawer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #ck-lottie-container {
        width: 100%;
    }

    #ck-loading-msg {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    #ck-drawer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #ck-drawer-header {
        flex-wrap: wrap;
    }
}