.themecloseBtn {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 49;
  display: none;
  /* display: flex; */
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
}

/* الكارت نفسه */
.theme-card {
  background: var(--Cards);
  /* background: linear-gradient(145deg, #1a1a1a, #0d0d0d); */
  padding: 40px;
  border-radius: 20px;
  width: 50%;
  height: 50%;
  text-align: center;
  border: 1px solid var(--text);
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  justify-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--btn) transparent;
  flex-wrap: wrap;
  align-items: center;
  overflow: auto;
  display: none;
}

.theme-card .btn {
  /* background-color: aqua; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30%;
  height: 50%;
  margin: 10 0;
  /* background-image: url('/image/Flat_vector_illustration_of_a_202605171836.jpeg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60%;

}


.theme-card #modeA {
  background-image: url('/image/background/1.png');
}

body.dark-theme .theme-card #modeA {
  /* background: var(--btn4); */
  border: 1px solid var(--btn);
}

.theme-card #modeB {
  background-image: url('/image/background/2.png');
}

body.d .theme-card #modeB {
  /* background: var(--btn4); */
  border: 1px solid var(--btn);
}

.theme-card #modeC {
  background-image: url('/image/background/3.png');
}

body.c .theme-card #modeC {
  /* background: var(--btn4); */
  border: 1px solid var(--btn);
}

.theme-togglem {
  display: none;

}

.arrow-back {
  display: none;

}

@media (min-width: 700px) and (max-width: 1120px) {
  .themecloseBtnm {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .theme-togglem {
    z-index: 999;
    position: fixed !important;
    width: 10%;
    height: 50;
    top: 93%;
    margin: 0 10;
    display: block;
    background: transparent;
    border: none;
    border-radius: 10px;
  }

  .theme-togglem  ion-icon{
    transform: rotate(-90deg) translateX(0px);
    font-size: 70 !important; 
    transition: transform 0.3s ease;
    /* width: 10% !important;  */
    color: var(--btn);
  }

  .th ion-icon{
    transform: rotate(90deg) translateX(0px);
    font-size: 70 !important; 
    transition: transform 0.3s ease;
    /* width: 10% !important;  */
    color: var(--btn);
  }

  .arrow-back {
    z-index: 9999;
    background: var(--Cards1);
    width: 60%;
    height: 50%;
    padding: 10;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--text);
  }

  .arrow-back samp{
    margin: 10 0;
    width: 100%;
    padding: 10;
    border-radius: 20px;
    background: var(--select-input);
    color: var(--text);
  }

  .arrow-back samp:active{
    background: var(--btn);
  }

  .theme-cardm {
    z-index: 999;
    background: var(--btn);
    width: 100%  !important;
    padding: 10;
    display: none;
    border-radius: 15px;
    margin:  0;
    color: var(--text-white);
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    scrollbar-width: thin;
    scrollbar-color: var(--btn) transparent;
    flex-wrap: wrap;
    overflow: auto;
  }

  .theme-cardm .btn {
    object-fit: contain !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30%;
    height: 127 !important;
    margin: 10 0;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .theme-cardm #modemA {
    object-fit: contain !important;
    background-image: url('/image/background/1.png');
  }

  body.dark-theme .theme-cardm #modemA {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }

  .theme-cardm #modemB {
    background-image: url('/image/background/2.png');
  }

  body.d .theme-cardm #modemB {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }

  .theme-cardm #modemC {
    background-image: url('/image/background/3.png');
  }

  body.c .theme-cardm #modemC {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }
}

@media (min-width: 100px) and (max-width: 452px) {  
  .themecloseBtnm {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .theme-togglem {
    z-index: 999;
    position: fixed !important;
    width: 10%;
    height: 50;
    top: 93%;
    margin: 0 10;
    display: block;
    background: transparent;
    border: none;
    border-radius: 10px;
  }

  .theme-togglem  ion-icon{
    transform: rotate(-90deg) translateX(0px);
    font-size: 50 !important; 
    transition: transform 0.3s ease;
    /* width: 10% !important;  */
    color: var(--btn);
  }

  .th ion-icon{
    transform: rotate(90deg) translateX(0px);
    font-size: 70 !important; 
    transition: transform 0.3s ease;
    /* width: 10% !important;  */
    color: var(--btn);
  }

  .arrow-back {
    z-index: 9999;
    background: var(--Cards1);
    width: 90%;
    height: 50%;
    padding: 10;
    border-radius: 20px;
    display: flex;    
    border: 1px solid var(--text);
    flex-direction: column;
  }

  .arrow-back samp{
    margin: 10 0;
    width: 100%;
    padding: 10;
    border-radius: 20px;
    background: var(--select-input);
    color: var(--text);
  }

  .arrow-back samp:active{
    background: var(--btn) ;
  }

  .theme-cardm {
    z-index: 999;
    background: var(--btn);
    width: 100%  !important;
    padding: 10;
    display: none;
    border-radius: 15px;
    margin:  0;
    color: var(--text-white);
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    scrollbar-width: thin;
    scrollbar-color: var(--btn) transparent;
    flex-wrap: wrap;
    overflow: auto;
  }

  .theme-cardm .btn {
    /* object-fit: fill !important; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30%;
    height: 111!important;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .theme-cardm #modemA {
    background-image: url('/image/background/1.png');
  }

  body.dark-theme .theme-cardm #modemA {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }

  .theme-cardm #modemB {
    background-image: url('/image/background/2.png');
  }

  body.d .theme-cardm #modemB {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }

  .theme-cardm #modemC {
    background-image: url('/image/background/3.png');
  }

  body.c .theme-cardm #modemC {
    /* background: var(--btn4); */
    border: 1px solid aqua;
  }
}