:root {
    --primary-brand-color: #223a2a;
    --dark-green: #223a2a;
    --dark-green-hover: #072e14;
    --light-green: #dee5c9;
    --sage-green:  #B3B5AC;
    --orange-400: #FB923C;
    --gray-100: #f3f4f6;
    --light-sky: #F3ECE2;
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --success: #10b981;
    --error: #ef4444;
    --info: #3b82f6;
    --light-orange-background:#FFF6EF;
    --cancel-button-color:#adadad;
}

/* SweetAlert2 Overrides */
.swal2-styled.swal2-confirm {
    background-color: var(--dark-green) !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(34, 58, 42, 0.5) !important;
}

.swal2-styled.swal2-deny {
    background-color: var(--error) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--cancel-button-color) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-size: 82.5%; /* Makes 1rem = 10px for easier math */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
    overflow-x: hidden; /* Only prevent horizontal overflow */
}

/*checkbox color*/
input[type="checkbox"] {
    accent-color: var(--primary-brand-color);
}

.code-input {
    width: 48px !important;
    height: 48px;
    font-size: 28px;
    text-align: center;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    margin: 0 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    background: #fafbfc;
  }
  .code-input:focus {
    border-color: #a8b894;
    box-shadow: 0 0 0 2px #ede9fe;
    background: #fff;
  }


/* Ensure compatibility with existing styles */
.choices {
    width: 100%;
}

.choices__inner {
    border-radius: 4px;
    background-color: #fff;
}

/* Only apply highlight background to non-placeholder options */
.choices__list--dropdown .choices__item--selectable.is-highlighted:not(.choices__placeholder),
.choices__list--dropdown .choices__item--selectable.is-selected:not(.choices__placeholder) {
  background-color:  #d2e4e2!important; /* Your desired color */
  color: #111827 !important;
}
/* Explicitly specify placeholder background color */
.choices__list--dropdown .choices__item--selectable.choices__placeholder {
    background-color: #fff !important; /* Or your desired color */
    color: #9ca3af !important;         /* e.g. Tailwind's gray-400 */
}
/* Choices.js dropdown hover style override */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[role="listbox"] .choices__item--selectable.is-highlighted {
  background-color: #ebf1e3 !important;
  color: #111827 !important;
}

/* Make Choices.js dropdown width auto */
.choices__list--dropdown {
width: max-content !important;
min-width: 100%;
}
.choices__list--dropdown .choices__item {
    font-size: 1rem !important;  /* Your desired font size */
  }
/* Make outer input width auto (but not smaller than minimum width) */
.choices {
    /* width: fit-content !important; */
    min-width: 120px !important;
    max-width: 100%;
}


  /* Make dropdown float on top layer */
.choices__list--dropdown, .choices__list[role="listbox"] {
    z-index: 1100 !important;
}
  
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
    background-color: #f9fafb;
}

/* Loading state for buttons */
.is-loading {
    cursor: not-allowed !important;
    opacity: 0.7;
}