:root {
    --forest-color: rgb(0, 115, 62);
    --island-color: rgb(14, 104, 171);
    --mountain-color: rgb(211, 32, 42);
    --plains-color: rgb(249, 250, 244);
    --swamp-color: rgb(21, 11, 0);
    --mana-filter-checked-color: rgba(118, 195, 248, 1);
    --button-color: rgba(36, 36, 36, 1);
    --filter-background-color: rgba(51, 51, 51, 1);
    --header-color: rgba(16, 16, 16, 1);
    --hover-color: rgba(120, 120, 120, 1);
    --text-color: rgb(249, 250, 244);
    --body-background-color: rgb(75, 72, 72);
    --cards-per-row: 7; /* Default number of cards per row */
    --mobile-cards-per-row: 2; /* Number of cards per row on mobile */
    --card-gap: 16px; /* Default gap between cards */
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--body-background-color);;
}
body.modal-open {
  overflow: hidden;
}
/* #region Disabled in desktopview start */
/* Hide mobile content on desktop screens */
@media (min-width: 769px) {
  .add-row-mobile,
  .new-deck-button-mobile,
  .totals-mobile,
  .set-select-dropdown-mobile,
  .deck-select-mobile,
  .deck-select-dropdown-mobile,
  .deck-configuration-mobile,
  .deck-configuration-button-mobile,
  .mobile-header-toggle {
    display: none !important;
  }
   .filter-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
 
  .filter-row {
    display: contents; /* Treat children as direct children of .filter-buttons */
  }


  .filter-buttons button {
    height: 1.7vw;
    width: 3.7vw;
    font-size: 0.6vw;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    color: var(--text-color);
  }
     #snap-mobile {
      display: none;
  }

  #camera-mobile{
    display: none;
  }
}

/* #endregion Disabled in desktopview end */

 /* #region header start  */
 
.header {
    box-sizing: border-box;
    position: fixed;              
    top: 0;                       
    left: 0;
    width: 100%;                 
    height: 6vh;                 
    background-color: var(--header-color);
    display: flex;
    z-index: 1000;                
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}
.mobile-header-toggle {
    display: none; /* Hide the mobile header toggle by default */
}

.left-group,
.right-group {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
}

.right-group {
    justify-content: flex-end;
}

.right-group button:hover{
    background-color: var(--hover-color);
    cursor: pointer;
}
.left-group button:hover{
    background-color: var(--hover-color);
    cursor: pointer;
}

/* input field start */
.search-row {
  min-width: 18%;
}
.search-field {
    width : 80%;
    height: 1.5vw;
    border-radius: 7px;
    border: 2px solid rgba(44, 44, 44, 1);
    background-color: var(--filter-background-color);
    font-size: 0.6vw;
    margin-right: 1%;
}
  .search-button {
   display: none; 
  }
.add-row {
  margin-left: 2%;
}
.add-field {
    width : 90%;
    height: 1.5vw;
    border-radius: 7px;
    border: 2px solid rgba(44, 44, 44, 1);   
    background-color: var(--filter-background-color);
    font-size: 0.6vw;
}
   #snap {
    margin-left: 1%;
    height: 1.7vw;
    color: var(--text-color);
    width: 3.7vw;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 0.6vw;
    font-weight: bold;
    background-color: rgb(71, 162, 223);
  }
  #snap:hover {
    background-color: var(--mana-filter-checked-color);
  }
  #card-frame {
  position: relative;
}
  #camera-overlay {
  display: none; /* initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8); /* dimmed background */
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
#name-highlight {
  position: absolute;
  top: 5%;
  left: 0;
  width: 99%;
  height: 15%; /* Top 30% of the video frame */
  border: 2px dashed var(--hover-color);
  background-color: rgba(226, 22, 22, 0.2);
  pointer-events: none;
  z-index: 10;
}
#camera {
  aspect-ratio: 5 / 7;
  width: 80vw;
  max-width: 360px;
  border-radius: 12px;
  object-fit: cover;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  background: black;
}

#take-picture {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: rgb(71, 162, 223);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s ease;
  z-index: 1;
}
#take-picture:hover {
  background-color: var(--mana-filter-checked-color);
}

  .add-button {
  display: none; 
  }
