/* ==========================================================================
   Check-in — Tickchak Design System
   Circle (green fill) + Square (bordered) with checkmark animation
   Usage:
     <button class="checkin circle [on]">
       <div class="shape">
         <div class="check"><svg>...</svg></div>
       </div>
       <div class="ripple"></div>
     </button>
   Shapes: .circle | .square
   Required tokens: tokens.css
   ========================================================================== */

.checkin{
  width:24px;height:24px;
  position:relative;
  cursor:pointer;border:none;outline:none;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  background:none;
}

.checkin .shape{
  width:100%;height:100%;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:
    background .35s cubic-bezier(.4,0,.2,1),
    border-color .35s cubic-bezier(.4,0,.2,1),
    transform .35s cubic-bezier(.4,0,.2,1),
    box-shadow .35s cubic-bezier(.4,0,.2,1);
}

/* Circle — green fill when on */
.checkin.circle .shape{
  border-radius:999px;
  background:var(--color-grays-300);
  border:none;
}
.checkin.circle.on .shape{
  background:var(--color-green-400);
}

/* Square — white with border */
.checkin.square .shape{
  border-radius:4px;
  background:#fff;
  border:1px solid var(--color-grays-300);
}
.checkin.square.on .shape{
  border-color:var(--color-grays-300);
  background:#fff;
}

/* Checkmark — scales in when on */
.checkin .check{
  width:12px;height:10px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(0.3) rotate(-15deg);
  transition:
    opacity .3s cubic-bezier(.4,0,.2,1),
    transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.checkin.on .check{
  opacity:1;
  transform:scale(1) rotate(0);
}
.checkin.circle .check svg path{stroke:var(--color-green-600);}
.checkin.square .check svg path{stroke:var(--ta-color-icon-default);}

/* Hover feedback */
.checkin:hover .shape{transform:scale(1.08);}
.checkin.circle:hover .shape{box-shadow:0 0 0 4px rgba(185,202,32,0.15);}
.checkin.square:hover .shape{box-shadow:0 0 0 4px rgba(0,0,0,0.06);}
.checkin:active .shape{transform:scale(0.9);}

/* Ripple */
.checkin .ripple{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(185,202,32,0.3);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
}
.checkin.square .ripple{background:rgba(0,0,0,0.08);}
@keyframes checkin-ripple{
  0%{width:0;height:0;opacity:0.6;}
  100%{width:48px;height:48px;opacity:0;}
}
.checkin .ripple.animate{animation:checkin-ripple .5s cubic-bezier(.4,0,.2,1) forwards;}