@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


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

:root {
    --white: #FFF;
    --black: #000;
    --light-black: #535862;
    --dark-blue: #032642;
    --royal-blue: #2563EB;
    --cool-gray: #EBECED;
    --light-gray: #D5D7DA;
    --soft-gray: #E5E7EB;

    /* font Sizes */

    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
}

/* Scrollbar */
::-webkit-scrollbar {  width: 10px;  background-color: transparent;  }
::-webkit-scrollbar-track {  background-color: transparent;  }
::-webkit-scrollbar-thumb {  background-color: #888;  border-radius: 20px;  }
::-webkit-scrollbar-thumb:hover {  background-color: #555;  }

.margin-1 { margin-bottom: 1em;}
.margin-2 { margin-bottom: 2em;}

.blue-text {color: var(--dark-blue);}

i.dot {font-size: 4px}

.fw-400 { font-weight:400; }
.fw-500 { font-weight:500; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }

/* Button */

.blue-btn { color: var(--white); font-size: var(--font-size-14); font-weight: 600; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--dark-blue   ); background: var(--dark-blue); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); }
.white-btn { padding: 15px 73px; border-radius: 4px; font-size: 18.5px; color: var(--dark-blue); font-weight: 600; border: 1px solid var(--cool-gray);}
.blue-border-btn { padding: 8px 16px 8px 8px; border-radius: 8px; border: 1px solid var(--dark-blue); font-size: var(--font-size-16); color: var(--dark-blue); font-style: normal; font-weight: 600; background: var(--white);}
.yellow-btn{ display: flex; justify-content: center; align-items: center; } 
.yellow-btn { padding: 9px 33px; font-family: "Rubik", sans-serif; font-size: 18px; font-weight: 500; color: var(--black); border-radius: 4px; border: 2px solid #FACC15; background: #FACC15; }

/* Form styling */

select {padding: 4px 10px 4px 12px; border-radius: 8px; border: 1px solid var(--light-gray); background: var(--white);  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);}
select:focus-visible, input:focus-visible, textarea:focus-visible {outline: unset;}
.form-switch.toggle-switches .form-check-input {  background-repeat: no-repeat;}
.form-switch.form-check-input:checked {  background-color: #0d6efd; background-position: right center;}

/* Sidebar styling */

.sidebar-bg {background-color: #032642;}
.user-role-sidebar .app-header {  left: unset !important;  width: 100%; }
.app-wrapper.user-sidebar { margin-left: 0; }

.users-header {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.header-logo img {height: 50px; width: 125px;}
.notification_profile {display: flex; gap: 4px; align-items: center;}

/* Header Styling */

a.menu-link { color: #9aa8b3; font-size: var(--font-size-13); font-weight: 500;}
.sidebar-bg a.menu-link.active{border-left: 2px solid var(--blue); border-radius: 0%;background-color: #ffffff10;}
a.menu-link.active, a.menu-link.active i { color: var(--white);}
a.menu-link i { margin-right: 15px;}

/* .app-header { border-top-left-radius: 15px; border-top-right-radius: 15px;  border-block: 1px solid #E5E5E5;  } */

.users-header {  padding-block: 1em;}
.app-header .app-header-mobile-drawer {  display: flex;  margin-inline: -30px; border-top: 1px solid #E5E5E5;  }
.app-header{background-color: var(--white);}
.users-navbar {display: flex; justify-content: space-between; align-items: center; width: 98%; padding-block: 10px;}
.users-navbar .navbar-items {display: flex; flex-wrap: wrap; gap: 15px;}
.user-role-navbar {     --bs-app-header-height: 135px;  --bs-app-header-height-actual: 135px;}
.header-pricing { font-size: var(--font-size-13); font-weight: 600; padding: 7px 10px; margin-bottom: 0; border-radius: 6px; border: 1px solid var(--dark-blue);}
.dashbaord-bg { background: #FCFCFC;}
img.profile-image{ width: 44px; height: 44px; border-radius: 50%; }

/* Users navbar */
.app-header-menu .menu .menu-item .menu-link.active { font-size: var(--font-size-15); font-weight: 700;  transition: color .2s ease;  background-color: unset;  color: var(--royal-blue);  border-bottom: 3px solid var(--royal-blue);  border-radius: unset; }

/* Admin index */

.admin-dashboard-header {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.admin-dashboard, .professional-dashboard {margin-block: 2.5em;}
.admin-dashboard-title { font-size: 24px; font-weight: 600;}
.admin-dashboard-tagline { font-size: var(--font-size-16); color: var(--light-black); font-weight: 400; }
.range-cal {padding: 10px 16px; border-radius: 8px; border: 1px solid var(--soft-gray); background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);}

.card.subscription ul {list-style: none;}
.card.subscription {border-radius: 12px;border: 1px solid #E9EAEB;}
.card.subscription ul li i {color: #181D27;font-size: 20px;margin-right: 10px;}
.card.subscription h2 span { font-size: 20px; font-weight: 400; font-family: 'Inter'; }
.card.subscription p {font-family: 'Inter';font-size: 13px;font-weight: 400;color: #535862;margin-bottom: 20px;}
.card.subscription h6 {font-family: 'Inter';font-size: 17px;font-weight: 600;color: #181D27;margin-bottom: 10px;}
.card.subscription h2 {font-family: 'Inter';font-size: 48px;font-weight: 600;color: #181D27;margin-bottom: 10px;}
.card.subscription ul li {margin-bottom: 10px;font-family: 'Inter';font-size: 13px;font-weight: 400;color: #535862;}
.card.subscription .price { font-size: 48px; font-weight: 700; margin-block: 7px; margin-top: 5px; }
.no-features { color: #888; font-style: italic; margin-bottom: 12px; font-size: 14px;}
.add-more-btn {border: 1px solid #E0E0E0; padding: 10px 15px;border-radius: 8px;background-color: #F9F9F9; cursor: pointer;display: inline-flex; align-items: center; color: #021a2e; font-weight: 500; transition: all 0.2s; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);}
.add-more-btn:hover {background-color: #F3F4F6; border-color: #021a2e;}
.add-more-btn i{color: #021a2e; margin-right: 6px;}
.add-more-btn span {color: #021a2e;}
.feature-box {border: 1px solid #E0E0E0; border-radius: 8px; padding: 12px; background: #FFF; transition: all 0.2s; display: flex; align-items: center; margin-bottom: 8px;}
.feature-box:hover {border-color: #021a2e;}
.feature-check-icon {width: 32px; height: 32px; background: #F3F4F6; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px;}
.feature-check-icon i {color: #474747; font-size: 12px;}
.feature-input {border: none; background: transparent; padding: 0; font-size: 14px; color: #474747; flex: 1; width: 100%;}
.feature-input:focus {outline: none; box-shadow: none; border: none;}
.feature-input::placeholder {color: #9A9EA6;}

/* Cards  */
.overview-cards, .gray-card {padding: 20px 18px; border-radius: 8px; border: 1px solid var(--soft-gray); background: var(--white); box-shadow: 0 10px 15px -3px #F3F4F6, 0 4px 6px -4px #F3F4F6;}
.overview-cards .card-header {display: flex; justify-content: space-between; align-items: center;}
.overview-cards .card-title {color: var(--dark-blue); font-size: var(--font-size-13); font-weight: 500;}
.overview-cards .count {font-size: 24px; font-weight: 700; margin-block: 7px; margin-top: 5px;}
.overview-cards .timeline { color: #16A34A; font-size: 12px; font-weight: 500; margin-bottom: 0;}
.overview-cards img.card-icon {width: 36px; height: 36px; object-fit: contain;}

.total-revenue {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2em;}
.total-revenue .title {font-size: 18px; font-style: normal; font-weight: 700;}

/* Tabs */

.data-tables-tabs .nav {  gap: 15px; }
.data-tables-tabs .nav .nav-link.active {  padding: 7px 15px;  border-radius: 6px;  background: var(--royal-blue);  color: var(--white); }
.data-tables-tabs .nav .nav-link {padding: 7px 15px; border-radius: 6px; border: 1px solid #E9EAEB; font-size: var(--font-size-13); font-weight: 600; background: #F8F8F8; color: var(--dark-blue);}
.data-tables-tabs .tab-title { font-size: 17px; font-weight: 600; color: var(--dark-blue); margin-block: 1.5em;}

/* Data Tables */

.responsive-data-tables .table-responsive .head-row { border-top: 1px solid var(--soft-gray); border-radius: 6px !important; background: #F8F8F8; padding: 10px 20px; }
.responsive-data-tables .table-responsive table th {  color: #8C939B; padding: 10px 20px; font-size: var(--font-size-13); font-style: normal; font-weight: 600; }
.responsive-data-tables li.dropdown-li { padding: 10px; display: block; border-bottom: 1px solid #E9EAEB; min-width: max-content;}
.responsive-data-tables li.dropdown-li:last-child { border-bottom: none;}
.responsive-data-tables li.dropdown-li a {    color: black; font-weight: 500;}
.responsive-data-tables li.dropdown-li i {margin-right: 6px;}
.responsive-data-tables li.dropdown-li a.reject, li.dropdown-li a.reject i {  color: var(--dark-blue); }
.responsive-data-tables li.dropdown-li a.approve, li.dropdown-li a.approve i {  color: #16A34A; }
.responsive-data-tables li.dropdown-li a.reject, li.dropdown-li a.reject i {  color: #EA4335; }
.responsive-data-tables .dropdown button {  background: unset; }
.responsive-data-tables .table-responsive table tr , body .responsive-data-tables .table:not(.table-bordered) tbody tr:last-child{  border-bottom: 1px solid var(--soft-gray) !important;  vertical-align: middle; }

.responsive-data-tables .table-profile {display: flex; gap: 10px; align-items: center;}
.responsive-data-tables .table-profile img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
}
.responsive-data-tables .professional-name { color: var(--dark-blue); font-size: var(--font-size-14); font-weight: 700; margin-bottom: 0;}

.responsive-data-tables .status-confirmed, .responsive-data-tables .status-cancelled, .appointment-status .status-upcoming , 
.appointment-status .status-pending  ,  .appointment-status .status-cancelled  , .appointment-status .status-confirmed  ,
 .responsive-data-tables .status-upcoming  , .responsive-data-tables .status-pending { font-weight: 500; width: max-content; display: block; padding: 2px 8px; border-radius: 4px; }
.responsive-data-tables .status-confirmed, .appointment-status .status-confirmed { width: max-content; color: #027A48; background:  #ECFDF3; }
.responsive-data-tables .status-cancelled { color: #B42318; background: #FEF3F2; }
.responsive-data-tables .status-pending { color: #B54708; background: #FFFAEB; }
.responsive-data-tables .status-upcoming { color: #175CD3; background: #EFF8FF; }

.responsive-data-tables .pagination-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;  margin-top: 1em; }
.responsive-data-tables .page-item .page-link   { margin-right: .5rem; padding: 7px 10px 7px 10px; border-radius: 6px; border: 1px solid var(--soft-gray); background: var(--white); text-align: center; }
.responsive-data-tables .page-item .page-link {color: var(--dark-blue);}
.page-item.active .page-link {   background: var(--royal-blue); color: var(--white);}

.table-footer {color: #868686; font-size: var(--font-size-14); font-weight: 500;}
.responsive-data-tables .table-profile img.service-img {width: 61px; height: 40px; object-fit: cover; border-radius: 6px;}

.responsive-data-tables table { border-collapse: separate; border-spacing: 0; } 
.responsive-data-tables thead th { background: #F8F8F8; border-top: 1px solid var(--soft-gray); border-bottom: 1px solid var(--soft-gray); } 
.responsive-data-tables thead th:first-child { border-left: 1px solid var(--soft-gray); border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.responsive-data-tables thead th:last-child { border-right: 1px solid var(--soft-gray); border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

/* Professionals */

.header-search .search-input-group { display: flex; width: 300px; padding: 8px 12px; border-radius: 8px; border: 1px solid #E9EAEB;background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); }
.admin-customer-details .search-input-group{ display: flex; align-items: center; gap: 8px; border-radius: 8px; width: 500px; padding: 8px 12px; border: 1px solid #f3f3f3; background: var(--white);}
.table-title { font-size: 17px; font-weight: 600; margin-bottom: 1.5em; }

/* Customer Payments Table - standard font size (match first/reference design) */
.customer-payments-table-wrap .customer-payments-table thead th,
.customer-payments-table-wrap .customer-payments-table tbody td {
    font-size: var(--font-size-14) !important;
    font-weight: 400;
    color: #181D27;
}
.customer-payments-table-wrap .customer-payments-table thead th {
    font-weight: 600;
    color: #8C939B;
}
.customer-payments-table-wrap .customer-payments-table tbody td.fw-600 {
    font-weight: 600;
}
.customer-payments-table-wrap .customer-payments-table .status-confirmed,
.customer-payments-table-wrap .customer-payments-table .status-pending,
.customer-payments-table-wrap .customer-payments-table .status-cancelled {
    font-size: var(--font-size-14) !important;
}
.admin-customer-details .search-input-group input { padding: 0; border: none; outline: none; font-size: var(--font-size-14); font-weight: 500; color: #474747;}
.admin-customer-details .search-input-group label { font-size: 14px; font-weight: 400; color: #6F7174; width: 30%; margin-bottom: 0;}
.header-search .search-input-group input, .admin-customer-details .search-input-group input { width: 100%;}
.header-search .search-input-group i, .admin-customer-details .search-input-group i {padding-top: 4px;}

/* Categories */

.add-category-form .offcanvas-header {  border-bottom: 1px solid #E9EAEB;}
.add-category-form .canvas-label { font-size: var(--font-size-16); font-weight: 600; }
.add-category-form .toggle-switches {display: flex; justify-content: space-between; align-items: center;}
.add-category-form input, .add-category-form textarea { padding: 10px 14px;  border-radius: 8px;border: 1px solid var(--Gray-300, var(--light-gray)); background: var(--White, var(--white)); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);} 
.add-category-form label { font-family: Inter; font-size: var(--font-size-14); font-weight: 500; margin-bottom: 6px;}

/* Image Upload Section */
.add-category-form .image-upload-wrapper { position: relative; }
.add-category-form .image-upload-display { display: flex; align-items: center; gap: 16px ; padding: 16px; border: 1px solid var(--light-gray); border-radius: 8px; background: var(--white); cursor: pointer; transition: all 0.2s; }
.add-category-form .image-upload-display:hover { border-color: var(--royal-blue); background: #F0F7FF; }
.add-category-form .image-upload-icon { position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #F8F8F8; border-radius: 8px; flex-shrink: 0; }
.add-category-form .image-upload-icon i.fa-image { font-size: 28px; color: #9A9EA6; }
.add-category-form .image-upload-icon .upload-plus-icon { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; background: var(--royal-blue); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid var(--white); }
.add-category-form .image-upload-content { flex: 1; }
.add-category-form .upload-image-link { color: var(--royal-blue); font-size: var(--font-size-14); font-weight: 500; text-decoration: none; display: block; margin-bottom: 4px; font-family: "Plus Jakarta Sans", sans-serif; }
.add-category-form .upload-image-link:hover { color: #1E40AF; text-decoration: underline; }
.add-category-form .upload-hint-text { font-size: 12px; color: #9A9EA6; margin: 0; line-height: 1.4; font-family: "Plus Jakarta Sans", sans-serif; }
.add-category-form .image-preview { position: relative; width: 100%; max-width: 200px; margin-top: 12px; }
.add-category-form .image-preview img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--light-gray); }
.add-category-form .remove-image-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #032642; border: 2px solid white; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; transition: all 0.2s; }
.add-category-form .remove-image-btn:hover { background: #032642; transform: scale(1.1); }

/* Off-canvas Footer */
.add-category-form .offcanvas-footer { background-color: #F8F8F8; border-top: 1px solid #E9EAEB; padding: 20px 24px; display: flex; justify-content: flex-end; gap: 12px; }
.add-category-form .btn-cancel { padding: 12px 24px; border-radius: 8px; border: 1px solid var(--light-gray); background: var(--white); color: #032642; font-size: var(--font-size-14); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; }
.add-category-form .btn-cancel:hover { background: #F8F8F8; border-color: #9A9EA6; }
.add-category-form .btn-add-category { padding: 12px 24px; border-radius: 8px; border: none; background: var(--royal-blue); color: var(--white); font-size: var(--font-size-14); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; }
.add-category-form .btn-add-category:hover { background: #1E40AF; }

/* Professional Profile Card (Left Column) */
.dashboard-professional-detail .professional-profile-card { background: var(--white); padding: 30px; border-radius: 8px; border: 1px solid var(--cool-gray); box-shadow: 0 4px 4px 0 rgba(217, 217, 217, 0.25); }
.dashboard-professional-detail .professional-profile-image { text-align: center; margin-bottom: 24px; }
.dashboard-professional-detail .professional-detail-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cool-gray);}
.dashboard-professional-detail .verified-badge-large { position: absolute; bottom: 10px; right: calc(50% - 70px + 0px);}
.dashboard-professional-detail .professional-profile-info { text-align: center;}
.dashboard-professional-detail .professional-detail-name { font-size: 21px; font-weight: 700; color: #032642; margin-bottom: 8px; font-family: "Plus Jakarta Sans", sans-serif; }
.dashboard-professional-detail .professional-detail-rating { font-size: 18px; color: #032642; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; }
.dashboard-professional-detail .professional-detail-rating i { color: #FCAA00; }
.dashboard-professional-detail .professional-detail-rating span { color: var(--royal-blue); }
.dashboard-professional-detail .professional-location { font-size: 18px; color: #656B76; margin-bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: "Archivo", sans-serif; }
.dashboard-professional-detail .btn-get-in-touch { background: var(--royal-blue); color: var(--white); border: none; padding: 12px 32px; border-radius: 8px; font-size: var(--font-size-16); font-weight: 600; width: 100%; font-family: "Plus Jakarta Sans", sans-serif; transition: all 0.3s; }
.dashboard-professional-detail .btn-get-in-touch:hover { background: #1E40AF; }
.dashboard-professional-detail .profile-border {border: 1px solid var(--cool-gray); margin-bottom: 2em; margin-inline: -30px;} 
.dashboard-professional-detail .professional-detail-section2 { margin-bottom: 15px; padding-bottom: 15px;}
.dashboard-professional-detail .professional-detail-section2:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dashboard-professional-detail .section-title { font-size: var(--font-size-15); font-weight: 500; color: #9A9EA6; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-family: "Plus Jakarta Sans", sans-serif; }
.dashboard-professional-detail .rate-value { font-size: var(--font-size-15); font-weight: 600; color: #032642; margin: 0; font-family: "Plus Jakarta Sans", sans-serif; }
.dashboard-professional-detail .about-text { font-size: var(--font-size-14); color: #4B5563; line-height: 1.6; margin: 0; font-family: "Archivo", sans-serif; }

.professional-detail-section2 {display: flex; justify-content: space-between; align-items: center; }
.professional-inbox .title {font-family: Rubik; font-size: 18.5px; font-weight: 500; }
.professional-chat-detail {display: flex; justify-content: space-between; align-items: center; width: 100%;}

/* Professional Stats Section */
.dashboard-professional-detail .professional-stats-section { margin-top: 20px; margin-bottom: 20px; }
.dashboard-professional-detail .professional-stat-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dashboard-professional-detail .professional-stat-item:last-child { margin-bottom: 0; }
.dashboard-professional-detail .stat-label { font-size: var(--font-size-16); font-weight: 00; color: #4F687B; font-family: "Plus Jakarta Sans", sans-serif; }
.dashboard-professional-detail .stat-value { font-size: var(--font-size-16); font-weight: 600; color: #4F687B; font-family: "Plus Jakarta Sans", sans-serif; }

/* Professional Social Links */
.dashboard-professional-detail .professional-profile-social-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; padding-top: 20px; }
.dashboard-professional-detail .professional-profile-social-links .social-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; border: 1px solid #e0e0e0; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: all 0.2s ease; text-decoration: none; }
.dashboard-professional-detail .professional-profile-social-links .social-link:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }
.dashboard-professional-detail .professional-profile-social-links .social-link img { width: 24px; height: 24px; object-fit: contain; }
.professional-chats { display: flex; gap: 15px; align-items: center; border: 1px solid var(--cool-gray); margin-inline: -30px; padding: 15px; }
.profile-image img {width: 50px; border-radius: 50%; height: 50px;}
.msg-count { color: var(--royal-blue); border-radius: 50%; background: #E7EEFF; height: 20px; width: 20px; text-align: center;}
.professional-dashboard-header  {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} 
.dashboard-title { font-size: 24px; font-weight: 700;}
.professional-dashboard-tagline { font-size: var(--font-size-16); color: var(--light-black); font-weight: 400; }

.services-professionals-column .edit-btn, .featured-section .edit-btn{ font-size: var(--font-size-14); color: var(--dark-blue); font-weight: 500; padding: 10px 16px; border-radius: 6px; border: 0.5px solid #032642; background: var(--white); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); }
.website-services-details .edit-btn { font-size: var(--font-size-14); width: 100%; font-weight: 500; padding: 10px 16px; border-radius: 6px; border: 0.5px solid #032642; background: var(--white); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); }

.portfolio-header, .certification-header {display: flex; justify-content: space-between; align-items: center;}
.portfolio-header .add-btn, .certification-header .add-btn, .user-profile-setting .add-btn{ font-size: var(--font-size-16); font-weight: 600; margin-bottom: 20px; border: 0; background: unset;  color: var(--royal-blue);}
.portfolio-header .cancel-btn, .certification-header .cancel-btn, .user-profile-setting .cancel-btn{ font-size: var(--font-size-16); font-weight: 600; margin-bottom: 20px; border: 0; background: unset;  color: #5b5b5b;}
.portfolio-header .add-btn i , .certification-header .add-btn i, .user-profile-setting .add-btn {color: var(--royal-blue);}
.portfolio-header .cancel-btn i , .certification-header .cancel-btn i, .user-profile-setting .cancel-btn {color: #5b5b5b;}

/* professional-job-details */

.professional-job-details .job-details-header { margin-bottom: 2em; } 
.professional-job-details .back-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--royal-blue); color: var(--white); text-decoration: none; transition: all 0.3s; } 
.professional-job-details .back-btn:hover { background: #1E40AF; color: var(--white); } 
.mark-complete-btn { padding: 10px 20px; border-radius: 8px; background: #032642; color: var(--white); border: none; font-size: var(--font-size-14); font-weight: 600; cursor: pointer; transition: all 0.3s; } 
.mark-complete-btn:hover { background: #021a2e; }

/* Job Overview Card */ 
.professional-job-details .job-overview-card { padding: 30px; } 
.professional-job-details .professional-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } 
.professional-job-details .professional-name { font-size: var(--font-size-14); font-weight: 700; color: #032642; margin: 0; } 
.professional-job-details .professional-rating { font-size: 12px; font-weight: 500; color: #4F687B; } 
.professional-job-details .professional-rating i { color: #FCAA00; } 
.professional-job-details .professional-profession { font-size: var(--font-size-14); color: #656B76; } 
.professional-job-details .status-badge { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; } 
.professional-job-details .status-active { background: #ECFDF3; color: #027A48; } 
.professional-job-details .job-title { font-size: var(--font-size-14); font-weight: 700; color: #032642; margin: 0; } 
.professional-job-details .job-summary { display: flex; flex-wrap: wrap; gap: 20px; } 
.professional-job-details .job-summary-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #032642; } 
.professional-job-details .job-summary-item i { color: var(--royal-blue); } 
.professional-job-details .job-actions { display: flex; gap: 12px; } 
.professional-job-details .action-btn { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--cool-gray); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; color: #4B5563; } 
.professional-job-details .action-btn:hover { background: #F8F8F8; border-color: var(--royal-blue); color: var(--royal-blue); }

/* Info Cards */ 
.professional-job-details .info-card { padding: 20px; height: 100%; } 
.professional-job-details .info-card-title { font-size: var(--font-size-16); font-weight: 700; color: #032642; margin-bottom: 16px; } 

.professional-job-details .info-item { display: flex; width: 100%; } .professional-job-details .info-label { font-size: var(--font-size-14); font-weight: 500; color: #4F687B; } 
.professional-job-details .info-value { font-size: var(--font-size-14); font-weight: 500; color: #032642; } 
.professional-job-details .info-value p { font-size: var(--font-size-14); color: #4B5563; line-height: 1.6; } 

/* Add Service Modal */

.add-service-modal .modal-header { border-bottom: 1px solid var(--cool-gray); padding: 24px 30px; display: flex; justify-content: space-between; align-items: center; } 
.add-service-modal .modal-title { font-size: var(--font-size-15); font-weight: 700; color: var(--dark-blue); margin: 0; } 
.add-service-modal .btn-close-modal { background: none; border: none; font-size: 20px; color: #656B76; cursor: pointer; padding: 0; width: 32px; height: 32px; }

.add-service-modal .modal-body { padding: 20px; }
.add-service-modal .form-group { margin-bottom: 24px; }
.add-service-modal .form-label { font-size: 12px; font-weight: 400; color: #6F7174; margin-bottom: 8px; display: block; }
.add-service-modal input, .add-service-modal textarea, .add-service-modal select {border: unset; width: 100%; box-shadow: none;}
body .add-service-modal input:focus, body .add-service-modal textarea:focus, body .add-service-modal select:focus { outline: none; border-color: unset; box-shadow: unset; } 
.add-service-modal .form-group { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--light-gray); background: var(--white); font-size: var(--font-size-14); color: #032642; font-family: "Archivo", sans-serif; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); transition: all 0.2s; }

.upload-icon { width: 40px; height: 40px; }
.upload-text .blue-text{ font-size: var(--font-size-14); font-weight: 600; color: var(--royal-blue);}

.add-service-modal .form-control::placeholder { color: #9A9EA6; } 
.add-service-modal textarea.form-control { resize: vertical; min-height: 80px; } 

/* Category Select */ 
.add-service-modal .category-select-wrapper { position: relative; } 
.add-service-modal .category-select-wrapper .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; cursor: pointer; } 
.add-service-modal .category-select-wrapper .category-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #656B76; font-size: 12px; } 

/* Image Upload Area */ 
.add-service-modal .image-upload-area { border: 2px dashed var(--light-gray); border-radius: 8px; padding: 40px 20px; text-align: center; background: #F8F8F8; cursor: pointer; transition: all 0.3s; position: relative; } 
.add-service-modal .image-upload-area:hover { border-color: var(--royal-blue); background: #F0F7FF; } 
.add-service-modal .image-upload-area.drag-over { border-color: var(--royal-blue); background: #E7EEFF; } 
.add-service-modal .upload-content { display: flex; flex-direction: column; align-items: center; gap: 8px; } 
.add-service-modal .upload-icon { font-size: 48px; color: var(--royal-blue); margin-bottom: 8px; } 
.add-service-modal .upload-text { font-size: var(--font-size-14); font-weight: 400; color: #AFB2B8; margin: 0; font-family: "Plus Jakarta Sans", sans-serif; }
.add-service-modal .upload-hint { font-size: 12px; color: #AFB2B8; margin: 0; font-weight: 400; } 
 
 /* Image Preview Container */ 
 
.add-service-modal .image-preview-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 16px; } 
.add-service-modal .image-preview-item { position: relative; width: 100%; padding-top: 75%; /* 4:3 aspect ratio */ border-radius: 8px; overflow: hidden; border: 1px solid var(--cool-gray); background: #F8F8F8; } 
.add-service-modal .image-preview-item .preview-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.add-service-modal .image-preview-item .delete-image-btn i {color: #F04438; font-size: 12px; } 
.add-service-modal .image-preview-item .delete-image-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: none; color: #F04438; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s; z-index: 10; } 

/* Modal Footer */ 
.add-service-modal .modal-footer { border-top: 1px solid var(--cool-gray); padding: 20px 30px; display: flex; justify-content: flex-end; gap: 12px; } 
.add-service-modal .btn-cancel { padding: 12px 24px; border-radius: 8px; border: 1px solid var(--light-gray); background: var(--white); color: #032642; font-size: var(--font-size-14); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; } 
.add-service-modal .btn-cancel:hover { background: #F8F8F8; border-color: #9A9EA6; } 
.add-service-modal .btn-add-service { padding: 12px 24px; border-radius: 8px; border: none; background: var(--royal-blue); color: var(--white); font-size: var(--font-size-14); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; }
.add-service-modal .btn-add-service:hover { background: #1E40AF; }

/* Portfolio Dropzone Styles */
.portfolio-dropzone .dropzone-previews { display: grid; grid-template-columns: 1fr; gap: 16px; }
.portfolio-previews { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dropzone-upload-area { background: #FFFFFF; border: 1px solid #E0E0E0; width: 100%; border-radius: 8px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; }
.dropzone-upload-area:hover { border-color: var(--royal-blue); background: #F9FAFB; }
.dropzone-upload-area.drag-over { border-color: var(--royal-blue); background: #EFF6FF; border-style: dashed; }
.dropzone-icon { color: var(--royal-blue); margin-bottom: 16px; display: flex; justify-content: center; align-items: center; }
.dropzone-title { font-size: 14px; font-weight: 700; color: var(--dark-blue); }
.dropzone-text { display: flex; flex-direction: column; gap: 8px; }
.dropzone-sub-text, .dropzone-main-text { font-size: 14px; font-weight: 400; color: #AFB2B8; margin: 0; }
.pdf-file-info { display: flex; align-items: center; font-size: 12px; color: #444444; }
.pdf-file-info i { margin-right: 8px; color: #2563EB; font-size: 36px; }
.pdf-filename { word-break: break-word; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* Image Preview Styles */
.dropzone-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.dropzone-preview-item { position: relative; width: 100%; height: 200px; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: #F3F4F6; }
.dropzone-preview-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.dropzone-preview-video { width: 100%; height: 100%; object-fit: cover; display: none; }
.dropzone-preview-video.show { display: block; }

.dropzone-preview-delete { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: #ffffff; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #EF4444; opacity: 0.9; }
.dropzone-preview-delete:hover { opacity: 1; transform: scale(1.1); background: #ffdbdbe6; }
.dropzone-preview-delete svg { width: 20px; height: 20px; }

/* PDF Preview Styles */
.dropzone-preview-pdf { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6B7280; padding: 20px; }
.dropzone-preview-pdf svg { width: 48px; height: 48px; margin-bottom: 8px; }
.dropzone-preview-filename { font-size: 12px; font-weight: 500; color: #374151; text-align: center; word-break: break-word; max-width: 100%; }

.customer-dashboard-details .customer-overview {display: block; }
.recipient-name { font-size: var(--font-size-14); font-weight: 500;}

/* Customer Dashboard Details */

.customer-dashboard-details { margin-top: 2em; } 
.customer-dashboard-details .section-title { font-size: var(--font-size-15); font-weight: 700; color: var(--dark-blue); margin-bottom: 1.5em; }
.appointment-professional-info-container{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;}

/* Appointments */

.appointments-list { display: flex; flex-direction: column; gap: 16px; max-height: 600px; overflow-y: auto; padding-right: 8px; } 
.appointment-card { padding: 16px; border-radius: 8px; border: 1px solid var(--cool-gray); background: var(--white); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s; } 
.appointment-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } 
.appointment-professional { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }

.appointment-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cool-gray); } 
.verified-badge-small { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); } 
.appointment-professional-info { flex: 1; }

.appointment-professional-name { font-size: var(--font-size-14); font-weight: 700; color: var(--dark-blue); margin-bottom: 4px; } 
.appointment-rating { font-size: 12px; color: var(--dark-blue); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } 
.appointment-rating i { color: #FCAA00; font-size: 11px; } 
.appointment-profession { font-size: 12px; color: #656B76; margin-bottom: 0; }

.appointment-service { margin-bottom: 12px; } 
.appointment-service-title { font-size: var(--font-size-14); font-weight: 700; color: var(--dark-blue); margin-bottom: 0; } 
.appointment-details-container { display: flex; gap: 20px; align-items: center; }

.appointment-details { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-radius: 6px; padding: 12px; border: 1px solid var(--cool-gray); width: 100%; } 
.appointment-detail-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #656B76; } 
.appointment-detail-item i { color: var(--royal-blue); font-size: 11px; } 
.appointment-footer { display: flex; justify-content: space-between; align-items: center; }

.appointment-status { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } 
.appointment-status.status-confirmed { background: #ECFDF3; color: #027A48; } 
.appointment-status.status-pending { background: #FFFAEB; color: #B54708; } 
.appointment-actions { display: flex; gap: 8px; } 
button.appointment-action-btn img { height: 24px; width: 24px; }
.appointment-action-btn { padding: 9px; border-radius: 6px; border: 1px solid var(--cool-gray); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; color: #4B5563; font-size: 12px; } 
.appointment-action-btn:hover { background: #F8F8F8; border-color: var(--royal-blue); color: var(--royal-blue); }

/* Recent Activities */
.activities-list { display: flex; flex-direction: column; gap: 16px; max-height: 600px; overflow-y: auto; padding-right: 8px; } 
.activity-item { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--cool-gray); } 
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }

.activity-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }

.activity-icon-orange { background: var(--white)4E6; color: #B54708; } 
.activity-icon-blue { background: #EFF8FF; color: #175CD3; } 
.activity-icon-green { background: #ECFDF3; color: #027A48; } 
.activity-icon-light-blue { background: #F0F9FF; color: #0284C7; } 
.activity-content { flex: 1; }
.activity-title { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); margin-bottom: 4px; } 
.activity-time { font-size: 11px; color: #9A9EA6; margin-bottom: 6px; } 
.activity-description { font-size: 12px; color: #656B76; margin-bottom: 0; line-height: 1.5; }

/* Scrollbar for activities and appointments */
.appointments-list::-webkit-scrollbar, .activities-list::-webkit-scrollbar { width: 6px; } 
.appointments-list::-webkit-scrollbar-track, .activities-list::-webkit-scrollbar-track { background: #F8F8F8; border-radius: 10px; } 
.appointments-list::-webkit-scrollbar-thumb, .activities-list::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: 10px; } 
.appointments-list::-webkit-scrollbar-thumb:hover, .activities-list::-webkit-scrollbar-thumb:hover { background: #9A9EA6; }

/* Notification Page Styles */
.notification-header { 
    padding-bottom: 16px; 
    border-bottom: 1px solid var(--soft-gray); 
}

.notification-list { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.notification-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    padding: 16px; 
    background: var(--white); 
    border: 1px solid var(--soft-gray); 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    position: relative; 
}

.notification-item:hover { 
    background: #F9FAFB; 
    border-color: rgba(3, 38, 66, 0.3); 
    box-shadow: 0 2px 4px rgba(3, 38, 66, 0.3); 
}

.notification-item.unread { 
    background: #EFF6FF; 
    border-left: 4px solid #032642; 
}

.notification-item.read { 
    opacity: 0.85; 
}

.notification-content { 
    display: flex; 
    gap: 16px; 
    align-items: center;
    flex: 1; 
    min-width: 0; 
}

.notification-icon-wrapper { 
    flex-shrink: 0; 
}

.notification-icon { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
}

.notification-icon.primary { background: #EFF6FF; }

.notification-icon.primary i { color: var(--royal-blue); }

.notification-icon.success { background: #D1FAE5; }

.notification-icon.success i { color: #09855c; }

.notification-icon.warning { background: #FEF3C7; }

.notification-icon.warning i { color: #F59E0B; }

.notification-icon.danger { background: #FEE2E2; }

.notification-icon.danger i { color: #EF4444; }

.notification-icon.info { background: #DBEAFE; }

.notification-icon.info i { color: #3B82F6; }

.notification-details { 
    flex: 1; 
    min-width: 0; 
}

.notification-title { 
    font-size: var(--font-size-16); 
    font-weight: 600; 
    color: var(--dark-blue); 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
}

.notification-title .badge { 
    font-size: 11px; 
    font-weight: 600; 
    padding: 2px 8px; 
}

.notification-message { 
    font-size: var(--font-size-14); 
    color: #4F687B; 
    font-weight: 400; 
    line-height: 1.5; 
    margin-top: 4px; 
}

.notification-tag { 
    font-size: var(--font-size-13); 
    display: inline-flex; 
    align-items: center; 
    margin-top: 4px; 
}

.notification-meta { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

.notification-time-wrapper { 
    text-align: right; 
}

.notification-time { 
    font-size: 16px; 
    font-weight: 600; 
    color: #686868; 
    display: block; 
    margin-bottom: 5px;
}

.notification-date { 
    font-size: var(--font-size-13); 
    margin-top: 2px; 
}

.notification-actions { 
    display: flex; 
    gap: 8px; 
}

.empty-notifications { 
    padding: 60px 20px; 
    text-align: center; 
}

.empty-notifications i { 
    opacity: 0.5; 
    margin-bottom: 16px; 
}

.empty-notifications h5 { 
    font-size: var(--font-size-16); 
    font-weight: 600; 
    margin-bottom: 8px; 
    color: #9A9EA6; 
}

.empty-notifications p { 
    font-size: var(--font-size-14); 
    color: #9A9EA6; 
}

.notification-pagination { 
    padding-top: 16px; 
    border-top: 1px solid var(--soft-gray); 
    margin-top: 16px; 
}

.btn-delete-notification { 
    background: none; 
    border: none; 
    padding: 8px; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    color: #EF4444; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.btn-delete-notification:hover { 
    background-color: #FEE2E2; 
}

.btn-delete-notification i { 
    font-size: 16px; 
    color: #EF4444; 
}

/* Legacy styles - keeping for backward compatibility */
.user-notifications { display: flex; justify-content: space-between; align-items: center;  padding: 12px 0; }
.user-notifications .user-profile { display: flex; gap: 15px;}
.user-profile img { height: 48px; width: 48px; }
.user-notifications .user-profile .user-name { font-size: var(--font-size-15); font-weight: 500; color: var(--dark-blue);}
.user-notifications .user-profile .description { color:  #4F687B; font-size: var(--font-size-14); font-weight: 400; }
.user-notifications .time { color: #9A9EA6; font-size: var(--font-size-14); font-weight: 500;  }

/* Profile Settings Styles */

.user-profile-setting .profile-tabs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 5px; } 
.user-profile-setting .profile-tab-item, .nav-link { width: 100%; } 
.user-profile-setting i.fas.fa-pencil-alt.me-2 { border-radius: 83.333px; border: 1.667px solid var(--white); background: var(--white); box-shadow: 0 1.667px 3.333px 0 rgba(0, 0, 0, 0.10); width: 24px; height: 24px; padding: 5px; text-align: center; vertical-align: middle; position: absolute; left: -35px; top: -24px; }

.user-profile-setting h3.tab-content-title.mb-0 { font-size: var(--font-size-15); font-weight: 700; border-bottom: 1px solid var(--soft-gray); width: 100%; padding-bottom: 1em; margin-bottom: 1em; } 
.user-profile-setting .profile-tab-item:last-child { border-bottom: none; } 
.user-profile-setting .nav-item.profile-tab-item{ text-align: center; } 
.user-profile-setting .nav-link { text-align: center; font-size: var(--font-size-16); font-weight: 500; color: #4F687B; }

.user-profile-setting .nav-link.active{ border-radius: 4px; background: #F3F4F6; width: 100%; padding: 14px 16px; width: 100%; font-weight: 700; } 
.user-profile-setting .nav-link { text-align: center; } 
.user-profile-setting .profile-tab-link { display: block; padding: 16px 20px; color: var(--dark-blue); font-size: var(--font-size-16); font-weight: 500; text-decoration: none; transition: all 0.3s ease; font-family: "Plus Jakarta Sans", sans-serif; }

.user-profile-setting .profile-tab-item.active .profile-tab-link { background-color: #F5F5F5; color: var(--dark-blue); font-weight: 600; } 
.user-profile-setting .profile-tab-link:hover { background-color: #F9F9F9; color: var(--dark-blue); text-decoration: none; } 
.user-profile-setting .profile-settings { padding: 30px !important; }

.user-profile-setting .profile-settings-title { font-size: 24px; font-weight: 600; color: var(--dark-blue); margin-bottom: 30px; font-family: "Plus Jakarta Sans", sans-serif; } 
.user-profile-setting .profile-tab-content { display: none; } 
.user-profile-setting .profile-tab-content.active { display: block; }

/* Profile Picture Section */
.user-profile-setting .profile-picture-section { margin-bottom: 30px; } 
.user-profile-setting .profile-picture-wrapper { display: flex; align-items: flex-start; gap: 20px; } 
.user-profile-setting .profile-picture-container { position: relative; width: 120px; height: 120px; flex-shrink: 0; } 
.user-profile-setting .profile-picture-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cool-gray); }
.user-profile-setting .profile-picture-edit { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background-color: var(--white); border: 1px solid var(--cool-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; }

.user-profile-setting .profile-picture-edit:hover { background-color: #F5F5F5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } 
.user-profile-setting .profile-picture-edit svg { color: var(--dark-blue); width: 14px; height: 14px; } 
.user-profile-setting .profile-picture-info { display: flex; flex-direction: column; gap: 4px; } 
.user-profile-setting .change-image-link { color: var(--royal-blue); font-size: var(--font-size-16); font-weight: 600; text-decoration: none; font-family: "Plus Jakarta Sans", sans-serif; transition: color 0.3s ease; }
.user-profile-setting .image-recommendations { font-size: var(--font-size-14); color: #656B76; margin: 0; font-family: "Archivo", sans-serif; }

/* Profile Form */
.user-profile-setting .profile-form { margin-top: 20px; } 
.user-profile-setting .form-group { margin-bottom: 24px; } 
.user-profile-setting .form-label { display: block; font-size: var(--font-size-14); font-weight: 500; color: var(--dark-blue); margin-bottom: 8px; font-family: "Plus Jakarta Sans", sans-serif; } 
.user-profile-setting .profile-input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--light-gray); background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); font-size: var(--font-size-16); color: var(--dark-blue); font-family: "Archivo", sans-serif; transition: all 0.3s ease; }

.user-profile-setting .profile-input:focus { outline: none; border-color: var(--royal-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } 
.user-profile-setting .profile-input::placeholder { color: #9A9EA6; } 
.user-profile-setting .form-actions { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--cool-gray); } 
.user-profile-setting .form-actions .blue-btn { padding: 12px 32px; font-size: var(--font-size-16); font-weight: 600; } 
.earnings-title { font-size: var(--font-size-13); font-weight: 500; margin-bottom: 10px; } 
.earnings-amount { font-size: 23px; font-weight: 700; margin-bottom: 20px; }


/* Professional Booking Modal */

.professional-booking-modal  .modal-content .date-time-modal { border-radius: 12px; border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } 
.professional-booking-modal  .date-time-modal-header { border-bottom: 1px solid var(--soft-gray); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; } 
.professional-booking-modal  .date-time-modal-title { font-size: var(--font-size-15); font-weight: 700; color: #1e3a8a; margin: 0; }
.professional-booking-modal  .btn-close-modal { background: none; border: none; font-size: 20px; color: #6b7280; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } 
.professional-booking-modal  .btn-close-modal:hover { color: #1f2937; } 
.professional-booking-modal  .date-time-modal-body { padding: 24px; }

/* Date Selection Area – Booking Modal */
.professional-booking-modal .date-selection-area { margin-bottom: 28px; }
.professional-booking-modal .month-year-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
    flex-wrap: wrap;
    gap: 12px;
}
.professional-booking-modal .month-year-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1e3a8a;
    cursor: pointer;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    transition: background 0.2s, border-color 0.2s;
}
.professional-booking-modal .month-year-dropdown:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.professional-booking-modal .month-year-dropdown i {
    font-size: 11px;
    color: #3b82f6;
    transition: transform 0.2s;
}
.professional-booking-modal .month-navigation { display: flex; gap: 6px; align-items: center; }
.professional-booking-modal .nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.professional-booking-modal .nav-arrow:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.professional-booking-modal .month-year-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
    padding: 12px;
    min-width: 260px;
    display: none;
    border: 1px solid #e5e7eb;
}
.professional-booking-modal .month-year-menu.show { display: block; }
.professional-booking-modal .month-year-menu-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.professional-booking-modal .month-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
}
.professional-booking-modal .month-item {
    border: none;
    background: transparent;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.15s;
}
.professional-booking-modal .month-item:hover { background: #eff6ff; color: #1d4ed8; }
.professional-booking-modal .month-item.active {
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
}
.professional-booking-modal .year-list { display: flex; flex-direction: column; gap: 4px; }
.professional-booking-modal .year-item {
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.15s;
    text-align: left;
    white-space: nowrap;
}
.professional-booking-modal .year-item:hover { background: #eff6ff; color: #1d4ed8; }
.professional-booking-modal .year-item.active {
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
}
/* Dates row – horizontal scroll */
.professional-booking-modal .date-selection-area .dates-row-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -2px;
    padding: 6px 2px 14px;
    -webkit-overflow-scrolling: touch;
}
.professional-booking-modal .dates-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: flex-start;
    min-width: min-content;
}
.professional-booking-modal .dates-row::-webkit-scrollbar { height: 8px; }
.professional-booking-modal .dates-row::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.professional-booking-modal .dates-row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.professional-booking-modal .dates-row::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Date item cards */
.professional-booking-modal .date-item {
    flex-shrink: 0;
    min-width: 84px;
    padding: 14px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.professional-booking-modal .date-item:hover:not(.disabled):not(.selected) {
    border-color: #93c5fd;
    background: #f8fafc;
}
.professional-booking-modal .date-item.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.professional-booking-modal .date-item.disabled { opacity: 0.45; cursor: not-allowed; }
.professional-booking-modal .date-number {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.2;
}
.professional-booking-modal .date-item.selected .date-number { color: #1d4ed8; }
.professional-booking-modal .date-item.disabled .date-number { color: #9ca3af; }
.professional-booking-modal .date-day {
    font-size: 12px;
    color: #6b7280;
    text-transform: capitalize;
    font-weight: 500;
}
.professional-booking-modal .date-item.selected .date-day { color: #1d4ed8; }
.professional-booking-modal .date-item.disabled .date-day { color: #9ca3af; }

/* Time Slots Section */
.professional-booking-modal .time-slots-section { margin-top: 32px; } 
.professional-booking-modal .time-slots-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } 
.professional-booking-modal .time-slots-heading { font-size: var(--font-size-16); font-weight: 600; color: #1f2937; margin-bottom: 0; } 
.professional-booking-modal .time-slots-hint { font-size: 12px; font-weight: 500; color: #6b7280; transition: color 0.2s; } 
.professional-booking-modal .time-slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } 
.professional-booking-modal .time-slot { padding: 12px 16px; border: 2px solid var(--soft-gray); border-radius: 8px; text-align: center; font-size: var(--font-size-14); color: #1f2937; cursor: pointer; transition: all 0.2s; background: white; position: relative; } 
.professional-booking-modal .time-slot:hover:not(.disabled):not(.selected) { border-color: #3b82f6; background-color: #eff6ff; } 
.professional-booking-modal .time-slot.selected { border-color: #2563EB; background-color: #DBEAFE; color: #1d4ed8; font-weight: 600; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); } 
.professional-booking-modal .time-slot.disabled { opacity: 0.4; cursor: not-allowed; color: #9ca3af; } 
.professional-booking-modal .time-slot .slot-badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #2563EB; color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4); }

/* Modal Footer */
.professional-booking-modal .date-time-modal-footer { border-top: 1px solid var(--soft-gray); padding: 20px 24px; display: flex; justify-content: flex-end; gap: 12px; } 
.professional-booking-modal .btn-cancel { padding: 10px 24px; background: white; border: 1px solid var(--soft-gray); border-radius: 8px; color: #1f2937; font-weight: 500; cursor: pointer; transition: all 0.2s; } 
.professional-booking-modal .btn-cancel:hover { background-color: #f9fafb; border-color: #d1d5db; }
.professional-booking-modal .btn-continue { padding: 10px 24px; background: #3b82f6; border: none; border-radius: 8px; color: white; font-weight: 500; cursor: pointer; transition: all 0.2s; } 
.professional-booking-modal .btn-continue:hover:not(:disabled) { background: var(--royal-blue); } 
.professional-booking-modal .btn-continue:disabled { opacity: 0.5; cursor: not-allowed; }

/* Customer Booking Details (scoped: only affects page with .customer-booking-details) */

.customer-booking-details .back-link { color: var(--dark-blue); text-decoration: none; font-size: var(--font-size-14); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.customer-booking-details .back-link:hover { color: var(--royal-blue); }
.customer-booking-details .booking-page-title { font-size: 24px; font-weight: 700; color: var(--dark-blue); }
.customer-booking-details .section-title { font-size: 18px; font-weight: 700; color: var(--dark-blue); margin-bottom: 1em; }

/* Booking Details Page – BEM (theme-aligned, no impact on other pages) */
.customer-booking-details__header { margin-bottom: 0; }
.customer-booking-details__back { color: var(--dark-blue); text-decoration: none; font-size: var(--font-size-14); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; transition: color 0.2s; }
.customer-booking-details__back:hover { color: var(--royal-blue); }
.customer-booking-details__title { font-size: 24px; font-weight: 700; color: var(--dark-blue); margin: 0 0 4px 0; }
.customer-booking-details__subtitle { font-size: var(--font-size-14); color: var(--light-black); margin: 0; }

.customer-booking-details__card { padding: 24px; }
.customer-booking-details__card-title { font-size: 17px; font-weight: 600; color: var(--dark-blue); margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 1px solid var(--soft-gray); }

.customer-booking-details__list { display: flex; flex-direction: column; gap: 0; }
.customer-booking-details__row { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--cool-gray); }
.customer-booking-details__row:last-child { border-bottom: none; padding-bottom: 0; }
.customer-booking-details__row:first-child { padding-top: 0; }
.customer-booking-details__label { font-size: 14px; font-weight: 600; color: #6B7280; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; }
.customer-booking-details__label i { color: var(--royal-blue); font-size: 14px; width: 18px; text-align: center; }
.customer-booking-details__value { font-size: var(--font-size-15); font-weight: 500; color: var(--dark-blue); margin-left: 2%; }
.customer-booking-details__badge { display: inline-block; padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.customer-booking-details__badge--pending { background: #FEF3C7; color: #B45309; }
.customer-booking-details__badge--completed { background: #D1FAE5; color: #047857; }
.customer-booking-details__badge--cancelled { background: #FEE2E2; color: #B91C1C; }
.customer-booking-details__badge-- { background: #F3F4F6; color: #6B7280; }

.customer-booking-details__pro-card { padding: 20px; background: #F9FAFB; border-radius: 8px; margin-bottom: 16px; }
.customer-booking-details__pro { display: flex; align-items: center; gap: 14px; }
.customer-booking-details__pro-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--soft-gray); }
.customer-booking-details__pro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.customer-booking-details__pro-name { font-size: var(--font-size-16); font-weight: 600; color: var(--dark-blue); margin: 0 0 4px 0; }
.customer-booking-details__pro-rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-14); color: var(--dark-blue); }
.customer-booking-details__pro-rating i { color: #FACC15; }

.customer-booking-details__summary-card { padding: 20px; border-radius: 8px; }
.customer-booking-details__summary-card .customer-booking-details__card-title { margin-bottom: 16px; padding-bottom: 12px; }
.customer-booking-details__summary-item { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--cool-gray); }
.customer-booking-details__summary-service { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); }
.customer-booking-details__summary-price { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); }
.customer-booking-details__summary-duration { font-size: var(--font-size-13); color: #6B7280; display: block; margin-top: 4px; }
.customer-booking-details__total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 0; border-top: 1px solid var(--cool-gray); }
.customer-booking-details__total-label { font-size: var(--font-size-16); font-weight: 600; color: var(--dark-blue); }
.customer-booking-details__total-amount { font-size: 18px; font-weight: 700; color: var(--royal-blue); }

/* Form Controls */
.customer-booking-details .booking-input { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--soft-gray); background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); font-size: var(--font-size-14); color: var(--dark-blue); } 
.customer-booking-details .booking-input:focus { border-color: var(--royal-blue); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } 
.customer-booking-details .booking-input[readonly] { background-color: #F9FAFB; cursor: not-allowed; }
.customer-booking-details .booking-textarea { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--soft-gray); background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); font-size: var(--font-size-14); color: var(--dark-blue); resize: vertical; } 
.customer-booking-details .booking-textarea:focus { border-color: var(--royal-blue); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } 
.customer-booking-details .booking-textarea::placeholder { color: #9CA3AF; } 
.customer-booking-details .form-label { font-size: var(--font-size-14); font-weight: 500; color: var(--dark-blue); margin-bottom: 8px; display: block; }

/* Date & Time Selector */
.customer-booking-details .date-time-selector { cursor: pointer; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--soft-gray); background: var(--white); box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); transition: all 0.2s; } 
.customer-booking-details .date-time-selector:hover { border-color: var(--royal-blue); box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.1); } 
.customer-booking-details .date-time-content { display: flex; justify-content: space-between; align-items: center; } 
.customer-booking-details .date-time-text { flex: 1; }
.customer-booking-details .date-display { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); margin-bottom: 4px; } 
.customer-booking-details .time-display { font-size: var(--font-size-13); color: #6B7280; } 
.customer-booking-details .date-time-arrow { color: #9CA3AF; font-size: var(--font-size-14); } 
.customer-booking-details .reserved-time-field { padding-left: 16px; }

/* Professional Summary Card */
.customer-booking-details .professional-summary-card { padding: 20px; background-color: #F9F9F9; border-radius: 8px; } 
.customer-booking-details .professional-info { display: flex; align-items: center; gap: 12px; } 
.customer-booking-details .professional-avatar-container { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } 
.customer-booking-details .professional-avatar { width: 100%; height: 100%; object-fit: cover; }
.customer-booking-details .professional-details { flex: 1; } 
.customer-booking-details .professional-name { font-size: var(--font-size-16); font-weight: 600; color: var(--dark-blue); margin-bottom: 4px; }
.customer-booking-details .professional-rating { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-14); color: var(--dark-blue); } 
.customer-booking-details .professional-rating i { color: #FACC15; font-size: var(--font-size-14); }

/* Booking Summary */
.customer-booking-details .booking-summary-card { padding: 20px; border-radius: 8px; } 
.customer-booking-details .summary-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--cool-gray); } 
.customer-booking-details .summary-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } 
.customer-booking-details .summary-item-content { display: flex; align-items: center; gap: 12px; } 
.customer-booking-details .summary-icon { color: #6B7280; font-size: var(--font-size-16); width: 20px; text-align: center; }
.customer-booking-details .summary-text { font-size: var(--font-size-14); color: var(--dark-blue); } 
.customer-booking-details .service-summary { border-bottom: 1px solid var(--cool-gray); padding-bottom: 16px; margin-bottom: 16px; } 
.customer-booking-details .service-summary-content { display: flex; flex-direction: column; gap: 8px; } 
.customer-booking-details .service-name { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); } 
.customer-booking-details .service-details { display: flex; justify-content: space-between; align-items: center; }
.customer-booking-details .service-duration { font-size: var(--font-size-13); color: #6B7280; } 
.customer-booking-details .service-price { font-size: var(--font-size-14); font-weight: 600; color: var(--dark-blue); } 
.customer-booking-details .summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--cool-gray); }
.customer-booking-details .total-label { font-size: var(--font-size-16); font-weight: 600; color: var(--dark-blue); } 
.customer-booking-details .total-amount { font-size: 18px; font-weight: 700; color: var(--royal-blue); } 

/* BADGE */
.services-professionals-column .badge { position: absolute; top: 15px; left: 15px;  color: #2563EB; font-size: 13px; font-weight: 600;  border-radius: 100px; border: 1px solid #EBECED; background: #FFF; padding: 6px 10px; z-index: 2; }

/* PROFILE OVERLAY */
.services-professionals-column .profile-info { position: absolute;  bottom: 12px;  left: 12px;  display: flex;  align-items: center;  color: #fff;  z-index: 2;}
.services-professionals-column .profile-pic {  width: 40px;  height: 40px; object-fit: contain;   margin-right: 10px;}
.services-professionals-column .profile-text h4 {  margin: 0; font-size: 14px; font-weight: 700; color: var(--white);}
.services-professionals-column .profile-text .rating-text { font-size: 13px; margin-top: 2px; color: var(--white);  font-weight: 500;}
.services-professionals-column .profile-text i { color: #ffcc00; }

/* Checkout Button */ 
.customer-booking-details .btn-checkout { padding: 12px 24px; font-size: var(--font-size-16); font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; } 
.customer-booking-details .btn-checkout:hover { background: #1D4ED8; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); }

.approve-profile-btn, .reject-profile-btn { font-size: var(--font-size-14); font-weight: 600; border-radius: 8px; border: 1px solid  var(--light-gray);  background: var(--white); padding: 10px 16px; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);}
.approve-profile-btn, .approve-profile-btn i {color: #16A34A; }
.reject-profile-btn, .reject-profile-btn i { color: #EA4335;}

.profile-name { display: flex;  flex-direction: column;}
.profile-name p { margin-bottom: 0; }
.sidebar-profile { display: flex; gap: 10px; align-items: center; padding: 4px 10.67px 4px 6px; border-radius: 6px; border: 1px solid #E9EAEB;  background: #FFF; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}
.sidebar-profile img { height: 16px; width: 16px; }
.notification-bell { padding: 11.5px; border-radius: 6px; border: 1px solid #E9EAEB; background: #FFF;  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}

.sidebar-profile img.profile-image { width: 32px;   height: 32px;  border-radius: 50%; }

.table_header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.table-scroll-container { overflow-x: scroll; overflow-y: hidden; width: 100%;}
.profile_card {display: flex;align-items: center;gap: 12px;}

/* Responsive */
@media (max-width: 991px) {
    .profile-picture-wrapper { flex-direction: column;     align-items: center;     text-align: center; } 
    .profile-picture-info {   align-items: center; }
    .customer-dashboard-details .col-lg-4 {  margin-bottom: 2em; }
    .appointments-list, .activities-list {     max-height: 400px; }
    .professional-job-details .job-details-header { flex-direction: column; align-items: flex-start !important; } 
    .professional-job-details .mark-complete-btn { width: 100%; margin-top: 1em; } 
}

@media (max-width: 768px) {
    .profile-settings {   padding: 20px !important;}
    .profile-settings-title {   font-size: 20px;   margin-bottom: 20px; }
    .profile-tab-link {  padding: 14px 16px;  font-size: var(--font-size-14); }
    .payment-methods-container {  grid-template-columns: 1fr;  }
    .add-card-item {  min-height: 180px;  padding: 30px 20px;  }
    .appointment-details {  flex-direction: column;  gap: 8px; }
    .appointment-footer {  flex-direction: column; align-items: flex-start; gap: 12px; }
    .appointment-actions {  width: 100%; justify-content: flex-start; }
    .add-service-modal .modal-dialog {  margin: 20px;}
    .add-service-modal .modal-header, .add-service-modal .modal-body, .add-service-modal .modal-footer {    padding: 20px;  }
    .add-service-modal .image-preview-container {  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));   gap: 12px; }
    .add-service-modal .modal-footer {   flex-direction: column; }
    .add-service-modal .btn-cancel, .add-service-modal .btn-add-service {   width: 100%; }
    .professional-booking-modal .time-slots-grid { grid-template-columns: repeat(2, 1fr); }
    .professional-booking-modal .dates-row { gap: 8px; }
    .professional-booking-modal .date-item { min-width: 72px; padding: 12px 10px; }
    .professional-booking-modal .date-number { font-size: 18px; }
}

/* ========== Chat / Messages Page (Inspired Design) ========== */
.chat-page-wrap { padding: 0; overflow: hidden; height: calc(100vh - 260px); max-height: calc(100vh - 260px); display: flex; flex-direction: column; }
.chat-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.chat-sidebar { width: 400px; min-width: 400px; border-right: 1px solid var(--soft-gray); display: flex; flex-direction: column; background: var(--white); overflow: hidden; }
.chat-sidebar-header { padding: 16px 18px; border-bottom: 1px solid var(--soft-gray); flex-shrink: 0; background: var(--white); }
.chat-sidebar-title { font-size: 17px; font-weight: 700; color: var(--dark-blue); margin: 0 0 12px 0; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--soft-gray); background: #F9FAFB; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); transition: all 0.2s; margin-bottom: 10px; }
.chat-search-wrap:focus-within { border-color: var(--royal-blue); background: var(--white); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.chat-search-icon { color: #9A9EA6; font-size: 14px; flex-shrink: 0; }
.chat-search-input { border: none; outline: none; font-size: var(--font-size-14); flex: 1; background: transparent; color: var(--dark-blue); font-weight: 400; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-search-input::placeholder { color: #9A9EA6; font-weight: 400; }
.chat-new-message-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--royal-blue); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.chat-new-message-btn:hover { background: #1d4ed8; transform: scale(1.05); }
.chat-new-message-btn i { font-size: 12px; }
.chat-filter-tabs { display: flex; gap: 6px; margin-top: 8px; }
.chat-filter-tab { padding: 6px 16px; border-radius: 20px; border: none; background: transparent; color: #6B7280; font-size: var(--font-size-14); font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; position: relative; }
.chat-filter-tab:hover { color: var(--dark-blue); background: #F3F4F6; }
.chat-filter-tab.active { color: var(--royal-blue); font-weight: 600; }
.chat-filter-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 16px; right: 16px; height: 2px; background: var(--royal-blue); border-radius: 2px; }
#chat-list-container { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.chat-list { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 0; }
.chat-list-items { display: flex; flex-direction: column; }
.chat-list-empty { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 20px; }
.chat-list-empty.hidden { display: none !important; }
.chat-list-items.hidden { display: none !important; }
.chat-list-empty i { font-size: 40px; color: #8db1ff; margin-bottom: 12px; opacity: 0.5; }
.chat-list-empty p { font-size: var(--font-size-14); color: #6B7280; margin: 0; font-weight: 500; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-list-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cool-gray); text-decoration: none; color: inherit; transition: all 0.15s; cursor: pointer; background: var(--white); position: relative; }
.chat-list-item:hover { background: #F9FAFB; }
.chat-list-item.active { background: #EFF8FF; }
.chat-list-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--royal-blue); }
.chat-list-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-list-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; }
.chat-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #9CA3AF; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.chat-online-dot.online { background: #16A34A; }
.chat-unread-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--royal-blue); color: var(--white); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); }
.chat-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-list-name { font-size: var(--font-size-15); font-weight: 600; color: var(--dark-blue); line-height: 1.4; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-list-item.active .chat-list-name { color: var(--royal-blue); }
.chat-list-time { font-size: 12px; color: #9A9EA6; flex-shrink: 0; font-weight: 500; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-list-service { display: block; font-size: 12px; color: #9A9EA6; margin: 0 0 2px 0; font-weight: 500; font-family: "Plus Jakarta Sans", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-preview { font-size: 13px; color: #6B7280; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; font-weight: 400; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-list-item.active .chat-list-preview { color: #4B5563; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #FAFAFA; overflow: hidden; min-height: 0; height: 100%; }
#chat-content { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.chat-conv-header { padding: 12px 20px; border-bottom: 1px solid var(--soft-gray); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--white); }
.chat-conv-header-info { display: flex; align-items: center; gap: 14px; }
.chat-conv-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-conv-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; }
.chat-conv-status-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #9CA3AF; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.chat-conv-status-dot.online { background: #16A34A; }
.chat-conv-status-dot.offline { background: #9CA3AF; }
.chat-conv-info { display: flex; flex-direction: column; gap: 2px; }
.chat-conv-name { font-size: 16px; font-weight: 700; color: var(--dark-blue); margin: 0; line-height: 1.3; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-conv-status { font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 6px; font-weight: 400; }
.chat-conv-status #chat-service-name { color: #6B7280; }
.chat-conv-actions { display: flex; align-items: center; gap: 8px; }
.chat-header-action-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #6B7280; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.chat-header-action-btn:hover { background: #F3F4F6; color: var(--royal-blue); }
.chat-header-action-btn i { font-size: 16px; }
.chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 16px; display: flex; flex-direction: column; background: #FAFAFA; min-height: 0; }
.chat-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; height: 100%; }
.chat-empty-state i { font-size: 56px; color: #8db1ff; margin-bottom: 12px; opacity: 0.5; }
.chat-empty-state p { font-size: var(--font-size-14); color: #6B7280; margin: 0 0 2px 0; font-weight: 500; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-empty-state .chat-empty-subtitle { font-size: var(--font-size-13); color: #9A9EA6; font-weight: 400; margin: 0; }
.chat-load-older-loader { flex-shrink: 0; padding: 12px 16px; display: flex; justify-content: center; align-items: center; background: #FAFAFA; }
.chat-load-older-spinner-wrap { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6B7280; }
.chat-load-older-text { font-weight: 500; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-messages-list { display: flex; flex-direction: column; gap: 0; width: 100%; }
.chat-messages-list:not([style*="display: none"]) ~ .chat-empty-state,
.chat-messages-list:not([style*="display: none"]) + .chat-empty-state { display: none !important; }
.chat-msg-avatar-wrap { flex-shrink: 0; display: flex; align-items: flex-end; }
.chat-message-incoming .chat-msg-avatar-wrap { order: -1; }
.chat-message-own .chat-msg-avatar-wrap { order: 2; }
.chat-date-sep { font-size: 12px; color: #6B7280; text-align: center; margin: 20px 0; position: relative; width: 100%; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; }
.chat-date-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #E5E7EB; z-index: 0; }
.chat-date-sep span { background: #FAFAFA; position: relative; z-index: 1; padding: 0 12px; display: inline-block; }
.chat-message { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-end; animation: fadeInMessage 0.3s ease-in; width: 100%; }
.chat-message-incoming { justify-content: flex-start; flex-direction: row; }
.chat-message-own { justify-content: flex-end; flex-direction: row; }
.chat-message-own .chat-msg-avatar-wrap { display: flex !important; visibility: visible !important; opacity: 1 !important; order: 2; }
.chat-message-own .chat-msg-content { order: 1; }
@keyframes fadeInMessage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; display: block; }
.chat-message-incoming .chat-msg-avatar,
.chat-message-own .chat-msg-avatar { width: 36px; height: 36px; }
.chat-msg-content { display: flex; flex-direction: column; max-width: 70%; min-width: 0; }
.chat-message-incoming .chat-msg-content { align-items: flex-start; margin-right: auto; }
.chat-message-own .chat-msg-content { align-items: flex-end; margin-left: auto; }
.chat-msg-content > * { max-width: 100%; }
.chat-message-incoming .chat-msg-image,
.chat-message-incoming .chat-msg-text { align-self: flex-start; }
.chat-message-own .chat-msg-image,
.chat-message-own .chat-msg-text { align-self: flex-end; }
.chat-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chat-message-incoming .chat-msg-meta { flex-direction: row; }
.chat-message-own .chat-msg-meta { flex-direction: row-reverse; }
.chat-msg-sender { font-size: 12px; font-weight: 600; color: #6B7280; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-message-own .chat-msg-sender { color: #9CA3AF; }
.chat-msg-time { font-size: 11px; color: #9CA3AF; font-family: "Plus Jakarta Sans", sans-serif; white-space: nowrap; }
.chat-msg-text { font-size: var(--font-size-14); margin: 0; padding: 10px 14px; border-radius: 12px; line-height: 1.5; word-wrap: break-word; word-break: break-word; position: relative; display: inline-block; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-message-incoming .chat-msg-text { color: #111827; background: #E7E9EC; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.chat-message-own .chat-msg-text { background: var(--royal-blue); color: var(--white); border-bottom-right-radius: 4px; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25); }
.chat-message-attachment { margin-top: 4px; margin-bottom: 2px; display: block; max-width: 100%; }
.chat-message-attachment.chat-msg-image { margin-bottom: 6px; border-radius: 12px; overflow: hidden; max-width: 280px; display: block; background: #F3F4F6; cursor: pointer; }
.chat-message-attachment.chat-msg-image a { display: block; text-decoration: none; color: inherit; }
.chat-message-attachment.chat-msg-image img { width: 100%; max-width: 280px; max-height: 320px; height: auto; display: block; object-fit: contain; border-radius: 12px; cursor: pointer; transition: opacity 0.2s; }
.chat-message-attachment.chat-msg-image img:hover { opacity: 0.95; }
.chat-message-attachment.chat-msg-image img[src=""], .chat-message-attachment.chat-msg-image img:not([src]) { min-height: 80px; background: #E5E7EB; }
.chat-message-attachment.chat-attach-collage { display: grid; gap: 2px; width: 260px; max-width: 100%; margin-top: 6px; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: #e5e7eb; border: 1px solid #e5e7eb; box-sizing: border-box; }
.chat-message-own .chat-message-attachment.chat-attach-collage { background: #e5e7eb; border-color: #e5e7eb; }
.chat-attach-collage.chat-attach-collage-1img { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 1 / 1; }
.chat-attach-collage-1img .chat-collage-item { min-width: 0; min-height: 0; aspect-ratio: 1; overflow: hidden; background: #fff; display: block; text-decoration: none; color: inherit; }
.chat-attach-collage-1img .chat-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.chat-attach-collage-images.chat-attach-collage-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
.chat-attach-collage-2 .chat-collage-item { min-width: 0; min-height: 0; aspect-ratio: 1; }
.chat-attach-collage-images.chat-attach-collage-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.chat-attach-collage-3 .chat-collage-item { min-width: 0; min-height: 0; aspect-ratio: 1; }
.chat-attach-collage-3 .chat-collage-item-span-2 { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.chat-attach-collage-images.chat-attach-collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.chat-attach-collage-4 .chat-collage-item { min-width: 0; min-height: 0; aspect-ratio: 1; }
.chat-attach-collage-images.chat-attach-collage-5plus { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.chat-attach-collage-5plus .chat-collage-item { min-width: 0; min-height: 0; aspect-ratio: 1; }
.chat-attach-collage .chat-collage-item { display: block; position: relative; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: opacity 0.2s; }
.chat-attach-collage .chat-collage-item:hover { opacity: 0.92; }
.chat-attach-collage .chat-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; vertical-align: top; }
.chat-attach-collage .chat-collage-item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111827; }
.chat-collage-item-last-with-more { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: block; }
.chat-collage-item-last-with-more .chat-collage-item-inner { position: absolute; inset: 0; display: block; text-decoration: none; color: inherit; }
.chat-collage-item-last-with-more .chat-collage-item-inner img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.chat-collage-more-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 18px; font-weight: 700; z-index: 1; pointer-events: none; }
.chat-attach-collage-videos { grid-template-columns: repeat(2, 1fr); }
.chat-attach-collage-videos.chat-attach-collage-3to6 { grid-template-columns: repeat(2, 1fr); }
.chat-message-attachment.chat-msg-video { max-width: 280px; border-radius: 12px; overflow: hidden; background: #111827; }
.chat-message-attachment.chat-msg-video video { width: 100%; max-width: 280px; max-height: 240px; display: block; object-fit: contain; border-radius: 12px; }
.chat-message-attachment.chat-msg-audio { max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #F3F4F6; border: 1px solid #E5E7EB; }
.chat-message-attachment.chat-msg-audio audio { width: 100%; min-width: 240px; height: 36px; display: block; }
/* .chat-message-attachment:not(.chat-msg-image):not(.chat-msg-video):not(.chat-msg-audio) { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #F3F4F6; border: 1px solid #E5E7EB; max-width: 280px; } */
.chat-message-attachment:not(.chat-msg-image):not(.chat-msg-video):not(.chat-msg-audio) > i { font-size: 28px; color: var(--royal-blue); flex-shrink: 0; }
.chat-message-attachment:not(.chat-msg-image):not(.chat-msg-video):not(.chat-msg-audio) .chat-attach-info { min-width: 0; flex: 1; }
.chat-attach-download { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--royal-blue); text-decoration: none; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.chat-attach-download i { font-size: 14px; }
.chat-attach-download:hover { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; text-decoration: none; }
.chat-msg-image { margin-bottom: 6px; border-radius: 12px; overflow: hidden; max-width: 100%; display: block; }
.chat-img-preview { width: 100%; max-width: 300px; height: auto; display: block; border-radius: 12px; cursor: pointer; transition: transform 0.2s; }
.chat-img-preview:hover { transform: scale(1.02); }
.chat-msg-attachment { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #EFF8FF; color: var(--royal-blue); margin-top: 6px; font-size: var(--font-size-14); }
.chat-message-incoming .chat-msg-attachment { align-self: flex-start; }
.chat-message-own .chat-msg-attachment { align-self: flex-end; }
.chat-msg-attachment i { font-size: 20px; }
.chat-attach-name { display: block; font-weight: 500; color: #111827; font-size: 13px; }
.chat-attach-size { display: block; font-size: 12px; color: #6B7280; margin-top: 2px; }
.chat-collage-item.video-collage {height: 120px;}
.chat-input-wrap { padding: 12px 20px; border-top: 1px solid var(--soft-gray); flex-shrink: 0; background: var(--white); }
.chat-input-wrap form, .chat-input-wrap form, .chat-input-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-attachment-preview-wrap { width: 100%; order: -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--soft-gray); margin-bottom: 4px; }
.chat-attachment-preview-wrap.d-none { display: none !important; }
.chat-attachment-preview-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: #F3F4F6; border-radius: 10px; font-size: 13px; color: var(--dark-blue); max-width: 100%; }
.chat-attach-preview-img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.chat-attach-preview-video { width: 80px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.chat-attach-preview-icon { font-size: 24px; color: var(--royal-blue); flex-shrink: 0; }
.chat-attach-preview-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chat-attach-preview-remove { width: 24px; height: 24px; border: none; background: #E5E7EB; color: #6B7280; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-attach-preview-remove:hover { background: #EF4444; color: var(--white); }
.chat-emoji-wrap { position: relative; flex-shrink: 0; align-self: flex-end; }
.chat-emoji-picker-btn { width: 40px; height: 40px; border: none; background: transparent; color: #9A9EA6; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; border-radius: 50%; }
.chat-emoji-picker-btn:hover { background: #F3F4F6; color: var(--royal-blue); }
.chat-emoji-picker-btn i { font-size: 20px; }
.chat-emoji-picker-dropdown { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; width: 280px; max-width: calc(100vw - 24px); max-height: 240px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; background: var(--white); border: 1px solid var(--soft-gray); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); padding: 10px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; z-index: 200; visibility: hidden; opacity: 0; transition: visibility 0.15s, opacity 0.15s; }
.chat-emoji-picker-dropdown.is-open { visibility: visible; opacity: 1; }
.chat-emoji-picker-dropdown .chat-emoji-item { min-width: 0; width: 100%; aspect-ratio: 1; max-width: 32px; max-height: 32px; margin: 0 auto; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.chat-emoji-picker-dropdown .chat-emoji-item:hover { background: #F3F4F6; transform: scale(1.1); }
.chat-input { flex: 1; border: 1px solid var(--soft-gray); border-radius: 20px; padding: 10px 16px; font-size: var(--font-size-14); resize: none; outline: none; min-height: 42px; max-height: 120px; background: #F9FAFB; transition: all 0.2s; font-family: "Plus Jakarta Sans", sans-serif; color: var(--dark-blue); }
.chat-input:focus { border-color: var(--royal-blue); background: var(--white); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.chat-input::placeholder { color: #9A9EA6; font-weight: 400; }
.chat-input-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-input-action-btn { width: 40px; height: 40px; border: none; background: #F3F4F6; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.chat-input-action-btn i { font-size: 18px; color: #6B7280; }
.chat-input-action-btn:hover { background: #E5E7EB; color: var(--royal-blue); transform: scale(1.05); }
.chat-input-action-btn:hover i { color: var(--royal-blue); }
.chat-send-btn { width: 40px; height: 40px; border: none; background: var(--royal-blue); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2); }
.chat-send-btn i { color: var(--white); font-size: 16px; }
.chat-send-btn:hover { background: #1d4ed8; transform: scale(1.05); box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3); }
.chat-send-btn:active { transform: scale(0.98); }
.chat-input-actions { position: relative; }
.chat-attachment-dropdown { position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; background: var(--white); border: 1px solid var(--soft-gray); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 6px; min-width: 160px; z-index: 100; }
.chat-attachment-dropdown .chat-attach-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: var(--font-size-14); color: var(--dark-blue); text-align: left; transition: background 0.2s; font-family: "Plus Jakarta Sans", sans-serif; }
.chat-attachment-dropdown .chat-attach-option:hover { background: #F3F4F6; color: var(--royal-blue); }
.chat-attachment-dropdown .chat-attach-option i { width: 20px; font-size: 16px; color: #6B7280; }
.chat-attachment-dropdown .chat-attach-option:hover i { color: var(--royal-blue); }

/* ========== Content Management (Inspired Design) ========== */
.custom_row_class{ row-gap:20px; }
.box_shadow_wrapper{ padding: 20px; }
/* .cms_tabs_wapper ul li button{ padding:0px; } */
.section_one_wrapper h1{ padding-bottom:40px; }
.cms_tabs_wapper ul{ column-gap:15px; border:0px; }
.cms_tabs_discription_wrapper { padding-top:40px; }
.admin_dashboard_page_sec .box_shadow_wrapper{ height: 100%; }
.tabs_sec.tabs_sec_topics{ justify-content:end; }
.tutor_begin .calculator_wrapper{ flex: 1; justify-content: center; }
.cms_sec_admin .cms_save_changes_wrap{ display:flex; column-gap:10px; }
#kt_app_body .cms_sec_admin .remove_icon.edit_icon{ left:70%; top:27%; }
.cms_sec_admin .cms_img_upload-wrapper { display:flex;column-gap:20px; }
#kt_app_body .cms_sec_admin .edit_icon i{ font-size: 9px; color: #fff; }
#kt_app_body .cms_sec_admin .edit_icon.edit_icon_svg_upload i{ color: #4A4A4A; }
.cms_sec_admin .cms_whole_wrapper{ display:flex; flex-direction:column; row-gap:40px; }
.btn_transparent_border_blue i{ color: #fff !important; font-size: 14px; }
.section_one_wrapper { border-radius: 10px; border: 1px solid #DBDBDB; padding: 20px;}
.cms_sec_admin .cms_add_more_append { display:flex; justify-content:end; margin-top: 15px;}
.cms_sec_admin .sub_cection_wrapper_cms { row-gap:15px; display:flex; flex-direction:column;}
#kt_app_body .cms_sec_admin .edit_icon.edit_icon_svg_upload{ background-color: #fff; }
.cms_tabs_wapper ul li button.active{ background: #032642; color: #fff; } 
.btn_transparent_border_blue.active { color: #fff !important;  background-color: #032642 !important; }
.remove_icon_append_cms_wrapper { display:flex; align-items:center; justify-content:space-between; }
.edit_icon { display: flex !important; align-items: center !important; justify-content: center !important; background: #032642 !important; width: 25px !important; height: 25px !important; top:5% !important; left:95% !important; overflow: visible !important; }
.edit_icon i { margin: 0 !important; padding: 0 !important; font-size: 11px !important; color: #fff !important; line-height: 1 !important; display: block !important; }
.btn_transparent_border_blue{ color: #032642 !important; display: flex !important;  align-items: center !important;  column-gap: 10px !important; justify-content: center !important;padding: 8px 16px !important; border-radius: 8px !important;  border: 1px solid #021a2e !important; background-color: #fff !important;}
.image-input.image-input-circle,.image-input.image-input-circle .image-input-wrapper,.image-input-wrapper img{ border-radius:4px; }
.image-input.image-input-empty [data-kt-image-input-action=cancel],.image-input [data-kt-image-input-action=cancel] { display:flex; }
.remove_icon_append_cms_wrapper i{ border-radius: 50%;background: #032642; font-size:14px; color:#fff; width: 30px; height: 30px; display:flex; justify-content:center; align-items:center; }
.blue
.image-input.image-input-circle{ width:fit-content; }
.upload_img_append{ position:relative; margin-right: 16px; }
.upload_img_append .image-input-wrapper { position: relative; }
.image-input-wrapper img { width:100%; height:100%; object-fit:cover; }
.image-input-wrapper { width: 150px; height: 150px; border: 1px solid #cccccc; }
.add_img_append_wrapper .cms_img_upload-wrapper { display:flex; align-items:center; flex-wrap: wrap; }
.add_img_append_wrapper .cms_img_upload-wrapper .add_more_img_append_btn{ border:none; outline:none; border-radius:4px; width: 150px; height: 150px; flex-direction: column; row-gap: 8px; align-items: center; }
.upload_img_append .remove_img_append { position: absolute; top: 5px; right: 40px; background: #032642; color: #fff; border-radius: 50%; height: 30px; width: 30px; text-align: center; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
    .chat-layout { flex-direction: column; }
    .chat-sidebar { width: 100%; min-width: 100%; min-height: 280px; border-right: none; border-bottom: 1px solid var(--soft-gray); }
    .chat-sidebar-header { padding: 16px; }
    .chat-sidebar-title { font-size: 16px; margin-bottom: 12px; }
    .chat-filter-tabs { gap: 6px; }
    .chat-filter-tab { padding: 6px 12px; font-size: 13px; }
    .chat-list-item { padding: 12px 16px; }
    .chat-list-avatar { width: 44px; height: 44px; }
    .chat-main { min-height: 400px; }
    .chat-conv-header { padding: 12px 16px; }
    .chat-conv-actions { gap: 6px; }
    .chat-header-action-btn { width: 32px; height: 32px; }
    .chat-header-action-btn i { font-size: 14px; }
    .chat-messages { padding: 16px; }
    .chat-input-wrap { padding: 12px 16px; }
    .chat-input { border-radius: 20px; padding: 8px 16px; }
    .chat-empty-state i { font-size: 64px; }
    .chat-list-empty i { font-size: 64px; }
}

/* Availability settings (work hours) - profile setting */
.bh-gray-section { background-color: var(--white); border-radius: 12px; padding: 24px; border: 1px solid #e5e7eb; }
.work-availability .bh-day-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; height: 70px; }
.work-availability .bh-day-item:last-child { border-bottom: none; }
.work-availability .bh-day-label { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 0; user-select: none; }
.work-availability .bh-day-name { font-size: 15px; font-weight: 500; color: #111827; }
.work-availability .bh-time-section { display: flex; justify-content: center; flex-direction: column; gap: 2px; }
.work-availability .bh-closed-label { font-size: 14px; color: #6b7280; font-weight: 400; }
.work-availability .bh-time-wrapper { display: flex; align-items: center; gap: 12px; }
.work-availability .bh-time-dropdown { appearance: none; background-color: white; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 32px 8px 12px; font-size: 14px; color: #374151; cursor: pointer; transition: all 0.2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; min-width: 100px; }

/* intl-tel-input full width */
.contact-number { width: 100% !important; }
.iti { width: 100%; }
.iti__flag-container { width: auto; }
.iti__selected-flag { padding-right: 8px; }
.iti input { width: 100% !important; }
.work-availability .bh-time-dropdown:hover { border-color: #9ca3af; }
.work-availability .bh-time-separator { font-size: 14px; color: #6b7280; font-weight: 400; }
.work-availability .bh-main-container h2 { font-size: 24px; font-weight: 600; color: #111827; }
.work-availability .bh-main-container p { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
@media (max-width: 768px) {
    .work-availability .bh-day-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .work-availability .bh-time-section { width: 100%; padding-left: 32px; }
    .work-availability .bh-time-wrapper { flex-wrap: wrap; }
}