﻿@import url('https://fonts.googleapis.com/css2?family=Allura&family=Lavishly+Yours&family=Meddon&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
.lavishly-yours {
   font-family: "Lavishly Yours", cursive;
   font-weight: 400;
   font-style: normal;
}

.allura {
   font-family: "Allura", cursive;
   font-weight: 400;
   font-style: normal;
}

.meddon {
   font-family: "Meddon", cursive;
   /*			font-weight: 400;*/
   font-style: normal;
}



.app-sidebar .side-menu__label {
   font-family: 'Barlow Condensed', sans-serif !important;
   font-size: .88rem;
   color: #7B603D;
}
.app-sidebar .side-menu__item {
   font-size: .85rem;
}
/* ------- KENDO GRID STYLING ------- */
/* Style the built-in Add button */
.k-grid .k-grid-add {
   padding: 2px 8px;
   font-size: 0.75rem; /* smaller text */
   background-color: #0d6efd;
   color: white;
   border-radius: 4px;
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
}

   .k-grid .k-grid-add::before {
      font-family: "Bootstrap Icons";
      content: "\f4c2"; /* plus-circle */
      font-size: 1rem;
      margin-right: 4px;
   }

.k-grid .k-grid-pdf {
    padding: 2px 8px;
    font-size: 0.75rem; /* smaller text */
    /*background-color: #0d6efd;*/
    /*color: white;*/
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .k-grid .k-grid-pdf::before {
        font-family: "Bootstrap Icons";
        content: "\f4c2"; /* plus-circle */
        font-size: 1rem;
        margin-right: 4px;
    }

/* Common base style */
.k-grid .k-grid-edit-command,
.k-grid .k-grid-save-command,
.k-grid .k-grid-cancel-command,
.k-grid .k-grid-remove-command {
   padding: 2px 8px;
   border: none;
   border-radius: 0.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 28px;
   width: 28px;
}

   /* Edit button */
   .k-grid .k-grid-edit-command::before {
      font-family: "Bootstrap Icons";
      content: "\f4dd"; /* pencil icon */
      font-size: 1rem;
      color: white;
      background-color: #0d6efd; /* Bootstrap primary */
      border-radius: 4px;
      padding: 4px;
   }

   /* Save button */
   .k-grid .k-grid-save-command::before {
      font-family: "Bootstrap Icons";
      content: "\f26e"; /* check-lg */
      font-size: 1rem;
      color: white;
      background-color: #198754; /* Bootstrap success */
      border-radius: 4px;
      padding: 4px;
   }

   /* Cancel button */
   .k-grid .k-grid-cancel-command::before {
      font-family: "Bootstrap Icons";
      content: "\f659"; /* x-lg */
      font-size: 1rem;
      color: white;
      background-color: #6c757d; /* Bootstrap secondary */
      border-radius: 4px;
      padding: 4px;
   }

   /* Delete button */
   .k-grid .k-grid-remove-command::before {
      font-family: "Bootstrap Icons";
      content: "\f5de"; /* trash */
      font-size: 1rem;
      color: white;
      background-color: #dc3545; /* Bootstrap danger */
      border-radius: 4px;
      padding: 4px;
   }

/* Reduce padding, font, and height for dropdown */
.k-dropdownlist.k-picker {
   font-size: 0.75rem; /* same as Bootstrap btn-sm */
   padding: 2px 6px;
   min-height: 28px;
/*   height: 28px;*/
   border-radius: 4px;
}

/* Shrink the selected text */
.k-dropdownlist .k-input-inner {
   font-size: 0.75rem;
   padding: 0;
}

/* Shrink icon size */
.k-dropdownlist .k-input-button .k-icon {
   width: 16px;
   height: 16px;
}

.k-dropdownlist .k-input-button {
   padding: 0 4px;
}

/* Base textbox styling */
.k-textbox.k-input {
   font-size: 0.75rem; /* Small text size */
   padding: 2px 6px;
   height: 28px; /* Match btn-sm height */
   min-height: 28px;
   border-radius: 4px;
}

   /* Inner input styling */
   .k-textbox.k-input .k-input-inner {
      font-size: 0.75rem;
      padding: 0;
      height: 100%;
      line-height: 1.2;
   }

/* ------- (END) KENDO GRID STYLING ------- */

/* Bootstrap-like letter spacing utilities */
.ls-0 {
   letter-spacing: 0;
}

.ls-1 {
   letter-spacing: 0.05rem;
}
/* ~0.8px */
.ls-2 {
   letter-spacing: 0.1rem;
}
/* ~1.6px */
.ls-3 {
   letter-spacing: 0.15rem;
}
/* ~2.4px */
.ls-4 {
   letter-spacing: 0.25rem;
}
/* ~4px */
.ls-5 {
   letter-spacing: 0.5rem;
}
/* ~8px */
.ls-n1 {
   letter-spacing: -0.05rem;
}
/* negative spacing */
.ls-n2 {
   letter-spacing: -0.1rem;
}

.authentication .authentication-cover {
   background-image: url(/assets/images/THMS/);
   background-position: bottom left;
   background-repeat: no-repeat;
}

.authentication-cover-main {
   background-image: url(/assets/images/THMS/photos/001.jpg);
   background-size: cover;
   background-position: 10% 35%;
}

.terms-header {
   background-image: url('/assets/images/THMS/misc/media-83.png');
   background-repeat: repeat;
   background-position: center;
}

.currency-exchange-card:before {
   background-image: url('../Landing/img/news/leves.jpg');
}
.details-card {
   position: relative;
   box-shadow: none;
   z-index: 10;
   overflow: hidden;
}
   .details-card:before {
      background-image: url('../Landing/img/news/leves.jpg');
      position: absolute;
      content: "";
      top: 0; 
      left: 0;
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
      opacity: 0.1;
      border-radius: 0.5rem;
   }
.course-card {
   background: url(/assets/images/THMS/misc/media-67.png) 224px -2px no-repeat, var(--custom-white) !important;
}


/*logo content sidebar */
.logo-img {
   max-height: 40px; /* Adjust height as needed */
   width: auto; /* Maintain aspect ratio */
}

/*disabled form */
.form-control:disabled,
.form-select:disabled {
   background-color: #f6f8fb;
   color: #b5b5b5 !important;
}

/*additional style : custyom mocha gold*/
/*.app-sidebar .side-menu__item {
   text-shadow: 2px 0px 1px #2f251ca6;
}*/

[data-menu-styles=gradient] .app-sidebar .side-menu__item.active,
[data-menu-styles=gradient] .app-sidebar .side-menu__item:hover {
   background-color: rgb(235 234 233 / 9%) !important;
}

/* ===== DARK MODE SIDEBAR STYLES ===== */
[data-theme-mode=dark] .app-sidebar {
   background: #1a1d2e !important;
   border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme-mode=dark] .app-sidebar .side-menu__label {
   color: #c8cdd8 !important;
   font-weight: 400;
}

[data-theme-mode=dark] .app-sidebar .side-menu__icon {
   color: #8b92a5 !important;
   fill: #8b92a5 !important;
}

[data-theme-mode=dark] .app-sidebar .side-menu__item {
   color: #b0b7c8;
}

[data-theme-mode=dark] .app-sidebar .side-menu__item.active {
   background-color: rgba(99, 132, 255, 0.12) !important;
   border-radius: 8px;
}

[data-theme-mode=dark] .app-sidebar .side-menu__item.active .side-menu__label,
[data-theme-mode=dark] .app-sidebar .side-menu__item.active .side-menu__icon,
[data-theme-mode=dark] .app-sidebar .side-menu__item.active .side-menu__angle {
   color: #7c9cff !important;
   fill: #7c9cff !important;
}

[data-theme-mode=dark] .app-sidebar .side-menu__item:hover {
   background-color: rgba(255, 255, 255, 0.05) !important;
   border-radius: 8px;
}

[data-theme-mode=dark] .app-sidebar .side-menu__item:hover .side-menu__label,
[data-theme-mode=dark] .app-sidebar .side-menu__item:hover .side-menu__icon {
   color: #ffffff !important;
   fill: #ffffff !important;
}

[data-theme-mode=dark] .app-sidebar .slide-menu__category {
   color: #5a6178 !important;
   font-size: 0.65rem;
   letter-spacing: 0.5px;
   text-transform: uppercase;
}

[data-theme-mode=dark] .app-sidebar .main-sidebar-header {
   background: #1a1d2e !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme-mode=dark] .app-sidebar .simplebar-scrollbar:before {
   background: rgba(255, 255, 255, 0.15);
}
/* ===== END DARK MODE SIDEBAR ===== */

/* ===== DARK MODE: Global Kendo Grid ===== */
[data-theme-mode=dark] .k-grid {
   border-color: rgba(255,255,255,0.08) !important;
}

[data-theme-mode=dark] .k-grid-header {
   background: rgba(255,255,255,0.03) !important;
   border-bottom-color: rgba(255,255,255,0.08) !important;
}

[data-theme-mode=dark] .k-grid-header .k-table-th {
   color: #9ca3af !important;
   border-color: rgba(255,255,255,0.06) !important;
}

[data-theme-mode=dark] .k-table-td {
   border-color: rgba(255,255,255,0.04) !important;
}

[data-theme-mode=dark] .k-grid-toolbar {
   background: transparent !important;
   border-color: rgba(255,255,255,0.06) !important;
}

[data-theme-mode=dark] .k-pager-wrap {
   background: transparent !important;
   border-color: rgba(255,255,255,0.06) !important;
   color: #9ca3af;
}

/* Terms header card background fix for dark mode */
[data-theme-mode=dark] .terms-header {
   background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}
/* ===== END DARK MODE GLOBAL ===== */

/* ===== BOOKING TAB CARDS (Senior-friendly navigation) ===== */
.booking-tab-card {
   border: 2px solid #e2e8f0;
   border-radius: 14px;
   transition: all 0.2s ease;
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

.booking-tab-card:hover {
   border-color: rgb(var(--primary-rgb));
   box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.15);
   transform: translateY(-2px);
}

.booking-tab-card.active {
   border-color: rgb(var(--primary-rgb));
   background: rgba(var(--primary-rgb), 0.06);
   box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.15);
}

.booking-tab-card.active h6 {
   color: rgb(var(--primary-rgb));
}

.booking-tab-card .tab-indicator {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 4px;
   background: rgb(var(--primary-rgb));
   border-radius: 4px 4px 0 0;
}

.booking-tab-card h6 {
   color: #374151;
   margin-bottom: 0;
}

.booking-tab-card small {
   font-size: 0.72rem;
}

/* Dark mode */
[data-theme-mode=dark] .booking-tab-card {
   border-color: rgba(255,255,255,0.1);
   background: var(--custom-white);
}

[data-theme-mode=dark] .booking-tab-card:hover {
   border-color: rgb(var(--primary-rgb));
}

[data-theme-mode=dark] .booking-tab-card.active {
   border-color: rgb(var(--primary-rgb));
   background: rgba(var(--primary-rgb), 0.1);
}

[data-theme-mode=dark] .booking-tab-card h6 {
   color: #e2e8f0;
}

[data-theme-mode=dark] .booking-tab-card.active h6 {
   color: rgb(var(--primary-rgb));
}
/* ===== END BOOKING TAB CARDS ===== */

/* ===== NEW badge pulse animation (sidebar) ===== */
.pulse-badge {
   animation: pulse-glow 2s infinite;
   font-size: 0.6rem !important;
   padding: 3px 7px !important;
   border-radius: 4px;
}

@keyframes pulse-glow {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.7; transform: scale(1.1); }
}
/* ===== END PULSE BADGE ===== */