input {
  padding-left: 1rem; /* or try 8px, 12px etc. */
  color: var(--text-color);
}
input::placeholder {
  color: var(--text-color);
}
/* input field end */
/* mana filter start */
.mana-filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 1%;
    margin-left: 1%;
    gap: 0.3rem;
    width: 12vw;

}
.mana-filter label {
    background-color: var(--button-color);
    height: 1.7vw;
    width: 2vw;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
    border: 1px solid rgba(44, 44, 44, 1);
}
.mana-filter label:hover {
    background-color: var(--hover-color);
    cursor: pointer;
}
.white-mana-icon {
    color: var(--plains-color);
    height: 1.2vw;
}
#white-mana-button:checked + .mana-label-white {
  background-color: var(--mana-filter-checked-color);
}
.blue-mana-icon {
    color: var(--island-color);
    height: 1.2vw;
}
#blue-mana-button:checked + .mana-label-blue {
  background-color: var(--mana-filter-checked-color);
}
.black-mana-icon {
    color: var(--swamp-color);
    height: 1.2vw;
}
#black-mana-button:checked + .mana-label-black {
  background-color: var(--mana-filter-checked-color);
}
.red-mana-icon {
    color: var(--mountain-color);
    height: 1.2vw;
}
#red-mana-button:checked + .mana-label-red {
  background-color: var(--mana-filter-checked-color);
}
.green-mana-icon {
    color: var(--forest-color);
    height: 1.2vw;
}
#green-mana-button:checked + .mana-label-green {
  background-color: var(--mana-filter-checked-color);
}
.colorless-mana-icon {
    color: grey;
    height: 1.2vw;
}
#colorless-mana-button:checked + .mana-label-colorless {
  background-color: var(--mana-filter-checked-color);
}
/* mana filter end */
/* filter button start */
.filter-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.filter-buttons button {
  height: 1.7vw;
  color: var(--text-color);
  width: 3.7vw;
  border-radius: 5px;
  border: 1px solid rgba(44, 44, 44, 1);
  background-color: var(--button-color);
  font-size: 0.6vw;
  font-weight: bold;
}

.filter-buttons button:hover {
  background-color: var(--hover-color);
  cursor: pointer;
}
/* filter button end */
/* new deck button start */
.new-deck-button {
    height: 1.7vw;
    width: 3vw;
    min-width: 10px;
    border-radius: 5px;
    color: var(--text-color);
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 0.5vw;
    font-weight: bold;
    margin-left: 3%;
}
/* new deck button end */
/* totals start */
.totals {
  margin-left: 1%;
  width: 6vw;
  color: var(--mana-filter-checked-color);
  font-size: 0.6vw;
  font-weight: bold;
}
/* totals end */
/* logout button start */
.logout-button {
    height: 1.7vw;
    width: 3.5vw;
    min-width: 100px;
    border-radius: 5px;
    color: var(--text-color);
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--mountain-color);
    font-size: 0.6vw;
    font-weight: bold;
    margin-right: 2%;
}
.logout-button:hover {
    background-color: red !important;
    cursor: pointer;
}
/* logout button end */
/* clear filters button start */
.clear-filters-button {
    height: 1.7vw;
    width: 3.5vw;
    min-width: 100px;
    border-radius: 5px;
    color: var(--text-color);
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 0.6vw;
    font-weight: bold;
    margin-right: 1%;
}
/* clear filters button end */
/* set dropdown start */
.set-select {
    width: 8vw;
    height: 1.7vw;
    border-radius: 7px;
    color: var(--text-color);
    border: 2px solid rgba(44, 44, 44, 1);
    background-color: var(--filter-background-color);
    font-size: 0.6vw;
    margin-left: 10%;
}
/* set dropdown end */
/* deck dropdown start */
.deck-select {
    width: 8vw;
    height: 1.7vw;
    border-radius: 7px;
    color: var(--text-color);
    border: 2px solid rgba(44, 44, 44, 1);
    background-color: var(--filter-background-color);
    font-size: 0.6vw;
    margin-left: 15%;
}
.set-select:hover,
.deck-select:hover {
  background-color: var(--hover-color);
}
/* deck dropdown end */
/* manage deck button start */
.deck-configuration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1%;
    margin-right: 1%;
}
.deck-configuration-button {
    height: 1.7vw;
    width: 3vw;
    min-width:10px;
    min-height: 33px;
    border-radius: 5px;
    color: var(--text-color);
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 0.5vw;
    font-weight: bold;
}
/* manage deck button end */
/* filter active color start */
.filter-active {
  background-color: var(--mana-filter-checked-color) !important; /* or any color you want */
  color: var(--plains-color) !important;
}
/* filter active color end */
/* #endregion */
/* #region main content start  */
/* card display settings start */
.card-list {
  display: grid;
  grid-template-columns: repeat(var(--cards-per-row), 1fr);
  gap: var(--card-gap);
  padding: 1rem;
}
.card-list img {
  width: 100%;
  height: auto;
  border-radius: 17px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}
