/* Base */

@font-face {
  font-family: 'Cosmetic';
  src: url('/website/fonts/spacefont/spacefont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Avenir-roman';
  src: url('/website/fonts/avenir/AvenirLTStd-Roman.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.text-bold{
  font-weight: bolder !important;
}

.text-deep-clay{
  color: var(--whitek) !important;
}

.text-soft-black-light{
  color: var(--soft-black) !important;
}

.text-deep-clay-dark{
  color: var(--black) !important;
}

hr.text-deep-clay{
  border: 0.05em dotted var(--tertairyColor) !important;
}

.dotted_line{
 border-bottom:0px solid var(--color2) !important;
 border-right:0px solid var(--color2) !important;
}

.title-class-detail{
  font-size: 30px;
  font-weight: bolder;
  color: var(--textCard) !important;
}

.img-icon{
  max-width: 100px;
  margin-bottom: 10px;
}


.mt-10em{
  margin-top: 10em;
}


.mt-5em{
  margin-top: 5em;
}

.mt-6em{
  margin-top: 6em;
}

.main-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--black) !important;
}


.main-title-welcome {
  font-size: 2rem;
  font-weight: bold;
  color: var(--textWelcome) !important;
}

.title-modal{
  font-size: 2rem;
  font-weight: bold;
  color: white !important;
}

.sub-title {
  font-size: 1.2rem;
  color: var(--white) !important;
  font-weight: bolder;
}
.rincian {
  font-size: 1rem;
  color: var(--white);
  line-height: normal;
}

.rincian-title {
  font-size: 1.5rem;
  font-weight: bolder;
  color:var(--white);
}

.bg-color0{
  background: var(--secondaryColor) !important;
  color: var(--white) !important;
}
.bg-color1{
  background: var(--bgCard) !important;
  color: var(--textCard) !important;
}
.bg-color2{
  background: var(--color2) !important;
  color: var(--white) !important;
}
.bg-color000-light {
  background-color: #fff8e1 !important;
}

.bg-color000 {
  background-color: var(--tertairyColor) !important;
  color:white !important;
}

.bg-white{
  background: var(--white) !important;
}

.bg-color000-light {
  background-color: var(--secondaryColor);
}

.bg-color3{
  background-color:var(--tertairyColor) !important;
  color:var(--white) !important;
}

.shadow-sm{
  border:1px solid var(--color2) !important;
}

.bank-details{
  font-size: 14px;
  color: var(--soft-black);
  font-weight: bold;
  background: #fff !important;
}
.bank-details .account-number {
  font-size: 16px;
  color: var(--soft-black);
}
.contact-admin {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--soft-black);
}

.btn-custom {
  background-color: greenyellow;
  color: #856452;
}
.btn-custom:hover {
  background-color: var(--tertairyColor);
}

.btn-login{
  background-color:var(--tertairyColor) !important;
  color: var(--white);
}

.btn-login:hover {
  background-color: var(--color2);
}

.nav-item{
  color: var(--soft-black);
  font-weight: bolder;
  font-size: 16px !important;
  background:var(--tertairyColor);


}

li.nav-item-member{
  list-style: none !important;
  font-size: 16px !important;
  padding: 0px;
  margin: 0px;
 

}

li.nav-item-member > a.nav-link{
  font-size: 1.1rem;
  color: var(--textBtnAccount) !important;
  font-weight: bold;
}

.rounded-circle{
  background-color:var(--btnAccount);
  color:var(--soft-black) !important;
  font-weight: bold;
}

.bg-dropdown-menu-member{
  background-color:var(--bgMenu);
}
.nav-link{
 color: var(--soft-black) !important;
}

.dropdown-menu i, .dropdown-menu a{
  color:var(--white) !important;
  font-weight: bold;
}

.dropdown-menu .dropdown-item:hover{
  background-color:var(--bgMenuHover);
}

form a{
  color: var(--textPrimary);
  text-decoration: underline;;
}

