/* ==============================================================
   GAMIFICATION — ITEM PICKER  (prefix gitem_)
   ==============================================================*/

/* ---------- basic elements ---------- */

#education_gitem-item-selection::-webkit-scrollbar      { width:6px; }
#education_gitem-item-selection::-webkit-scrollbar-thumb{ background:#ccc; border-radius:4px; }

.education_gitem_scroll-wrapper { position:relative; width:150px; max-height:450px; }

#education_gitem-item-selection{
  display:flex; flex-direction:column; gap:.75rem;
  width:100%; max-height:525px; overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin; scrollbar-color:#ccc transparent;
}

#education_gitem-scroll-indicator{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:30px; color:#888; opacity:.6;
  transition:opacity .3s ease;
  pointer-events:none;
  animation:education_gitem_bounce 1.5s infinite;
}

#education_gitem-scroll-indicator,
#education_gitem-scroll-up {
  cursor: pointer;
}

#education_gitem-scroll-up {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-size: 26px;
  color: #888;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  animation: education_gitem_bounce_up 1.5s infinite;
  z-index: 2;
}

@keyframes education_gitem_bounce_up {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

@keyframes education_gitem_bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(4px); }
}

/* ---------- item card ---------- */

.education_gitem_item-card{
  border:1px solid #d1e3f8; border-radius:12px;
  background:#fff; box-shadow:0 0 6px rgba(0,0,0,.06);
  padding:.5rem; position:relative; text-align:center; font-family:sans-serif; cursor: pointer;
}
.education_gitem_item-card.education_gitem_selected{ border:3px solid #ffe58f; }

.education_gitem_item-card .education_gitem_label {
  font-weight:500; display:block; text-align:left; margin-bottom:.25rem; font-size:16px;
  padding-left:.25rem;
}

.education_gitem_item-card img {
  width:100%; max-width:100px !important; object-fit:contain; margin-bottom:.5rem;
}

.education_gitem_item-card .education_gitem_price{
  display:inline-flex; align-items:center; gap:6px;
  background:#e9f5ff; color:#007acc; font-weight:600; font-size:.85rem;
  border-radius:10px; padding:.3rem .75rem; margin:0 auto; width:100%;
  justify-content: space-between;
}

.education_gitem_price-text{
  font:inherit; color:inherit; line-height:1; white-space:nowrap;
}

.education_gitem_price-icon {
  width: 20px !important;
  height: 20px !important;
  margin-top: 5px;
  display: inline-block;
  flex: 0 0 auto;
}

.education_gitem_item-card .education_gitem_remove{
  position:absolute; top:-2px; right:0;
  background:none; border:none; font-size:14px; font-weight:bold; cursor:pointer; color:#444;
}

/* ==============================================================
   RESPONSIVE
   ==============================================================*/

/* ---------- TABLET 768 – 1024 px ---------- */
@media (min-width:768px) and (max-width:1024px){

  .education_gitem_scroll-wrapper{ 
    width:100%; 
    max-width:100%; 
    max-height:520px; 
    padding-bottom:2.5rem;
  }

  #education_gitem-item-selection{
    flex-direction:row; gap:1rem;
    overflow-x:auto; overflow-y:hidden;
    max-height:none;
    justify-content:center;
    padding:0 32px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .education_gitem_item-card{
    flex:0 0 calc(33.333% - 1rem);
    max-width:calc(33.333% - 1rem);
    min-width:160px;
/*     padding:.5rem .6rem; */
    scroll-snap-align:start;
  }

  .education_gitem_item-card .education_gitem_label { font-size:15px; margin-bottom:.35rem; }
  .education_gitem_item-card img { max-width:74px; height:64px; margin-bottom:.4rem; }
  .education_gitem_item-card .education_gitem_price{
    font-size:.8rem; padding:.28rem .6rem;
  }
  .education_gitem_price-icon { width:13px !important; height:13px !important; }

  /* Down arrows */
  .education_gitem_arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    bottom:0.5rem;
    z-index:5;
    width:24px; height:24px;
    font-size:24px; line-height:22px;
    color:#007acc; background:#fff;
    border-radius:50%;
    box-shadow:0 0 4px rgba(0,0,0,.15);
    cursor:pointer;
    user-select:none;
  }
  .education_gitem_arrow-left  { left:1rem; animation:education_gitem_bounce_hL 1.5s infinite; }
  .education_gitem_arrow-right { right:1rem; animation:education_gitem_bounce_h  1.5s infinite; }

  @keyframes education_gitem_bounce_h  { 0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);} }
  @keyframes education_gitem_bounce_hL { 0%,100%{transform:translateX(0);} 50%{transform:translateX(-4px);} }

  #education_gitem-scroll-indicator { display:none; }

  /* Pagination */
  #education_gitem-pagination {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
  }

  .education_gitem_dot {
    width: 10px;
    height: 10px;
    background-color: #b3d9f9;
    border-radius: 50%;
    transition: background-color 0.3s;
  }

  .education_gitem_dot.education_gitem_active {
    background-color: #007acc;
  }
}

