:root{
  --vp-accent-color:#bf9e68;
  --vp-accent-rgb:191, 158, 104;
}

/* EFEKAT 1 */

.panel-inset #customServiceSelect,
.panel-inset #customServiceSelectStep,
.panel-inset #customStaffSelect,
.panel-inset #customLocationSelect,
.panel-inset #customAddonSelect{
  padding:12px 18px;
  border-radius:999px;
  border:none;
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.55),
    inset -3px -3px 6px rgba(255,255,255,.04);
  transition:all .2s ease;
}

.panel-inset #customServiceSelect:hover,
.panel-inset #customServiceSelectStep:hover,
.panel-inset #customStaffSelect:hover,
.panel-inset #customLocationSelect:hover,
.panel-inset #customAddonSelect:hover{
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.65),
    inset -2px -2px 4px rgba(255,255,255,.06);
}


/* UTISNUT DROPDOWN */

.panel-inset #customServiceList,
.panel-inset #customServiceListStep,
.panel-inset #customStaffList,
.panel-inset #customLocationList,
.panel-inset #customAddonList{
  border:none;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.55),
    inset -4px -4px 10px rgba(255,255,255,.04);
}

.panel-inset #customServiceList li,
.panel-inset #customServiceListStep li,
.panel-inset #customStaffList li,
.panel-inset #customLocationList li,
.panel-inset #customAddonList li{
  padding:12px 16px;
  transition:.15s;
}


/* UTISNUTE KARTICE NA POČETNOJ */

.panel-inset .info-card{
  border:none !important;
  background:inherit;

  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.6),
    inset -4px -4px 10px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-inset .info-card:hover{
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.7),
    inset -2px -2px 6px rgba(255,255,255,.06);
}
/* UTISNUT SLOT */

.panel-inset #slotSelect button,
.panel-inset #slotSelectMenu button{
  border:none;
  border-radius:12px;
  background:inherit;
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.6),
    inset -3px -3px 6px rgba(255,255,255,.05);
  transition:.15s;
}

.panel-inset #slotSelect button:hover,
.panel-inset #slotSelectMenu button:hover{
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,.7),
    inset -1px -1px 3px rgba(255,255,255,.06);
}


/* UTISNUT KALENDAR */

.panel-inset .restaurant-calendar{
  border-radius:16px;
  border:none;
  background:inherit;
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.6),
    inset -6px -6px 14px rgba(255,255,255,.04);
}

.panel-inset .restaurant-calendar button{
  border:none;
  border-radius:10px;
  background:inherit;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.6),
    inset -2px -2px 5px rgba(255,255,255,.05);
}


/* INPUT POLJA */

.panel-inset .form-control{
  border:none;
  border-radius:12px;
  background:inherit;
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.65),
    inset -3px -3px 8px rgba(255,255,255,.05);
  padding:10px 14px;
}

.panel-inset textarea.form-control{
  border-radius:12px;
}


/* KALENDAR KONTEJNER */

.panel-inset #dateSelectBox,
.panel-inset #dateSelectBoxMenu{
  border:none !important;
  border-radius:14px;
  background:inherit;
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.65),
    inset -5px -5px 12px rgba(255,255,255,.04);
}


/* KALENDAR GRID */

.panel-inset #dateSelectBox table,
.panel-inset .restaurant-calendar{
  border:none;
  background:inherit;
}


/* KALENDAR DANI */

.panel-inset .restaurant-calendar button,
.panel-inset #dateSelectBox button{
  border:none;
  border-radius:10px;
  background:inherit;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.6),
    inset -2px -2px 5px rgba(255,255,255,.05);
  transition:.15s;
}

.panel-inset .restaurant-calendar button:hover,
.panel-inset #dateSelectBox button:hover{
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,.7),
    inset -1px -1px 3px rgba(255,255,255,.06);
}

.panel-inset .restaurant-calendar button.active,
.panel-inset #dateSelectBox button.active{
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.8),
    inset -2px -2px 5px rgba(255,255,255,.04);
}


/* SLOTOVI */

.panel-inset #slotSelect .slot-btn,
.panel-inset #slotSelectMenu .slot-btn{
  border:none !important;
  outline:none;
  border-radius:12px;
  background:inherit;
  padding:10px 0;
  text-align:center;
  cursor:pointer;

  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,.7),
    inset -3px -3px 7px rgba(255,255,255,.05);

  transition:.15s;
}

.panel-inset #slotSelect .slot-btn:hover,
.panel-inset #slotSelectMenu .slot-btn:hover{
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,.8),
    inset -1px -1px 3px rgba(255,255,255,.06);
}

.panel-inset #slotSelect .slot-btn.selected,
.panel-inset #slotSelectMenu .slot-btn.selected{
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.9),
    inset -2px -2px 5px rgba(255,255,255,.04);
}


/* KALENDAR STRELICE */

.panel-inset .restaurant-calendar .cal-header button,
.panel-inset #dateSelectBox button{
  border:none;
  border-radius:8px;
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.6),
    inset -2px -2px 6px rgba(255,255,255,.05);
}


/* POTVRDI BUTTON */

.panel-inset #confirmBtn,
.panel-inset #confirmBtnMenu,
.panel-inset #confirmBtnRestaurant,
.panel-inset #submitBookingBtn{
  border:none;
  border-radius:999px;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.6),
    -2px -2px 6px rgba(255,255,255,.05);
}

.panel-inset #confirmBtn:active,
.panel-inset #confirmBtnMenu:active,
.panel-inset #confirmBtnRestaurant:active,
.panel-inset #submitBookingBtn:active{
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.7),
    inset -3px -3px 8px rgba(255,255,255,.04);
}


/* STAFF CARD */

.panel-inset .staff-card{
  border:none !important;
  border-color:transparent !important;
  border-radius:14px;

  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.6),
    inset -3px -3px 6px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-inset .staff-card:hover{
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.7),
    inset -2px -2px 4px rgba(255,255,255,.06);
}


/* SERVICES LIST */

.panel-inset #servicesList .border,
.panel-inset #servicesList .vp-service-card{
  border:none !important;

  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,.7),
    inset -3px -3px 7px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-inset #servicesList .border:hover,
.panel-inset #servicesList .vp-service-card:hover{
  box-shadow:
    inset 1px 1px 4px rgba(0,0,0,.8),
    inset -1px -1px 4px rgba(255,255,255,.06);
}

/* SELEKTOVAN KALENDAR DAN – isti efekat kao slot */

.panel-inset #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
.panel-inset #bookingForm #dateSelectBox .calendar-cell.selected-cell{
  border-radius:50% !important;


  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.9),
    inset -2px -2px 5px rgba(255,255,255,.05) !important;
}


/* hover */

.panel-inset #bookingForm #dateSelectBoxMenu .calendar-cell:hover,
.panel-inset #bookingForm #dateSelectBox .calendar-cell:hover{
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.8),
    inset -1px -1px 4px rgba(255,255,255,.06);
}


/* ============================= */
/* IZBOČEN STIL (OUTSET) */
/* ============================= */

.panel-outset #customServiceSelect,
.panel-outset #customServiceSelectStep,
.panel-outset #customStaffSelect,
.panel-outset #customLocationSelect,
.panel-outset #customAddonSelect{
  padding:12px 18px;
  border-radius:999px;
  border:none;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.6),
    -3px -3px 8px rgba(255,255,255,.05);
  transition:all .2s ease;
}

.panel-outset #customServiceSelect:hover,
.panel-outset #customServiceSelectStep:hover,
.panel-outset #customStaffSelect:hover,
.panel-outset #customLocationSelect:hover,
.panel-outset #customAddonSelect:hover{
  box-shadow:
    2px 2px 6px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.06);
}


/* DROPDOWN */

.panel-outset #customServiceList,
.panel-outset #customServiceListStep,
.panel-outset #customStaffList,
.panel-outset #customLocationList,
.panel-outset #customAddonList{
  border:none;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.65),
    -4px -4px 10px rgba(255,255,255,.05);
}

.panel-outset #customServiceList li,
.panel-outset #customServiceListStep li,
.panel-outset #customStaffList li,
.panel-outset #customLocationList li,
.panel-outset #customAddonList li{
  padding:12px 16px;
  transition:.15s;
}

.panel-outset #customServiceList li:hover,
.panel-outset #customServiceListStep li:hover,
.panel-outset #customStaffList li:hover,
.panel-outset #customLocationList li:hover,
.panel-outset #customAddonList li:hover{
  box-shadow:
    3px 3px 8px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.06);
}

/* IZBOČENE KARTICE NA POČETNOJ */

.panel-outset .info-card{
  border:none !important;
  background:inherit;

  box-shadow:
    6px 6px 14px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-outset .info-card:hover{
  box-shadow:
    3px 3px 8px rgba(0,0,0,.8),
    -2px -2px 6px rgba(255,255,255,.06);
}

/* SLOT */

.panel-outset #slotSelect button,
.panel-outset #slotSelectMenu button{
  border:none;
  border-radius:12px;
  background:inherit;
  box-shadow:
    3px 3px 8px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.05);
  transition:.15s;
}

.panel-outset #slotSelect button:hover,
.panel-outset #slotSelectMenu button:hover{
  box-shadow:
    1px 1px 4px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06);
}


/* KALENDAR */

.panel-outset .restaurant-calendar{
  border-radius:16px;
  border:none;
  background:inherit;
  box-shadow:
    8px 8px 18px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05);
}

.panel-outset .restaurant-calendar button{
  border:none;
  border-radius:10px;
  background:inherit;
  box-shadow:
    3px 3px 6px rgba(0,0,0,.65),
    -2px -2px 6px rgba(255,255,255,.05);
}


/* INPUT POLJA */

.panel-outset .form-control{
  border:none;
  border-radius:12px;
  background:inherit;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.7),
    -3px -3px 8px rgba(255,255,255,.05);
  padding:10px 14px;
}

.panel-outset textarea.form-control{
  border-radius:12px;
}


/* KALENDAR KONTEJNER */