/* schedule style */

 /* Container tanggal scrollable */


 .header-container {
  position: sticky;
  top: 100;
  z-index: 10;
  background-color: #fff; /* Atau sesuai warna latar belakangmu */
  padding: 20px 0;
  border-bottom:0px solid var(--tertairyColor);
}

 .date-picker-container {
  display: flex;
  overflow-x: auto;
  padding: 10px 0;
  gap: 8px;
  scroll-snap-type: x mandatory;
}

.date-picker-container::-webkit-scrollbar {
  display: none; /* sembunyikan scrollbar di mobile */
}

.date-btn {
  flex: 0 0 auto;
  min-width: 60px;
  border: 1px solid var(--deep-clay);
  border-radius: 10px;
  padding: 8px;
  background-color: var(--tertairyColor);
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
}

.date-btn.selected {
  background-color: var(--color2);
  color: white;
  font-weight: bold;
}

.day { font-size: 12px; margin-bottom: -3px; } 
.date { font-size: 1.2em; font-weight: bolder; }

.class-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 1rem;
}



#selectedDateHeader{
  color:var(--soft-black);
  font-weight: bold;

}

.booking-btn {
  background-color: var(--tertairyColor);
  color: var(--soft-black);
  border: var(--deep-clay);
  padding: 0px 16px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 0px !important;
  height: 2.1em !important;
}


.booking-btn:hover {
  background-color: var(--color2-light);
  border: var(--deep-clay) !important;
}

.welcome-side{
  background-color: var(--bgWelcome);
  color: var(--textWelcome);
}

.bg-package{
  background-color: var(--bgDiscoverSection) !important;
  color: var(--textDiscoverSection) !important;
}

.bg-package h2, .bg-package h5{
  color: var(--textDiscoverSection) !important;
}


@media (max-width: 576px) {
  .class-card span {
      flex: 1 1 100%;
      margin-bottom: 6px;
  }

  .date-btn {
      min-width: 48px;
      padding: 6px;
      font-size: 12px;
  }
}


/*--------------------------------------*/

/* Center align khusus untuk layar besar */
@media (min-width: 768px) {
  .date-picker-container {
      justify-content: center;
  }
}


.main-title-package{
  font-weight: bold;
  color: var(--soft-black-dark);
  font-size: 22px;;
}

.sub-title-package{
  font-weight: bolder;
  color: var(--textCard);
  font-size: 1.2em;
  line-height: 1.2em !important;
}

.package_price{
  font-weight: bolder;
  color: var(--textCard);
  font-size: 1em;
  line-height: 1em !important;
}

.kotak-rapi{
  margin-top: auto;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--borderColor);
  font-size: 0.95em;
  background-color:var(--white);
  color: var(--black);
  border-radius: 5px !important;
 
}

.kotak-rapi ul{
   list-style: none !important;
}

.kotak-rapi ul i{
   font-size:10px;
}

.feature-list {
    list-style: none;
    padding: 0;
    color: #5D4037; /* Dark brown */
  }

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

.feature-item i {
    flex-shrink: 0;
    margin-top: 3px; /* agar sejajar lebih baik */
  }

.feature-text {
    line-height: 1.5;
  }



.sub-title-class{
  font-weight: bolder;
  color: var(--soft-black) !important;
  font-size: 1.5em;
  line-height: 1.2em !important;
}

.tab-title{
  font-weight: bolder;
  color: var(--soft-black) !important;
  font-size: 1em;
  font-family: 'Avenir-roman', Arial, Helvetica, sans-serif;
  line-height: 1.1em !important;
}
.uppercase {
  text-transform: uppercase; 
}

.form-group label{
  font-size: 1.05em;
  font-weight: bold;
  color: var(--soft-black);
}

#loginModal{
  z-index: 2100;
}

.hidden {
  display: none;
}