/* ---------- MOBILE ≤768 px ---------- */
@media (max-width:768px){

  .education_gitem_item-card .education_gitem_label,
  .education_gitem_item-card .education_gitem_remove {
    display: none;
  }

  .education_gitem_scroll-wrapper{ 
    width:100%; 
    max-width:100%; 
    max-height:none; 
    padding-bottom:3.5rem;
    margin-bottom: 1rem;
  }

  #education_gitem-item-selection{
    flex-direction:row; gap:.75rem;
    overflow-x:auto; overflow-y:hidden;
    max-height:none;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding: 0 .5rem;
  }

  .education_gitem_item-card{
    min-width: 140px;
    flex: 0 0 140px;
    scroll-snap-align:start;
    padding:.5rem .55rem;
  }

  .education_gitem_item-card img {
    height:60px;
    margin-bottom:.35rem;
  }

  .education_gitem_item-card .education_gitem_price {
    font-size: 16px;
  }

  .education_gitem_price-icon { width:15px !important; height:15px !important; }

  .education_gitem_arrow {
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    bottom:0.5rem;
    z-index:1;
    width:24px; height:24px;
    font-size:24px; line-height:22px;
    color:#007acc; background:#fff;
    border-radius:50%;
    box-shadow:0 0 4px rgba(0,0,0,.15);
    cursor:pointer;
    user-select:none;
  }
  .education_gitem_arrow-left  { left:1rem;  animation:education_gitem_bounce_hL 1.5s infinite; }
  .education_gitem_arrow-right { right:1rem; animation:education_gitem_bounce_h  1.5s infinite; }

  #education_gitem-scroll-indicator{ display:none; }

  #education_gitem-pagination {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
  }

  .education_gitem_dot {
    width: 10px;
    height: 10px;
    background-color: #b3d9f9;
    border-radius: 50%;
    transition: background-color 0.3s;
  }

  .education_gitem_dot.education_gitem_active {
    background-color: #007acc;
  }
}

@media (max-width:560px){
  .education_gitem_item-card{
    min-width: 33%;
    flex: 0 0 33%;
  }
  #education_gitem-item-selection{ gap:.5rem; }
}

@media (max-width:390px){
  .education_gitem_item-card{
    min-width: 33%;
    flex: 0 0 33%;
  }
}

/* ---------- DESKTOP >1024 px ---------- */
@media (min-width:1025px){

  .education_gitem_scroll-wrapper   { width:170px; }
  #education_gitem-scroll-indicator { font-size:26px; animation:education_gitem_bounce 1.8s infinite; }

  .education_gitem_arrow{ display:none; }

  .education_gitem_item-card {
    padding: 12px;
    max-height: 165px;
    max-width: 170px;
  }

  .education_gitem_item-card img {
    margin-bottom: 0.4rem;
    height: 70px;
  }

  .education_gitem_item-card .education_gitem_price {
        font-size: 18px;
        padding: 0.0rem 0.6rem;
  }

  #education_gitem-pagination { display: none !important; }
}