.panel-outset #dateSelectBox,
.panel-outset #dateSelectBoxMenu{
  border:none !important;
  border-radius:14px;
  background:inherit;
  box-shadow:
    7px 7px 16px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05);
}


/* KALENDAR GRID */

.panel-outset #dateSelectBox table,
.panel-outset .restaurant-calendar{
  border:none;
  background:inherit;
}


/* KALENDAR DANI */

.panel-outset .restaurant-calendar button,
.panel-outset #dateSelectBox button{
  border:none;
  border-radius:10px;
  background:inherit;
  box-shadow:
    3px 3px 6px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.05);
  transition:.15s;
}

.panel-outset .restaurant-calendar button:hover,
.panel-outset #dateSelectBox button:hover{
  box-shadow:
    1px 1px 4px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06);
}

.panel-outset .restaurant-calendar button.active,
.panel-outset #dateSelectBox button.active{
  box-shadow:
    5px 5px 12px rgba(0,0,0,.9),
    -2px -2px 6px rgba(255,255,255,.05);
}


/* SLOT BUTTON */

.panel-outset #slotSelect .slot-btn,
.panel-outset #slotSelectMenu .slot-btn{
  border:none !important;
  outline:none;
  border-radius:12px;
  background:inherit;
  padding:10px 0;
  text-align:center;
  cursor:pointer;

  box-shadow:
    4px 4px 10px rgba(0,0,0,.75),
    -3px -3px 8px rgba(255,255,255,.05);

  transition:.15s;
}

.panel-outset #slotSelect .slot-btn:hover,
.panel-outset #slotSelectMenu .slot-btn:hover{
  box-shadow:
    2px 2px 6px rgba(0,0,0,.85),
    -1px -1px 4px rgba(255,255,255,.06);
}

.panel-outset #slotSelect .slot-btn.selected,
.panel-outset #slotSelectMenu .slot-btn.selected{
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.9),
    inset -2px -2px 6px rgba(255,255,255,.05);
}


/* KALENDAR STRELICE */

.panel-outset .restaurant-calendar .cal-header button,
.panel-outset #dateSelectBox button{
  border:none;
  border-radius:8px;
  box-shadow:
    3px 3px 8px rgba(0,0,0,.7),
    -2px -2px 6px rgba(255,255,255,.05);
}


/* POTVRDI BUTTON */

.panel-outset #confirmBtn,
.panel-outset #confirmBtnMenu,
.panel-outset #confirmBtnRestaurant,
.panel-outset #submitBookingBtn{
  border:none;
  border-radius:999px;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.7),
    -3px -3px 8px rgba(255,255,255,.05);
}

.panel-outset #confirmBtn:active,
.panel-outset #confirmBtnMenu:active,
.panel-outset #confirmBtnRestaurant:active,
.panel-outset #submitBookingBtn:active{
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.7),
    inset -2px -2px 6px rgba(255,255,255,.05);
}


/* STAFF CARD */

.panel-outset .staff-card{
  border:none !important;
  border-color:transparent !important;
  border-radius:14px;

  box-shadow:
    5px 5px 12px rgba(0,0,0,.7),
    -3px -3px 8px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-outset .staff-card:hover{
  box-shadow:
    2px 2px 6px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06);
}


/* SERVICES LIST */

.panel-outset #servicesList .border,
.panel-outset #servicesList .vp-service-card{
  border:none !important;

  box-shadow:
    5px 5px 12px rgba(0,0,0,.7),
    -3px -3px 8px rgba(255,255,255,.05);

  transition:.2s;
}

.panel-outset #servicesList .border:hover,
.panel-outset #servicesList .vp-service-card:hover{
  box-shadow:
    2px 2px 6px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06);
}


/* SELEKTOVAN DAN */

.panel-outset #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
.panel-outset #bookingForm #dateSelectBox .calendar-cell.selected-cell{
  border-radius:50% !important;

  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.9),
    inset -2px -2px 6px rgba(255,255,255,.05) !important;
}


/* HOVER DAN */

.panel-outset #bookingForm #dateSelectBoxMenu .calendar-cell:hover,
.panel-outset #bookingForm #dateSelectBox .calendar-cell:hover{
  box-shadow:
    3px 3px 8px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06);
}


/* ================================
   SMOOTH ANIMATED BORDER
   ================================ */



/* ================================
   NEOBIČAN STIL UMESTO POCEPANO
   Klasa ostaje .panel-torn da JS/PHP ne mora da se menja.
   Efekat: aurora/glow ivica + blago staklo.
   ================================ */

.panel-torn #customServiceSelect,
.panel-torn #customServiceSelectStep,
.panel-torn #customStaffSelect,
.panel-torn #customLocationSelect,
.panel-torn #customAddonSelect,
.panel-torn .form-control,
.panel-torn #dateSelectBox,
.panel-torn #dateSelectBoxMenu,
.panel-torn .restaurant-calendar,
.panel-torn .confirm-input-wrap,
.panel-torn .confirm-main-card,
.panel-torn .confirm-message-wrap,
.panel-torn .confirm-addon-trigger,
.panel-torn .confirm-addon-box,
.panel-torn #addonServiceSummary,
.panel-torn #totalPriceWrapper{
  position:relative;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .1) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

.panel-torn #customServiceSelect,
.panel-torn #customServiceSelectStep,
.panel-torn #customStaffSelect,
.panel-torn #customLocationSelect,
.panel-torn #customAddonSelect,
.panel-torn .form-control{
  border-radius:999px !important;
}

.panel-torn textarea.form-control,
.panel-torn .confirm-message-wrap{
  border-radius:18px !important;
}

.panel-torn .confirm-main-card,
.panel-torn #addonServiceSummary,
.panel-torn #totalPriceWrapper{
  border-radius:24px !important;
}

.panel-torn #dateSelectBox,
.panel-torn #dateSelectBoxMenu,
.panel-torn .restaurant-calendar{
  border-radius:18px !important;
}

.panel-torn #customServiceSelect:hover,
.panel-torn #customServiceSelectStep:hover,
.panel-torn #customStaffSelect:hover,
.panel-torn #customLocationSelect:hover,
.panel-torn #customAddonSelect:hover,
.panel-torn .form-control:hover,
.panel-torn .confirm-input-wrap:hover,
.panel-torn .confirm-main-card:hover,
.panel-torn .confirm-message-wrap:hover,
.panel-torn .confirm-addon-trigger:hover,
.panel-torn .confirm-addon-box:hover,
.panel-torn #addonServiceSummary:hover{
  box-shadow:
    0 20px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 18px rgba(var(--vp-accent-rgb, 191, 158, 104), .2),
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .25) !important;
}

.panel-torn #customServiceList,
.panel-torn #customServiceListStep,
.panel-torn #customStaffList,
.panel-torn #customLocationList,
.panel-torn #customAddonList{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(13,18,28,.90) !important;
  border-radius:18px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}

.panel-torn #customServiceList li,
.panel-torn #customServiceListStep li,
.panel-torn #customStaffList li,
.panel-torn #customLocationList li,
.panel-torn #customAddonList li{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  transition:.18s ease;
}

.panel-torn #customServiceList li:hover,
.panel-torn #customServiceListStep li:hover,
.panel-torn #customStaffList li:hover,
.panel-torn #customLocationList li:hover,
.panel-torn #customAddonList li:hover{
  background:rgba(var(--vp-accent-rgb, 191, 158, 104), .14) !important;
}

.panel-torn #slotSelect .slot-btn,
.panel-torn #slotSelectMenu .slot-btn,
.panel-torn .restaurant-calendar button,
.panel-torn #dateSelectBox button,
.panel-torn #dateSelectBoxMenu button,
.panel-torn .calendar-cell{
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.018)) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition:.18s ease;
}

.panel-torn #slotSelect .slot-btn:hover,
.panel-torn #slotSelectMenu .slot-btn:hover,
.panel-torn .restaurant-calendar button:hover,
.panel-torn #dateSelectBox button:hover,
.panel-torn #dateSelectBoxMenu button:hover,
.panel-torn .calendar-cell:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.30),
    0 0 18px rgba(var(--vp-accent-rgb, 191, 158, 104), .22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.panel-torn #slotSelect .slot-btn.selected,
.panel-torn #slotSelectMenu .slot-btn.selected,
.panel-torn #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
.panel-torn #bookingForm #dateSelectBox .calendar-cell.selected-cell{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.20), transparent 38%),
    linear-gradient(135deg, rgba(var(--vp-accent-rgb, 191, 158, 104), .52), rgba(var(--vp-accent-rgb, 191, 158, 104), .16)) !important;
  border-color:rgba(var(--vp-accent-rgb, 191, 158, 104), .82) !important;
  box-shadow:
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .3),
    0 0 28px rgba(var(--vp-accent-rgb, 191, 158, 104), .28),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.panel-torn .info-card,
.panel-torn .staff-card,
.panel-torn #servicesList .border,
.panel-torn #servicesList .vp-service-card,
.panel-torn .vp-info-card,
.panel-torn .vp-about-card{
  border:1px solid rgba(255,255,255,.14) !important;
 /* background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important;*/
  box-shadow:
    0 20px 48px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

.panel-torn .info-card:hover,
.panel-torn .staff-card:hover,
.panel-torn #servicesList .border:hover,
.panel-torn #servicesList .vp-service-card:hover,
.panel-torn .vp-info-card:hover,
.panel-torn .vp-about-card:hover{
  transform:translateY(-1px);
  box-shadow:
    0 26px 58px rgba(0,0,0,.36),
    0 0 24px rgba(var(--vp-accent-rgb, 191, 158, 104), .18),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.panel-torn #confirmBtn,
.panel-torn #confirmBtnMenu,
.panel-torn #submitBookingBtn,
.panel-torn #startBookingBtn{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.34),
    0 0 22px rgba(var(--vp-accent-rgb, 191, 158, 104), .22),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.panel-torn #confirmBtn:active,
.panel-torn #confirmBtnMenu:active,
.panel-torn #submitBookingBtn:active,
.panel-torn #startBookingBtn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.36),
    0 0 14px rgba(var(--vp-accent-rgb, 191, 158, 104), .18) !important;
}

.panel-torn .confirm-input-wrap,
.panel-torn .confirm-main-card,
.panel-torn .confirm-message-wrap,
.panel-torn .confirm-addon-trigger,
.panel-torn .confirm-addon-box,
.panel-torn #addonServiceSummary,
.panel-torn #totalPriceWrapper{
  color:inherit !important;
}

