/* === Slots Accordion === */
.vr-slots{
  border-radius:14px;
  background: rgb(255 255 255 / 50%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(6px);
  margin: 0 auto 40px;
}

.vr-slots-header{
  all: unset;
  display:flex; align-items:center; justify-content:space-between;
  width:97%; padding:14px 18px 16px; cursor:pointer;
}
.vr-slots-title{
    color: #163b45;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1;
}
.vr-slots-chev{
  display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid #163b45;
  color:#163b45; font-size:16px; transform:rotate(0deg); transition:transform .2s ease;
}
.vr-slots.is-open .vr-slots-chev{ transform:rotate(180deg); }

/* Body with transition */
.vr-slots-body{display:none!important;
  overflow:hidden; max-height:0; opacity:0; transition:max-height .25s ease, opacity .2s ease;
  padding: 0 14px; /* برای هم‌تراز شدن با باکس قبلی */
}
.vr-slots.is-open .vr-slots-body{
  max-height:1200px; opacity:1; padding-bottom:14px;
}

.vr-slots .vanillaro-item-summary{
  background: transparent; border: 0; box-shadow: none;
  margin: 0; padding: 0px 10px 0px;
}
















/* ========== ITEM GRID + CARD ========== */
.vanillaro-item-grid{    display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;   /* وسط‌چین شدن کل ردیف */}

.vanillaro-item-card{
  background: rgb(255 255 255 / 50%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 12px rgba(0,0,0,.1);
  color: var(--ink-invert);
    border-radius: 14px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
  padding:20px 15px;
  text-align:center;height:100%;

}

.vanillaro-item-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}

.vanillaro-item-card.selected{outline:2px solid #feb273;background:rgba(255,255,255,.12)}
.vanillaro-item-card img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:0}
.vanillaro-item-card h4{font-size:1.4em !important;margin:6px 0;color:#163b45 !important;font-weight:600 !important;margin-bottom:0 !important}
.vanillaro-item-card p{font-size:.9em !important;color:#6b9c91;min-height:20px;margin-bottom:0 !important}
.vanillaro-item-card .vanillaro-select-item{margin-top:10px}
.vanillaro-item-actions{display:flex;justify-content:center;gap:8px;margin-top:0}
.vanillaro-item-actions .vanillaro-customize-item{background:transparent;color:#163b45;padding:0 5px 0 0;cursor:pointer;font-size:28px;border:0;margin-top:8px}
.vanillaro-item-card.disabled{opacity:.5;pointer-events:none}
.vanillaro-item-card.disabled .vanillaro-select-item{cursor:not-allowed;background:#ccc;color:#777}
.vanillaro-item-card .vanillaro-select-item:disabled{background:#35525b;color:#eaf5f4;border:1px solid #feb273;cursor:not-allowed;opacity:1}
.vanillaro-item-grid .vanillaro-item-card{
  flex: 0 1 calc((100% - 3*var(--vr-gap)) / 4);
  max-width: calc((100% - 3*var(--vr-gap)) / 4);
}


.vanillaro-best-badge{position:absolute;top:-10px;right:-10px;width:42px;height:42px;z-index:5}
.vanillaro-best-badge img{width:100%;height:auto}














/* ========== Addon step ========== */

/* =======================
   Add-on Group (accordion)
   ======================= */
.vanillaro-addon-group{margin-bottom:20px}
.vanillaro-addon-group-header{
  display:flex;align-items:center;justify-content:space-between;
  background:rgb(255 255 255 / 50%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.vanillaro-addon-group-header.open{background:rgb(255 255 255 / 50%)}
.vanillaro-addon-group-header img.addon-group-icon{width:42px;height:42px;object-fit:contain;margin-right:10px}
.vanillaro-addon-group-title{    color: #163b45;font-weight: 600;font-size: 1.2em;}
.vanillaro-addon-group-count{    margin-left: 6px;    font-size: 0.8em;    color: #6b9c91;    font-weight: 400;}
.vanillaro-addon-group-content{display:none;padding:10px 4px 0; }







.vanillaro-addons-right{
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  color: var(--ink-invert);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  align-items:center;justify-content:space-between;
  position:sticky;
  top:35px;
}










/* mobile */
@media (max-width: 768px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
    div#vanillaro-order-builder {
    margin-top: 0px;
}
.vanillaro-selection-wrapper {
    margin-top: 0 !important;
} 
    .vanillaro-item-card {
        background: rgb(255 255 255 / 70%);
}
.vanillaro-addon-type-a .type-a-actions .vanillaro-type-a-add-btn{
    margin-bottom:0 !important;
}
    .vanillaro-addons-right {
    width: 100%;
}
div#vanillaro-order-summary {
    width: 100%;
}    
    
    .package-title {
    margin: 75px 0 0px !important;

}
    
    
}






/* tablet */
@media (max-width: 1024px) {
  .container {
    padding: 20px;
  }


  
  
  
}







/* small screen */
@media (max-width: 480px) {
  .container {
    padding: 5px;
    font-size: 12px;
  }
}





















/* 3-ستونه */
@media (max-width: 1100px){
  .vanillaro-item-grid .vanillaro-item-card{
    flex-basis: calc((100% - 2*var(--vr-gap)) / 3);
    max-width:  calc((100% - 2*var(--vr-gap)) / 3);
  }
}

/* 2-ستونه */
@media (max-width: 780px){
  .vanillaro-item-grid .vanillaro-item-card{
    flex-basis: calc((100% - 1*var(--vr-gap)) / 2);
    max-width:  calc((100% - 1*var(--vr-gap)) / 2);
  }
}

/* 1-ستونه */
@media (max-width: 520px){
  .vanillaro-item-grid .vanillaro-item-card{
    flex-basis: 100%;
    max-width: 100%;
  }
}