.main-content {
    padding-top: 6vh; /* Same as header height */
}
/* card hover start */
.card-wrapper {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
}

.card-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 17px;
}

/* Hover bar effect */
.card-hover-bar {
  position: absolute;
  bottom: 0rem;
  width: 100%;
  height: 25%;
  background: rgba(0, 0, 0, 0.801);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.card-wrapper:hover .card-hover-bar {
  opacity: 1;
  pointer-events: auto;
}

.qty-button {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: 4px;
}

.qty-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.qty-input {
  width: 5rem;
  height: 2rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  border-radius: 4px;
  line-height: 2rem;       
  padding: 0;             
  box-sizing: border-box; 
}
/* Hide number input spinners - Chrome, Safari, Edge */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input spinners - Firefox */
.qty-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* remove button start */
.remove-button {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background-color: rgba(255, 0, 0, 0.7);
  border: none;
  border-radius: 4px;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.remove-button:hover {
  background-color: rgba(255, 0, 0, 0.9);
}

.remove-button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}
/* remove button end */


/* card hover end */
/* card display settings end*/

/* #endregion */
/* #region modals start */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  position: relative;
  background-color: rgb(75, 72, 72);
  border-radius: 12px;
  width: 60vw;
  max-height: 80vh;
  padding: 2rem; /* Space around the scroll area */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* important: prevents scroll bar around outer box */
}

.modal-scroll-area {
  max-height: calc(80vh - 4rem); /* 80vh minus padding */
  overflow-y: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  scrollbar-width: none;
}

.modal-scroll-area::-webkit-scrollbar {
  display: none;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.card-grid img {
  cursor: pointer;
  width: 100%;
  height: auto;
  max-width: 400px; /* Prevent giant image */
  margin: 0 auto;
  border-radius: 17px;
  display: block;
}


.close-button {
  position: absolute;
  top: 0.2rem;
  right: 0.6rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 100;
}
/* card info modal start */
.card-info-modal {
  position: relative;
  background-color: #2b2b2b;
  padding: 1rem;
  max-height: 100vh;
  width: 40vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 8px;
  color: white;
}

.card-info-grid {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.card-info-left {
  flex: 1;
  min-width: 250px;
}

.card-info-left img {
  max-width: 100%;
  height: auto;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.card-info-right {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  min-width: 250px;
  width: 20px;
  padding-right: 1%;
}

.info-row {
  background-color: #3a3a3a;
  padding: 8px;
  border-radius: 4px;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}


.span-3 {
  align-items: center;
  grid-column: span 3;
}

.info-label {
  font-weight: bold;
  font-size: 1rem;
  color: #aaa;
}

.info-value {
  margin-left: 0.4vw;
  margin-top: 0.3vw;
  font-size: 1rem;
  color: #fff;
}

#scryfall-link {
  color: #90c8f8;
  text-decoration: none;
}

#scryfall-link {
  margin-left: 3%;
  margin-top: 2%;
  margin-bottom: 2%;
  color: #90c8f8;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.8vw;
}


#card-info-modal .close-button {
  position: absolute;
  top: 0rem;
  right: 0.3rem;
  background-color: transparent;
  border: none;
  font-size: 1.75rem;
  color: var(--text-color);
  cursor: pointer;
}

#add-to-deck-button,
#confirm-add-to-deck,
#remove-from-deck-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--button-color);
  color: var(--text-color);
  border: 1px solid black;
  border-radius: 4px;
  height: 1.6vw;
}
.deck-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80%;
}

.deck-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--filter-background-color);
  border: 1px solid rgba(44, 44, 44, 1) ;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
}

.remove-from-deck-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}

.remove-from-deck-button:hover {
  background-color: #c0392b;
}

.add-to-deck-wrapper {
  justify-content: center;
  display: flex;
  gap: 8px;
  align-items: center;
}

.deck-select-dropdown {
  padding: 4px;
  border-radius: 4px;
}

.add-to-deck-confirm-button {
  background-color: #2ecc71;
  border: none;
  color: var(--text-color);
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

.add-to-deck-confirm-button:hover {
  background-color: #27ae60;
}

.deck-note {
  text-align: center;
  font-style: italic;
  color: #666;
}


#add-to-deck-button:hover,
#confirm-add-to-deck:hover,
#remove-from-deck-button:hover {
  background-color: var(--hover-color);
}