.panel-torn .confirm-addon-box,
.panel-torn .confirm-addon-wrapper,
.panel-torn .confirm-addon-collapse,
.panel-torn #addonCollapse{
    border-radius:28px !important;
overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.panel-torn .confirm-addon-box{
  position:relative !important;
  z-index:50 !important;
}

.panel-torn .confirm-message-wrap{
  position:relative !important;
  z-index:1 !important;
}

.panel-torn #customAddonList{
  position:absolute !important;
  z-index:9999 !important;
}
/* =========================================================
   AURORA GLOW FIX - selektovani dan + shadow prati akcenat
   Klasa ostaje .panel-torn jer je Aurora zamena za stari efekat.
   --vp-accent-color i --vp-accent-rgb se setuju iz JS-a.
   ========================================================= */
.panel-torn #dateSelectBoxMenu .calendar-cell.selected-cell,
.panel-torn #dateSelectBox .calendar-cell.selected-cell,
.panel-torn #dateSelectBoxMenu .calendar-cell.today-cell.selected-cell,
.panel-torn #dateSelectBox .calendar-cell.today-cell.selected-cell,
.panel-torn #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
.panel-torn #bookingForm #dateSelectBox .calendar-cell.selected-cell,
.panel-torn #stepWrapper #dateSelectBox .calendar-cell.selected-cell{
  color:#ffffff !important;
  font-weight:800 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, var(--vp-accent-color, #bf9e68), rgba(var(--vp-accent-rgb, 191, 158, 104), .62)) !important;
  background-color:var(--vp-accent-color, #bf9e68) !important;
  border:1px solid var(--vp-accent-color, #bf9e68) !important;
  box-shadow:
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .65),
    0 0 18px rgba(var(--vp-accent-rgb, 191, 158, 104), .55),
    0 0 36px rgba(var(--vp-accent-rgb, 191, 158, 104), .28),
    0 12px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  text-shadow:none !important;
}

.panel-torn #dateSelectBoxMenu .calendar-cell.selected-cell:hover,
.panel-torn #dateSelectBox .calendar-cell.selected-cell:hover,
.panel-torn #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell:hover,
.panel-torn #bookingForm #dateSelectBox .calendar-cell.selected-cell:hover,
.panel-torn #stepWrapper #dateSelectBox .calendar-cell.selected-cell:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .72),
    0 0 24px rgba(var(--vp-accent-rgb, 191, 158, 104), .62),
    0 0 44px rgba(var(--vp-accent-rgb, 191, 158, 104), .34),
    0 14px 30px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}


/* =========================================================
   FINAL FIX: Početna + kraj rezervacije za utisnut/izbočen stil
   Dinamički JS border je uklonjen u view_panel_data.js za ove stilove.
   ========================================================= */

.panel-inset #homeScreenStep .vp-info-card,
.panel-inset #homeScreenStep .info-card,
.panel-inset #homeScreenStep .vp-about-card,
.panel-inset #aboutCompany{
  border:none !important;
  border-color:transparent !important;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.6),
    inset -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-inset #homeScreenStep .vp-info-card:hover,
.panel-inset #homeScreenStep .info-card:hover,
.panel-inset #homeScreenStep .vp-about-card:hover,
.panel-inset #aboutCompany:hover{
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.7),
    inset -2px -2px 6px rgba(255,255,255,.06) !important;
}

.panel-outset #homeScreenStep .vp-info-card,
.panel-outset #homeScreenStep .info-card,
.panel-outset #homeScreenStep .vp-about-card,
.panel-outset #aboutCompany{
  border:none !important;
  border-color:transparent !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-outset #homeScreenStep .vp-info-card:hover,
.panel-outset #homeScreenStep .info-card:hover,
.panel-outset #homeScreenStep .vp-about-card:hover,
.panel-outset #aboutCompany:hover{
  box-shadow:
    3px 3px 8px rgba(0,0,0,.8),
    -2px -2px 6px rgba(255,255,255,.06) !important;
}

.panel-inset .booking-confirm-premium .confirm-input-wrap,
.panel-inset .booking-confirm-premium .confirm-main-card,
.panel-inset .booking-confirm-premium .confirm-addon-trigger,
.panel-inset .booking-confirm-premium .confirm-addon-box,
.panel-inset .booking-confirm-premium .confirm-message-wrap,
.panel-inset .booking-confirm-premium .confirm-addon-summary,
.panel-inset .booking-confirm-premium #addonServiceSummary{
  border:none !important;
  border-color:transparent !important;
}

.panel-outset .booking-confirm-premium .confirm-input-wrap,
.panel-outset .booking-confirm-premium .confirm-main-card,
.panel-outset .booking-confirm-premium .confirm-addon-trigger,
.panel-outset .booking-confirm-premium .confirm-addon-box,
.panel-outset .booking-confirm-premium .confirm-message-wrap,
.panel-outset .booking-confirm-premium .confirm-addon-summary,
.panel-outset .booking-confirm-premium #addonServiceSummary{
  border:none !important;
  border-color:transparent !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05) !important;
}


/* DUGMAD + REZERVACIJE - dorada */
.panel-inset #confirmBtn,
.panel-inset #confirmBtnMenu,
.panel-inset #confirmBtnRestaurant,
.panel-inset #submitBookingBtn{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.55),
    inset -4px -4px 10px rgba(255,255,255,.08) !important;
}

.panel-outset #confirmBtn,
.panel-outset #confirmBtnMenu,
.panel-outset #confirmBtnRestaurant,
.panel-outset #submitBookingBtn{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.62),
    -3px -3px 8px rgba(255,255,255,.06) !important;
}

.panel-inset .reservation-card,
.panel-inset .reservation-card .card-body{
  border:none !important;
  border-color:transparent !important;
  border-radius:16px !important;
  background:inherit !important;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.62),
    inset -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-outset .reservation-card,
.panel-outset .reservation-card .card-body{
  border:none !important;
  border-color:transparent !important;
  border-radius:16px !important;
  background:inherit !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.65),
    -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-inset .booking-confirm-premium #totalPriceWrapper,
.panel-outset .booking-confirm-premium #totalPriceWrapper{
  box-shadow:none !important;
  border:none !important;
}


/* =========================================================
   FINAL FIX: Selektivne usluge - inset/outset efekat
   ========================================================= */
.panel-inset #selectiveServicesWrapper #servicesList > div,
.panel-inset #servicesList .vp-service-card,
.panel-inset #servicesList .service-card,
.panel-inset #servicesList .selective-service-card{
  border:none !important;
  border-color:transparent !important;
  border-radius:14px !important;
  background:inherit;
  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,.7),
    inset -3px -3px 7px rgba(255,255,255,.05) !important;
  transition:.2s;
}

.panel-inset #selectiveServicesWrapper #servicesList > div:hover,
.panel-inset #servicesList .vp-service-card:hover,
.panel-inset #servicesList .service-card:hover,
.panel-inset #servicesList .selective-service-card:hover{
  box-shadow:
    inset 1px 1px 4px rgba(0,0,0,.8),
    inset -1px -1px 4px rgba(255,255,255,.06) !important;
}

.panel-outset #selectiveServicesWrapper #servicesList > div,
.panel-outset #servicesList .vp-service-card,
.panel-outset #servicesList .service-card,
.panel-outset #servicesList .selective-service-card{
  border:none !important;
  border-color:transparent !important;
  border-radius:14px !important;
  background:inherit;
  box-shadow:
    5px 5px 12px rgba(0,0,0,.7),
    -3px -3px 8px rgba(255,255,255,.05) !important;
  transition:.2s;
}

.panel-outset #selectiveServicesWrapper #servicesList > div:hover,
.panel-outset #servicesList .vp-service-card:hover,
.panel-outset #servicesList .service-card:hover,
.panel-outset #servicesList .selective-service-card:hover{
  box-shadow:
    2px 2px 6px rgba(0,0,0,.8),
    -1px -1px 4px rgba(255,255,255,.06) !important;
}

.panel-inset #servicesList .vp-service-card.active,
.panel-inset #servicesList .service-card.active,
.panel-inset #servicesList .selective-service-card.active,
.panel-inset #servicesList .vp-service-card.selected,
.panel-inset #servicesList .service-card.selected,
.panel-inset #servicesList .selective-service-card.selected{
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.9),
    inset -2px -2px 5px rgba(255,255,255,.04) !important;
}

.panel-outset #servicesList .vp-service-card.active,
.panel-outset #servicesList .service-card.active,
.panel-outset #servicesList .selective-service-card.active,
.panel-outset #servicesList .vp-service-card.selected,
.panel-outset #servicesList .service-card.selected,
.panel-outset #servicesList .selective-service-card.selected{
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.9),
    inset -2px -2px 6px rgba(255,255,255,.05) !important;
}

/* =========================================================
   CONFIRM ADDON BOX - sva tri stila panela
   ========================================================= */

.panel-inset .booking-confirm-premium .confirm-addon-trigger{
  border:none !important;
  border-color:transparent !important;
  border-radius:12px !important;
  background:inherit;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.65),
    inset -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-outset .booking-confirm-premium .confirm-addon-trigger{
  border:none !important;
  border-color:transparent !important;
  border-radius:12px !important;
  background:inherit;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.7),
    -4px -4px 10px rgba(255,255,255,.05) !important;
}

.panel-torn .booking-confirm-premium .confirm-addon-trigger{
  position:relative;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .1) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  color:inherit !important;
}

.panel-torn .booking-confirm-premium .confirm-addon-trigger:hover{
  box-shadow:
    0 20px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 18px rgba(var(--vp-accent-rgb, 191, 158, 104), .2),
    0 0 0 1px rgba(var(--vp-accent-rgb, 191, 158, 104), .25) !important;
}

