/* =========================
   MAIN CONTAINER
========================= */

.skinvive-timer{
  display:flex;
  gap:18px;                    /* More breathing space */
  justify-content:center;
  align-items:center;
  padding:20px 25px;           /* Better top-bottom padding */
  border-radius:30px;
  width:100%;
  margin:auto;
  box-sizing:border-box;
}


/* =========================
   DIGIT BOX
========================= */

.skin-box{
  width:95px;                  /* Fixed better width */
  height:65px;                 /* Bigger desktop height */
  background:linear-gradient(to bottom,#fff4ea,#f9dcc7);
  border-radius:26px;
  overflow:hidden;
  position:relative;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.8),
    0 15px 35px rgba(0,0,0,0.12);
}

.skin-box::after{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.5),
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.05)
  );
  pointer-events:none;
}

.skin-inner{
  position:absolute;
  width:100%;
  transition:transform 0.8s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}


/* =========================
   DIGIT TEXT
========================= */

.skin-digit{
  height:65px;                 /* Match box height */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;              /* Bigger number */
  font-weight:700;
  color:#f05a28;
  letter-spacing:1px;
}


/* =========================
   WRAPPER
========================= */

.skin-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}


/* =========================
   LABEL
========================= */

.skin-label{
  font-size:15px;
  font-weight:500;
  color:#b8b5b5;
  letter-spacing:.5px;
}


/* =========================
   MOBILE VERSION
========================= */

@media (max-width:600px){

  .skinvive-timer{
    gap:10px;
    padding:12px 10px;
  }

  .skin-box{
    width:70px;
    height:42px;              /* Slightly increased */
    border-radius:18px;
  }

  .skin-digit{
    height:42px;
    font-size:18px;           /* Slightly bigger */
  }

  .skin-label{
    font-size:11px;
  }

}