.text-success{
  color: var(--soft-black-dark) !important;
}

        .star-rating {
            color: #ffc107 !important; /* warna kuning */
            font-size: 14px;
            margin-bottom: 1em;
        }
    .contact-admin {
      margin-top: 30px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
    }
    .contact-admin a {
      color: #25D366;
      text-decoration: none;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 1rem;
    }
    .contact-admin img {
      height: 24px;
    }

    .event-section{
       margin-top: 50px;
    }

    .event-section strong{
      width: 600px ;
     
    }

    .event-section-head{
       margin-top: 10px;
    }

    .event-section p{
        display: block;
        margin-block-start: 0.8em;
        margin-block-end: 0.8em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        unicode-bidi: isolate
    }

    .event-section-head h1{
       font-weight: bold;
       font-size: 1.8em;
    }

    .event-section h2{
       font-weight: bold;
        font-size: 1.5em;
    }
    
.class-card {
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--textCard);
}

.class-timetable-list, .class-timetable-list small  {
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--textSection) !important;
}


.class-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* agar responsif di layar kecil */
    gap: 10px;
    width: 100%;
}

.class-info > div {
    flex: 1; /* grow-shrink-basis */
    min-width: 0px;
    text-align: left;
}

.class-time, .class-name, .class-location, .class-availability {
    font-size: 14px;
}

.class-info > div:last-child {
    flex: 0 0 auto; /* tombol tidak mengambil ruang lebih */
}

.header-class{
  font-size: 24px;
  color:var(--tertairyColor);
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom:1px solid var(--secondaryColor);
}