/* =========================================================
   START BOOKING + SAVE PROFILE BUTTON - sva tri stila panela
   ========================================================= */

.panel-inset #startBookingBtn,
.panel-inset #userProfileScreen button[onclick*="saveVpUserData"]{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.55),
    inset -4px -4px 10px rgba(255,255,255,.08) !important;
}

.panel-inset #startBookingBtn:active,
.panel-inset #userProfileScreen button[onclick*="saveVpUserData"]:active{
  box-shadow:
    inset 5px 5px 12px rgba(0,0,0,.72),
    inset -3px -3px 8px rgba(255,255,255,.05) !important;
}

.panel-outset #startBookingBtn,
.panel-outset #userProfileScreen button[onclick*="saveVpUserData"]{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.62),
    -3px -3px 8px rgba(255,255,255,.06) !important;
}

.panel-outset #startBookingBtn:active,
.panel-outset #userProfileScreen button[onclick*="saveVpUserData"]:active{
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.72),
    inset -2px -2px 6px rgba(255,255,255,.05) !important;
}

.panel-torn #startBookingBtn,
.panel-torn #userProfileScreen button[onclick*="saveVpUserData"]{
  border:none !important;
  border-radius:999px !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.34),
    0 0 22px rgba(var(--vp-accent-rgb,191,158,104),.22),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.panel-torn #startBookingBtn:active,
.panel-torn #userProfileScreen button[onclick*="saveVpUserData"]:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.36),
    0 0 14px rgba(var(--vp-accent-rgb,191,158,104),.18) !important;
}


/* =========================================================
   POČETNA: LOKACIJE (#companyCity) + DRUŠTVENE MREŽE (#aboutLinks)
   Prate izabrani stil panela.
   ========================================================= */

/* UTISNUTO */
.panel-inset #companyCity .vp-home-location-row,
.panel-inset #aboutLinks a{
  border:none !important;
  border-color:transparent !important;
  background:inherit !important;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.38),
    inset -1px -1px 3px rgba(255,255,255,.07) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.panel-inset #companyCity .vp-home-location-row:hover,
.panel-inset #aboutLinks a:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,.46),
    inset -1px -1px 3px rgba(255,255,255,.09) !important;
}

.panel-inset #companyCity .vp-home-location-row:active,
.panel-inset #aboutLinks a:active{
  transform:scale(.98);
  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,.52),
    inset -1px -1px 3px rgba(255,255,255,.06) !important;
}

/* IZBOČENO */
.panel-outset #companyCity .vp-home-location-row,
.panel-outset #aboutLinks a{
  border:none !important;
  border-color:transparent !important;
  background:inherit !important;
  box-shadow:
    2px 2px 5px rgba(0,0,0,.32),
    -1px -1px 3px rgba(255,255,255,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.panel-outset #companyCity .vp-home-location-row:hover,
.panel-outset #aboutLinks a:hover{
  transform:translateY(-1px);
  box-shadow:
    2px 2px 6px rgba(0,0,0,.40),
    -1px -1px 4px rgba(255,255,255,.10) !important;
}

.panel-outset #companyCity .vp-home-location-row:active,
.panel-outset #aboutLinks a:active{
  transform:translateY(0) scale(.98);
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.38),
    inset -1px -1px 3px rgba(255,255,255,.08) !important;
}

.panel-outset #homeSocialCard,
.panel-outset #homeSocialCard .vp-social-links,
.panel-outset #homeSocialCard .vp-social-links-inner{
  overflow: visible !important;
}
/* AURORA / GLASS */
.panel-torn #companyCity .vp-home-location-row,
.panel-torn #aboutLinks a{
  position:relative;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 0 0 1px rgba(var(--vp-accent-rgb,191,158,104),.08) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.panel-torn #companyCity .vp-home-location-row:hover,
.panel-torn #aboutLinks a:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--vp-accent-rgb,191,158,104),.42) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    0 0 18px rgba(var(--vp-accent-rgb,191,158,104),.20),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.panel-torn #companyCity .vp-home-location-row:active,
.panel-torn #aboutLinks a:active{
  transform:translateY(0) scale(.98);
}

/* Ujednačen oblik i razmak */
#companyCity .vp-home-location-row{
  width:100%;
  border-radius:12px !important;
}

#aboutLinks .vp-social-links-inner{
  gap:10px !important;
  margin:10px 0 2px !important;
  flex-wrap:wrap;
}

#aboutLinks a{
  min-height:34px;
  padding:7px 11px;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none !important;
}

#aboutLinks a i{
  font-size:16px !important;
}

/* =========================================================
   KORAK PO KORAK: selectiveServiceSearch + category pills
   Prate izabrani stil panela.
   ========================================================= */

/* UTISNUTO */
.panel-inset #selectiveServiceSearch,
.panel-inset #selectiveCategoryPills .category-pill,
.panel-inset #selectiveCategoryPills button{
  border:none !important;
  border-color:transparent !important;
  background:inherit !important;
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.65),
    inset -3px -3px 8px rgba(255,255,255,.05) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.panel-inset #selectiveServiceSearch:focus{
  outline:none !important;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.72),
    inset -3px -3px 8px rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--vp-accent-rgb,191,158,104),.32) !important;
}

.panel-inset #selectiveCategoryPills .category-pill:hover,
.panel-inset #selectiveCategoryPills button:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 1px 1px 4px rgba(0,0,0,.76),
    inset -1px -1px 4px rgba(255,255,255,.07) !important;
}

.panel-inset #selectiveCategoryPills .category-pill.active,
.panel-inset #selectiveCategoryPills button.active{
  background:var(--vp-accent-color,#bf9e68) !important;
  color:#fff !important;
  box-shadow:
    inset 5px 5px 11px rgba(0,0,0,.48),
    inset -2px -2px 5px rgba(255,255,255,.14) !important;
}

/* IZBOČENO */
.panel-outset #selectiveServiceSearch,
.panel-outset #selectiveCategoryPills .category-pill,
.panel-outset #selectiveCategoryPills button{
  border:none !important;
  border-color:transparent !important;
  background:inherit !important;
  box-shadow:
    5px 5px 12px rgba(0,0,0,.68),
    -3px -3px 8px rgba(255,255,255,.05) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.panel-outset #selectiveServiceSearch:focus{
  outline:none !important;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.72),
    -2px -2px 6px rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--vp-accent-rgb,191,158,104),.32) !important;
}

.panel-outset #selectiveCategoryPills .category-pill:hover,
.panel-outset #selectiveCategoryPills button:hover{
  transform:translateY(-2px);
  box-shadow:
    2px 2px 6px rgba(0,0,0,.8),
    -2px -2px 6px rgba(255,255,255,.07) !important;
}

.panel-outset #selectiveCategoryPills .category-pill.active,
.panel-outset #selectiveCategoryPills button.active{
  background:var(--vp-accent-color,#bf9e68) !important;
  color:#fff !important;
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,.58),
    inset -2px -2px 5px rgba(255,255,255,.13) !important;
}

/* AURORA / GLASS */
.panel-torn #selectiveServiceSearch,
.panel-torn #selectiveCategoryPills .category-pill,
.panel-torn #selectiveCategoryPills button{
  border:1px solid rgba(255,255,255,.15) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(var(--vp-accent-rgb,191,158,104),.08) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.panel-torn #selectiveServiceSearch:focus{
  outline:none !important;
  border-color:rgba(var(--vp-accent-rgb,191,158,104),.55) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    0 0 20px rgba(var(--vp-accent-rgb,191,158,104),.22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.panel-torn #selectiveCategoryPills .category-pill:hover,
.panel-torn #selectiveCategoryPills button:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--vp-accent-rgb,191,158,104),.45) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    0 0 18px rgba(var(--vp-accent-rgb,191,158,104),.20),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.panel-torn #selectiveCategoryPills .category-pill.active,
.panel-torn #selectiveCategoryPills button.active{
  color:#fff !important;
  border-color:var(--vp-accent-color,#bf9e68) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 36%),
    linear-gradient(135deg, var(--vp-accent-color,#bf9e68), rgba(var(--vp-accent-rgb,191,158,104),.58)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--vp-accent-rgb,191,158,104),.48),
    0 0 22px rgba(var(--vp-accent-rgb,191,158,104),.34),
    0 12px 26px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#selectiveServiceSearch{
  min-height:44px;
  border-radius:12px !important;
}

#selectiveCategoryPills{
  gap:8px !important;
  flex-wrap:wrap !important;
}

#selectiveCategoryPills .category-pill,
#selectiveCategoryPills button{
  min-height:34px;
  padding:7px 14px !important;
  border-radius:999px !important;
}


.panel-inset #stepWrapper #dateSelectBox .calendar-cell.selected-cell{
  background:var(--vp-accent-color,#bf9e68) !important;
  color:#fff !important;
  border-radius:50% !important;
    box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .9), inset -2px -2px 5px rgba(255, 255, 255, .05) !important;
}



/* =========================================================
   AURORA V2 - FINALNI VIZUELNI STIL
   Klasa ostaje .panel-torn zbog postojećeg PHP/JS povezivanja.
   ========================================================= */

@keyframes vpAuroraDrift{
  0%{transform:translate3d(-5%,-3%,0) scale(1); opacity:.68;}
  50%{transform:translate3d(4%,3%,0) scale(1.08); opacity:.92;}
  100%{transform:translate3d(-1%,7%,0) scale(1.03); opacity:.74;}
}

@keyframes vpAuroraBorderFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes vpAuroraButtonFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Glavni panel dobija prepoznatljivu aurora pozadinu */
.offcanvas-body.panel-torn,
#viewSidebar.panel-torn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(34,211,238,.17), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(168,85,247,.18), transparent 34%),
    radial-gradient(circle at 48% 92%, rgba(45,212,191,.14), transparent 36%),
    linear-gradient(155deg, rgba(7,11,22,.96), rgba(14,18,34,.94)) !important;
}