.main-profile-cover {
   background-image: url(../images/THMS/misc/bg01.jpg) !important;
}
   .main-profile-cover:before {
      background-color:transparent !important;
   }
   .frosted-box {
      background-color: rgba(0, 0, 0, 0.4); /* semi-transparent black */
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1rem; /* adjust to match rounded-3 */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
   }

.bg-primary-gradient {
   background: linear-gradient(to right, var(--primary-color) 0%, #F44336 100%) !important;
   color: #fff;
}


.main-profile-cover2 {
   background-image: url(../images/THMS/misc/floral2.jpg) !important;
   background-size:contain;
}

label.required::after,
label:has(+ textarea[required])::after,
label:has(+ input[required])::after,
label:has(+ select[required])::after {
    content: " *";
    color: red;
}


/* ===== PSD Admin Booking Indicator Badge ===== */
.psd-admin-badge {
   font-size: 0.55rem !important;
   padding: 2px 6px !important;
   border-radius: 4px;
   letter-spacing: 0.5px;
   font-weight: 600;
   animation: psd-badge-pulse 2.5s infinite;
   display: inline-block !important;
   vertical-align: middle;
   margin-left: 4px;
   white-space: nowrap;
   position: relative;
   z-index: 1;
}

@keyframes psd-badge-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.7; transform: scale(1.05); }
}
/* ===== END PSD Admin Booking Indicator Badge ===== */
