:root{
  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --accent:#ed1b2f;
  --accent-hover:#ff2a3e;
  --dock:rgba(7,14,23,.94);
  --dock-2:rgba(12,21,32,.94);
  --dock-line:rgba(255,255,255,.14);
  --dock-line-soft:rgba(255,255,255,.08);
  --dock-text:#f7f9fc;
  --dock-muted:rgba(235,240,247,.58);
  --surface:#0b131d;
  --surface-2:#111b27;
  --text:#f7f9fc;
  --muted:#91a0b2;
  --line:rgba(255,255,255,.11);
  --bg:#08111a;
  --ease:cubic-bezier(.22,.7,.2,1);
}
html[data-theme="light"]{
  --surface:#f8fafc;
  --surface-2:#fff;
  --text:#111821;
  --muted:#6d7886;
  --line:rgba(15,23,42,.12);
  --bg:#eef1f5;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{overflow:hidden;background:#050b12;font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{user-select:none}
.qfield input,.qfield textarea{user-select:text}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ===== Full-screen 3D experience ===== */
.app,.experience,.stage{width:100%;height:100%}
.experience{position:relative;background:#070e16}
.stage{position:relative;overflow:hidden}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#ececec;
}
.utility-btn.utility-btn--icon.fullscreen{
    display: none;
}
/* Add this new class to reveal the UI smoothly */
.stage-ui.is-ready {
  opacity: 1;
  visibility: visible;
}
.stage-ui{position:absolute;inset:0;z-index:5;pointer-events:none;color:#fff;  

  /* Add these lines to hide the UI on load */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;}
.stage-ui::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,11,19,.72) 0,rgba(4,11,19,.18) 118px,transparent 220px),
    linear-gradient(0deg,rgba(3,9,15,.42) 0,transparent 260px);
}
.stage-ui button{pointer-events:auto}