#deck-select-dropdown {
  height: 1.7vw;
  width: 5vw;
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 0.25rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: 1px solid black;
  background-color: var(--filter-background-color);
  color: var(--text-color);
}


/* card info modal end */
/* manage decks modal start */
.manage-decks-content {
  text-align: center;
  margin-top: -40vh;
  background-color: var(--body-background-color);
  padding: 1rem;
  border-radius: 8px;
  min-height: 20vh;
  max-height: 90vh;
  width: 15vw;
  overflow-y: auto;
  color: var(--text-color);
}

.deck-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.deck-item {
  background-color: var(--filter-background-color);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.deck-info-row {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.deck-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.deck-count {
  font-size: 0.9rem;
  opacity: 0.8;
  min-width: 80px;
  text-align: right;
}

.print-deck-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--button-color);
  color: var(--text-color);
  border: 1px solid black;
  border-radius: 4px;
  height: 1.4vw;
}
.print-deck-button:hover {
  background-color: var(--hover-color);
}

.delete-deck-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.delete-deck-button svg {
  fill: var(--mountain-color);
  width: 22px;
  height: 22px;
}

.delete-deck-button:hover svg {
  fill: red;
}
.import-deck-container {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.import-deck-label {
  padding: 1rem 0.7rem;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--button-color);
  color: var(--text-color);
  border: 1px solid black;
  border-radius: 4px;
  height: 1.4vw;
}
/* manage decks modal end */
/* add deck modal start */
/* Add Deck Modal */
.add-deck-content {
  justify-content: center;
  align-items: center;
  margin-top: -40vh;
  background-color: var(--body-background-color);
  padding: 1rem;
  border-radius: 8px;
  min-height: 25vh;
  max-height: 90vh;
  width: 17vw;
  overflow-y: auto;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#choose-commander-button,
#new-deck-name,
#create-deck-button {
  width: 15vw;
  height: 3.5rem;
  font-size: 1.2rem;
  border-radius: 5px;
  border: 1px solid black;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

#choose-commander-button,
#create-deck-button {
  background-color: var(--button-color);
  color: var(--text-color);
  font-weight: bold;
  cursor: pointer;
}

#choose-commander-button:hover,
#create-deck-button:hover {
  background-color: var(--hover-color);
}

.new-deck-name {
  text-align: center;
  background-color: var(--filter-background-color);
  color: var(--text-color);
}

#deck-name-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#chosen-commander-display {
  width: 80%;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  .hidden {
  display: none !important;
}


#chosen-commander-img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border: 2px solid #555;
  border-radius: 8px;
}
/* add deck modal end */
/* #endregion */

