/* Make body fill the whole viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
  font-family: 'Nunito Sans', sans-serif;
}

/* Global theme tokens */
:root {
  --brand-primary: #003366;
  --brand-primary-light: #e6f0ff;
  --brand-secondary: #f4c26b;
  --brand-accent: #ffd37e;
  --brand-bg: #f8f9fa;
  --brand-bg-elevated: #ffffff;
  --brand-text: #111827;
  --brand-text-soft: #4b5563;
}

/* Set up vertical layout btn*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensure page is at least viewport height */
  background: var(--brand-bg);
  color: var(--brand-text);
}

body > header {
  background-color: var(--brand-bg-elevated);
  padding: 0.01rem 2rem;
  color: var(--brand-text);
}

/* Main grows to fill remaining space between header and footer */
main{
  flex: 1 0 auto;
  padding: 0;
  background: transparent; 
  /* overflow-y: auto; ← Optional */
}

footer {
  background: #0A326D;
  color: white;
  text-align: center;
  padding: 1rem;
  flex-shrink: 0; /* keep footer at bottom when content is short */
} 
 
/* ==============================
  Typography
=================================*/ 
 h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--brand-text);
  margin: 0 0 0.75em; 
  text-align:left;
}

 p, span, a, li {
  font-family: 'Nunito Sans', sans-serif;
  margin: 0 0 1em;
  font-size: 1rem; 
  color: var(--brand-text-soft);
  text-align:left;
} 

/* ==============================
   Buttons
============================== */
 button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: none; 
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
  text-decoration: none;
}

button span,
button a,
button svg {
  color: inherit !important;
}

.btn{
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border: none; 
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: var(--brand-primary-light) !important;
}
.btn-primary:hover {
  color: var(--brand-primary) !important;
  background-color: var(--brand-secondary);
}

.btn-secondary {
  background-color: var(--brand-secondary);
  color: var(--brand-primary) !important;
}
.btn-secondary:hover {
  color: var(--brand-secondary) !important;
  background-color: var(--brand-primary) !important;
}

.btn-success,
a.btn-success{
  background-color: #0f5132;
  color: #fff;
  border: none;
  text-decoration: none;
}

.btn-cancel,
a.btn-cancel{
  background-color: #dc3545;
  color: #fff;
  border: none;
  text-decoration: none;
}

.btn-success:hover,
.btn-cancel:hover,
a.btn-success:hover,
a.btn-cancel:hover{
  filter: brightness(0.95);
}


/* ==============================
   Inputs & Textareas
============================== */
 input,
 textarea {
  width: 100%;
  height: 40px;
  padding: 0.65em;
  font-size: 1rem;
  border: 2px solid var(--brand-primary);
  background: var(--brand-primary-light);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
 }

 input:focus,
 textarea:focus {
  border-color: var(--brand-primary);
  outline: none;
} 

 select {
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-primary-light);
  cursor: pointer;
  color: #000000;
  font-weight: bold;
  width: 100%;
  height: 40px;
  font-size: 1rem;
 }


/* ==============================
   Cards & Containers
============================== */
 .card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 1.5rem;
 } 

.overFlow-x-noBar{ 
  overflow-x: auto; 
  scrollbar-width: none;  
  -ms-overflow-style: none;  
}
.overFlow-x-noBar::-webkit-scrollbar{ 
  display: none;
}

.upload-img-wrap{
  background-color: red;
}


/* ==============================
   Alerts / Messages
============================== */

.msg {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem; 
}

.msg-success {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid #73d39a;
  background: #e9f9ee;
  color: #0f5132 !important;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.msg-error {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid #f5a3ad;
  background: #fdecee;
  color: #b42318 !important;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.msg-success *,
.msg-error *,
.msg * {
  color: inherit !important;
}

.fadingNotifier {
  transition: opacity 0.35s ease, transform 0.35s ease;
}


/* ==============================
   Modals
============================== */


/*_____-------------------------- */ 
.thumbnails{
  display: flex;  
  width: 80%;
}
 
 #preview img { max-height: 100px; }

 #optionsContainer{
  display: none;
}

.uploadBtn-wrapper{
  display: flex;
  background-color: #464d773e;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  align-items: center; 
  justify-content: center;
  margin-right: 10px;
}

.uploadBtn{
  color: #464D77; 
  font-size: 30px;
  font-weight: bold;
}

.uploaded-img-thumbnail-wrapper{  
  margin: 0 5px; 
  position: relative;
}

.uploaded-img-thumbnail{
  border-radius: 10px;
}

.uploaded-img-thumbnail-btn{
  background-color: rgba(0, 0, 0, 0.426); 
  width: 50px;
  position: absolute;
  left: 0; 
}  
/*_____-------------------------- */

/* ==============================
   Icons
============================== */
.input-icon-wrap{position:relative;margin-bottom:1rem;display:block;}
.input-icon-wrap > i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--brand-primary);pointer-events:none;line-height:1;font-size:0.95em;margin-top:0;}
.input-icon{padding-left:36px !important;}
.input-icon-wrap .input-icon{margin-bottom:0;}
.input-icon-wrap select.input-icon,.input-icon-wrap textarea.input-icon{padding-left:36px !important;}

.select-icon-wrap{position:relative;margin-bottom:1rem;display:block;}
.select-icon-wrap > i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--brand-primary);pointer-events:none;line-height:1;font-size:0.95em;margin-top:0;}
.select-icon-wrap select.input-icon{padding-left:36px !important;margin-bottom:0;}

.chat-support-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1.05rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.chat-support-fab i{
  color: #ffffff;
  font-size: 1rem;
}

.chat-support-fab span{
  color: #ffffff;
  margin: 0;
  font-size: 0.95rem;
}

.chat-support-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
  opacity: 0.98;
}

@media (max-width: 520px){
  .chat-support-fab{
    right: 14px;
    bottom: 14px;
    padding: 0.8rem 0.95rem;
  }
  .chat-support-fab span{
    display: none;
  }
}