/* =========================================================
   PEARL SLATE THEME — Vanillaro
   (drop-in: safe overrides for background, type & surfaces)
   ========================================================= */

/* --------- Design tokens --------- */
:root{
  --accent:      #FEB273;
  --accent-2:    #FFD28A;
  --ink-1:       #163b45;   /* main headings on light */
  --ink-2:       #2F3C40;   /* body on light */
  --ink-invert:  #EAF5F4;   /* text on dark glass */
  --muted:       #98A6AD;   /* secondary */
  --slate-0:     #EEF1F3;   /* pearl */
  --slate-1:     #E5EAEE;
  --slate-2:     #D6DDE3;
  --slate-3:     #C2CBD3;
  --slate-4:     #9FAAB3;   /* outer tint */
  --glass-bg:    rgba(22, 34, 38, 0.28);
  --glass-brd:   rgba(255, 255, 255, 0.18);
  --glass-sh:    0 8px 24px rgba(0,0,0,.18);
}

/* --------- Page background (Pearl Slate) --------- */
.vanillaro-bg li{ color: var(--ink-2); }
.vanillaro-bg .muted{ color: var(--muted); }

/* --------- Glass surfaces (dark-on-light readable) --------- */
.vanillaro-surface,
.vanillaro-addon-type-b-card{
  background: var(--glass-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-sh);
  color: var(--ink-invert);
}

/* قیمت‌ها و اکسنـت‌ها روی سطوح شیشه‌ای */
.vanillaro-type-a-price,
.vanillaro-type-b-price,
.vanillaro-type-c-item__controls .item-price{
  color: var(--accent-2) !important;
}

/* --------- Buttons (accent) --------- */
.vanillaro-select-item,
.vanillaro-change-package-btn,
#vanillaro-next-step,
.vanillaro-btn,
.addon-b-select-btn{
  background: #fbb273;
  color: #062026;
  border: 0;
  border-radius: 8px;
  padding: 5px 5px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.8em;
}

/* دکمه‌های ثانویه روی شیشه‌ای تیره */
.addon-b-info-btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink-invert);
}

/* نوار تب‌ها روی بک‌گراند جدید */
.group-tab-nav{
  padding: 12px 25px;
  font-size: 1em;
  font-weight: 500;
  color: #bfbfbf;
  border: 1px solid #bfbfbf;
  border-radius: 30px;
  cursor: pointer;
  transition: all .3s;
}
.group-tab-nav:hover{
  background: rgba(254,178,115,.18);
  color: var(--accent);
  border-color: var(--accent);
}
.group-tab-nav.active{
  color: #163b45;
  border: 1px solid #fbb273;
  background: #fbb273;
  font-weight: 500 !important;
  font-size: 1em;
}

/* =========================================================
   VANILLARO — STYLE (Frontend)
   ========================================================= */

/* ========== BUTTONS (shared) ========== */
.vanillaro-select-item,
.change-package-btn,
#vanillaro-next-step,
.vanillaro-next-step,
.vanillaro-select-addon,
.addon-controls button{
  background:#35525b;color:#eaf5f4;border-radius:5px;
  padding:8px 25px;font-weight:400;cursor:pointer;transition:.3s;font-size:.9em
}

