:root{
      --brand: #6CC57C;          /* green accent */
      --brand-600: #2f9e44;
      --text-on-dark: #e9ecef;
      --muted-on-dark: #ced4da;
      --card-bg: rgba(20,22,25,.86);
      --card-border: rgba(55,178,77,.45);
       --hero-bg: url("/admin/assets/img/banner-image.png");

    }

    html, body {
      height: 100%;
      font-family: "Playfair Display", serif;
      font-weight: 600;
      /* background: #F2F6FF; */
      background: #fff;
      color: var(--text-on-dark);
    }

    /* HERO */
    .hero {
      min-height: 100dvh;
      background: linear-gradient( to bottom right, rgba(15,18,22,.65), rgba(15,18,22,.65) ),
                  var(--hero-bg) top/cover no-repeat fixed;
      position: relative;
      overflow: hidden;
    }

    /* NAVBAR */
    .navbar-glass {
      background: linear-gradient(to bottom, rgba(15,18,22,.65), rgba(15,18,22,.25));
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,.08);
      z-index: 1040;
      box-shadow: 0px 0px 40px #abb6cc70;
    }
    .nav-center { margin-left: auto; margin-right: auto }
    .navbar-dark .navbar-nav .nav-link {
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0,.35);
      font-size: 25px;
    }
    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .nav-link:hover {
      color: #6cc57c;
    }
    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      font-weight: 800;
      letter-spacing: .2px;
      color: #fff;
      text-decoration: none;
    }
    .brand-icon {
      width: 28px; height: 28px; display: inline-block;
      background: radial-gradient(circle at 40% 35%, #fff 0 50%, #e9f7ee 51% 100%);
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;
    }
    .brand-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
      display: inline-block; margin-left: 2px;
    }

    /* LEFT COPY */
    .eyebrow { color: #ffffff; letter-spacing: .4px; font-size: 30px; }
    .display-hero { font-weight: 400; line-height: 1.05; font-size: clamp(2.2rem, 3.2vw + 1rem, 4rem) }
    .display-hero .accent { color: var(--brand);font-weight: 700;  }
    .lead-hero { color: #ffffff; font-size: 30px;}

    .cta-btn {
      padding: .7rem 1.1rem;
      border: 1px solid rgba(255,255,255,.35);
      color: #fff; background: transparent;
      backdrop-filter: blur(2px);
      min-width: 250px;
    }
    .cta-btn:hover { border-color: #fff; color: #fff }

    /* AUTH CARD */
    .auth-card {
    background: rgb(0 0 0 / 30%);
    box-shadow: 0px 0px 40px #ABB6CC33;
    border-radius: 49px;
    opacity: 1;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    }
    .auth-card.rounded-5 { border-radius: 1.25rem !important }
    .auth-tabs{
      display: flex;
      justify-content: space-around;
    }


    .auth-card .auth-card-header .title{
      font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
      color:#ffffff;
      font-weight:800;
    }

    .txt-theme-color{
      color: var(--brand) !important;
    }


    .auth-card .auth-card-header .subtitle{
      font-size:20px;
      color:#ffffff;
      font-weight:500;
    }

    .auth-tabs .nav-link {
      color: #cdd6df; border: 0; border-bottom: 2px solid transparent;
      border-radius: 0; padding: .95rem 1.1rem;
      font-weight: 700;
      font-size: 25px;
    }
    .auth-tabs .nav-link.active {
      color: #6BC37C; border-bottom-color: var(--brand);
      background: transparent;
    }
    .auth-divider { border-bottom: 1px solid rgba(255,255,255,.12) }
    .form-label { color: #b8c5d6; font-weight: 600; font-size: .9rem; letter-spacing: .2px }
    .form-floating-custom {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .form-floating-custom .form-control {
      background: transparent;
      color: #e9f0f6;
      border: 1px solid transparent;
      border-bottom: 1px solid #fff;
      padding: 1.7rem .75rem .25rem; /* leave space for label */
    }

    .form-floating-custom .form-control:focus {
      border: 1px solid transparent;
      border-bottom: 1px solid var(--brand);
    }

    .form-floating-custom label {
      position: absolute;
      top: 0.9rem;
      left: .75rem;
      color: #ffffff;
      font-size: 20px;
      transition: all .2s ease;
      pointer-events: none;
    }

    /* Remove white background from Chrome/Edge autofill */
/* .form-floating-custom .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
} */



/* On focus too */
/* .form-floating-custom .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
} */



.form-floating-custom .form-control:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px #1b1c1e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}

.form-floating-custom .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1b1c1e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
    border: transparent;
    border-bottom: 1px solid #6bc37c;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}



    /* When input is focused or not empty */
    .form-floating-custom .form-control:focus + label,
    .form-floating-custom .form-control:not(:placeholder-shown) + label {
      top: 0.2rem;
      font-size: 18px;
      color: var(--brand);
    }

    /* Optional: icon position */
    .form-floating-custom .icon {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--brand);
      pointer-events: none;
    }

    .form-otp-custom {
      position: relative;
      margin: 1.5rem 0.5rem;
    }

    .form-otp-custom .form-control {
      background: transparent;
      color: #e9f0f6;
      border: 1px solid #7F8DA0;
      box-shadow: 0px 3px 6px #00000029;
      padding: 0.7rem ;
      border-radius: 10px;
      text-align: center;
      font-size: 25px;
    }

    .form-otp-custom .form-control:focus {
      border: 1px solid var(--brand);
    }


    /* Chrome, Safari, Edge, Opera */
    .form-otp-custom input[type=number]::-webkit-inner-spin-button,
    .form-otp-custom input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    .form-otp-custom input[type=number] {
      -moz-appearance: textfield;
    }


    .text-muted { color: var(--muted-on-dark) !important }



    .btn-brand {
      background: var(--brand);
      border: 1px solid var(--brand-600);
      color: #ffffff;
      font-weight: 700;
      min-width: 150px !important;
      padding: .5rem 1.1rem;
    }

    .btn-brand:hover { background: var(--brand-600); color: #ffffff }

    /* Small tweaks */
    .check-inline {
      display: flex;
      gap: .5rem;
      color: #ffffff;
      font-size: 20px;
      align-items: center;
    }


    .auth-card .btn-brand {
      min-width: 250px !important;
    }


 .form-check-input {
  appearance: none; /* remove default checkbox */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 25px;
  height: 25px;

  /* UI Properties */
  box-shadow: none;
  border: 2px solid #7F8DA0;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* On hover */
.form-check-input:hover {
  border-color: #5c6b80;
}

/* When checked */
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}

/* Custom tick mark */
.form-check-input:checked::after {
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

/* Custom Select Wrapper */
.input-icon-end {
  position: relative;
  display: flex;
  align-items: center;
}

.form-select {
  background: transparent;
  color: #e9f0f6;
  border: 1px solid transparent;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  padding: 1rem .75rem .25rem;
  font-size: 18px;
  appearance: none; /* removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Focus style */
.form-select:focus {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--brand);
  box-shadow: none;
  outline: none;
}

/* Floating label for select */
.input-icon-end label {
  position: absolute;
  top: 0.9rem;
  left: .75rem;
  color: #ffffff;
  font-size: 20px;
  transition: all .2s ease;
  pointer-events: none;
}

/* When select has value (not default placeholder) */
.form-select:focus + .select-label,
.form-select:not([value=""]) + .select-label {
  top: -0.4rem;
  font-size: 18px;
  color: var(--brand);
}

/* Custom caret icon */
.select-caret {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #e9f0f6;
  pointer-events: none;
  font-size: 20px;
}

/* Style the dropdown list (options menu) */
.form-select option {
  background-color: #ffffff;  /* dark background */
  color: #000000;             /* light text */
 border: none;
 box-shadow: 0px 0px 15px #00000033;
}

/* Optional: hover effect inside dropdown */
.form-select option:hover {
  background-color: var(--brand);
  color: #ffffff;
}





    /* Underline inputs (to match screenshot) */
    .form-underline {
      border: 0; border-bottom: 2px solid rgba(255,255,255,.22); border-radius: 0;
      padding-left: 0; padding-right: 2.25rem; background: transparent; padding-bottom: .6rem;
    }
    .form-underline:focus { border-color: var(--brand); box-shadow: none }
    .input-icon-end { position: relative }
    .input-icon-end .icon {
      position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
      color: #3ad074;
      pointer-events: none;
    }
    .select-clear { appearance: none; -webkit-appearance: none; -moz-appearance: none }
    .select-caret { color: #cfd8e3 }

    /* Segmented control */
    .segmented {
      display: inline-flex; background: rgba(255,255,255,.12); border-radius: 999px; padding: .2rem; gap: .3rem;
    }
    .segmented input { display: none }
    .segmented label {
      margin: 0; padding: .35rem .95rem; border-radius: 999px; color: #e5e7eb; cursor: pointer; font-weight: 600; font-size: .95rem;
      transition: background .2s ease, color .2s ease;
    }
    .segmented input:checked + label { background: var(--brand); color: #061007 }
    .muted-link { color: #d1d5db; text-decoration: none }
    .muted-link:hover { text-decoration: underline }

    /* Layout constraints */
    .container-fixed {
      /* max-width: 1400px;   */
      max-width: 85%;
    }

    .auth-card-wrapper { }
    /* Give breathing room below the navbar so the card never touches */
    .hero { padding-top: 6.25rem }
    @media (min-width: 992px) { .auth-card-wrapper { margin-top: 0.75rem } }
    @media (min-width: 1200px) { .auth-card-wrapper { margin-top: 1rem } }
    .copy-narrow { max-width: 560px }

    /* CONTENT SECTIONS (light theme) */
    /* .section-light {
      background: #f3f6fa;
      color: #0f1216
    } */

    .section-light {
      background: #fff;
      color: #0f1216
    }
    .section-light .lead { color: #475569 }
    .section-heading { font-weight: normal; color: #1f2937; font-size: 40px }
    .section-kicker { font-size: 50px; color: var(--brand); font-weight: 800; letter-spacing: .3px }
    .section-description { font-size: 20px; color: #475569; font-weight: normal;}
    .rule-left { position: relative; padding-left: 1rem }

    .card-soft { background: #fff; border: 1px solid #e6ebf2; border-radius: 1rem; box-shadow: 0 8px 24px rgba(16,24,40,.06) }
    .shadow-hover:hover { box-shadow: 0 12px 30px rgba(16,24,40,.12) }
    .rounded-3xl { border-radius: 1.25rem }
    .flag {
      width: 150px;
      height: 100%;
      border-radius: .55rem;
      box-shadow: 0 6px 14px rgba(16,24,40,.08);
      object-fit: cover;
      position: relative;
      cursor: pointer;
      transition: transform 0.2s ease-in-out;
    }

    .flag:hover {
      transform: scale(1.05);
    }

    /* Tooltip */
    .flag::after {
      content: attr(alt); /* takes name from alt attribute */
      position: absolute;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%);
      background: #23233c;
      color: #fff;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: .35rem;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease-in-out;
    }

    .flag:hover::after {
      opacity: 1;
    }
    .flags-wrap { gap: 1.1rem; align-items: center }
    @media (max-width: 576px) { .flag { width: 56px; height: 36px } }
    /* Footer */
    .footer { background: #e1f2ef; color: #1f2937; font-size: .95rem }
    .footer a { color: #1f2937; text-decoration: none }
    .footer a:hover { text-decoration: underline }


    /* Profile - 25-8-2025 */

    .custom-profile-nav {
      background: #2b4a44 0% 0% no-repeat padding-box;
      box-shadow: 0px 0px 40px #ABB6CC33;
      border-radius: 30px;
      display: flex;
      justify-content: space-around;
    }

    .custom-profile-nav .nav-link {
      text-align: center;
      font-size: 20px;
      letter-spacing: 0px;
      color: #e9f0f6;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      /* smooth transition */
      transition: color 0.3s ease, border-color 0.3s ease, border-bottom 0.3s ease;
    }

    .custom-profile-nav .nav-link:hover {
      color: #6BC37C;
      border-bottom: 2px solid #6BC37C;
    }

    .custom-profile-nav .nav-link.active {
      color: #6BC37C;
      border-bottom: 2px solid #6BC37C;
    }

    .main-card{
      /* background: #23233C 0% 0% no-repeat padding-box;
      box-shadow: 0px 0px 40px #ABB6CC33;
      border-radius: 30px; */
      background: #2b4a44 0% 0% no-repeat padding-box;
      box-shadow: 0px 0px 40px #ABB6CC33;
      border-radius: 30px;
    }

    .user-profile-img{
      box-shadow: 0px 3px 6px #00000029;
      border-radius: 20px;
    }

    @media (max-width: 992px) {
      .user-profile-img {
        max-width: 200px;
      }

      .edit-btn-profile {
        position: absolute;
        top: 20px;
        right: 10px;
      }

      .custom-secondary-btn span {
        display: none;
      }
    }

    @media (max-width: 1200px) {
      .user-profile-img {
        width: 200px;
      }

      .edit-btn-profile {
        position: absolute;
        top: 20px;
        right: 10px;
      }

      .custom-secondary-btn span {
        display: none;
      }
    }



    .custom-secondary-btn{
      padding: .5rem 1.1rem;
      border: 1px solid var(--brand) !important;
      border-radius: 10px;
      color: #fff !important;
      background: var(--brand);
      backdrop-filter: blur(2px);
      /* min-width: 250px; */
      font-size: 20px !important;
    }

    .custom-secondary-btn svg{
      fill: #fff !important;
    }

    .custom-secondary-btn:hover{
      background-color: var(--brand-600) !important;
      border: 1px solid var(--brand-600) !important;
      color: #fff !important;
      box-shadow: 0px 0px 15px #00000033;
    }

    .custom-secondary-btn:hover svg{
      fill: #fff !important;
    }

    .light-border-box{
      border: 1px solid #ffffff;
      border-radius: 20px;
    }

    .card-header-title{
      text-align: center;
      font-size: 20px;
      letter-spacing: 0px;
      color: #23233C;
      border-bottom: 2px solid #E3E8F5;
    }

    .card-header-title h5{
      border-bottom: 2px solid #23233C;
    }

    .custom-btn-link {
      text-decoration: none;
      text-align: left;
      color: #23233C;
      border-bottom: 2px solid transparent !important;
      cursor: pointer;
      transition: color 0.3s ease, border-bottom-color 0.3s ease;
    }

    .custom-btn-link svg {
      fill: #23233C;
      transition: fill 0.3s ease;
    }

    .custom-btn-link:hover {
      color: var(--brand-600);
      border-bottom: 2px solid var(--brand-600) !important;
    }

    .custom-btn-link:hover svg {
      fill: var(--brand-600);
    }

    .custom-card {
      /* background: #F2F6FF 0% 0% no-repeat padding-box;
      box-shadow: 0px 0px 40px #ABB6CC33;
      border-radius: 15px;
      height: 100%; */

      background: #ffffff 0% 0% no-repeat padding-box;
      box-shadow: 0px 0px 15px #00000033;
      border-radius: 15px;
      height: 100%;
    }

    /* timeline */
        .timeline {
      position: relative;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 100px; /* aligns the vertical line */
      top: 0;
      bottom: 0;
      width: 2px;
      background: #cfd5e3;
    }

    .timeline-item {
      display: flex;
      border-radius: 15px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      will-change: transform, box-shadow;
      cursor: pointer;
    }

    .timeline-item:hover {
      background: #FFFFFF;
      transform: translateY(-3px) scale(1.02); /* subtle lift + zoom */
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.12); /* soft shadow */
    }

    .timeline-date {
      width: 100px;
      text-align: right;
      padding-right: 20px;
      color: #555;
    }

    .timeline-content {
      position: relative;
      padding-left: 30px;
      flex: 1;
    }

    .timeline-content::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 5px;
      width: 12px;
      height: 12px;
      border: 2px solid #23233C;
      border-radius: 50%;
      background: #fff;
    }

    .timeline-title {
      font-weight: bold;
      color: #23233C;
    }

    .timeline-sub {
      color: #7F8DA0;
    }

    .custom-light-card {
      background: #FFFFFF;
      box-shadow: 0px 0px 15px #00000033;
      border-radius: 15px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      will-change: transform, box-shadow;
      cursor: pointer;
    }

    .custom-light-card:hover {
      transform: translateY(-4px) scale(1.02); /* very small lift + zoom */
      box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.12); /* softer shadow */
    }

 .mh-action-btn {
  opacity: 0;
  transform: translateX(30px); /* start slightly to the right */
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* prevents accidental clicks when hidden */
}

.custom-light-card:hover .mh-action-btn {
  opacity: 1;
  transform: translateX(0); /* slide into place */
  pointer-events: auto;
}

    .medical-history-title{
      color: #23233C !important;
    }

    .medical-history-description{
      color: #7F8DA0 !important;
    }

    .hospital-service-logo {
    top: 0;
    position: absolute;
    right: 0;
    box-shadow: 0px 0px 40px #ABB6CC33;
    border-radius: 15px 0px 0px 15px;
    }

    .custom-light-nav{
      background: transparent !important;
    }

    .custom-light-nav .nav-link {
      text-shadow: none !important;
      color: #23233C !important;
      position: relative;
      transition: color 0.3s ease; /* smooth text color transition */
    }

    .custom-light-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px; /* little space under text */
      width: 0;
      height: 2px;
      background: var(--brand-600);
      transition: width 0.3s ease; /* smooth underline transition */
    }

    .custom-light-nav .nav-link:hover {
      color: var(--brand-600) !important;
    }

    .custom-light-nav .nav-link:hover::after,
    .custom-light-nav .nav-link.active::after {
      width: 100%; /* expand underline smoothly */
    }


    .custom-light-nav .nav-link.active{
      text-shadow: none !important;
      color: var(--brand-600) !important;
    }





.mh-edit-btn:hover{
background-color: aliceblue;
}

.mh-edit-btn svg{
fill: #23233c;
}

.mh-delete-btn:hover{
background-color: rgb(255, 242, 240);
}

.mh-delete-btn svg{
fill: #bd0037;
}

/* Common input styles (date, time, datetime-local) */
.form-floating-custom input[type="date"],
.form-floating-custom input[type="time"],
.form-floating-custom input[type="datetime-local"] {
  background: transparent;
  color: #e9f0f6;
  border: 1px solid transparent;
  border-bottom: 1px solid #fff;
  padding: 1rem .75rem .25rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Common text color inside the pickers */
.form-floating-custom input[type="date"]::-webkit-datetime-edit,
.form-floating-custom input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.form-floating-custom input[type="date"]::-webkit-datetime-edit-text,
.form-floating-custom input[type="date"]::-webkit-datetime-edit-month-field,
.form-floating-custom input[type="date"]::-webkit-datetime-edit-day-field,
.form-floating-custom input[type="date"]::-webkit-datetime-edit-year-field,
.form-floating-custom input[type="time"]::-webkit-time-edit,
.form-floating-custom input[type="time"]::-webkit-time-edit-fields-wrapper,
.form-floating-custom input[type="time"]::-webkit-time-edit-text,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit-fields-wrapper,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit-text,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit-month-field,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit-day-field,
.form-floating-custom input[type="datetime-local"]::-webkit-datetime-local-edit-year-field {
  color: #000000;
}

/* Hide default picker icon */
.form-floating-custom input[type="date"]::-webkit-calendar-picker-indicator,
.form-floating-custom input[type="time"]::-webkit-calendar-picker-indicator,
.form-floating-custom input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* Floating label effect */
.form-floating-custom input[type="date"]:focus + label,
.form-floating-custom input[type="date"]:not(:placeholder-shown) + label,
.form-floating-custom input[type="time"]:focus + label,
.form-floating-custom input[type="time"]:not(:placeholder-shown) + label,
.form-floating-custom input[type="datetime-local"]:focus + label,
.form-floating-custom input[type="datetime-local"]:not(:placeholder-shown) + label {
  top: -0.4rem;
  font-size: 18px;
  color: var(--brand);
}


.profile-img-wrapper {
  position: relative;
  display: inline-block;
}

.profile-img-wrapper img {
  display: block;
  border-radius: 10px; /* optional */
}

.profile-img-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 35, 60, 0.8); /* dark overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 10px; /* match img */
  box-shadow: 0px 0px 15px #00000033;
  border: 1px solid #00000033;
}

.profile-img-wrapper:hover .overlay {
  opacity: 1;
}


/* Common button-with-icon style */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* space between icon and text */
}

/* Fake radio/checkbox icon */
.btn-with-icon .icon {
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 4px; /* square by default (checkbox look) */
  display: inline-block;
  position: relative;
}

/* Radio version = circle */
input[type="radio"] + .btn-with-icon .icon {
  border-radius: 50%;
}

/* Checked states */
input[type="checkbox"]:checked + .btn-with-icon .icon::after,
input[type="radio"]:checked + .btn-with-icon .icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #ffffff;
  border-radius: inherit; /* keep circle for radio, square for checkbox */
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: #6bc37c;
    border-color: #6bc37c;
}

.btn-outline-primary {
    --bs-btn-color: #ffffff !important;
    --bs-btn-border-color: #ffffff !important;
}

.upload-box {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 40px 20px;
  cursor: pointer;
  transition: border-color 0.3s;
}
.upload-box:hover {
  border-color: #6BC37C;
}
.upload-placeholder i {
  color: #6BC37C;
}
.uploaded-file {
  border: 1px dashed #6BC37C;
  background: transparent;
}
.uploaded-file button {
  border-radius: 50%;
  padding: 5px 8px;
}

/* Loader hidden by default */
.btn .loading-dots {
  display: none;
  margin-left: 8px;
  font-weight: bold;
  letter-spacing: 2px;
}

.btn .loading-dots span {
  opacity: 0;
  animation: blink 1.4s infinite;
}

.btn .loading-dots span:nth-child(1) { animation-delay: 0s; }
.btn .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.btn .loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Common loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn.loading .btn-text { display: none; }
.btn.loading .loading-dots { display: inline-block; }


.form-control.is-invalid {
  border-color: none;
  border-bottom: 1px solid var(--bs-form-invalid-border-color);
  box-shadow: none;
}
.form-control.is-invalid:focus {
  border-color: none;
  border-bottom: 1px solid var(--bs-form-invalid-border-color);
  box-shadow: none;
}

/* ------------------- Custom card input field ------------------- */


    .custom-card .form-floating-custom .form-control {
      color: #000000;
      border: 1px solid #00000000;
      border-bottom: 1px solid #000000;
    }

    .custom-card .form-floating-custom .form-control:focus {
      border: 1px solid transparent;
      border-bottom: 1px solid var(--brand);
    }


    .custom-card .form-select {
      color: #000000;
      border-bottom: 1px solid #000000;
    }

    .custom-card .light-border-box{
      border: 1px solid #000;
      border-radius: 20px;
    }

    .custom-card .form-label {
      font-size: 18px;
      color: var(--brand);
    }

    .custom-card .btn-outline-primary {
    --bs-btn-color: #000 !important;
    --bs-btn-border-color: #000 !important;
  }

  .custom-card .btn-with-icon .icon {
    border: 2px solid #000000 !important;
  }

  .custom-card .btn-check:checked+.btn .icon{
    border: 2px solid #fff !important;
  }

  .modal .form-floating-custom label {
    color: #000000;
  }


.custom-card .custom-secondary-btn {
  background: var(--brand);
  border: 1px solid var(--brand-600);
  color: #ffffff !important;
  font-size: inherit;
  font-weight: 600;
  transition: all 0.3s ease; /* smooth animation */
}

.custom-card .custom-secondary-btn svg {
  fill: #fff !important;
  transition: fill 0.3s ease, transform 0.6s ease; /* smooth color + rotation */
}

.custom-card .custom-secondary-btn:hover {
  background: var(--brand-600);
  border: 1px solid var(--brand-600) !important;
  color: #fff !important;
}

.custom-card .custom-secondary-btn:hover svg {
  fill: #fff !important;
  transform: rotate(360deg); /* rotate like refresh */
}


.carousel-inner {
    height: 440px;
}


/* 17-10-2025 */
.t-count{
    color: black;
    padding: 12px;
    background: #dddddd;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}