.booking-btn {
    background-color: var(--deep-clay-light);
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.booking-btn:hover {
    background-color: var(--deep-clay);

}

.card-pacakage{
  background-color: var(--bgCard) !important;
  color: var(--textCard);
    border-radius: 10px !important;
}

.card-pacakage p{
  color: var(--textCard);
  font-size: 1.5em;
  font-weight: bold;
}

.card-pacakage h1{
  color:var(--textCard);
  font-size: 1.7em;
  font-weight: bold;

}
.card-pacakage h2{
  color:var(--textCard);
  font-size: 1.3em;
  font-weight: bold;
}

.card-pacakage row{
  color:var(--textCard);
  font-size: 1.2em;
 font-weight: bold;
}

.card-pacakage .total-amount{
  color: var(--textCard);
  font-size: 1.2em;
 font-weight: bold;
}

.card-pacakage hr{
  border: 1px solid var(--borderColor);
}

.card-package-detail{
  background-color: var(--bgPackageDetail) !important;
  color: var(--textPackageDetail);
  border: 1px solid var(--borderColor);
  border-radius: 10px !important;
}

/* Login */


img.brand-image{
  width: 10px !important;
}

li.member-area a{
  border:1px solid #fff;
  border-radius:20px;
}

.modal-body{
  background-color:var(--secondaryColor);
  color:var(--white) !important;

}

#fixed-marquee {
  position: fixed !important;
  top: 77;
  width: 100%;
  background: var(--bgSection);
  color: var(--textSection);
  font-weight: bold;
  padding: 5px 0;
  z-index: 20;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.form-controls{
  position: absolute;
  left: -9999px;
}


.floating-cta {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: black;
        color: white;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        text-decoration: none;
        transition: background-color 0.3s;
      }

      .floating-cta:hover {
        background-color: var(--tertairyColor);
        color:white;
        text-decoration: none;
      }

      @media (max-width: 480px) {
        .floating-cta {
          font-size: 14px;
          padding: 10px 20px;
        }
      }

      /* Modal overall */
    #loginModal .modal-content, #registerModal .modal-content {
      border-radius: 15px;
      background-color: var(--tertairyColor);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      border: none;
    }

    /* Modal header */
    #loginModal .modal-header, 
    #registerModal .modal-header, 
    #registerSuccessModal .modal-header, 
    #forgotModalSuccess .modal-header, 
    #forgotModal .modal-header {
      border-bottom: none;
      background-color: var(--tertairyColor) !important;
      color:white !important;
      padding: 1.5rem 2rem;
    }

    #loginModal .modal-header .main-title, #registerModal .modal-header .main-title {
      font-weight: 600;
      color: white;
      font-size: 1.25rem;
    }

    #loginModal .modal-header .main-title h5{
      color: white !important;
    }

    #loginModal .modal-header .close,  #registerModal .modal-header .close {
      font-size: 1.5rem;
      color: white;
      opacity: 0.7;
    }
    #loginModal .modal-header .close:hover,  #registerModal .modal-header .close:hover {
      opacity: 1;
    }

    /* Image */
    #loginModal img {
      border-radius: 10px;
      object-fit: cover;
      height: 60%;
      margin-top:40px;
      margin-left:30px;
    }

    /* Nav Tabs */
    #loginModal .nav-tabs, #registerModal .nav-tabs  {
      border: none;
    }

    #loginModal .nav-tabs .nav-link {
      background-color: transparent;
      border: none;
      border-bottom: 3px solid transparent;
      color: #333;
      font-weight: 500;
      padding: 0.75rem;
      transition: all 0.3s ease;
    }

    #loginModal .nav-tabs .nav-link.active {
      border-bottom: 3px solid var(--deep-clay);
      color: var(--deep-clay);
    }

    /* Form styling */
    #loginModal .form-group label, #register .form-group label {
      font-weight: 500;
      color: #333;
    }

    #loginModal .form-control,  #register .form-control {
      border-radius: 0px;
      border: 1px solid #ccc;
      padding: 0.75rem;
      font-size: 0.95rem;
      background-color: #fff;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    #loginModal .form-control:focus {
      border-color: var(--color2);
      box-shadow: 0 0 0 0.1rem rgba(196, 164, 132, 0.25);
    }

    #loginModal small {
      color: #666;
    }

    /* Buttons */
    #loginModal .btn-primary,  #registerModal .btn-primary {
      background-color: var(--tertairyColor) !important;
      border: 1px solid var(--tertairyColor);
      padding: 0.75rem;
      border-radius: 50px;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }

    #loginModal .btn-primary:hover,  #registerModal .btn-primary:hover {
      background-color: var(--color2) !important; /* darker shade */
      border: 2px solid var(--secondaryColor) !important;
      color:var(--white) !important;
    }

    .block-intro{
      background-color: var(--secondaryColor);
      color: var(--soft-black);
    }


    .accordion-button:not(.collapsed) {
      background-color: var(--bgFAQActive) !important;
      color:var(--textFAQActive);
  
    }

    .accordion-body{
      background-color: var(--bgAnswer);
      color: var(--textAnswer)
    }

    .zoom-in {
      transform: scale(0.5);
      opacity: 0;
      animation: zoomIn 0.3s ease-out forwards;
    }

    @keyframes zoomIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.img-circle-fix {
  width: 150px;           /* atur ukuran square */
  height: 150px;
  object-fit: cover;      /* crop bagian tengah */
  border-radius: 50%;     /* pastikan bulat */
}


    /* Responsive touch */
    @media (max-width: 767.98px) {
      #loginModal .modal-dialog {
        margin: 1rem;
      }

      #loginModal .modal-content {
        border-radius: 10px;
      }

      #loginModal .modal-body {
        padding: 1.5rem 1.25rem;
        background-color:var(--secondaryColor) !important;
        color:var(--white) !important;
      }

    }

      .loginError{
        color:red !important;
        text-align:Center !important;
        margin:0px;
      }

      .input-group-text{
        color:var(--tertairyColor) !important;
      }

      small, small a{
        color: white !important;
      }
      

       .header-container {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 10;
        padding-top: 15px;
        padding-bottom: 10px;
    }

    .date-picker-container {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }

    .scroll-wrapper {
        margin-top: 1rem;
    }

    .class-list {
        max-height: 70vh;
        overflow-y: auto;
    }

    .date-btn {
        min-width: 60px;
        border: none;
        background-color: var(--bgCardCalendar);
        border-radius: 10px;
        padding: 5px;
        text-align: center;
        cursor: pointer;
        color:var(--textCardCalendar);
    }

    .date-btn.selected {
        background-color: var(--bgCardActiveCalendar);
        color: var(--textCardActiveCalendar);
    }


    .promo-code{
      margin-top: 25px;
      margin-bottom: 20px;
      font-size: 12px;
    }