.vanillaro-change-package-btn{
  background:#fbb273;color:#163b45;border-radius:5px;
  padding:8px 25px;font-weight:400;cursor:pointer;transition:.3s;font-size:.9em
}
.vanillaro-change-package-btn:hover{ background:#163b45;color:#fbb273; }

#vanillaro-next-step:hover,
.vanillaro-select-item:hover,
.change-package-btn:hover,
.vanillaro-change-package-btn:hover,
.vanillaro-select-addon:hover,
.addon-controls button:hover{
  background:#feb273;color:#173b45;border-color:#feb273
}

.vanillaro-change-package-btn.hidden{display:none !important}
.vanillaro-change-package-btn{font-weight:500;border:0;border-radius:5px}

/* ========== ORDER BUILDER WRAPPER ========== */
#vanillaro-order-builder{margin-top:70px}
.vanillaro-select-item.remove-mode{background:#ed5e68;color:#fff;border:0}

/* ========== TABS ========== */
.vanillaro-group-tabs-nav{display:flex;gap:15px;justify-content:center;margin:20px auto 20px;flex-wrap:wrap}

.group-tab-content{
  display: none;
  margin-inline: auto;
  padding-inline: var(--vr-gap);
  box-sizing: border-box;
}
.group-tab-content.active{display:block}

/* ========== GROUP TITLE ========== */
.vanillaro-group-title{
  font-size:1.4rem !important;font-weight:500;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center;text-align:center;color:#163b45 !important;margin:20px 0 10px 0
}
.vanillaro-group-title .group-badge{background:#feb273;color:#1e1f1f;padding:5px 15px;border-radius:6px;font-weight:600;font-size:1rem}
.vanillaro-group-title small{text-decoration:underline}

/* =========================================================
   ITEM SELECTION – Pearl Slate panel
   ========================================================= */
.vanillaro-selection-wrapper{margin:30px auto;max-width:1200px;padding:20px}
.vanillaro-selection-header{text-align:center;margin-bottom:20px}
.vanillaro-selection-intro{font-size:1.5em;color:#6b6b6b;max-width:100%;line-height:1.6;font-weight:600}
.vanillaro-selection-intro strong{color:#feb273}

/* پنل خلاصه/اسلات‌ها */
.vanillaro-item-summary{
  display:flex;justify-content:center;gap:0 30px;margin:0 auto 60px;padding:18px 14px 10px;
  flex-wrap:wrap;max-width:100%;border-radius:14px;
  background:
    linear-gradient(180deg, rgba(32,46,52,.55) 0%, rgba(32,46,52,.42) 60%, rgba(32,46,52,.36) 100%),
    rgba(14,26,30,.25);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(6px)
}
.vanillaro-summary-column{display:flex;flex-direction:column;align-items:center;min-width:unset;max-width:unset;flex:1 1 auto;}
.vanillaro-summary-column h4{
  color:#163b45 !important;
  padding:0 4px 10px !important;
  margin:0 0 16px !important;
  font-size:1.2em !important;
  font-weight:600 !important;
  text-align:center;
  border-bottom:1px solid #163b457a;
}
.vanillaro-summary-slot{
  width:100%;min-height:60px;padding:6px;border-radius:8px;margin-bottom:5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;
  transition:all .25s;font-size:.9em;color:#bfbfbf;background:rgba(255,255,255,.05);border:1px dashed #bfbfbf;
}
.vanillaro-summary-slot.filled{ background:#d3e4e4; color:#163b45; border:1px solid #6b9c91; }
.vanillaro-summary-slot strong{font-weight:600;font-size:1.08em;margin:0;line-height:1.2}
.vanillaro-summary-footer{flex:1 1 100%;margin:10px 0 0px;text-align:center}
.vanillaro-addons-note{font-size:1em;font-style:italic;color:#fbb273;line-height:1.5}

/* پیمایش به پایین */
#vanillaro-scroll-to-next{
  position:absolute;right:-25px;top:50%;transform:translateY(-50%);
  background:#feb273;color:#173b45;border:0;border-radius:50%;width:40px;height:40px;font-size:1.5em;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:background-color .3s,transform .3s;z-index:10
}
#vanillaro-scroll-to-next:hover{background:#f4e9e5;transform:translateY(-50%) scale(1.1)}

/* ========== GENERIC MODAL (legacy) ========== */
#vanillaro-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center}
#vanillaro-modal.active{display:flex !important}
#vanillaro-modal-content{position:relative;background:#fff;padding:30px;border-radius:16px;width:90%;max-width:500px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:1000}
#vanillaro-modal-content label{font-weight:700;margin-top:10px;display:block;font-size:1em}
#vanillaro-modal-content input,#vanillaro-modal-content select{width:100%;padding:10px;margin:6px 0 12px;border:1px solid #ccc;border-radius:8px;font-size:1em}
.vanillaro-close-btn{position:absolute;top:10px;right:16px;background:transparent;border:0;font-size:28px;color:#333;cursor:pointer}
.vanillaro-close-btn:hover{color:#c00}

/* ========== OPTIONS MODAL (Customize) ========== */
#vanillaro-options-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;font-family:'Darker Grotesque',sans-serif}
#vanillaro-options-modal.active,
#vanillaro-options-modal[style*="display: block"]{display:flex !important}
#vanillaro-options-modal .vanillaro-modal-content{position:relative;background:#fff;padding:40px 30px;border-radius:16px;width:90%;max-width:550px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
#vanillaro-options-modal .vanillaro-modal-title{font-size:26px;font-weight:600;margin-bottom:30px;color:#1e1f1f;text-align:center}
#vanillaro-options-modal .vanillaro-option-group{display:flex;flex-direction:column;margin-bottom:22px}
#vanillaro-options-modal .vanillaro-option-group label{font-size:1.1em;font-weight:500;display:flex;align-items:center;gap:8px;color:#1e1f1f;margin-bottom:10px}
#vanillaro-options-modal .vanillaro-group-icon{width:22px;height:22px;object-fit:contain;display:inline-block;border-radius:4px}
.vanillaro-radio-group{display:flex;flex-direction:column;gap:10px}
label.vanillaro-radio-option{margin-bottom:0;display:flex;align-items:center;cursor:pointer}
.vanillaro-radio-option input[type="radio"]{accent-color:#0f3d3e;margin-right:12px}
.vanillaro-radio-option input[type="radio"]:checked + span{font-weight:600}
.vanillaro-radio-option:hover{border-color:#0f3d3e66}
.option-label{font-weight:500}
.option-price{color:#0f3d3e;font-size:14px;font-weight:400;margin-left:8px;white-space:nowrap}
#vanillaro-options-modal .vanillaro-modal-footer{margin-top:35px;display:flex;justify-content:center;gap:20px}
#vanillaro-options-modal .vanillaro-modal-footer .button{padding:12px 26px;font-size:16px;border-radius:8px;border:0;cursor:pointer;font-weight:500;font-family:inherit}
#vanillaro-options-modal .vanillaro-modal-footer .button-primary{background:#0f3d3e;color:#fff}
#vanillaro-options-modal .vanillaro-modal-footer .button:hover{opacity:.9}
#vanillaro-options-modal .vanillaro-modal-close{position:absolute;top:10px;right:16px;background:transparent;border:0;font-size:26px;color:#333;cursor:pointer}
#vanillaro-options-modal .vanillaro-modal-close:hover{color:#c00}

/* ========== LOADER / ERROR ========== */
.vanillaro-loading{text-align:center;font-size:1.2em;color:#fff;padding:40px 0}
.vanillaro-error{text-align:center;color:#f33;font-size:1.1em;padding:20px 0}

/* =======================
   ADD-ONS — Layout (2-col)
   ======================= */
.vanillaro-addons-layout.two-column-layout{display:flex;gap:22px;align-items:flex-start;margin-top:18px}
.vanillaro-addons-left{flex:0 0 75%;max-width:75%}
.vanillaro-addons-right{flex:0 0 25%;max-width:25%}
@media (max-width:992px){
  .vanillaro-addons-layout.two-column-layout{flex-direction:column}
  .vanillaro-addons-left,.vanillaro-addons-right{flex:1;max-width:100%}
  .vanillaro-addons-right{position:static}
}

/* ===== Type A card (Add-ons) ===== */
.vanillaro-addon-type-a-card{
  background: rgb(255 255 255 / 59%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 12px;
  margin: 0 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.vanillaro-type-a-img img{width:100%;height:auto;border-radius:10px;display:block;margin-bottom:10px}
.vanillaro-type-a-desc{color:#9fb0bb;font-size:14px;line-height:1.6;margin-bottom:8px}
.vanillaro-type-a-price{color:#ffd28a;font-weight:700}

/* ===== Type C (items) ===== */
.vanillaro-type-c-desc{margin:6px 0 14px;color:#a9b4c0;font-size:14px}
.vanillaro-addon-type-c-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vanillaro-type-c-item-card{background:#102a30;border:1px solid #113740;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.vanillaro-type-c-item__img{width:100%;aspect-ratio:4/3;overflow:hidden}
.vanillaro-type-c-item__img img{width:100%;height:100%;object-fit:cover;display:block}
.vanillaro-type-c-item__meta{padding:10px 12px 12px}
.vanillaro-type-c-item__title{font-weight:700;color:#e8f1f7;margin-bottom:6px}
.vanillaro-type-c-item__desc{color:#9fb0bb;font-size:13px;line-height:1.5;margin-bottom:10px}
.vanillaro-type-c-item__controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.vanillaro-type-c-item__controls .item-price{font-weight:700;color:#ffd28a;white-space:nowrap}
.vanillaro-type-c-item__controls .qty-wrap input[type="number"]{width:20;padding:6px 8px;background:#0b2328;color:#e8f1f7;border:1px solid #1b4250;border-radius:8px}

/* ========== LOADER/ERROR (kept) ========== */
span.aed-symbol { color:#163b45; }

/* === Next Step CTA (to Add-ons) === */
.vanillaro-next-wrap{ display:flex; justify-content:center; margin:28px 0 60px; }
#vanillaro-next-to-addons{
  -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:340px; padding:14px 28px; border-radius:12px; border:none;
  background:linear-gradient(135deg, #ffd28a, #feb273);
  color:#163b45; font-size:1.1em; font-weight:600; letter-spacing:-0.01em; line-height:1;
  box-shadow:0 10px 20px rgba(14,20,27,.12), inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#vanillaro-next-to-addons:hover{
  transform:translateY(-1px);
  background: linear-gradient(135deg, #6b9c91, #163b45);
  box-shadow:0 14px 26px rgba(14,20,27,.18), inset 0 1px 0 rgba(255,255,255,.45);
  filter:brightness(1.02); color:#fff;
}
#vanillaro-next-to-addons:active{ transform:translateY(0) scale(.99); }
#vanillaro-next-to-addons:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; }

.vr-summary-line{ display:flex;align-items:center;justify-content:space-between;gap:5px;margin:0;color:#163b45;font-weight:600; }
.vr-summary-total{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0;
  font-weight:700; color:#ffd28a; background:linear-gradient(135deg, #6b9c91, #163b45);
  padding:10px 20px; border-radius:12px; font-size:1.1em; margin-top:20px;
}

button.vr-item-more{ background:none; border:none; color:#6b9c91; text-decoration:underline; font-size:.7em; }

/* Order Summary */
.vr-package-title{ display:block; font-weight:700; color:#6b9c91; line-height:1.2; }
.vr-package-price{ display:block; margin-top:2px; font-size:12px; line-height:1.1; color:#6b9c91; letter-spacing:.2px; opacity:.95;    text-align: right; }

.vr-items-toggle-btn{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.vr-items-toggle-text{ color:#163b45; letter-spacing:-0.2px; }
.vr-items-extra{ color:#6b9c91; font-size:12px; font-weight:normal; opacity:.95; }
.vr-items-extra.is-empty{ display:none; }

span#vr-sum-guests, span#vr-sum-date, span#vr-sum-time{ color:#6b9c91; font-weight:700; }

.vr-item-details ul li{ font-size:.8em; line-height:1; color:#6b9c91; margin-left:10px; }
#vr-sum-items{ background:#00000014; border-bottom-right-radius:5px; padding:10px 20px !important; border-top:2px solid #163b45; border-bottom-left-radius:5px; }
.vr-summary-subtitle{ margin-bottom:0 !important; }

#vanillaro-order-builder .vr-sum-list{ list-style:disc; margin:0 0 10px 7px; padding:0; }
#vanillaro-order-builder .vr-sum-item{ display:list-item; margin:0; padding:0; }
#vanillaro-order-builder .vr-sum-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#vanillaro-order-builder .vr-sum-title{ font-weight:500; color:#163b45; font-size:.9em; }
#vanillaro-order-builder .vr-link{ background:none; border:0; color:#6b9c91; text-decoration:underline; padding:0; cursor:pointer; font-size:.7em; }
#vanillaro-order-builder .vr-option-list{ margin:5px 0 0 5px; padding:0; list-style:disc; color:#cfe6ef; font-size:.9rem; line-height:1.5; }

.vanillaro-addon-summary h3{ text-align:center; color:#163b45 !important; }

/* ================================
   Type C Add-on (Accordion)
   ================================ */
.vanillaro-addon-type-c{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  margin:10px 10px 16px
}
.vanillaro-type-c-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; cursor:pointer; user-select:none; transition:background .2s ease, border-color .2s ease;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.vanillaro-type-c-header:hover{ background:rgba(255,255,255,.08); }
.vanillaro-type-c-header.open{ background:rgba(255,255,255,.10); }

.vc-left{ display:grid; gap:4px; min-width:0; }
.vc-title{ font-weight:600; color:#163b45; letter-spacing:-.1px; line-height:1; }
.vc-sub{ font-size:.9rem; color:#6b9c91; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.vc-right{ display:inline-flex; align-items:center; gap:10px; }
.vanillaro-type-c-select-btn{
  appearance:none; border:0; padding:8px 12px; border-radius:10px; background:#1f4b58; color:#e8f1f7;
  font-weight:600; line-height:1; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.18) inset; transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.vanillaro-type-c-select-btn:hover{ background:#1b4350; }
.vanillaro-type-c-select-btn:active{ transform:translateY(1px); }

.toggle-icon{ color:#163b45; font-weight:lighter; font-size:2.5rem; line-height:0; padding-bottom:15px; }
.toggle-icon:hover{ color:#fbb273; }
.vanillaro-type-c-header.open .toggle-icon{ transform:rotate(180deg); background:rgba(255,255,255,.18); }

.vanillaro-type-c-body{ display:none; padding:14px 16px 16px; animation:vcFade .18s ease; }
.vanillaro-type-c-header.open + .vanillaro-type-c-body{ display:block !important; }
.vanillaro-addon-type-c:not(.vr-c-ready) > :not(.vanillaro-type-c-header){ display:none !important; }

.vanillaro-addon-type-c-label{ display:block; font-weight:600; color:#cfe6ef; margin-bottom:8px; }
.vanillaro-type-c-count{
  width:140px; margin-top:8px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#eef6fb; outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.vanillaro-type-c-count:focus{ border-color:rgba(76,189,149,.65); background:rgba(255,255,255,.10); }

.vanillaro-type-c-open-modal{
  margin-top:12px; padding:10px 14px; border:0; border-radius:10px; background:#2a5f6f; color:#e8f1f7; font-weight:700;
  cursor:pointer; transition:background .2s ease, transform .06s ease;
}
.vanillaro-type-c-open-modal:hover{ background:#255765; }
.vanillaro-type-c-open-modal:active{ transform:translateY(1px); }

.vanillaro-type-c-item-list{
  margin-top:12px; padding:10px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}

/* Small screens */
@media (max-width: 520px){
  .vanillaro-type-c-header{ padding:12px; }
  .vc-right{ gap:8px; }
  .vanillaro-type-c-count{ width:120px; }
}

/* Tiny reveal anim */
@keyframes vcFade{
  from{ opacity:0; transform:translateY(-2px); }
  to  { opacity:1; transform:translateY(0); }
}

/* توضیح کوتاه کنار عنوان ردیف Add-on */
.vr-addon-sub{ margin-left:8px; font-weight:400; font-size:.9em; color:#9fb0bb; }

/* ================================
   Type C — Horizontal Compact list
   ================================ */
.vanillaro-addon-type-c.is-compact .vanillaro-addon-type-c-item-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px;
}
.vanillaro-addon-type-c.is-compact .vr-c-item{
  display:flex; gap:12px; align-items:stretch; background:rgb(255 255 255 / 59%); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px;
  box-shadow:0 2px 9px rgba(0,0,0,.16);
}
.vanillaro-addon-type-c.is-compact .vr-c-thumb{ flex:0 0 110px; height:90px; border-radius:10px; overflow:hidden; background:#0b2328; }
.vanillaro-addon-type-c.is-compact .vr-c-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vanillaro-addon-type-c.is-compact .vr-c-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.vanillaro-addon-type-c.is-compact .vr-c-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vanillaro-addon-type-c.is-compact .vr-c-title{
  font-weight:600; color:#163b45; line-height:1.2; font-size:1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vanillaro-addon-type-c.is-compact .vr-c-price{
  color:#163b45; white-space:nowrap; font-size:.9em; background:linear-gradient(135deg,#ffd28a,#feb273);
  padding:2px 10px; border-radius:5px;
}
.vanillaro-addon-type-c.is-compact .vr-c-desc{
  color:#163b45b3; font-size:.9em; line-height:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vanillaro-addon-type-c.is-compact .vr-c-ctrl{
  margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
}
.vanillaro-addon-type-c.is-compact .qty-wrap input[type="number"]{
  height:25px; padding:0; background:#fbb27340; color:#163b45; border-radius:5px; font-size:.8em; text-align:center;
}
.vanillaro-addon-type-c.is-compact .vr-cust-btn{ padding:6px 10px; font-size:.82rem; border-radius:8px; background:#214a59; color:#e8f1f7; }
.vanillaro-addon-type-c.is-compact .vr-cust-btn:hover{ background:#1d4150; }

@media (min-width:1440px){
  .vanillaro-addon-type-c.is-compact .vanillaro-addon-type-c-item-grid{
    grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  }
}

/* ===== Summary layout helpers (VR) ===== */
.vr-sum-list{list-style:none;margin:0;padding:0}
.vr-sum-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vr-sum-addon-item{padding:6px 0}
.vr-sum-addon-item-title{display:flex;align-items:center;gap:6px;line-height:1.4;font-size:.8em;letter-spacing:-0.01em;}
.vr-sum-addon-item-title .vr-inline-total{margin-left:auto;font-weight:500;}
.vr-sum-addon-base{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:.8em;margin:4px 0;color:#6b9c91;}
.vr-option-list{list-style:disc;margin:6px 0 0 18px;padding:0}
.vr-option-list li{display:flex;align-items:center;gap:8px}
.vr-option-list li .vr-right{margin-left:auto;white-space:nowrap;opacity:.9}
.vr-sum-amount{font-weight:500;font-size:.9em;}
.vr-addon-remove{margin-left:3px;border:0;cursor:pointer;line-height:1;background:none;color:red;}
.vr-addon-remove:hover{background:#e6d9d9}
.vr-addon-item-toggle{background:none;border:none;padding:0;}
.vr-sum-addon-item-details{background:#102a3014;padding:1px 5px !important;line-height:1;border-left:1px solid #102a30;}
button.vanillaro-btn.item-add-btn{border:1px solid #fbb273;background:none;color:#163b45 !important;}
button.vanillaro-btn.item-add-btn:hover{border:1px solid #fbb273;background:linear-gradient(135deg,#ffd28a,#feb273);color:#163b45 !important;}
ul.vr-option-list li{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:.8em;margin:4px 0;color:#6b9c91;}

/* چیدمان ستون‌ها داخل بخش‌های مختلف WP/Elementor */
.vanillaro-bg .elementor-row,
.vanillaro-bg .wp-block-columns.is-layout-flex{
  justify-content:flex-start !important;
  gap: clamp(16px, 2vw, 24px) !important;
}
.vanillaro-bg .wp-block-column,
.vanillaro-bg .elementor-column{ margin:0 !important; }

/* اسلات‌ها، بدنه انتخاب و … */
#vr-slots.open #vr-slots-body{display:block!important}
.vanillaro-selection-footer{ text-align:center; margin-top:50px; }
#vr-slots-body, .vr-slots__body { display:none; }
#vr-slots.open #vr-slots-body, .vr-slots.is-open .vr-slots__body { display:block; }
.vr-hidden{ display:none !important; }

/* ردیف کنترل‌ها: چینش افقی */
.vr-c-ctrl, .vanillaro-type-c-item__controls{
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
}
.vr-c-ctrl .qty-wrap, .vanillaro-type-c-item__controls .qty-wrap{ order:1; margin-right:auto; }
.vr-c-ctrl .vr-customize-icon{ order:2; }
.vr-c-ctrl .item-add-btn{ order:3; }
.vr-c-ctrl .vr-qty{ margin-right:auto; }

/* Compact controls */
.vanillaro-addon-type-c.is-compact .vr-c-ctrl{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.vanillaro-addon-type-c.is-compact .vr-c-ctrl .qty-wrap{ margin-right:auto; }
.vr-customize-icon .vr-gear{ display:block; width:18px; height:18px; }

/* ذخیره/لغو در مودال‌های سفارشی‌سازی */
button.vanillaro-btn.vr-opt-save{
  background:#0f3d3e; color:#fff; padding:12px 26px; font-size:16px; border-radius:8px; border:0; cursor:pointer; font-weight:500; font-family:inherit;
}
button.vanillaro-btn.vr-opt-cancel{
  padding:12px 26px; font-size:16px; border-radius:8px; border:0; cursor:pointer; font-weight:500; font-family:inherit; background:#efefef;
}

/* گروه‌های خلاصه Add-ons */
button.vr-addon-group-toggle{ background:none; border:none; padding:0; font-size:.7em !important; }
.vr-sum-addon-group-details{ padding-left:10px; }
ul#vr-sum-addons{
  background:#00000014; border-bottom-right-radius:5px; border-top:2px solid #163b45; border-bottom-left-radius:5px; padding:5px !important;
}

/* =======================
   TYPE A — Layout & style
   ======================= */
.vanillaro-addon-type-a{
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  margin: 10px 10px 16px;
}
.vanillaro-addon-a-content{ display:flex; flex-direction:column; justify-content:flex-start; flex:1; }
.vanillaro-addon-a-content h3{ font-size:1.3rem; margin-bottom:8px; }
.vanillaro-addon-a-content p{ flex-grow:0; margin-bottom:10px; }
.vanillaro-addon-type-a img{ width:200px; height:200px; object-fit:cover; border-radius:8px; }
.vanillaro-addon-type-a-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; user-select:none;
  transition:background .2s ease, border-color .2s ease; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.vanillaro-type-a-header-left{ display:grid; gap:4px; min-width:0; }
.vanillaro-type-a-header-right{ display:inline-flex; align-items:center; gap:10px; }
.vanillaro-type-a-title{ font-weight:600; color:#163b45; letter-spacing:-.2px; line-height:1.1; }
.addon-toggle-btn-a{
  all:unset; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:#163b45; cursor:pointer; user-select:none;
}
.vra-acc__icon{ color:#163b45; font-weight:lighter; font-size:2.5rem; line-height:0; padding-bottom:15px; }

/* ===== Type A layout ===== */
.vanillaro-addon-type-a .vanillaro-type-a-card-inner{
  display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start;
}
.vanillaro-addon-type-a .type-a-media{
  width:200px; height:200px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.05);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.vanillaro-addon-type-a .type-a-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vanillaro-addon-type-a .type-a-media__placeholder{ width:100%; height:100%; background:linear-gradient(180deg,#2b3b44, #1f2a30); }
.vanillaro-addon-type-a .type-a-info{ min-width:0; }
.vanillaro-addon-type-a .type-a-title{
  font-size:1.3em; font-weight:600; color:#163b45; letter-spacing:-.2px; line-height:1.1; margin-bottom:10px;
}
.vanillaro-addon-type-a .type-a-desc{ color:#163b45b3; font-size:1em; line-height:1; }
.vanillaro-addon-type-a .type-a-meta{ display:grid; gap:12px; }
.vanillaro-addon-type-a .type-a-price .label{ opacity:.75; margin-right:6px; font-size:1.1em; }
.vanillaro-addon-type-a .type-a-ctrl{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }

/* qty */
.vanillaro-addon-type-a .qty-control{
  display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:6px;
}
.vanillaro-addon-type-a .qty-control button{
  width:25px; height:25px; border:0; border-radius:5px; background:#f2eee9; cursor:pointer; font-size:1em; line-height:1;
}
.vanillaro-addon-type-a .qty-control button:disabled{ opacity:.5; cursor:not-allowed; }
.vanillaro-addon-type-a .qty-control input[type="number"]{
  border-radius:5px; width:30px; height:25px; padding:0; text-align:center; border:0; background:#fbb27340; color:inherit; font-size:1em;
}

/* add button */
.vanillaro-addon-type-a .type-a-actions .vanillaro-type-a-add-btn{
  border:1px solid #fbb273; background:none; color:#163b45 !important; margin:10px; border-radius:8px; padding:7px 25px; font-weight:500; cursor:pointer; font-size:.9em;
}
.vanillaro-addon-type-a .type-a-actions .vanillaro-type-a-add-btn:hover{
  background-image:linear-gradient(135deg, #ffd28a, #feb273); color:#163b45;
}
.vanillaro-addon-type-a[data-vr-locked="1"] .type-a-actions .vanillaro-type-a-add-btn{ background:#fbb273; color:#163b45; }
.vanillaro-addon-type-a .addon-toggle-btn-a{ width:36px; height:36px; border-radius:10px; border:0; background:rgba(255,255,255,.08); cursor:pointer; }

/* Responsive */
@media (max-width: 640px){
  .vanillaro-addon-type-a .vanillaro-type-a-card-inner{ grid-template-columns:1fr; }
  .vanillaro-addon-type-a .type-a-media{ width:100%; height:180px; }
}

.vanillaro-qty-control{ display:flex; align-items:center; gap:5px; background:#0c2f30; padding:5px 10px; border-radius:6px; }
.vanillaro-qty-control button{ background:none; border:none; color:white; font-size:1.2rem; cursor:pointer; }
.vanillaro-qty-control input{ width:40px; text-align:center; border:none; background:transparent; color:white; font-size:1rem; }

.vanillaro-addon-a-actions .vanillaro-add-btn{
  background:#feb273; border:none; color:#1e1f1f; padding:8px 16px; border-radius:6px; cursor:pointer; font-weight:bold;
}
.type-a-info{ display:flex; flex-direction:column; height:100%; }
.type-a-price .value{ font-weight:bold; color:#163b45; font-size:1em; }
.type-a-price{
  background:linear-gradient(135deg, #ffd28a, #feb273); padding:2px 10px; border-radius:5px; min-width:unset; width:auto; white-space:nowrap;
}
.vanillaro-addon-type-a .qty-increase.is-locked,
.vanillaro-addon-type-a .qty-decrease.is-locked,
.vanillaro-addon-type-a .vanillaro-type-a-qty-input.is-locked{ opacity:.6; cursor:not-allowed; }

/**************************
 * Type‑B — Accordion + Grid + Cards (Add-ons)
 **************************/
.vrb-acc{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  margin: 10px 10px 16px;
}
.vrb-acc__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; cursor:pointer; user-select:none;
  transition: background .2s ease, border-color .2s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  position:relative; z-index:1; pointer-events:auto;
}
.vrb-acc__title{ font-weight:600; color:#163b45; letter-spacing:-.2px; line-height:1.1; }
.vrb-acc__toggle{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; color:#163b45; cursor:pointer; user-select:none;
  position:relative; z-index:1; pointer-events:auto;
}
.vrb-acc__icon{ color:#163b45; font-weight:300; font-size:2.5rem; line-height:0; padding-bottom:15px; }
.vrb-acc__panel{ padding:15px; }
.vrb-acc__panel[hidden]{ display:none !important; }

.vrb-acc__panel .vrb-grid{
  display:grid; gap:15px; align-items:stretch;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1100px){ .vrb-acc__panel .vrb-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .vrb-acc__panel .vrb-grid{ grid-template-columns: 1fr; } }

.vrb-card{
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-areas:
    "img   img"
    "title title"
    "short short"
    "info  info"
    ".     ."
    "price add";
  row-gap:3px;
  box-sizing:border-box; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease, filter .18s ease;
  width:100%; height:100%; background:rgb(255 255 255 / 59%); border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden;
}
.vrb-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.vrb-card.vrb-disabled{ opacity:.55; filter:grayscale(20%); pointer-events:none; }

.vrb-card__img{ width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; grid-area:img; }
.vrb-card__img-el, .vrb-card__img img{ width:100%; height:100%; display:block; object-fit:cover; }
.vrb-card__img-ph{ width:100%; height:100%; background:linear-gradient(120deg,#e6edf2,#f4f7f9); }

.vrb-card__title{ font-weight:600; color:#163b45; align-items:center; gap:8px; grid-area:title; text-align:center; font-size:1.3em; }
.vrb-badge{ font-size:14px; padding:2px 5px; border-radius:6px; background:#2b3f50; color:#ffd28a; }
.vrb-card__short{ color:#163b45b3; font-size:1em; line-height:1; grid-area:short; text-align:center; }

.vrb-card__actions{ display:contents; }
.vrb-card .addon-b-info-btn{
  grid-area:info; justify-self:center; background:transparent; color:#6b9c91; font-weight:400; font-size:.8em; padding:0;
}
.vrb-card__price{
  grid-area:price; align-self:end; justify-self:start; margin:10px; color:#163b45; font-size:1em;
  background:linear-gradient(135deg,#ffd28a,#feb273); padding:2px 10px; border-radius:5px; width:auto; white-space:nowrap;
}
.vrb-card .vrb-add-btn{
  grid-area:add; justify-self:end;
}
.vrb-btn{ appearance:none; border:0; border-radius:10px; padding:8px 12px; line-height:1; font-weight:600; cursor:pointer; transition: transform .06s ease, filter .18s ease, opacity .18s ease; }
.vrb-btn:active{ transform: translateY(1px); }
.vrb-btn.vrb-btn--ghost{ background: #214a59;
    color: #e8f1f7;
    padding: 3px 10px 3px 7px;
    border-radius: 5px; }
.vrb-btn.vrb-btn--ghost:hover{ filter:brightness(1.05); }
.vrb-btn.vrb-add-btn{
  border:1px solid #fbb273; background:none; color:#163b45 !important; margin:10px; border-radius:8px; padding:5px 15px; font-weight:500; cursor:pointer; font-size:.9em;
}
.vrb-btn.vrb-add-btn:hover{ background-image:linear-gradient(135deg,#ffd28a,#feb273); color:#163b45; }
.vrb-acc__empty{ color:#9fb0bb; margin:6px 2px; }

#vrb-modal[hidden]{ display:none; }
#vrb-modal{ position:fixed; inset:0; z-index:9999; }
#vrb-modal .vrb-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
#vrb-modal .vrb-modal__dialog{
  position:relative; z-index:1; width:min(600px,92vw); margin:8vh auto 0; background:#fff; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.28); padding:22px;
}
#vrb-modal .vrb-modal__title{ margin:0 0 10px; color:#1e1f1f; font-weight:700; }
#vrb-modal .vrb-modal__content{ color:#37424a; line-height:1.6; }
#vrb-modal .vrb-modal__close{
  position:absolute; top:10px; right:14px; background:#f4f6f8; border:1px solid #e2e7ec; border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:20px; line-height:1;
}

/* ورودی‌های qty بدون فلش */
.item-qty-input::-webkit-inner-spin-button,
.item-qty-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.item-qty-input{ -moz-appearance:textfield; }

/* الگوی نمایش قیمت داخل کارت‌های Add-on Type‑B */
.vrb-price{ display:inline-flex; align-items:baseline; gap:4px; }
.vrb-price-amount{ font-weight:bold; }
.vrb-price-unit{ font-size:.8em; opacity:.85; }

/* Footer تایپ A */
.type-a-footer{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:10px; }
.type-a-footer-left{ display:flex; align-items:center; gap:15px; }
.qty-control{ display:flex; align-items:center; gap:5px; }
.type-a-actions{ display:flex; align-items:center; }

/* ورودی‌های شمارنده Type‑A */
.vanillaro-type-a-qty-input::-webkit-inner-spin-button,
.vanillaro-type-a-qty-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.vanillaro-type-a-qty-input{ -moz-appearance:textfield; }

/* CTA پایانی سفارش */
div#vr-summary-ctas{ margin-top:30px !important; display:flex; justify-content:center; }
button#vr-confirm-order{
  color:#163b45; font-size:1.1em; font-weight:600; background:linear-gradient(135deg, #ffd28a, #feb273);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 10px 20px rgba(14,20,27,.12), inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  min-width:340px; padding:14px 28px; border-radius:12px; border:none; letter-spacing:-0.01em; line-height:1;
}
button#vr-confirm-order:hover{
  color:#fff; background:linear-gradient(135deg, #6b9c91, #163b45);
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(14,20,27,.18), inset 0 1px 0 rgba(255,255,255,.45);
  filter:brightness(1.02);
}








/* =========================================================
   Vanillaro — Package Cards (no‑flip) + Shared Details Modal
   ========================================================= */

/* ===== Grid: 4 / 2 / 1 ستون ===== */
#vanillaro-package-selection{
  --col: clamp(250px, 24vw, 320px);
  --gap: clamp(16px, 2vw, 24px);

  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(var(--col), 1fr));

  /* ظرف رو به اندازه ۴ کارت محدود کن تا کارت‌ها عریض نشن */
  max-width: calc(4 * var(--col) + 3 * var(--gap));
  margin-inline: auto;
}
@media (max-width:1024px){
  #vanillaro-package-selection{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  #vanillaro-package-selection{ grid-template-columns:1fr; }
}

/* ===== Card ===== */
.vanillaro-package-card{
  width:100%;
  max-width:none;
  margin:0;
  background:#ffffff80;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  padding:15px;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease;
  min-height: 420px;
}
.vanillaro-package-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}



/* حالت‌های انتخاب/غیرفعال که JS ست می‌کند */
.vanillaro-package-card.dimmed{ opacity:.35; filter:grayscale(.6) contrast(.9); }
.vanillaro-package-card.zoomed{ transform:translateY(-2px) scale(1.01); }
.vanillaro-package-card.selected{ outline:1px solid #feb273; outline-offset:2px; }

/* Media */
.vanillaro-package-card .pkg-media,
.vanillaro-package-card .floating-image-wrapper{
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  margin:0px;
  box-shadow:0 6px 12px rgba(0,0,0,.08);
}

.vanillaro-package-card .pkg-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

@media (max-width:992px){ .vanillaro-package-card .pkg-media{ aspect-ratio:4/3; } }
@media (max-width:560px){ .vanillaro-package-card .pkg-media{ aspect-ratio:3/2; } }
.vanillaro-package-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Texts */
.package-title, .pkg-title{
font-size: 1.6em !important;
    font-weight: 600 !important;
    margin: 8px 2px 2px;
    color: #163b45 !important;
    text-align: center;
    line-height: 1 !important;
}
.pkg-subtitle,
.vr-pkg-subtitle{ margin: 5px 0 10px !important;
    color: #5b6a70;
    font-size: .95rem;
    text-align: center;
        line-height: 1;}

.group-info{
  color:#163b45;
  font-size:1rem;
  line-height:1.35;
  margin:0 2px 8px;
}

/* Price pill */
.vanillaro-package-price{
  margin:8px auto 0;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#FFD28A,#FEB273);
  color:#163b45;
  font-weight:600;
}

.pkg-price-pill{
  margin-top:auto;         /* این خط، فوتر کارت را به پایین می‌چسباند */
  margin-bottom:10px;
  display:inline-flex;
  align-self:center;
  align-items:baseline;
  gap:6px;
  padding:6px 12px;
  border-radius:10px;
  background:linear-gradient(135deg,#FFD28A,#FEB273);
  color:#163b45;
  font-weight:600;
width: 100%;
    justify-content: center;
}

.pkg-price-pill .amount {
    font-weight: 700;
    font-size: 1.1em;
}

.pkg-price-pill .unit {
    font-size: 0.9em;
    font-weight: 400;
}

.vr-price-label{ font-weight:500; opacity:.9; }
.vr-price-amount{ font-size:1.1em; }
.vr-price-unit{ font-size:.85em; opacity:.9; }

/* Actions */
.vr-actions, .pkg-ctas{
  display:flex;
  gap:10px;
  margin-top:0px;
}
.vr-actions button, .pkg-ctas button{
  flex:1;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  font-size:.95rem;
  cursor:pointer;
  transition:filter .2s ease, transform .06s ease, box-shadow .2s ease;
  font-weight: 500;
}



.vr-actions button:active, .pkg-ctas button:active{ transform:translateY(1px); }

/* Select / Change / Details */
.select-package-btn{
  background:#0f3d3e; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.18) inset;
}
.select-package-btn:hover{ filter:brightness(1.05); }

.vanillaro-change-package-btn{
  background:#feb273; color:#1e1f1f; font-weight:600;
}
.vanillaro-change-package-btn:hover{ filter:brightness(1.05); }

.vr-details-btn{
  background:#eef1f3; color:#163b45; font-weight:600;
}
.vr-details-btn:hover{ filter:brightness(1.03); }

/* پنل داخلی details (قدیمی) غیر فعال */
.vr-details-panel{ display:none !important; }

.pkg-modal-footer{
  margin-top:auto;
  text-align:center;
  padding-top:15px;
}
/* =========================================================
   Shared Details Modal (Centered, High z-index)
   =========================================================


/* حالت hidden با HTML attribute */
#vr-package-details-modal[hidden]{ display:none; }

/* ظرف مودال: با Flex وسط‌چین می‌شود.
   JS هنگام باز کردن باید display:flex ست کند. */
#vr-package-details-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;              /* بالاتر از همه لایه‌ها */
  display: none;                /* با JS → flex می‌شود */
  align-items: center;          /* مرکز عمودی */
  justify-content: center;      /* مرکز افقی */
  padding: 24px;
}
.vr-modal-open{ overflow:hidden; }

/* Backdrop */
#vr-package-details-modal .vr-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* Dialog */
#vr-package-details-modal .vr-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(720px, 94vw);
  margin: 0;                    /* مرکز واقعی، بدون مارجین بالا */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

/* Close button */
#vr-package-details-modal .vr-modal__close{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border:0; border-radius:10px;
  background:#f4f6f8; color:#333; font-size:22px; line-height:1;
  cursor:pointer;
}
#vr-package-details-modal .vr-modal__close:hover{ filter:brightness(1.05); }

/* Hero image */
.vr-pkg-hero{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#f2f4f6; }
.vr-pkg-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Head: سنتر کامل محتوا */
.vr-pkg-head{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 18px 8px; text-align:center;
}
.vr-pkg-head h3{ margin:0; font-size:1.5rem; font-weight:700; color:#163b45; }
.vr-pkg-price{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD28A, #FEB273);
    color: #163b45;
    font-weight: 700;
    margin: 15px;
    justify-content: center;
}

/* Body (HTML از ادمین) */
.vr-pkg-body{
  padding: 8px 18px 0px;
  color:#2f3c40;
  line-height:1.65;
  overflow: visible !important;               /* اسکرول داخل دیالوگ */
  max-height: none !important;
}
.vr-pkg-body p{ margin:0 0 10px; }
/* لیست‌ها بهتره چپ‌چین بمونن برای خوانایی */
.vr-pkg-body ul{ margin:0px; text-align:left; }
.vr-pkg-body img{ max-width:100%; height:auto; border-radius:8px; }

/* Modal CTAs */
.vr-pkg-ctas{
  display:flex; gap:10px; padding:0 18px 18px; margin-top:auto;
}
.vr-pkg-ctas .select-package-btn{
  flex:1; background:#0f3d3e; color:#fff; border-radius:10px; padding:12px 16px;
}
.vr-pkg-ctas .select-package-btn:hover{ filter:brightness(1.05); }
.vr-pkg-ctas .vr-modal__dismiss{
  flex:1; border:0; border-radius:10px; padding:12px 16px;
  background:#eef1f3; color:#163b45; font-weight:600; cursor:pointer;
}
.vr-pkg-ctas .vr-modal__dismiss:hover{ filter:brightness(1.03); }

/* Small screens */
@media (max-width:560px){
  #vr-package-details-modal{ padding: 12px; }
  #vr-package-details-modal .vr-modal__dialog{ width: 96vw; }
}

/* Focus ring برای دسترس‌پذیری */
button:focus-visible, [role="button"]:focus-visible, a:focus-visible{
  outline:2px solid #163b45; outline-offset:2px;
}

/* ===== Package groups inside modal ===== */
.vr-pkg-groups{
   margin: 2px 2px 10px;
  color:#163b45;
  font-size:1rem;
  line-height:1.25;
}
.pkg-groups{
    margin: 2px 2px 10px;
    color: #163b45;
    font-size: 1rem;
    background: #103d3e0f;
    border-radius: 10px;
    padding: 13px;
    opacity: 0.8;
}
.pkg-group-row{     display: flex;
    gap: 6px;
    align-items: center;
    padding-top: 0;
    line-height: 1.3;
    justify-content: left;
    font-weight: 600;
}
.pkg-group-row .sep{ opacity:.6; }

.pkg-group-row strong {
    font-size: 1em;
    font-weight: 500 !important;
    color: #163b45 !important;
}

.vr-modal-groups{
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 2px;
}
.vr-modal-groups li{
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #2f3c40;
  line-height: 1.35;
}
.vr-modal-groups li strong{
  color: #163b45;
  font-weight: 700;
}
.vr-modal-groups .vr-dot{
  opacity: .7;
}
.vr-modal-groups .vr-count{
  color: #6b7a80;
  font-size: .95em;
}

section.vr-pkg-desc {
    line-height: 1.2;
}

.vanillaro-field .vanillaro-error{margin-top:6px;font-size:12px;color:#d33}
.vanillaro-invalid{border-color:#d33 !important;box-shadow:0 0 0 2px rgba(211,51,51,.08)}



/* ===== Compact Summary (chips) ===== */
#vanillaro-item-summary {
  --vr-sum-maxh: 240px;   /* سقف ارتفاع باکس خلاصه */
  --vr-gap: 14px;

  display: block !important;            /* ← flex قبلی را خنثی کن */
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(254,178,115,.08), transparent 60%),
    radial-gradient(70% 90% at 100% 20%, rgba(22,59,69,.06), transparent 65%),
    #ffffffba;
  border: 1px solid rgba(22,59,69,.08);
  box-shadow: 0 10px 26px rgba(14,20,27,.09);
  overflow: hidden;
}

/* گرید تمام‌عرض ستون‌های خلاصه (فقط داخل باکس) */
#vanillaro-item-summary .vr-sum-grid{
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--vr-gap);
  overflow: auto;                      /* اسکرول داخلی تا صفحه نپره */
  padding-right: 4px;                  /* برای اسکرول‌بار */
}

/* اگر ساختار قدیمی هنوز رندر می‌شود، عرض‌های مین/مکس را خنثی کن */
.vanillaro-summary-column{
  min-width:unset !important;
  max-width:unset !important;
  flex:1 1 auto !important;
}

/* ستون هر گروه */
#vanillaro-item-summary .vr-sum-col{
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55));
  border: 1px solid rgba(22,59,69,.08);
  border-radius: 12px;
  padding: 10px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#vanillaro-item-summary .vr-col-title{
  font-weight:700; color:#163b45; text-align:left;
  font-size:.95rem; letter-spacing:-.2px; margin:0 0 6px;
  border-bottom:1px solid #163b4520; padding-bottom:4px;
}

/* ظرف اسلات‌های گروه */
#vanillaro-item-summary .vr-sum-tray{
  display:grid;                 /* ← فقط گرید؛ بلاک را حذف کردیم */
  grid-template-columns:1fr;
  gap:6px;
  padding:14px 16px;
}

/* اسلات خالی (کوچک و تمیز) */
#vanillaro-item-summary .vr-slot{
  border:1px dashed #bfbfbf; border-radius:8px; padding:8px;
  text-align:center; color:#98A6AD; font-size:.85rem; background:#ffffff0d;
}

/* چیپ آیتم انتخاب‌شده */
#vanillaro-item-summary .vr-chip{
  display: grid;
  grid-template-columns: 10px 1fr;      /* dot | text */
  grid-template-rows: auto auto;        /* title | sub */
  column-gap: 8px;
  align-items: center;
  border:1px solid #eadcc9; background:#f7f3ee;
  border-radius:10px; padding:8px 10px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#vanillaro-item-summary .vr-chip::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#163b45; opacity:.6;
  grid-column:1; grid-row:1 / span 2;   /* spans both rows */
  align-self:start; margin-top:3px;
}
.vr-chip-title{   grid-column:2; grid-row:1;
  font-weight:600; color:#163b45; font-size:.92rem; line-height:1.2; }
#vanillaro-item-summary .vr-chip .vr-chip-sub{
  grid-column:2; grid-row:2;
  margin-left:0; font-weight:600; opacity:.9;
  color:#6b6a70; font-size:.8rem; line-height:1;
}

/* نوت پایانی خلاصه */
#vanillaro-item-summary .vr-sum-note{
  grid-column:1/-1; text-align:center; color:#fbb273; font-style:italic;
  font-size:1.1rem; margin-top:6px;
}

/* تب‌ها – فید ظریف هنگام تعویض */
.group-tab-content{ display:none; opacity:0; transition:opacity .18s ease; }
.group-tab-content.active{ display:block; opacity:1; }

/* ریسپانسیو */
@media (max-width:640px){
  #vanillaro-item-summary .vr-sum-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}


div#vr-guests-discount {
    text-align: center;
    background: #eaf5f4;
    padding: 3px;
    border-radius: 10px;
}

.group-tab-content {
    margin-bottom: 30px;
}


#vanillaro_field_1, #vanillaro_field_1_time {
    margin-bottom: 0px !important;
}

small.vr-dt-sub {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.vr-qty .qty-btn {
    height: 25px;
    padding: 0;
    background: #fbb2731c;
    color: #163b45;
    border-radius: 5px;
    font-size: .7em;
    text-align: center;
    min-width: 25px !important;
    border: none;
}

button.vanillaro-customize-item {
    border: none;
    background: none;
    font-size: 1.6em !important;
    line-height: 1;
    padding: 0 !important;
}

span.vr-min-inline {
    font-size: 0.8em;
}

.vr-sum-row.vr-summary-discount {
    margin-top: 10px;
}

/* دقیقا 1 کارت → وسط (ستون 2 و 3) */
#vanillaro-package-selection > .vanillaro-package-card:only-child{
  grid-column: 2 / span 2;
}

/* دقیقا 2 کارت → ستون‌های وسط (2 و 3) */
#vanillaro-package-selection > .vanillaro-package-card:nth-child(1):nth-last-child(2){ grid-column:2; }
#vanillaro-package-selection > .vanillaro-package-card:nth-child(2):nth-last-child(1){ grid-column:3; }

/* ریسپانسیو: تبلت و موبایل مثل قبل */
@media (max-width:1024px){
  #vanillaro-package-selection{
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-width: none;
  }
}
@media (max-width:600px){
  #vanillaro-package-selection{ grid-template-columns: 1fr; }
}



/* اطمینان: خود گرید هم تمام‌قد و وسط بایسته */
#vanillaro-package-selection{
  margin-inline:auto;
  justify-content:center;
}

#vr-guests-messages ul {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
}
#vr-guests-messages li {
  font-size: 13px;
  line-height: 1.5;
}
#vr-guests-messages .vanillaro-error {
  color: #d93025; /* قرمز */
  text-align:left;
  padding: 5px !important;
}
#vr-guests-messages .vanillaro-note {
  color: #555;
}

    span.vr-sum-amount {
    color: #6b9c91;
    font-weight: 700;
}


.vr-summary-discount .vr-sum-right .vr-sum-amount {
    color: #ff6f6f;
}


.vnlr-table thead th {
    border-top-left-radius: 0 !important;
}