/* ==========================================================
   RETACH MOBILE OWNER
   Desktop = V3
   Mobile  = original V2 header
   ========================================================== */


/* Never show copied V2 header on desktop */

.rtx3-live-mobile-copy{
  display:none !important;
}


@media screen and (max-width:1024px){


  /* ========================================================
     ORIGINAL MOBILE HEADER
     ======================================================== */

  .rtx3-live-mobile-copy{
    display:block !important;

    position:relative !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    visibility:visible !important;
    opacity:1 !important;

    z-index:4500 !important;
  }


  /*
    Completely disable all experimental V3 mobile/header UI.
    The canonical callback modal remains untouched.
  */

  .rtx3-mobile-bar,
  .rtx3-mobile,
  .rtx3-top,
  .rtx3-main-sticky-sentinel,
  .rtx3-main-wrap,
  .rtx3-quick-wrap,
  .rtx3-mega-wrap{
    display:none !important;
  }


  /*
    V3 root stays only as owner of callback modal.
    It must consume zero page height.
  */

  #retachHeaderV3{
    position:relative !important;

    top:auto !important;

    width:100% !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    background:transparent !important;

    border:0 !important;
    box-shadow:none !important;
  }


  /*
    Callback modal is still our current upgraded modal:
    mask, consent, real crystal and success screen.
  */

  #retach-cb-modal{
    position:fixed !important;
  }


  /* Remove accidental wrapper geometry */

  .rtx3-live-mobile-copy > *{
    max-width:none;
  }

}

/* MOBILE DRAWER REDESIGN START */