/* #region mobile start -------------------------------------------------------------------------------*/ 
@media (max-width: 768px) {
  /* #region Disabled in mobileview start */
  #left-group {
    display: none;
  }

  /* #endregion Disabled in mobileview end */
  /* main content start */
    .card-list {
    display: grid;
    grid-template-columns: repeat(var(--mobile-cards-per-row), 1fr);
    gap: var(--card-gap);
    padding: 1rem;
  }

  /* card hover start */

  .card-hover-bar {
    display: none; /* or visibility: hidden */
    transition: opacity 0.2s;
  }
  .card-hover-bar.active {
    display: flex; /* or whatever layout you use */
  }
  .qty-button {
    text-align: center;
    font-size: 0.8rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  .qty-input {
    width: 2rem;
    height: 2rem;
  }

  /* remove button start */
  .remove-button {
    top: 0.5rem;
    right: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
  }
    /* main content end */
    /* modal start */
  .card-info-modal {
    height: 90vh;
    max-height: 100vh;
    width: 80vw;
    -ms-overflow-style: none; 
  }
  .card-info-modal::-webkit-scrollbar {
    display: none;                /* Chrome/Safari/Edge */
  }

  .info-row {
    padding: 8px;
    gap: 0.25rem;
  }


  .span-3 {
    align-items: center;
    grid-column: span 3;
  }

  .info-value {
    font-size: 0.8rem;
  }

  #scryfall-link {
    font-size: 4vw;
  }


  #card-info-modal .close-button {
    position: absolute;
    top: 0rem;
    right: 0.3rem;
    background-color: transparent;
    border: none;
    font-size: 1.75rem;
    color: var(--text-color);
    cursor: pointer;
  }

  #add-to-deck-button,
  #confirm-add-to-deck,
  #remove-from-deck-button {
    height: 7vw;
  }

  .deck-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 80%;
  }

  .deck-tag {
    min-height: 3vh;
  }

  

  .remove-from-deck-button {
    font-size: 14px;
    min-height: 2.5vh;
  }

  .deck-select-dropdown {
    min-width: 20vw;
    min-height: 3.5vh;
  }


  .modal-content {
    width: 85vw;
    padding: 1rem;
    padding-top: 2rem; /* Space around the scroll area */
  } 
  .add-deck-content {
    margin-top: -10vh;
    min-height: 30vh;
    width: 80vw;
  }

  #choose-commander-button,
  #new-deck-name,
  #create-deck-button {
    min-width: 80vw;
    height: 6vh;
    font-size: 4vw;
  }


  #chosen-commander-display {
    width: 100%;
  }
  .manage-decks-content {
    margin-top: -20vh;
    min-height: 40vh;
    max-height: 90vh;
    width: 80vw;
  }

  .deck-list {
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .deck-item {    
    padding: 1rem 0.75rem;
    border-radius: 5px;
    gap: 0.75rem;
  }



  .deck-name {
    font-size: 4vw;
  }

  .deck-count {
    font-size: 4vw;
  }
  .print-deck-button {
      padding: 0.25rem 0.5rem;
      font-size: 0.85rem;
      font-weight: bold;
      cursor: pointer;
      background-color: var(--button-color);
      color: var(--text-color);
      border: 1px solid black;
      border-radius: 4px;
      height: 4vh;
    }
    .print-deck-button:hover {
      background-color: var(--filter-background-color);
    }
  .delete-deck-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .delete-deck-button svg {
    width: 25px;
    height: 25px;
  }
  .import-deck-label {
    padding: 0.8rem 0.5rem;
  }

    /* modal end */
  /* header start */
  .header {
    box-sizing: border-box;
    position: fixed;              
    top: 0;                       
    left: 0;
    width: 100%;                 
    height: 100vh;                 
    background-color: var(--header-color);
    display: flex;
    flex-direction: column; /* Stack left and right groups vertically */
    z-index: 1000;                
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    border-radius: 0 0 9px 9px   ; /* Rounded corners at the bottom */
  }
  .mobile-header-toggle {
    display: block; /* Show the mobile header toggle */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: var(--header-color);
    color: var(--text-color);
    border: none;
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    z-index: 1101; /* Above other header contents */
    border-radius: 9px;
  }
  /* Closed state */
  .header {
    top: -95vh;
    transition: top 0.3s ease-in-out;
  }

  /* Open state */
  .header.open {
    top: 0;
  }


  .left-group,
  .right-group {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }


  .right-group {
      justify-content: flex-end;
      order: 1;
  }

  /* input field start */
  .search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    gap: 1vw; 
    width: 85.5%;
    margin-top: 2vh;
    order: 1;
  }
  .search-field {
      margin: 0;
      padding: 0.5vh;
      width : 60%;
      height: 3vh;
      font-size: 1.8vh;
  }
  .search-button {
      display: block;
      height: 4.4vh;
      color: var(--text-color);
      width: 30%;
      border-radius: 5px;
      border: 1px solid rgba(44, 44, 44, 1);
      background-color: var(--button-color);
      font-size: 4vw;
      font-weight: bold;
  }
  .add-row-mobile {
    margin: 0;
    margin-top: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    gap: 1vw; 
    width: 85.5%;
    order: 2;
  }
  .add-field-mobile {
      border-radius: 7px;
      border: 2px solid rgba(44, 44, 44, 1);   
      background-color: var(--filter-background-color);
      margin: 0;
      padding: 0.5vh;
      width : 60%;
      height: 3vh;
      font-size: 1.8vh;
  }
  .add-button-mobile {
      display: block;
      height: 4.4vh;
      color: var(--text-color);
      width: 30%;
      border-radius: 5px;
      border: 1px solid rgba(44, 44, 44, 1);
      background-color: var(--button-color);
      font-size: 4vw;
      font-weight: bold;
  }
  
  /* input field end */
  /* mana filter start */
  .mana-filter {
      margin-top: 1vh;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.3rem;
      width: 100vw;
      order: 3;
  }
  .mana-filter label {
      height: 12vw;
      width: 12vw;
      justify-content: center;
      align-items: center;
      display: flex;
  }
  
  .white-mana-icon {
      height: 8vw;
  }

  .blue-mana-icon {
      height: 8vw;
  }

  .black-mana-icon {
      height: 8vw;
  }

  .red-mana-icon {
      height: 8vw;
  }

  .green-mana-icon {
      height: 8vw;
  }

  .colorless-mana-icon {
      height: 8vw;
  }

  /* mana filter end */
  /* filter button start */
  .filter-buttons {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
      order: 6;
      margin-top: 0.5vh;
  }
  .filter-buttons button {
    text-align: center;
    height: 4.4vh;
    color: var(--text-color);
    width: 100%;
    min-width: 26vw;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 4vw;
    font-weight: bold;
    margin-top: 0.2vh;
  }
  .filter-row {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    width: 100%; /* ← Add this */
  }
  .filter-row button {
    flex: 1;
  }
   #snap-mobile {
    margin-top: 1vh;
    height: 4.4vh;
    color: var(--text-color);
    width: 80vw;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--button-color);
    font-size: 4vw;
    font-weight: bold;
    background-color: rgb(71, 162, 223);
    order: 3;
  }
  #snap-mobile:hover {
    background-color: var(--mana-filter-checked-color);
  }
  #camera-mobile{
    display: none;
  }
  /* filter button end */
  /* new deck button start */
  .new-deck-button-mobile {
      height: 4.4vh;
      width: 80vw;
      min-width: 100px;
      border-radius: 5px;
      color: var(--text-color);
      border: 1px solid rgba(44, 44, 44, 1);
      background-color: var(--button-color);
      font-weight: bold;
      margin-top: 1vh;
      font-size: 4vw;
      order: 8;
  }
  /* new deck button end */
  /* totals start */
  .totals-mobile {
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
    display: flex;
    justify-content: space-between;
    width: 80vw;
    color: var(--mana-filter-checked-color);
    font-size: 4.6vw;
    font-weight: bold;
  }
  #total-cards-mobile {
    padding: 5px;
    padding-right: 22px;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    background-color: var(--filter-background-color);
  }

  #total-value-mobile {
    margin-right:50px;
    border-radius: 5px;
    border: 1px solid rgba(44, 44, 44, 1);
    padding: 5px;
    background-color: var(--filter-background-color);
  }
  /* totals end */
  /* logout button start */
  .logout-button {
      position: absolute;
      bottom: 50px; /* just above the toggle button */
      left: 50%;
      transform: translateX(-50%);
      height: 6vh;
      width: 80vw;
      min-width: 100px;
      border-radius: 5px;
      color: var(--text-color);
      border: 1px solid rgba(44, 44, 44, 1);
      background-color: var(--mountain-color);
      font-size: 4vw;
      font-weight: bold;
      z-index: 1001; /* Make sure it's above background */
    }


  /* logout button end */
  /* clear filters button start */
  .clear-filters-button {
      height: 4.4vh;
      margin: 0;
      margin-top: 1vh;
      width: 80vw;
      min-width: 100px;
      font-size: 4vw;
      order: 7;
  }
  /* clear filters button end */
  /* set dropdown start */
  .set-select-mobile {
      width: 80vw;
      padding: 0.5vh;
      height: 4.4vh;
      margin-top: 1vh;
      border-radius: 7px;
      color: var(--text-color);
      border: 2px solid rgba(44, 44, 44, 1);
      background-color: var(--filter-background-color);
      font-size: 4vw;
  }

  /* set dropdown end */
  /* deck dropdown start */
  .set-select-dropdown-mobile{
    align-items: center;
    justify-content: center;
    order: 4;
  }
  .deck-select-mobile {
      width: 80vw;
      padding: 0.5vh;
      height: 4.4vh;
      border-radius: 7px;
      color: var(--text-color);
      border: 2px solid rgba(44, 44, 44, 1);
      background-color: var(--filter-background-color);
      font-size: 4vw;
      margin-top: 0.5vh;
  }
  .deck-select-dropdown {
    align-items: center;
    justify-content: center;
    order: 5;
  }

  /* deck dropdown end */
  /* manage deck button start */
  .deck-configuration-mobile {
      display: flex;
      justify-content: center;
      align-items: center;
      order: 9;
      margin-top: 1vh;
  }
  .deck-configuration-button-mobile {
      height: 4.4vh;
      width: 80vw;
      min-width: 80px;
      min-height: 33px;
      border-radius: 5px;
      color: var(--text-color);
      border: 1px solid rgba(44, 44, 44, 1);
      background-color: var(--button-color);
      font-size: 4vw;
      font-weight: bold;
      
  }
  /* manage deck button end */
  /* header end */
}
/* #endregion */