.offcanvas-body.panel-torn::before,
#viewSidebar.panel-torn::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(103,232,249,.34), transparent 31%),
    radial-gradient(ellipse at 76% 24%, rgba(192,132,252,.31), transparent 34%),
    radial-gradient(ellipse at 58% 76%, rgba(94,234,212,.25), transparent 35%),
    radial-gradient(ellipse at 28% 82%, rgba(var(--vp-accent-rgb,191,158,104),.22), transparent 32%);
  filter:blur(42px) saturate(125%);
  mix-blend-mode:screen;
  animation:vpAuroraDrift 13s ease-in-out infinite alternate;
  opacity:.8;
}

/* Header - tamno staklo sa živom aurora linijom */
.offcanvas-body.panel-torn .offcanvas-header,
#viewSidebar.panel-torn .offcanvas-header{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, rgba(8,13,26,.72), rgba(8,13,26,.46)) !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.offcanvas-body.panel-torn .offcanvas-header::after,
#viewSidebar.panel-torn .offcanvas-header::after{
  content:"";
  position:absolute;
  left:0%;
  right:0%;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #67e8f9, var(--vp-accent-color,#bf9e68), #c084fc, transparent);
  background-size:220% 100%;
  box-shadow:0 0 16px rgba(103,232,249,.42), 0 0 20px rgba(192,132,252,.34);
  animation:vpAuroraBorderFlow 7s linear infinite;
}

/* Sadržaj ostaje iznad aurora sloja */
.offcanvas-body.panel-torn > :not(style):not(script),
#viewSidebar.panel-torn > :not(style):not(script){
  z-index:1;
}

/* Glass površine */
.offcanvas-body.panel-torn #customServiceSelect,
.offcanvas-body.panel-torn #customServiceSelectStep,
.offcanvas-body.panel-torn #customStaffSelect,
.offcanvas-body.panel-torn #customLocationSelect,
.offcanvas-body.panel-torn #customAddonSelect,
.offcanvas-body.panel-torn .form-control,
.offcanvas-body.panel-torn .form-select,
.offcanvas-body.panel-torn #dateSelectBox,
.offcanvas-body.panel-torn #dateSelectBoxMenu,
.offcanvas-body.panel-torn .restaurant-calendar,
.offcanvas-body.panel-torn .confirm-input-wrap,
.offcanvas-body.panel-torn .confirm-main-card,
.offcanvas-body.panel-torn .confirm-message-wrap,
.offcanvas-body.panel-torn .confirm-addon-trigger,
.offcanvas-body.panel-torn .confirm-addon-box,
.offcanvas-body.panel-torn #addonServiceSummary,
.offcanvas-body.panel-torn #totalPriceWrapper,
.offcanvas-body.panel-torn .info-card,
.offcanvas-body.panel-torn .staff-card,
.offcanvas-body.panel-torn .vp-info-card,
.offcanvas-body.panel-torn .vp-about-card,
.offcanvas-body.panel-torn #servicesList .border,
.offcanvas-body.panel-torn #servicesList .vp-service-card,
#viewSidebar.panel-torn #customServiceSelect,
#viewSidebar.panel-torn #customServiceSelectStep,
#viewSidebar.panel-torn #customStaffSelect,
#viewSidebar.panel-torn #customLocationSelect,
#viewSidebar.panel-torn #customAddonSelect,
#viewSidebar.panel-torn .form-control,
#viewSidebar.panel-torn .form-select,
#viewSidebar.panel-torn #dateSelectBox,
#viewSidebar.panel-torn #dateSelectBoxMenu,
#viewSidebar.panel-torn .restaurant-calendar,
#viewSidebar.panel-torn .confirm-input-wrap,
#viewSidebar.panel-torn .confirm-main-card,
#viewSidebar.panel-torn .confirm-message-wrap,
#viewSidebar.panel-torn .confirm-addon-trigger,
#viewSidebar.panel-torn .confirm-addon-box,
#viewSidebar.panel-torn #addonServiceSummary,
#viewSidebar.panel-torn #totalPriceWrapper,
#viewSidebar.panel-torn .info-card,
#viewSidebar.panel-torn .staff-card,
#viewSidebar.panel-torn .vp-info-card,
#viewSidebar.panel-torn .vp-about-card,
#viewSidebar.panel-torn #servicesList .border,
#viewSidebar.panel-torn #servicesList .vp-service-card{
  position:relative;
  border:1px solid rgba(255,255,255,.18) !important;
    background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    linear-gradient(145deg, rgba(10,16,32,.62), rgba(12,18,34,.42)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 0 0 1px rgba(103,232,249,.055),
    0 0 30px rgba(168,85,247,.055),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}

/* Prazna poruka usluga prati Aurora staklo umesto obične tamne kartice. */
.offcanvas-body.panel-torn #servicesList .vp-service-empty-state,
#viewSidebar.panel-torn #servicesList .vp-service-empty-state{
  color:var(--vp-text-color,#fff) !important;
  border-color:rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,211,238,.12), transparent 36%),
    radial-gradient(circle at 92% 100%, rgba(168,85,247,.13), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(10,16,32,.46)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 0 26px rgba(34,211,238,.07),
    0 0 30px rgba(168,85,247,.06),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}

/* Polja su elegantne kapsule */
.offcanvas-body.panel-torn #customServiceSelect,
.offcanvas-body.panel-torn #customServiceSelectStep,
.offcanvas-body.panel-torn #customStaffSelect,
.offcanvas-body.panel-torn #customLocationSelect,
.offcanvas-body.panel-torn #customAddonSelect,
.offcanvas-body.panel-torn input.form-control,
.offcanvas-body.panel-torn select.form-select,
#viewSidebar.panel-torn #customServiceSelect,
#viewSidebar.panel-torn #customServiceSelectStep,
#viewSidebar.panel-torn #customStaffSelect,
#viewSidebar.panel-torn #customLocationSelect,
#viewSidebar.panel-torn #customAddonSelect,
#viewSidebar.panel-torn input.form-control,
#viewSidebar.panel-torn select.form-select{
  min-height:46px;
  border-radius:16px !important;
  padding-left:16px;
  padding-right:16px;
}

/* Aurora ivica pri hover/focus */
.offcanvas-body.panel-torn #customServiceSelect:hover,
.offcanvas-body.panel-torn #customServiceSelectStep:hover,
.offcanvas-body.panel-torn #customStaffSelect:hover,
.offcanvas-body.panel-torn #customLocationSelect:hover,
.offcanvas-body.panel-torn #customAddonSelect:hover,
.offcanvas-body.panel-torn .form-control:hover,
.offcanvas-body.panel-torn .form-control:focus,
.offcanvas-body.panel-torn .form-select:hover,
.offcanvas-body.panel-torn .form-select:focus,
.offcanvas-body.panel-torn .info-card:hover,
.offcanvas-body.panel-torn .staff-card:hover,
.offcanvas-body.panel-torn .vp-info-card:hover,
.offcanvas-body.panel-torn .vp-about-card:hover,
.offcanvas-body.panel-torn #servicesList .border:hover,
.offcanvas-body.panel-torn #servicesList .vp-service-card:hover,
#viewSidebar.panel-torn #customServiceSelect:hover,
#viewSidebar.panel-torn #customServiceSelectStep:hover,
#viewSidebar.panel-torn #customStaffSelect:hover,
#viewSidebar.panel-torn #customLocationSelect:hover,
#viewSidebar.panel-torn #customAddonSelect:hover,
#viewSidebar.panel-torn .form-control:hover,
#viewSidebar.panel-torn .form-control:focus,
#viewSidebar.panel-torn .form-select:hover,
#viewSidebar.panel-torn .form-select:focus,
#viewSidebar.panel-torn .info-card:hover,
#viewSidebar.panel-torn .staff-card:hover,
#viewSidebar.panel-torn .vp-info-card:hover,
#viewSidebar.panel-torn .vp-about-card:hover,
#viewSidebar.panel-torn #servicesList .border:hover,
#viewSidebar.panel-torn #servicesList .vp-service-card:hover{
  border-color:rgba(103,232,249,.44) !important;
  transform:translateY(-1px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.34),
    0 0 0 1px rgba(103,232,249,.16),
    0 0 26px rgba(103,232,249,.13),
    0 0 34px rgba(192,132,252,.10),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  outline:none !important;
}

/* Dropdown liste */
.offcanvas-body.panel-torn #customServiceList,
.offcanvas-body.panel-torn #customServiceListStep,
.offcanvas-body.panel-torn #customStaffList,
.offcanvas-body.panel-torn #customLocationList,
.offcanvas-body.panel-torn #customAddonList,
#viewSidebar.panel-torn #customServiceList,
#viewSidebar.panel-torn #customServiceListStep,
#viewSidebar.panel-torn #customStaffList,
#viewSidebar.panel-torn #customLocationList,
#viewSidebar.panel-torn #customAddonList{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(103,232,249,.12), transparent 35%),
    radial-gradient(circle at 92% 100%, rgba(192,132,252,.13), transparent 38%),
    rgba(8,13,25,.94) !important;
  box-shadow:0 24px 62px rgba(0,0,0,.58), 0 0 30px rgba(103,232,249,.08) !important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}

.offcanvas-body.panel-torn #customServiceList li:hover,
.offcanvas-body.panel-torn #customServiceListStep li:hover,
.offcanvas-body.panel-torn #customStaffList li:hover,
.offcanvas-body.panel-torn #customLocationList li:hover,
.offcanvas-body.panel-torn #customAddonList li:hover,
#viewSidebar.panel-torn #customServiceList li:hover,
#viewSidebar.panel-torn #customServiceListStep li:hover,
#viewSidebar.panel-torn #customStaffList li:hover,
#viewSidebar.panel-torn #customLocationList li:hover,
#viewSidebar.panel-torn #customAddonList li:hover{
  background:linear-gradient(90deg, rgba(103,232,249,.12), rgba(var(--vp-accent-rgb,191,158,104),.16), rgba(192,132,252,.12)) !important;
}