@media screen and (max-width:1024px){


  /* ========================================================
     OVERLAY
     ======================================================== */

  .rtx3-live-mobile-copy
  #mnavDrawer{
    position:fixed !important;

    inset:0 !important;

    z-index:2147482000 !important;

    display:flex !important;

    align-items:flex-start !important;
    justify-content:center !important;

    width:100vw !important;
    height:100dvh !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:
      14px
      12px !important;

    overflow:hidden !important;

    background:
      rgba(48,53,84,.30) !important;

    -webkit-backdrop-filter:
      blur(7px)
      saturate(104%) !important;

    backdrop-filter:
      blur(7px)
      saturate(104%) !important;

    transform:none !important;

    visibility:visible !important;
    opacity:1 !important;
  }


  .rtx3-live-mobile-copy
  #mnavDrawer[hidden]{
    display:none !important;
  }


  /* ========================================================
     PANEL
     ======================================================== */

  .rtx3-live-menu-panel{
    position:relative;

    width:
      min(
        430px,
        calc(100vw - 24px)
      );

    max-height:
      calc(100dvh - 28px);

    box-sizing:border-box;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    padding:
      0
      16px
      16px;

    border:
      1px solid
      rgba(104,91,183,.10);

    border-radius:25px;

    background:
      linear-gradient(
        180deg,
        #fff,
        #fdfcff
      );

    box-shadow:
      0 26px 80px
      rgba(31,31,62,.26);

    scrollbar-width:none;
  }


  .rtx3-live-menu-panel::-webkit-scrollbar{
    display:none;
  }


  .rtx3-live-menu-panel,
  .rtx3-live-menu-panel *{
    box-sizing:border-box;
  }


  /* ========================================================
     HEAD
     ======================================================== */

  .rtx3-live-menu-head{
    position:sticky;

    top:0;

    z-index:10;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    min-height:94px;

    margin:
      0
      -16px
      8px;

    padding:
      14px
      18px;

    background:
      rgba(255,255,255,.95);

    -webkit-backdrop-filter:
      blur(12px);

    backdrop-filter:
      blur(12px);
  }


  .rtx3-live-menu-brand{
    display:flex;

    align-items:center;

    min-width:

    color:inherit;

    text-decoration:none;
  }


  /*
    Preserve actual logo markup from live V2,
    just allow it to breathe inside new drawer.
  */

  .rtx3-live-menu-brand img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:235px !important;
    max-height:66px !important;

    object-fit:contain !important;
    object-position:left center !important;
  }


  .rtx3-live-menu-close{
    appearance:none;

    display:grid;

    place-items:center;

    flex:
      0
      0
      56px;

    width:56px;
    height:56px;

    margin:0;
    padding:0;

    border:0;

    border-radius:17px;

    background:
      #f5f4fb;

    color:#20263d;

    font-family:
      Arial,
      sans-serif;

    font-size:35px;
    line-height:1;

    font-weight:300;

    cursor:pointer;
  }


  /* ========================================================
     PHONE CARD
     ======================================================== */

  .rtx3-live-menu-phone{
    display:grid;

    grid-template-columns:
      48px
      minmax(0,1fr)
      42px;

    align-items:center;

    gap:12px;

    min-height:72px;

    margin-bottom:13px;

    padding:
      9px
      10px;

    border-radius:16px;

    background:
      linear-gradient(
        110deg,
        #f7f5ff,
        #fbfaff
      );

    color:inherit;

    text-decoration:none;
  }


  .rtx3-live-menu-phone__icon{
    display:grid;

    place-items:center;

    width:48px;
    height:48px;

    border-radius:50%;

    background:#efebff;

    c
  }


  .rtx3-live-menu-phone__icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .rtx3-live-menu-phone__copy{
    display:flex;

    flex-direction:column;

    min-width:0;

    gap:4px;
  }


  .rtx3-live-menu-phone__copy strong{
    color:#151a35;

    font-size:17px;

    line-height:1.1;

    font-weight:720;
  }


  .rtx3-live-menu-phone__copy small{
    color:#777e99;

    font-size:11px;

    line-height:1.2;
  }


  .rtx3-live-menu-phone__arrow{
    display:grid;

    place-items:center;

    width:38px;
    height:38px;

    border-radius:12px;

    background:#ece8ff;

    color:#654cff;

    font-size:22px;
  }


  /* ========================================
     TOP LEVEL CARDS
     ======================================================== */

  .rtx3-live-menu-nav{
    display:flex;

    flex-direction:column;

  gap:3px;
  }


  .rtx3-live-menu-section{
    margin:0;

    overflow:hidden;

    border:
      1px solid
      rgba(97,80,206,.13);

  border-radius:13px;

    background:
      rgba(255,255,255,.80);
  }


  .rtx3-live-menu-section
  > summary{
    list-style:none;

  display:grid;

  grid-template-columns:26px minmax(0,1fr) 22px;

    gap:10px;

  min-height:48px;

  padding:0 10px;

    cursor:pointer;

    user-select:none;

  grid-template-rows:1fr;

  align-items:center;

  column-gap:9px;

  height:48px;
  }


  .rtx3-live-menu-section
  > summary::-webkit-details-marker{
    display:none;
  }


  .rtx3-live-menu-section
  > summary
  > strong{
    color:#111742;

  font-size:15px;

  line-height:1;

    font-weight:680;

  margin:0;

  padding:0;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
  }


  .rtx3-live-menu-section__icon{
    display

    place-items:center;

  width:24px;

  height:24px;

    color:#5e48ff;

  display:flex;

  align-items:center;

  justify-content:center;

  margin:0;

  padding:0;
  }


  .rtx3-live-menu-section__icon svg,
  .rtx3-live-menu-mini-icon svg{
    display:block;

  width:19px;

  height:19px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

  margin:0;
  }


  .rtx3-live-menu-chevron{
    justify-self:end;

    color:#111742;

  font-size:18px;

  line-height:1;

    transition:
      transform .16s ease;

  display:flex;

  align-items:center;

  justify-content:center;

  width:22px;

  height:22px;

  margin:0;

  padding:0;
  }


  .rtx3-live-menu-section[open]{
    background:
      linear-gradient(
        180deg,
        #f6f3ff,
        #fbfaff
      );
  }


  .rtx3-live-menu-section[open]
  > summary
  .rtx3-live-menu-chevron{
    transform:
      rotate(180deg);

    color:#6048ff;
  }


  /* ========================================================
     INSIDE OPEN SECTION
     ======================================================== */

  .rtx3-live-menu-inside{
    margin:
      0
      8px
      9px;

    padding:
      5px
      12px
      9px;

    border:
      1px solid
      rgba(103,89,203,.10);

    border-radius:14px;

    background:
      rgba(255,255,255,.72);
  }


  .rtx3-live-menu-group{
    padding:
      12px
      0;

    border-bottom:
      1px solid
      rgba(84,77,140,.10);
  }


  .rtx3-live-menu-group:last-child{
   
  }


  .rtx3-live-menu-group__head{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:7px;
  }


  .rtx3-live-menu-group__head strong{
    color:#111742;

    font-size:14px;

    line-height:1.25;

    font-weight:660;
  }


  .rtx3-live-menu-mini-icon{
    display:grid;

    place-items:center;

    flex:
      0
      0
      30px;

    width:30px;
    height:30px;

    color:#5d46ff;
  }


  .rtx3-live-menu-group > a{
    position:relative;

    display:block;

    min-height:27px;

    padding:
      4px
      4px
      4px
      23px;

    color:#737996;

    font-size:13px;

    line-height:1.4;

    font-weight:500;

    text-decoration:none;
  }


  .rtx3-live-menu-group > a::before{
    content:"";

    position:absolute;

    left:5px;
    top:50%;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#bbb2ff;

    transform:
      translateY(-50%);
  }


  /* ========================================================
     CTA
     ======================================================== */

  .rtx3-live-menu-cta{
    position:relative;

    margin-top:14px;

    min-height:190px;

    overflow:hidden;

    padding:
      18px
      16px
      16px;

    border-radius:17px;

    background:
      linear-gradient(
        145deg,
        #f4f1ff,
        #eeebff
      );
  }


  .rtx3-live-menu-cta__copy{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    max-width:210px;

    gap:8px;
  }


  .rtx3-live-menu-cta__copy strong{
    color:#151944;

    font-size:18px;

    line-height:1.25;

    font-weight:720;
  }


  .rtx3-live-menu-cta__copy span{
    color:#717895;

    font-size:12px;

    line-height:1.4;
  }


  .rtx3-live-menu-cta__visual{
    position:absolute;

    right:-30px;
    bottom:-33px;

    display:block;

    width:170px;
    height:170px;

    object-fit:contain;

    opacity:.46;

    transform:
      rotate(-12deg);

    pointer-events:none;
  }


  .rtx3-live-menu-cta__button{
    position:absolute !important;

    z-index:3 !important;

    left:16px !important;
    right:105px !important;
    bottom:16px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    min-height:52px !important;

    margin:0 !important;

    padding:
      0
      16px !important;

    border:0 !important;

    border-radius:14px !important;

    background:
      linear-gradient(
        90deg,
        #644eff,
        #8d4fff 55%,
        #dc54c9
      ) !important;

    color:#fff !important;

    frtant;

    line-height:1 !important;

    font-weight:650 !important;

    box-shadow:
      0 12px 26px
      rgba(111,71,224,.20) !important;
  }


}


/* MOBILE DRAWER REDESIGN END */