/* ===== Brand lockup - Concept B ===== */
.brand-lockup{
  position:absolute;left:32px;top:26px;display:flex;align-items:center;gap:12px;
  height:34px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);letter-spacing:.02em
}
.toyota-emblem {
    width: 42px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toyota-emblem__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.brand-lockup__toyota{font-size:20px;font-weight:800;letter-spacing:.055em}
.brand-lockup__divider{width:1px;height:22px;background:rgba(255,255,255,.35);margin:0 2px}
.brand-lockup__fortuner{font-size:17px;font-weight:800;font-style:italic;letter-spacing:.18em}

/* ===== Top-right utility bar ===== */
.utility-bar{position:absolute;right:28px;top:24px;display:flex;align-items:center;gap:6px}
.utility-btn{
  position:relative;height:36px;border:0;background:transparent;color:rgba(255,255,255,.91);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;
  border-radius:9px;cursor:pointer;font-size:12px;font-weight:600;transition:.18s var(--ease)
}
.utility-btn:hover{background:rgba(255,255,255,.11);color:#fff}
.utility-btn svg{width:19px;height:19px;flex:0 0 auto}
.utility-btn--icon{width:36px;padding:0}
.utility-btn--wa{width:36px;padding:0;color:#27e878}
.utility-btn--wa:hover{color:#3df08a;background:rgba(39,232,120,.12)}
.utility-btn[data-tip]::after{
  content:attr(data-tip);position:absolute;top:43px;left:50%;transform:translateX(-50%) translateY(-3px);
  padding:6px 8px;border-radius:6px;background:rgba(4,9,15,.94);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:11px;white-space:nowrap;opacity:0;visibility:hidden;transition:.15s;pointer-events:none
}
.utility-btn[data-tip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.share-feedback{display:none;color:#77efa6}
#shareBtn.is-copied>span:not(.share-feedback){display:none}
#shareBtn.is-copied .share-feedback{display:inline}
.theme .moon{display:none}
html[data-theme="dark"] .theme .sun{display:none}
html[data-theme="dark"] .theme .moon{display:block}

/* ===== Hero copy ===== */
.hero-copy{
  position:absolute;left:42px;top:35%;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.5);
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: rgba(4, 10, 17, .54);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .3);

}
.hero-copy__title{font-family:Georgia,"Times New Roman",serif;font-size:31px;line-height:.92;font-weight:400;letter-spacing:-.035em}
.hero-copy__line{display:block;width:38px;height:2px;margin:12px 0 8px;background:var(--accent)}
.hero-copy__sub{font-size:12px;line-height:1.45;color:rgba(255,255,255,.8)}

/* ===== Camera pills ===== */
.camera-stack{
  position:absolute;right:28px;top:41%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:18px;
  background:rgba(4,10,17,.62);border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(10px);box-shadow:0 12px 35px rgba(0,0,0,.22)
}
.camera-pill{
  width:78px;height:34px;border:0;border-radius:17px;background:transparent;color:rgba(255,255,255,.8);
  cursor:pointer;font-size:12px;font-weight:600;transition:.2s var(--ease)
}
.camera-pill:hover{background:rgba(255,255,255,.11);color:#fff}
.camera-pill.is-active{background:#fff;color:#0d141d;box-shadow:0 4px 14px rgba(0,0,0,.2)}

/* ===== Viewer tools bottom-left ===== */
.viewer-tools{position:absolute;left:30px;bottom:30px;display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(4,10,17,.42);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.viewer-tool{
  min-width:84px;color:#fff;display:flex;align-items:center;gap:9px;
  font-size:12px;line-height:1.05;text-shadow:0 2px 9px rgba(0,0,0,.48)
}
.viewer-tool__icon{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(5,11,18,.48);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)
}
.viewer-tool__icon svg{width:19px;height:19px}
.viewer-tool small{display:block;margin-top:4px;font-size:10px;font-weight:500;color:rgba(255,255,255,.58)}
.viewer-tool--button{border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
.viewer-tool--button:hover .viewer-tool__icon{background:rgba(255,255,255,.14)}

/* ===== Drag hint ===== */
.drag-hint{
  position:absolute;right:0px;bottom:200px;display:flex;align-items:center;gap:10px;
  min-width:154px;padding:10px 13px;border:1px solid rgba(255,255,255,.16);border-radius:13px;
  background:rgba(4,10,17,.54);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.20);
  color:#fff;font-size:12px;font-weight:650;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.3)
}
.drag-hint>svg{width:25px;height:25px;flex:0 0 auto}
.drag-hint small{display:block;margin-top:4px;color:rgba(255,255,255,.64);font-size:10px;font-weight:500}

/* ===== Floating control dock - Concept B ===== */
.config-dock{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  width:min(1160px,calc(100vw - 250px));height:190px;
  display:grid;grid-template-columns:minmax(0,1fr) 306px;
  background:linear-gradient(180deg,rgba(17,29,42,.95),rgba(7,14,23,.96));
  border:1px solid rgba(255,255,255,.26);border-radius:18px;
  /*overflow:hidden;*/
  backdrop-filter:blur(18px) saturate(120%);box-shadow:0 24px 60px rgba(0,0,0,.34)
}
.dock-config{min-width:0;padding:10px 11px 10px 12px}
.dock-rail{
  height:100%;display:grid;grid-template-columns:repeat(8,minmax(66px,1fr));
  grid-template-rows:72px 1fr;column-gap:2px;overflow:hidden
}
.pane{display:contents}
.pane__trigger{
  grid-row:1;min-width:0;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.78);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px 4px;
  cursor:pointer;transition:.18s var(--ease);position:relative
}
.pane__trigger:hover{background:rgba(255,255,255,.07);color:#fff}
.pane__trigger.is-active{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.78)
}
.pane__trigger-icon{width:28px;height:28px;display:grid;place-items:center}
.pane__trigger-icon svg{width:23px;height:23px}
.pane__trigger-copy{display:block;min-width:0;text-align:center}
.pane__trigger-label{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane__trigger-summary,.pane__chevron{display:none}
.pane__content{
  display:none;grid-column:1/-1;grid-row:2;min-width:0;
  border-top:1px solid rgba(255,255,255,.11);padding:10px 4px 0
}
.pane.is-active .pane__content{display:block}
.panel__sub{display:none}
.options{
  height:88px;display:flex;align-items:stretch;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 2px 2px;
  scrollbar-width:none
}
.options::-webkit-scrollbar{display:none}
.opt{
  flex:0 0 auto;min-width:96px;height:84px;border:1px solid transparent;border-radius:11px;
  background:transparent;color:#fff;padding:6px 7px;display:grid;grid-template-rows:38px auto auto;
  align-items:center;justify-items:center;cursor:pointer;transition:.16s var(--ease);position:relative
}
.opt:hover{background:rgba(255,255,255,.07)}
.opt.is-on{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.8)}
.opt.is-on::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)
}
.opt__sw{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);overflow:hidden
}
.opt__sw svg{width:21px;height:21px}
.paint-opt .opt__sw{width:37px;height:37px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.13)}
.paint-opt.is-on .opt__sw{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.opt__name{
  max-width:105px;font-size:12px;line-height:1.1;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.opt__price{font-size:11px;line-height:1;color:rgba(255,255,255,.58)}
.opt__price:empty{display:none}

/* Commerce section */
.dock-commerce{
  min-width:0;border-left:1px solid rgba(255,255,255,.12);padding:15px 14px;
  display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:12px
}
.dock-price{display:flex;flex-direction:column;min-width:0}
.dock-price__value{font-size:30px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.dock-price__label{display:flex;align-items:center;gap:5px;margin-top:7px;color:rgba(255,255,255,.66);font-size:12px}
.price-info{
  width:18px;height:18px;padding:0;border:1px solid rgba(255,255,255,.36);border-radius:50%;
  background:transparent;color:#fff;font-size:11px;line-height:16px;cursor:pointer
}
.dock-price__meta{margin-top:8px;color:rgba(255,255,255,.44);font-size:10px;white-space:nowrap}
.dock-actions{display:flex;flex-direction:column;gap:8px}
.dock-cta,.dock-secondary{
  width:100%;height:44px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;transition:.17s var(--ease)
}
.dock-cta{border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:0 12px 25px rgba(237,27,47,.2)}
.dock-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.dock-cta span{margin-left:4px}
.dock-secondary{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.025);color:#fff}
.dock-secondary:hover{background:rgba(255,255,255,.09)}
#pBasic,#pAdd{font-weight:600;color:rgba(255,255,255,.52)}

/* ===== Summary drawer ===== */
.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(5,9,15,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.28s var(--ease)}
.drawer-backdrop{z-index:120}.modal-backdrop{z-index:130}.drawer-backdrop.is-open,.modal-backdrop.is-open{opacity:1;visibility:visible}
.drawer{position:fixed;right:0;top:0;z-index:121;width:390px;max-width:92vw;height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--text);border-left:1px solid var(--line);box-shadow:-30px 0 70px rgba(0,0,0,.26);transform:translateX(100%);transition:transform .38s var(--ease)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:flex-start;justify-content:space-between;padding:23px 24px 17px;border-bottom:1px solid var(--line)}
.drawer__eyebrow,.modal__eyebrow{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.drawer__title,.modal__title{margin-top:5px;font-size:24px;font-weight:700}
.drawer__close,.modal__close{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
.drawer__close svg,.modal__close svg{width:18px;height:18px}
.drawer__body{flex:1;overflow:auto;padding:20px 24px}
.drawer__section{margin:18px 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.drawer__section:first-child{margin-top:0}
.spec__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.spec__label{font-size:13px;color:var(--muted)}
.spec__value{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;text-align:right}
.spec__dot{width:13px;height:13px;border-radius:50%;border:1px solid var(--line)}
.pr__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px}
.pr__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.pr__total span:last-child{font-size:22px}
.drawer__foot--note{padding:14px 24px 19px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}

/* ===== Quote modal ===== */
.modal{position:fixed;z-index:131;left:50%;top:50%;width:610px;max-width:calc(100vw - 28px);max-height:calc(100vh - 38px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:0 35px 90px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translate(-50%,-47%) scale(.98);transition:.28s var(--ease)}
.modal.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 26px 17px;border-bottom:1px solid var(--line)}
.modal__body{padding:20px 26px 25px}
.modal__summary{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:12px 14px;margin-bottom:17px;border-radius:11px;background:rgba(127,139,156,.08)}
.ms__row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.ms__row span:first-child{color:var(--muted)}
.ms__row span:last-child{font-weight:600;text-align:right}
.ms__total{grid-column:1/-1;border-bottom:0;padding-top:10px;font-size:14px}
.ms__total span:last-child{color:var(--accent);font-size:16px}
.qform{display:block}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qfield{margin-bottom:12px}
.qfield label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}
.qfield label span{font-weight:400}
.qfield input,.qfield textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);outline:none;padding:12px 13px;font-size:13px;transition:.18s var(--ease)}
.qfield textarea{resize:vertical;min-height:86px}
.qfield input:focus,.qfield textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,27,47,.09)}
.qhoney{position:absolute!important;left:-9999px!important;opacity:0!important}
.qerror{min-height:18px;margin:-2px 0 6px;font-size:12px;color:#e13b48}
.qsubmit{width:100%;height:46px;border:0;border-radius:10px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 12px 28px rgba(237,27,47,.18)}
.qsubmit:hover{background:var(--accent-hover)}
.qsubmit:disabled{opacity:.58;cursor:default}
.qsubmit svg{width:18px;height:18px}
.qnote{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:11px;color:var(--muted);text-align:center}
.qnote svg{width:13px;height:13px}
.qsuccess{display:none;text-align:center;padding:26px 8px 14px}
.qsuccess.is-visible{display:block}
.qsuccess__icon{width:54px;height:54px;margin:0 auto 15px;border-radius:50%;background:#20a863;color:#fff;display:grid;place-items:center;font-size:26px}
.qsuccess__title{font-size:20px;font-weight:700}
.qsuccess__text{max-width:350px;margin:8px auto 0;font-size:13px;line-height:1.6;color:var(--muted)}

/* ===== Environment loader ===== */
.environment-loader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(3,7,12,.54);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:.24s var(--ease)}
.environment-loader.is-active{opacity:1;visibility:visible;pointer-events:auto}
.environment-loader__box{min-width:190px;padding:24px 28px;border-radius:14px;background:rgba(13,18,25,.94);border:1px solid rgba(255,255,255,.09);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.environment-loader__spinner{width:40px;height:40px;margin:0 auto 14px;border:3px solid rgba(255,255,255,.13);border-top-color:#fff;border-radius:50%;animation:loader-spin .8s linear infinite}
.environment-loader__title{font-size:14px;font-weight:700;color:#fff}
.environment-loader__text{margin-top:5px;font-size:12px;color:rgba(255,255,255,.52)}
@keyframes loader-spin{to{transform:rotate(360deg)}}




/* 2. Sirf Neeche wali UI (Main bottom bar / panel) ko hide karne ke liye */
body.bottom-ui-hidden .main-bottom-bar,
body.bottom-ui-hidden .configurator-bottom-wrapper,
body.bottom-ui-hidden .car-configurator-panel {
  transform: translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}




/* ==========================================
   3. LAPTOP & TABLET RESPONSIVE FIXES
   ========================================== */
@media screen and (max-width: 1200px) {
  /* Zoom controls ko overlap hone se bachane ke liye position adjust ki */
  .zoom-controls {
    left: 20px !important;
    bottom: 120px !important;
  }
  
  .main-bottom-bar {
    max-width: 92% !important;
    margin: 0 auto;
  }
}


/* ==========================================
   4. MOBILE RESPONSIVE FIXES (< 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    .utility-btn.utility-btn--icon.fullscreen{
        display: block;
    }
  /* Mobile par Toggle Button show hoga */
 

  /* Zoom controls ko mobile par left ya side mein shift karein taake bottom panel se na takrayen */
  .zoom-controls {
    display: flex !important;
    position: absolute;
    left: 15px !important;
    bottom: 180px !important;
    z-index: 50;
    flex-direction: column;
    gap: 5px;
  }

  /* Drag to rotate hint ko chota ya hide karein taake screen saaf rahe */
  .drag-to-rotate-hint {
    display: none !important;
  }

  /* Bottom bar ki padding aur layout mobile friendly */
  .main-bottom-bar {
    width: 95% !important;
    left: 2.5% !important;
    right: 2.5% !important;
    bottom: 15px !important;
    position: absolute !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
}


.drive-warning-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drive-warning-modal.active {
  opacity: 1;
  visibility: visible;
}

.drive-warning-modal .modal-content {
  background: #141821;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 24px 30px;
  border-radius: 16px;
  text-align: center;
  color: #fff;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drive-warning-modal.active .modal-content {
  transform: scale(1);
}

.drive-warning-modal p {
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #e2e8f0;
}

.drive-warning-modal button {
  background: #dc2626;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.drive-warning-modal button:hover {
  background: #b91c1c;
}
.drive-toast-notification {
  /*position: fixed;*/
  /*top: 30px;*/
  /*left: 50%;*/
  /*transform: translateX(-50%) translateY(-20px);*/
  background: rgba(20, 24, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  z-index: 10000;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  left: 0px;
  bottom: 200px;
}

.drive-toast-notification.show {
  opacity: 1;
  visibility: visible;
  /*transform: translateX(-50%) translateY(0);*/
}