/* Kalendar: svetle staklene kuglice umesto običnih polja */
.offcanvas-body.panel-torn #dateSelectBox .calendar-cell,
.offcanvas-body.panel-torn #dateSelectBoxMenu .calendar-cell,
.offcanvas-body.panel-torn .restaurant-calendar button,
#viewSidebar.panel-torn #dateSelectBox .calendar-cell,
#viewSidebar.panel-torn #dateSelectBoxMenu .calendar-cell,
#viewSidebar.panel-torn .restaurant-calendar button{
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.offcanvas-body.panel-torn #dateSelectBox .calendar-cell:hover,
.offcanvas-body.panel-torn #dateSelectBoxMenu .calendar-cell:hover,
.offcanvas-body.panel-torn .restaurant-calendar button:hover,
#viewSidebar.panel-torn #dateSelectBox .calendar-cell:hover,
#viewSidebar.panel-torn #dateSelectBoxMenu .calendar-cell:hover,
#viewSidebar.panel-torn .restaurant-calendar button:hover{
  border-color:rgba(103,232,249,.50) !important;
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 0 18px rgba(103,232,249,.20),
    0 0 24px rgba(192,132,252,.12),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Selektovani dan - jaka aurora kuglica */
body .offcanvas-body.panel-torn #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
body .offcanvas-body.panel-torn #stepWrapper #dateSelectBox .calendar-cell.selected-cell,
body #viewSidebar.panel-torn #bookingForm #dateSelectBoxMenu .calendar-cell.selected-cell,
body #viewSidebar.panel-torn #stepWrapper #dateSelectBox .calendar-cell.selected-cell{
  color:#fff !important;
  border:1px solid rgba(255,255,255,.60) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), transparent 30%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--vp-accent-color,#bf9e68) 58%, #22d3ee),
      var(--vp-accent-color,#bf9e68) 48%,
      color-mix(in srgb, var(--vp-accent-color,#bf9e68) 48%, #a855f7)
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 18px rgba(34,211,238,.42),
    0 0 32px rgba(168,85,247,.34),
    0 12px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Slotovi */
.offcanvas-body.panel-torn #slotSelect .slot-btn,
.offcanvas-body.panel-torn #slotSelectMenu .slot-btn,
#viewSidebar.panel-torn #slotSelect .slot-btn,
#viewSidebar.panel-torn #slotSelectMenu .slot-btn{
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:14px !important;
  background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.offcanvas-body.panel-torn #slotSelect .slot-btn:hover,
.offcanvas-body.panel-torn #slotSelectMenu .slot-btn:hover,
#viewSidebar.panel-torn #slotSelect .slot-btn:hover,
#viewSidebar.panel-torn #slotSelectMenu .slot-btn:hover{
  border-color:rgba(103,232,249,.50) !important;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.30), 0 0 18px rgba(103,232,249,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.offcanvas-body.panel-torn #slotSelect .slot-btn.selected,
.offcanvas-body.panel-torn #slotSelectMenu .slot-btn.selected,
#viewSidebar.panel-torn #slotSelect .slot-btn.selected,
#viewSidebar.panel-torn #slotSelectMenu .slot-btn.selected{
  color:#fff !important;
  border-color:rgba(255,255,255,.52) !important;
  background:linear-gradient(110deg,
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 62%, #22d3ee),
    var(--vp-accent-color,#bf9e68),
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 58%, #a855f7)
  ) !important;
  box-shadow:0 0 20px rgba(34,211,238,.28), 0 0 30px rgba(168,85,247,.22), 0 12px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Glavna dugmad - animirani aurora preliv */
body .offcanvas-body.panel-torn #confirmBtn,
body .offcanvas-body.panel-torn #confirmBtnMenu,
body .offcanvas-body.panel-torn #confirmBtnRestaurant,
body .offcanvas-body.panel-torn #submitBookingBtn,
body .offcanvas-body.panel-torn #startBookingBtn,
body .offcanvas-body.panel-torn #userProfileScreen button[onclick*="saveVpUserData"],
body #viewSidebar.panel-torn #confirmBtn,
body #viewSidebar.panel-torn #confirmBtnMenu,
body #viewSidebar.panel-torn #confirmBtnRestaurant,
body #viewSidebar.panel-torn #submitBookingBtn,
body #viewSidebar.panel-torn #startBookingBtn,
body #viewSidebar.panel-torn #userProfileScreen button[onclick*="saveVpUserData"]{
  border:1px solid rgba(255,255,255,.32) !important;
  border-radius:999px !important;
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 55%, #22d3ee),
    var(--vp-accent-color,#bf9e68),
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 52%, #a855f7),
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 58%, #2dd4bf)
  ) !important;
  background-size:260% 100% !important;
  color:#fff !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.34),
    0 0 22px rgba(34,211,238,.22),
    0 0 28px rgba(168,85,247,.18),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  animation:vpAuroraButtonFlow 7s ease-in-out infinite;
}

body .offcanvas-body.panel-torn #confirmBtn:hover,
body .offcanvas-body.panel-torn #confirmBtnMenu:hover,
body .offcanvas-body.panel-torn #confirmBtnRestaurant:hover,
body .offcanvas-body.panel-torn #submitBookingBtn:hover,
body .offcanvas-body.panel-torn #startBookingBtn:hover,
body #viewSidebar.panel-torn #confirmBtn:hover,
body #viewSidebar.panel-torn #confirmBtnMenu:hover,
body #viewSidebar.panel-torn #confirmBtnRestaurant:hover,
body #viewSidebar.panel-torn #submitBookingBtn:hover,
body #viewSidebar.panel-torn #startBookingBtn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 38px rgba(0,0,0,.38),
    0 0 28px rgba(34,211,238,.34),
    0 0 36px rgba(168,85,247,.26),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Kategorije i linkovi */
.offcanvas-body.panel-torn #selectiveServiceSearch,
.offcanvas-body.panel-torn #selectiveCategoryPills .category-pill,
.offcanvas-body.panel-torn #selectiveCategoryPills button,
.offcanvas-body.panel-torn #companyCity .vp-home-location-row,
.offcanvas-body.panel-torn #aboutLinks a,
#viewSidebar.panel-torn #selectiveServiceSearch,
#viewSidebar.panel-torn #selectiveCategoryPills .category-pill,
#viewSidebar.panel-torn #selectiveCategoryPills button,
#viewSidebar.panel-torn #companyCity .vp-home-location-row,
#viewSidebar.panel-torn #aboutLinks a{
  border:1px solid rgba(255,255,255,.17) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter:blur(14px) saturate(145%);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
}

.offcanvas-body.panel-torn #selectiveCategoryPills .category-pill.active,
.offcanvas-body.panel-torn #selectiveCategoryPills button.active,
#viewSidebar.panel-torn #selectiveCategoryPills .category-pill.active,
#viewSidebar.panel-torn #selectiveCategoryPills button.active{
  color:#fff !important;
  border-color:rgba(255,255,255,.46) !important;
  background:linear-gradient(110deg,
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 62%, #22d3ee),
    var(--vp-accent-color,#bf9e68),
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 58%, #a855f7)
  ) !important;
  box-shadow:0 0 18px rgba(34,211,238,.26), 0 0 26px rgba(168,85,247,.20), 0 12px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* Donja navigacija kao plutajuće aurora staklo */
.offcanvas-body.panel-torn #stepNavbar,
#viewSidebar.panel-torn #stepNavbar{
  margin:10px 12px 12px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(9,15,29,.78), rgba(16,20,38,.66)) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.40), 0 0 24px rgba(103,232,249,.07), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  overflow:hidden;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active,
#viewSidebar.panel-torn #stepNavbar .nav-step.active{
  color:#fff !important;
  text-shadow:0 0 12px rgba(103,232,249,.48), 0 0 18px rgba(192,132,252,.32);
}

/* Mobilni uređaji: zadržava efekat bez teške animacije */
@media (max-width:768px){
  .offcanvas-body.panel-torn::before,
  #viewSidebar.panel-torn::before{
    inset:-12%;
    filter:blur(34px) saturate(120%);
    opacity:.68;
  }
}

@media (prefers-reduced-motion:reduce){
  .offcanvas-body.panel-torn::before,
  #viewSidebar.panel-torn::before,
  body .offcanvas-body.panel-torn #confirmBtn,
  body .offcanvas-body.panel-torn #confirmBtnMenu,
  body .offcanvas-body.panel-torn #confirmBtnRestaurant,
  body .offcanvas-body.panel-torn #submitBookingBtn,
  body .offcanvas-body.panel-torn #startBookingBtn,
  body #viewSidebar.panel-torn #confirmBtn,
  body #viewSidebar.panel-torn #confirmBtnMenu,
  body #viewSidebar.panel-torn #confirmBtnRestaurant,
  body #viewSidebar.panel-torn #submitBookingBtn,
  body #viewSidebar.panel-torn #startBookingBtn{
    animation:none !important;
  }
}


.offcanvas-body.panel-torn .confirm-addon-box,
#viewSidebar.panel-torn .confirm-addon-box{
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* =========================================================
   AURORA V2 - LIGHT TEMA
   Posebna svetla varijanta za .panel-torn.
   ========================================================= */

.offcanvas-body.panel-torn.light-theme,
#viewSidebar.panel-torn.light-theme{
  color:var(--vp-text-color,#172033) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(34,211,238,.20), transparent 30%),
    radial-gradient(circle at 90% 14%, rgba(168,85,247,.17), transparent 34%),
    radial-gradient(circle at 48% 94%, rgba(45,212,191,.17), transparent 38%),
    linear-gradient(150deg, #f8fcff 0%, #f7f4ff 48%, #f3fffc 100%) !important;
}

.offcanvas-body.panel-torn.light-theme::before,
#viewSidebar.panel-torn.light-theme::before{
  background:
    radial-gradient(ellipse at 18% 28%, rgba(34,211,238,.28), transparent 33%),
    radial-gradient(ellipse at 78% 20%, rgba(168,85,247,.22), transparent 35%),
    radial-gradient(ellipse at 60% 78%, rgba(45,212,191,.23), transparent 37%),
    radial-gradient(ellipse at 26% 84%, rgba(var(--vp-accent-rgb,191,158,104),.20), transparent 34%);
  filter:blur(48px) saturate(118%);
  mix-blend-mode:multiply;
  opacity:.54;
}

/* Svetli glass header */
.offcanvas-body.panel-torn.light-theme .offcanvas-header,
#viewSidebar.panel-torn.light-theme .offcanvas-header{
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66)) !important;
  border-bottom:1px solid rgba(100,116,139,.16) !important;
  box-shadow:
    0 14px 34px rgba(80,91,120,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  color:var(--vp-text-color,#172033) !important;
}

.offcanvas-body.panel-torn.light-theme .offcanvas-title,
#viewSidebar.panel-torn.light-theme .offcanvas-title{
  color:var(--vp-text-color,#172033) !important;
}

/* Sve glavne Aurora površine postaju svetlo staklo */
.offcanvas-body.panel-torn.light-theme :is(
  #customServiceSelect,
  #customServiceSelectStep,
  #customStaffSelect,
  #customLocationSelect,
  #customAddonSelect,
  .form-control,
  .form-select,
  #dateSelectBox,
  #dateSelectBoxMenu,
  .restaurant-calendar,
  .confirm-input-wrap,
  .confirm-main-card,
  .confirm-message-wrap,
  .confirm-addon-trigger,
  .confirm-addon-box,
  #addonServiceSummary,
  #totalPriceWrapper,
  .info-card,
  .staff-card,
  .vp-info-card,
  .vp-about-card,
  #servicesList .border,
  #servicesList .vp-service-card
),
#viewSidebar.panel-torn.light-theme :is(
  #customServiceSelect,
  #customServiceSelectStep,
  #customStaffSelect,
  #customLocationSelect,
  #customAddonSelect,
  .form-control,
  .form-select,
  #dateSelectBox,
  #dateSelectBoxMenu,
  .restaurant-calendar,
  .confirm-input-wrap,
  .confirm-main-card,
  .confirm-message-wrap,
  .confirm-addon-trigger,
  .confirm-addon-box,
  #addonServiceSummary,
  #totalPriceWrapper,
  .info-card,
  .staff-card,
  .vp-info-card,
  .vp-about-card,
  #servicesList .border,
  #servicesList .vp-service-card
){
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.18) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(34,211,238,.08), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(168,85,247,.07), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)) !important;
  box-shadow:
    0 16px 38px rgba(77,91,125,.13),
    0 0 0 1px rgba(255,255,255,.70),
    0 0 24px rgba(34,211,238,.055),
    inset 0 1px 0 rgba(255,255,255,.98),
  inset 0 -1px 0 rgba(100,116,139,.06) !important;
}

/* Svetla Aurora varijanta prazne poruke usluga. */
.offcanvas-body.panel-torn.light-theme #servicesList .vp-service-empty-state,
#viewSidebar.panel-torn.light-theme #servicesList .vp-service-empty-state{
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.24) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(34,211,238,.09), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(168,85,247,.08), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,245,249,.70)) !important;
  box-shadow:
    0 16px 38px rgba(77,91,125,.13),
    0 0 0 1px rgba(255,255,255,.72),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.offcanvas-body.panel-torn.light-theme #servicesList .vp-service-empty-state :is(strong,span),
#viewSidebar.panel-torn.light-theme #servicesList .vp-service-empty-state :is(strong,span){
  color:var(--vp-text-color,#172033) !important;
}

.offcanvas-body.panel-torn.light-theme :is(
  #customServiceSelect,
  #customServiceSelectStep,
  #customStaffSelect,
  #customLocationSelect,
  #customAddonSelect,
  .form-control,
  .form-select,
  .info-card,
  .staff-card,
  .vp-info-card,
  .vp-about-card,
  #servicesList .border,
  #servicesList .vp-service-card
):is(:hover,:focus,:focus-within),
#viewSidebar.panel-torn.light-theme :is(
  #customServiceSelect,
  #customServiceSelectStep,
  #customStaffSelect,
  #customLocationSelect,
  #customAddonSelect,
  .form-control,
  .form-select,
  .info-card,
  .staff-card,
  .vp-info-card,
  .vp-about-card,
  #servicesList .border,
  #servicesList .vp-service-card
):is(:hover,:focus,:focus-within){
  border-color:rgba(34,211,238,.44) !important;
  box-shadow:
    0 20px 44px rgba(77,91,125,.16),
    0 0 0 1px rgba(34,211,238,.15),
    0 0 24px rgba(34,211,238,.12),
    0 0 30px rgba(168,85,247,.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.offcanvas-body.panel-torn.light-theme .form-control::placeholder,
#viewSidebar.panel-torn.light-theme .form-control::placeholder{
  color:rgba(51,65,85,.52) !important;
}

/* Svetle dropdown liste */
.offcanvas-body.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
),
#viewSidebar.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
){
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,211,238,.09), transparent 35%),
    radial-gradient(circle at 92% 100%, rgba(168,85,247,.08), transparent 38%),
    rgba(255,255,255,.94) !important;
  box-shadow:
    0 24px 58px rgba(71,85,105,.20),
    0 0 28px rgba(34,211,238,.06),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.offcanvas-body.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
) li,
#viewSidebar.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
) li{
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.10) !important;
  background:transparent !important;
}

.offcanvas-body.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
) li:hover,
#viewSidebar.panel-torn.light-theme :is(
  #customServiceList,
  #customServiceListStep,
  #customStaffList,
  #customLocationList,
  #customAddonList
) li:hover{
  background:linear-gradient(90deg, rgba(34,211,238,.11), rgba(var(--vp-accent-rgb,191,158,104),.10), rgba(168,85,247,.09)) !important;
}

/* Svetli kalendar */
.offcanvas-body.panel-torn.light-theme :is(#dateSelectBox,#dateSelectBoxMenu) .calendar-cell,
.offcanvas-body.panel-torn.light-theme .restaurant-calendar button,
#viewSidebar.panel-torn.light-theme :is(#dateSelectBox,#dateSelectBoxMenu) .calendar-cell,
#viewSidebar.panel-torn.light-theme .restaurant-calendar button{
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.15) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,1), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,245,249,.70)) !important;
  box-shadow:
    0 8px 18px rgba(71,85,105,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.offcanvas-body.panel-torn.light-theme :is(#dateSelectBox,#dateSelectBoxMenu) .calendar-cell:hover,
.offcanvas-body.panel-torn.light-theme .restaurant-calendar button:hover,
#viewSidebar.panel-torn.light-theme :is(#dateSelectBox,#dateSelectBoxMenu) .calendar-cell:hover,
#viewSidebar.panel-torn.light-theme .restaurant-calendar button:hover{
  border-color:rgba(34,211,238,.46) !important;
  box-shadow:
    0 10px 22px rgba(71,85,105,.15),
    0 0 16px rgba(34,211,238,.16),
    0 0 22px rgba(168,85,247,.09),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Svetli slotovi */
.offcanvas-body.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn,
#viewSidebar.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn{
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.16) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,245,249,.72)) !important;
  box-shadow:
    0 10px 22px rgba(71,85,105,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.offcanvas-body.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn:hover,
#viewSidebar.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn:hover{
  border-color:rgba(34,211,238,.48) !important;
  box-shadow:
    0 14px 26px rgba(71,85,105,.15),
    0 0 17px rgba(34,211,238,.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Aktivni slot i datum ostaju snažni Aurora akcenti */
.offcanvas-body.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn.selected,
#viewSidebar.panel-torn.light-theme :is(#slotSelect,#slotSelectMenu) .slot-btn.selected{
  color:#fff !important;
  border-color:rgba(255,255,255,.70) !important;
  background:linear-gradient(110deg,
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 58%, #22d3ee),
    var(--vp-accent-color,#bf9e68),
    color-mix(in srgb, var(--vp-accent-color,#bf9e68) 54%, #a855f7)
  ) !important;
  box-shadow:
    0 0 18px rgba(34,211,238,.24),
    0 0 28px rgba(168,85,247,.18),
    0 12px 24px rgba(71,85,105,.18),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Svetla donja navigacija */
.offcanvas-body.panel-torn.light-theme #stepNavbar,
#viewSidebar.panel-torn.light-theme #stepNavbar{
  border-color:rgba(100,116,139,.16) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34,211,238,.08), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(168,85,247,.07), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(248,250,252,.76)) !important;
  box-shadow:
    0 18px 38px rgba(71,85,105,.15),
    0 0 22px rgba(34,211,238,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step:not(.active),
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step:not(.active){
  color:var(--vp-text-color,#334155) !important;
  text-shadow:none !important;
}

.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active{
  color:var(--vp-accent-color,#bf9e68) !important;
  text-shadow:
    0 0 10px rgba(34,211,238,.24),
    0 0 14px rgba(168,85,247,.16) !important;
}

/* Kategorije, lokacije i društveni linkovi u light temi */
.offcanvas-body.panel-torn.light-theme :is(
  #selectiveServiceSearch,
  #selectiveCategoryPills .category-pill,
  #selectiveCategoryPills button,
  #companyCity .vp-home-location-row,
  #aboutLinks a
),
#viewSidebar.panel-torn.light-theme :is(
  #selectiveServiceSearch,
  #selectiveCategoryPills .category-pill,
  #selectiveCategoryPills button,
  #companyCity .vp-home-location-row,
  #aboutLinks a
){
  color:var(--vp-text-color,#172033) !important;
  border-color:rgba(100,116,139,.16) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,245,249,.68)) !important;
  box-shadow:
    0 10px 22px rgba(71,85,105,.11),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Confirmation dodatna usluga ostaje čista, bez duple kartice */
.offcanvas-body.panel-torn.light-theme .confirm-addon-box,
#viewSidebar.panel-torn.light-theme .confirm-addon-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.link-view .offcanvas-body.panel-torn #stepNavbar,
body.link-view #viewSidebar.panel-torn #stepNavbar{
  left:50% !important;
  right:auto !important;
  bottom:0px !important;
  transform:translateX(-50%) !important;

  width:calc(100% - 24px) !important;
  max-width:406px !important;
  margin:0 !important;
  box-sizing:border-box !important;

  border-radius:18px !important;
}
/* =========================================================
   FINAL AURORA FIX: dugme "Odaberite dodatnu uslugu"
   Nadjačava dinamički #bookingConfirmation background iz JS-a.
   ========================================================= */
body .offcanvas-body.panel-torn #bookingConfirmation button.confirm-addon-trigger,
body #viewSidebar.panel-torn #bookingConfirmation button.confirm-addon-trigger,
body .offcanvas-body.panel-torn #bookingConfirmation .confirm-addon-trigger,
body #viewSidebar.panel-torn #bookingConfirmation .confirm-addon-trigger{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

body .offcanvas-body.panel-torn #bookingConfirmation button.confirm-addon-trigger:hover,
body .offcanvas-body.panel-torn #bookingConfirmation button.confirm-addon-trigger:focus,
body .offcanvas-body.panel-torn #bookingConfirmation button.confirm-addon-trigger:active,
body #viewSidebar.panel-torn #bookingConfirmation button.confirm-addon-trigger:hover,
body #viewSidebar.panel-torn #bookingConfirmation button.confirm-addon-trigger:focus,
body #viewSidebar.panel-torn #bookingConfirmation button.confirm-addon-trigger:active{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}


/* =========================================================
   MOBILNA PERFORMANCE VARIJANTA
   Čuva osnovni stil, ali uklanja najskuplje blur/animacije.
   ========================================================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .offcanvas-body.panel-torn::before,
  #viewSidebar.panel-torn::before {
    display: none !important;
    animation: none !important;
    filter: none !important;
  }

  .offcanvas-body.panel-torn,
  #viewSidebar.panel-torn {
    background-attachment: scroll !important;
  }

  .offcanvas-body.panel-torn :is(
    .info-card,
    .vp-info-card,
    .vp-about-card,
    .staff-card,
    .vp-service-card,
    .selected-service-card,
    .addon-card,
    #dateSelectBox,
    #dateSelectBoxMenu,
    .restaurant-calendar,
    #customServiceList,
    #customServiceListStep,
    #customStaffList,
    #customLocationList,
    #customAddonList
  ),
  #viewSidebar.panel-torn :is(
    .info-card,
    .vp-info-card,
    .vp-about-card,
    .staff-card,
    .vp-service-card,
    .selected-service-card,
    .addon-card,
    #dateSelectBox,
    #dateSelectBoxMenu,
    .restaurant-calendar,
    #customServiceList,
    #customServiceListStep,
    #customStaffList,
    #customLocationList,
    #customAddonList
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .offcanvas-body.panel-torn #stepNavbar,
  #viewSidebar.panel-torn #stepNavbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -4px 18px rgba(0,0,0,.24) !important;
  }

  .offcanvas-body.panel-inset :is(.info-card,.staff-card,.vp-service-card,.slot-btn),
  .offcanvas-body.panel-outset :is(.info-card,.staff-card,.vp-service-card,.slot-btn),
  #viewSidebar.panel-inset :is(.info-card,.staff-card,.vp-service-card,.slot-btn),
  #viewSidebar.panel-outset :is(.info-card,.staff-card,.vp-service-card,.slot-btn) {
    transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .offcanvas-body :is(.info-card,.staff-card,.vp-service-card,.slot-btn,.vp-category-pill):hover,
  #viewSidebar :is(.info-card,.staff-card,.vp-service-card,.slot-btn,.vp-category-pill):hover {
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   FINAL AURORA FIX: modal recenzija je izvan #viewSidebar.
   Veća specifičnost nadjačava dinamički običan tamni modal.
   ========================================================= */
body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .modal-content,
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .modal-content{
  color:#f8fafc !important;
  border:1px solid rgba(165,235,255,.38) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(34,211,238,.24), transparent 38%),
    radial-gradient(circle at 94% 100%, rgba(168,85,247,.25), transparent 43%),
    radial-gradient(circle at 50% 110%, rgba(45,212,191,.13), transparent 38%),
    linear-gradient(145deg, rgba(8,15,31,.96), rgba(24,17,42,.92)) !important;
  background-color:rgba(10,16,32,.95) !important;
  box-shadow:
    0 28px 76px rgba(0,0,0,.62),
    0 0 32px rgba(34,211,238,.14),
    0 0 42px rgba(168,85,247,.13),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
}

body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) :is(.modal-header,.border-bottom,hr),
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) :is(.modal-header,.border-bottom,hr){
  border-color:rgba(165,235,255,.18) !important;
}

body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .text-secondary,
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .text-secondary{
  color:rgba(226,232,240,.76) !important;
}

body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) :is(.form-control,textarea),
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) :is(.form-control,textarea){
  color:#f8fafc !important;
  border-color:rgba(165,235,255,.24) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  background-color:rgba(10,16,32,.56) !important;
}

body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .btn-close,
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal,#staffReviewModal) .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%) !important;
}

body.link-view:has(#viewSidebar.panel-torn)
  :is(#companyReviewModal.show,#staffReviewModal.show) ~ .modal-backdrop.show,
body.link-view:has(.offcanvas-body.panel-torn)
  :is(#companyReviewModal.show,#staffReviewModal.show) ~ .modal-backdrop.show{
  background:
    radial-gradient(circle at 18% 20%, rgba(34,211,238,.10), transparent 36%),
    radial-gradient(circle at 82% 78%, rgba(168,85,247,.11), transparent 40%),
    rgba(2,6,16,.64) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* Aurora: sazetak dodatne usluge je deo glavne kartice, bez duplog okvira. */
body .offcanvas-body.panel-torn #bookingConfirmation #addonServiceSummary,
body .offcanvas-body.panel-torn #bookingConfirmation .confirm-addon-summary,
body #viewSidebar.panel-torn #bookingConfirmation #addonServiceSummary,
body #viewSidebar.panel-torn #bookingConfirmation .confirm-addon-summary{
  border:0 !important;
  border-color:transparent !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* =========================================================
   AURORA NAVBAR: jasno istaknuta trenutno aktivna stranica
   ========================================================= */
.offcanvas-body.panel-torn #stepNavbar .nav-step,
#viewSidebar.panel-torn #stepNavbar .nav-step{
  position:relative !important;
  z-index:1 !important;
  margin:5px 3px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  opacity:.68 !important;
  transition:
    opacity .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active,
#viewSidebar.panel-torn #stepNavbar .nav-step.active{
  z-index:2 !important;
  opacity:1 !important;
  color:#fff !important;
  border-color:color-mix(in srgb, var(--vp-accent-color,#bf9e68) 62%, #67e8f9) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(103,232,249,.28), transparent 48%),
    radial-gradient(circle at 88% 100%, rgba(192,132,252,.27), transparent 52%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--vp-accent-color,#bf9e68) 30%, rgba(12,21,40,.92)),
      rgba(18,24,45,.82)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px rgba(103,232,249,.10),
    0 0 16px rgba(34,211,238,.26),
    0 0 24px rgba(168,85,247,.20),
    0 8px 18px rgba(0,0,0,.28) !important;
  text-shadow:
    0 0 8px rgba(103,232,249,.72),
    0 0 14px rgba(192,132,252,.42) !important;
  transform:translateY(-2px) !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active::after,
#viewSidebar.panel-torn #stepNavbar .nav-step.active::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:2px !important;
  width:24px !important;
  height:3px !important;
  border-radius:999px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg, #67e8f9, var(--vp-accent-color,#bf9e68), #c084fc) !important;
  box-shadow:0 0 8px rgba(103,232,249,.86), 0 0 12px rgba(192,132,252,.56) !important;
  pointer-events:none !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span),
#viewSidebar.panel-torn #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span){
  color:#fff !important;
  opacity:1 !important;
  text-shadow:
    0 0 8px rgba(103,232,249,.82),
    0 0 13px rgba(192,132,252,.50) !important;
}

.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step{
  opacity:.64 !important;
}

.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active{
  opacity:1 !important;
  color:color-mix(in srgb, var(--vp-accent-color,#bf9e68) 78%, #172033) !important;
  border-color:color-mix(in srgb, var(--vp-accent-color,#bf9e68) 55%, rgba(34,211,238,.70)) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(34,211,238,.18), transparent 48%),
    radial-gradient(circle at 88% 100%, rgba(168,85,247,.15), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.96), color-mix(in srgb, var(--vp-accent-color,#bf9e68) 12%, #f8fafc)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(34,211,238,.08),
    0 0 16px rgba(34,211,238,.18),
    0 0 22px rgba(168,85,247,.14),
    0 8px 18px rgba(71,85,105,.16) !important;
}

.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span),
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span){
  color:color-mix(in srgb, var(--vp-accent-color,#bf9e68) 78%, #172033) !important;
  text-shadow:0 0 9px rgba(34,211,238,.32), 0 0 13px rgba(168,85,247,.20) !important;
}

/* Aurora navbar - klasičan i diskretan aktivni tab */
.offcanvas-body.panel-torn #stepNavbar .nav-step,
#viewSidebar.panel-torn #stepNavbar .nav-step,
.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step{
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active,
#viewSidebar.panel-torn #stepNavbar .nav-step.active,
.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active{
  color:var(--vp-accent-color,#bf9e68) !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
  font-weight:600 !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active::after,
#viewSidebar.panel-torn #stepNavbar .nav-step.active::after,
.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active::after,
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active::after{
  bottom:1px !important;
  width:22px !important;
  height:2px !important;
  background:var(--vp-accent-color,#bf9e68) !important;
  box-shadow:none !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span),
#viewSidebar.panel-torn #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span),
.offcanvas-body.panel-torn.light-theme #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span),
#viewSidebar.panel-torn.light-theme #stepNavbar .nav-step.active :is(i,.material-symbols-outlined,.vp-nav-icon,small,span){
  color:var(--vp-accent-color,#bf9e68) !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

.offcanvas-body.panel-torn #stepNavbar .nav-step > :is(i,.material-symbols-outlined,.vp-nav-icon),
#viewSidebar.panel-torn #stepNavbar .nav-step > :is(i,.material-symbols-outlined,.vp-nav-icon){
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}