html {
scroll-behavior: smooth;
}
/* ===========================
GOOGLE FONT
=========================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
background: #f8fafc;
color: #1e293b;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
.container {
max-width: 1200px;
}
/*==================================
NAVBAR
==================================*/
.custom-navbar {
background: #ffffff;
padding: 18px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.logo {
font-size: 30px;
font-weight: 700;
color: #0f172a;
}
.logo span {
color: #2563eb;
}
.navbar-nav {
gap: 15px;
}
.nav-link {
color: #475569;
font-weight: 500;
transition: 0.3s;
}
.nav-link:hover {
color: #2563eb;
}
.nav-link.active {
color: #2563eb !important;
}
.btn-login {
border: 2px solid #2563eb;
color: #2563eb;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
}
.btn-login:hover {
background: #2563eb;
color: #fff;
}
.btn-register {
background: #2563eb;
color: #fff;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
}
.btn-register:hover {
background: #1d4ed8;
color: #fff;
}
.navbar-toggler {
font-size: 24px;
}
/*==================================
HERO
==================================*/
.hero {
padding: 90px 0;
background: #f8fafc;
}
.hero-badge {
display: inline-block;
background: #dbeafe;
color: #2563eb;
padding: 10px 18px;
border-radius: 50px;
margin-bottom: 25px;
font-weight: 600;
}
.hero-title {
font-size: 56px;
font-weight: 700;
line-height: 1.2;
color: #0f172a;
}
.hero-title span {
color: #2563eb;
}
.hero-description {
margin: 25px 0;
color: #64748b;
font-size: 18px;
}
.hero-search {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 140px;
gap: 15px;
margin-top: 35px;
align-items: center;
}
.hero-search input,
.hero-search select {
height: 55px;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0 15px;
outline: none;
}
.hero-search button {
border: none;
background: #2563eb;
color: white;
border-radius: 12px;
padding: 0 30px;
font-weight: 600;
}
.hero-search button:hover {
background: #1d4ed8;
}
.hero-features {
display: flex;
gap: 30px;
margin-top: 35px;
font-weight: 500;
}
.hero-features i {
color: #10b981;
margin-right: 8px;
}
.hero-image {
transform: translateY(-100px);
}
.hero-image img {
width: 100%;
border-radius: 25px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
/*==================================
CATEGORIES
==================================*/
.categories {
padding: 90px 0;
background: #fff;
}
.section-heading {
text-align: center;
margin-bottom: 60px;
}
.section-heading span {
color: #2563eb;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-heading h2 {
font-size: 42px;
font-weight: 700;
color: #0f172a;
margin: 10px 0;
}
.section-heading p {
color: #64748b;
max-width: 600px;
margin: auto;
}
.category-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 35px 20px;
text-align: center;
transition: 0.35s;
cursor: pointer;
height: 100%;
}
.category-card i {
width: 75px;
height: 75px;
background: #eff6ff;
color: #2563eb;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
margin: 0 auto 20px;
transition: 0.35s;
}
.category-card h4 {
font-size: 22px;
font-weight: 600;
color: #0f172a;
}
.category-card p {
color: #64748b;
margin-top: 10px;
}
.category-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 45px rgba(37, 99, 235, 0.12);
border-color: #2563eb;
}
.category-card:hover i {
background: #2563eb;
color: #fff;
}
/*==================================
FEATURED VENDORS
==================================*/
.featured-vendors {
padding: 90px 0;
background: #f8fafc;
}
.vendor-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid #e2e8f0;
transition: 0.35s;
height: 100%;
}
.vendor-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}
.vendor-image {
height: 230px;
overflow: hidden;
}
.vendor-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vendor-content {
padding: 25px;
}
.vendor-content h4 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.vendor-category {
display: inline-block;
background: #eff6ff;
color: #2563eb;
padding: 6px 14px;
border-radius: 30px;
font-size: 14px;
margin-bottom: 15px;
}
.vendor-content p {
color: #64748b;
margin-bottom: 18px;
}
.vendor-content p i {
color: #2563eb;
margin-right: 6px;
}
.vendor-rating {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-size: 15px;
}
.vendor-rating i {
color: #f59e0b;
}
.vendor-btn {
display: block;
text-align: center;
background: #2563eb;
color: #fff;
padding: 12px;
border-radius: 10px;
font-weight: 600;
transition: 0.3s;
}
.vendor-btn:hover {
background: #1d4ed8;
color: #fff;
}
/*==================================
HOW IT WORKS
==================================*/
.how-it-works {
padding: 90px 0;
background: #ffffff;
}
.step-card {
position: relative;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: 0.35s;
overflow: hidden;
height: 100%;
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
}
.step-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 60px;
font-weight: 700;
color: #eef4ff;
}
.step-icon {
width: 90px;
height: 90px;
margin: auto;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
display: flex;
justify-content: center;
align-items: center;
font-size: 34px;
margin-bottom: 25px;
transition: 0.3s;
}
.step-card:hover .step-icon {
background: #2563eb;
color: #fff;
}
.step-card h4 {
font-size: 24px;
margin-bottom: 15px;
font-weight: 600;
}
.step-card p {
color: #64748b;
line-height: 1.7;
}
/*==================================
WHY CHOOSE US
==================================*/
.why-choose {
padding: 90px 0;
background: #f8fafc;
}
.section-tag {
display: inline-block;
background: #dbeafe;
color: #2563eb;
padding: 8px 18px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 20px;
}
.why-title {
font-size: 42px;
font-weight: 700;
color: #0f172a;
margin-bottom: 20px;
}
.why-description {
color: #64748b;
margin-bottom: 35px;
line-height: 1.8;
}
.why-image img {
width: 100%;
border-radius: 20px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}
.why-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.why-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.why-item i {
width: 55px;
height: 55px;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
flex-shrink: 0;
}
.why-item h5 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.why-item p {
color: #64748b;
margin: 0;
}
/*==================================
STATISTICS
==================================*/
.statistics {
padding: 90px 0;
background: #ffffff;
}
.stat-card {
background: rgba(0, 0, 255, 0.563);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 18px;
padding: 40px 25px;
text-align: center;
color: #000000;
transition: 0.35s;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.stat-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
}
.stat-card i {
font-size: 42px;
margin-bottom: 20px;
}
.stat-card h2 {
font-size: 52px;
font-weight: 700;
margin-bottom: 10px;
}
.stat-card p {
margin: 0;
font-size: 18px;
opacity: 0.9;
}
/*==================================
TESTIMONIALS
==================================*/
.testimonials {
padding: 90px 0;
background: #ffffff;
}
.testimonial-empty {
max-width: 700px;
margin: auto;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 60px 40px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.testimonial-icon {
width: 90px;
height: 90px;
margin: auto;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
margin-bottom: 25px;
}
.testimonial-empty h3 {
font-size: 30px;
font-weight: 700;
color: #0f172a;
margin-bottom: 15px;
}
.testimonial-empty p {
color: #64748b;
line-height: 1.8;
margin-bottom: 30px;
}
.btn-review {
display: inline-block;
background: #2563eb;
color: #fff;
padding: 14px 30px;
border-radius: 10px;
font-weight: 600;
transition: 0.3s;
}
.btn-review:hover {
background: #1d4ed8;
color: #fff;
}
/*==================================
FAQ
==================================*/
.faq {
padding: 90px 0;
background: #f8fafc;
}
.accordion-item {
border: none;
margin-bottom: 20px;
border-radius: 15px !important;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.accordion-button {
font-size: 18px;
font-weight: 600;
padding: 22px 25px;
background: #fff;
}
.accordion-button:not(.collapsed) {
background: #2563eb;
color: #fff;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-body {
padding: 25px;
color: #64748b;
line-height: 1.8;
}
/*==================================
CTA
==================================*/
.cta {
padding: 90px 0;
background: #ffffff;
}
.cta-box {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-radius: 25px;
padding: 70px 50px;
text-align: center;
box-shadow: 0 25px 60px rgba(37, 99, 235, 0.25);
}
.cta-tag {
display: inline-block;
background: rgba(255, 255, 255, 0.15);
padding: 10px 20px;
border-radius: 30px;
margin-bottom: 20px;
font-weight: 600;
}
.cta-box h2 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
}
.cta-box p {
max-width: 700px;
margin: 0 auto 40px;
line-height: 1.8;
opacity: 0.9;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.btn-primary-custom {
background: #fff;
color: #2563eb;
padding: 15px 35px;
border-radius: 12px;
font-weight: 600;
transition: 0.3s;
}
.btn-primary-custom:hover {
background: #f8fafc;
color: #2563eb;
}
.btn-secondary-custom {
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
padding: 15px 35px;
border-radius: 12px;
font-weight: 600;
transition: 0.3s;
}
.btn-secondary-custom:hover {
background: #fff;
color: #2563eb;
}
/*==================================
STICKY NAVBAR
==================================*/
.custom-navbar.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
animation: slideDown 0.4s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
/*==================================
BACK TO TOP
==================================*/
#topBtn {
position: fixed;
right: 25px;
bottom: 25px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: #2563eb;
color: #fff;
cursor: pointer;
display: none;
z-index: 9999;
transition: 0.3s;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}
#topBtn:hover {
transform: translateY(-5px);
background: #1d4ed8;
}
/*==================================
FOOTER
==================================*/
.footer {
background: #0F172A;
color: #CBD5E1;
padding: 80px 0 25px;
}
.footer-logo {
color: #fff;
font-size: 32px;
font-weight: 700;
}
.footer-logo span {
color: #2563EB;
}
.footer-text {
margin: 20px 0;
line-height: 1.8;
}
.footer h5 {
color: #fff;
margin-bottom: 20px;
}
.footer ul {
padding: 0;
}
.footer ul li {
margin-bottom: 12px;
}
.footer ul li a {
color: #CBD5E1;
transition: .3s;
}
.footer ul li a:hover {
color: #fff;
padding-left: 5px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
width: 42px;
height: 42px;
border-radius: 50%;
background: #1E293B;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: .3s;
}
.social-links a:hover {
background: #2563EB;
}
.footer hr {
margin: 50px 0 25px;
border-color: #334155;
}
.footer-bottom {
text-align: center;
color: #94A3B8;
}
html {
scroll-behavior: smooth;
}
.footer ul {
margin: 0;
padding: 0;
}
.footer ul li {
list-style: none;
margin-bottom: 12px;
}
/*==================================
PAGE HEADER
==================================*/
.page-header {
padding: 120px 0 80px;
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: #fff;
text-align: center;
}
.page-header h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
}
.page-header p {
max-width: 700px;
margin: auto;
opacity: .9;
}
.breadcrumb {
margin-top: 30px;
}
.breadcrumb-item a {
color: #fff;
text-decoration: none;
}
.breadcrumb-item.active {
color: #E2E8F0;
}
/*==================================
SEARCH BOX
==================================*/
.vendor-search {
margin-top: -45px;
margin-bottom: 70px;
}
.search-box {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}
/*==================================
VENDOR LISTING
==================================*/
.vendors-section {
padding-bottom: 80px;
}
.vendors-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.sort-dropdown {
max-width: 220px;
}
.vendor-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
transition: .35s;
height: 100%;
}
.vendor-card:hover {
transform: translateY(-10px);
}
.vendor-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.vendor-content {
padding: 25px;
}
.vendor-content h4 {
font-size: 24px;
margin-bottom: 20px;
}
.vendor-content p {
color: #64748B;
margin-bottom: 12px;
}
.vendor-content i {
color: #2563EB;
margin-right: 8px;
}
.view-profile-btn {
display: block;
margin-top: 25px;
text-align: center;
background: #2563EB;
color: #fff;
padding: 14px;
border-radius: 10px;
transition: .3s;
}
.view-profile-btn:hover {
background: #1D4ED8;
color: #fff;
}
/*==================================
PAGINATION
==================================*/
.pagination-section {
padding-bottom: 90px;
}
.pagination .page-link {
min-width: 48px;
height: 48px;
padding: 0 18px;
display: flex;
justify-content: center;
align-items: center;
border: none;
margin: 0 6px;
border-radius: 12px !important;
color: #2563EB;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
transition: .3s;
}
.pagination .page-link:hover {
background: #2563EB;
color: #fff;
}
.pagination .active .page-link {
background: #2563EB;
color: #fff;
}
.pagination .disabled .page-link {
background: #F1F5F9;
color: #94A3B8;
}
/*==================================
EMPTY STATE
==================================*/
.empty-state {
padding: 80px 0;
}
.empty-box {
max-width: 650px;
margin: auto;
background: #fff;
border-radius: 20px;
padding: 60px 40px;
text-align: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}
.empty-box i {
font-size: 70px;
color: #2563EB;
margin-bottom: 25px;
}
.empty-box h3 {
font-size: 34px;
margin-bottom: 15px;
font-weight: 700;
}
.empty-box p {
color: #64748B;
line-height: 1.8;
margin-bottom: 30px;
}
/*==================================
PROFILE HERO
==================================*/
.profile-hero {
background: #F8FAFC;
padding: 70px 0;
}
.profile-cover img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 20px;
}
.profile-card {
background: #fff;
margin-top: -70px;
border-radius: 20px;
padding: 35px;
box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
position: relative;
}
.profile-image {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
border: 6px solid #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}
.profile-card h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
.profile-card p {
color: #64748B;
margin-bottom: 12px;
}
.profile-card i {
color: #2563EB;
margin-right: 8px;
}
/*==================================
ABOUT VENDOR
==================================*/
.about-vendor {
padding: 80px 0;
}
.about-card,
.info-card {
background: #fff;
border-radius: 20px;
padding: 35px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
height: 100%;
}
.about-card h3,
.info-card h3 {
font-size: 28px;
margin-bottom: 25px;
font-weight: 700;
}
.info-card strong {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.info-card strong i {
color: #2563EB;
width: 20px;
}
.about-card p {
color: #64748B;
line-height: 1.9;
margin-bottom: 18px;
}
.info-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.info-card ul li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #E2E8F0;
}
.info-card ul li:last-child {
border-bottom: none;
}
.status-active {
color: #16A34A;
font-weight: 600;
}
/*==================================
SERVICES
==================================*/
.vendor-services {
padding-bottom: 80px;
}
.service-card {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
transition: .3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-8px);
}
.service-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.service-top h4 {
font-size: 24px;
margin: 0;
font-weight: 700;
}
.service-price {
background: #2563EB;
color: #fff;
padding: 8px 16px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
}
.service-card p {
color: #64748B;
line-height: 1.8;
}
.service-info {
display: flex;
justify-content: space-between;
margin: 25px 0;
color: #64748B;
}
.service-info i {
color: #2563EB;
margin-right: 6px;
}
.book-btn {
display: block;
width: 100%;
text-align: center;
background: #2563EB;
color: #fff;
padding: 14px;
border-radius: 12px;
font-weight: 600;
transition: .3s;
}
.book-btn:hover {
background: #1D4ED8;
color: #fff;
}
/*==================================
GALLERY
==================================*/
.vendor-gallery {
padding-bottom: 80px;
}
.gallery-card {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}
.gallery-card img {
width: 100%;
height: 250px;
object-fit: cover;
transition: .4s;
}
.gallery-card:hover img {
transform: scale(1.08);
}
.gallery-card {
position: relative;
cursor: pointer;
}
.gallery-overlay {
position: absolute;
inset: 0;
background: rgba(37, 99, 235, .75);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: .35s;
}
.gallery-overlay i {
color: #fff;
font-size: 34px;
}
.gallery-card:hover .gallery-overlay {
opacity: 1;
}
/*=========================
LIGHTBOX
=========================*/
.gallery-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .9);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.gallery-lightbox img {
max-width: 90%;
max-height: 85vh;
border-radius: 15px;
}
.close-gallery {
position: absolute;
top: 30px;
right: 40px;
color: #fff;
font-size: 45px;
cursor: pointer;
}
/*==================================
CUSTOMER REVIEWS
==================================*/
.vendor-reviews {
padding-bottom: 80px;
}
.review-summary {
background: #fff;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}
.review-rating h2 {
font-size: 60px;
font-weight: 700;
color: #2563EB;
}
.stars {
color: #FBBF24;
font-size: 22px;
margin: 15px 0;
}
.review-card {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
height: 100%;
transition: .3s;
}
.review-card:hover {
transform: translateY(-8px);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.review-header h5 {
margin: 0;
font-weight: 700;
}
.review-header small {
color: #94A3B8;
}
.review-stars {
color: #FBBF24;
}
.review-card p {
color: #64748B;
line-height: 1.8;
}
/*==================================
TIME SLOTS
==================================*/
.time-slots {
padding-bottom: 90px;
}
.day-card {
background: #fff;
padding: 35px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
margin-bottom: 30px;
}
.day-card h4 {
margin-bottom: 25px;
font-size: 28px;
font-weight: 700;
}
.slot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 15px;
}
.slot-btn {
border: none;
background: #EFF6FF;
color: #2563EB;
padding: 15px;
border-radius: 12px;
font-weight: 600;
transition: .3s;
}
.slot-btn:hover {
background: #2563EB;
color: #fff;
}
/*==================================
AUTH NAVBAR
==================================*/
.auth-navbar {
background: #fff;
padding: 20px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}
.auth-nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.auth-logo {
font-size: 30px;
font-weight: 700;
color: #2563EB;
text-decoration: none;
}
.auth-logo img {
height: 48px;
width: auto;
display: block;
}
.back-home {
text-decoration: none;
color: #2563EB;
font-weight: 600;
}
.back-home i {
margin-right: 8px;
}
/*==================================
REGISTER
==================================*/
.register-section {
min-height: 85vh;
display: flex;
background: #F8FAFC;
padding: 80px 0;
}
.register-content span {
color: #2563EB;
font-weight: 700;
text-transform: uppercase;
}
.register-content h1 {
font-size: 52px;
margin: 20px 0;
font-weight: 700;
padding-top: 0px;
}
.register-content p {
color: #64748B;
line-height: 1.9;
}
.register-card {
background: #fff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}
.register-card h3 {
font-weight: 700;
margin-bottom: 10px;
}
.register-card p {
color: #64748B;
}
/*==================================
AUTH FOOTER
==================================*/
.auth-footer {
background: #fff;
border-top: 1px solid #E2E8F0;
padding: 20px 0;
}
.auth-footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.auth-footer p {
margin: 0;
color: #64748B;
}
.auth-footer-links {
display: flex;
gap: 25px;
}
.auth-footer-links a {
text-decoration: none;
color: #2563EB;
font-weight: 600;
transition: .3s;
}
.auth-footer-links a:hover {
color: #1D4ED8;
}
/*==================================
REGISTER FORM
==================================*/
.form-group {
margin-top: 18px;
}
.form-group label {
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.form-control {
height: 52px;
border-radius: 12px;
border: 1px solid #CBD5E1;
}
/*==================================
ROLE SELECTOR
==================================*/
.role-selector {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 25px 0;
}
.role-card {
position: relative;
border: 2px solid #E2E8F0;
border-radius: 16px;
padding: 22px;
text-align: center;
cursor: pointer;
transition: .3s;
background: #fff;
}
.role-card input {
display: none;
}
.role-card i {
font-size: 32px;
color: #64748B;
display: block;
margin-bottom: 12px;
}
.role-card span {
font-size: 17px;
font-weight: 600;
color: #334155;
}
.role-card:hover {
border-color: #2563EB;
transform: translateY(-3px);
}
.role-card.active {
border-color: #2563EB;
background: #EFF6FF;
}
.role-card.active i {
color: #2563EB;
}
.role-card.active span {
color: #2563EB;
}
.role-selector label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
}
.password-box {
position: relative;
}
.password-box button {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: #64748B;
}
.terms-box {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 25px 0;
}
.terms-box a {
text-decoration: none;
}
.register-btn {
width: 100%;
height: 54px;
border: none;
border-radius: 12px;
background: #2563EB;
color: #fff;
font-weight: 600;
transition: .3s;
}
.register-btn:hover {
background: #1D4ED8;
}
.divider {
text-align: center;
margin: 30px 0;
position: relative;
}
.divider span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 2;
}
.divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #E2E8F0;
}
.google-btn {
width: 100%;
height: 54px;
border: 1px solid #CBD5E1;
border-radius: 12px;
background: #fff;
font-weight: 600;
transition: .3s;
}
.google-btn:hover {
background: #F8FAFC;
}
.google-btn i {
margin-right: 10px;
}
.login-link {
margin-top: 25px;
text-align: center;
}
.login-link a {
text-decoration: none;
font-weight: 700;
}
/*==============================
FORM ERRORS
==============================*/
.error {
display: block;
color: #DC2626;
font-size: 13px;
margin-top: 6px;
min-height: 18px;
}
/*==================================
PASSWORD STRENGTH
==================================*/
.password-strength {
margin-top: 12px;
}
.strength-bar {
width: 100%;
height: 8px;
background: #E2E8F0;
border-radius: 50px;
overflow: hidden;
}
#strengthFill {
width: 0;
height: 100%;
background: #DC2626;
transition: .35s;
}
#strengthText {
display: block;
margin-top: 8px;
font-size: 13px;
color: #64748B;
}
/*==================================
PASSWORD MATCH
==================================*/
.match-message {
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
}
/*==================================
INPUT FOCUS
==================================*/
.form-control {
transition: .3s;
}
.form-control:focus {
border-color: #2563EB;
box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}
/*==================================
BUTTON ANIMATION
==================================*/
.register-btn,
.google-btn {
transition: .3s ease;
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(37, 99, 235, .25);
}
.google-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}
/*==========================
Vendor Fields
==========================*/
.vendor-fields {
display: none;
margin-top: 20px;
}
/*==========================
Success Modal
==========================*/
.success-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.success-box {
width: 420px;
max-width: 90%;
background: #fff;
border-radius: 18px;
padding: 40px 30px;
text-align: center;
animation: popup .3s ease;
}
.success-icon {
font-size: 70px;
color: #16A34A;
margin-bottom: 20px;
}
.success-box h3 {
font-weight: 700;
margin-bottom: 10px;
}
.success-box p {
color: #6B7280;
margin-bottom: 25px;
}
@keyframes popup {
from {
transform: scale(.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ==========================================
CUSTOMER DASHBOARD LAYOUT
========================================== */
.dashboard-wrapper {
display: flex;
min-height: 100vh;
background: #F8FAFC;
}
/* ==========================================
SIDEBAR
========================================== */
.dashboard-sidebar {
width: 280px;
background: #ffffff;
border-right: 1px solid #E5E7EB;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
z-index: 1000;
}
.dashboard-main {
margin-left: 280px;
flex: 1;
min-height: 100vh;
padding: 30px;
}
/* ==========================================
SIDEBAR LOGO
========================================== */
.sidebar-logo {
padding: 25px;
border-bottom: 1px solid #E5E7EB;
}
.sidebar-logo img {
max-width: 170px;
}
/* ==========================================
SIDEBAR MENU
========================================== */
.sidebar-nav {
padding: 20px 0;
}
.sidebar-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
margin: 8px 18px;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: #374151;
padding: 14px 18px;
border-radius: 12px;
transition: .3s;
font-weight: 500;
}
.sidebar-nav a:hover {
background: #EEF2FF;
color: #2563EB;
}
.sidebar-nav li.active a {
background: #2563EB;
color: #fff;
}
.sidebar-nav i {
width: 22px;
text-align: center;
font-size: 18px;
}
/* ==========================================
SIDEBAR FOOTER
========================================== */
.sidebar-footer {
padding: 20px;
border-top: 1px solid #E5E7EB;
}
.sidebar-footer a {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: #DC2626;
font-weight: 600;
}
/* ==========================================
DASHBOARD NAVBAR
========================================== */
.dashboard-navbar {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 18px 25px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
}
.dashboard-navbar-left {
display: flex;
align-items: center;
gap: 15px;
}
.dashboard-navbar-left h2 {
margin: 0;
font-size: 26px;
font-weight: 600;
color: #111827;
}
.sidebar-toggle {
width: 45px;
height: 45px;
border: none;
border-radius: 12px;
background: #2563EB;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* ==========================================
SEARCH BOX
========================================== */
.dashboard-search {
width: 420px;
position: relative;
}
.dashboard-search i {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
}
.dashboard-search input {
width: 100%;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 20px 0 48px;
outline: none;
transition: .3s;
}
.dashboard-search input:focus {
border-color: #2563EB;
}
/* ==========================================
RIGHT SIDE
========================================== */
.dashboard-navbar-right {
display: flex;
align-items: center;
gap: 18px;
}
.dashboard-icon-btn {
width: 48px;
height: 48px;
border: none;
border-radius: 12px;
background: #F3F4F6;
cursor: pointer;
transition: .3s;
}
.dashboard-icon-btn:hover {
background: #2563EB;
color: #fff;
}
/* ==========================================
USER PROFILE
========================================== */
.dashboard-user {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.dashboard-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #2563EB;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.dashboard-user-info h6 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #111827;
}
.dashboard-user-info small {
color: #6B7280;
}
/* ==========================================
WELCOME CARD
========================================== */
.welcome-card {
background: #2563EB;
color: #fff;
padding: 40px;
border-radius: 18px;
margin-bottom: 30px;
}
.welcome-card span {
display: inline-block;
margin-bottom: 10px;
font-size: 15px;
font-weight: 500;
}
.welcome-card h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
}
.welcome-card p {
margin: 0;
max-width: 650px;
opacity: .9;
line-height: 1.8;
}
/* ==========================================
DASHBOARD STATS
========================================== */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 35px;
}
.stat-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 25px;
display: flex;
align-items: center;
gap: 18px;
transition: .3s;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}
.stat-icon {
width: 65px;
height: 65px;
border-radius: 16px;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.stat-info h4 {
margin: 0;
font-size: 28px;
font-weight: 700;
color: #111827;
}
.stat-info p {
margin: 6px 0 0;
color: #6B7280;
font-size: 15px;
}
/* ==========================================
SECTION HEADER
========================================== */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.section-header h3 {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #111827;
}
.section-header a {
text-decoration: none;
color: #2563EB;
font-weight: 600;
}
.section-header a:hover {
text-decoration: underline;
}
/* ==========================================
RECENT BOOKINGS
========================================== */
.recent-bookings {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 25px;
margin-bottom: 35px;
}
.booking-table {
margin: 0;
}
.booking-table thead th {
background: #F9FAFB;
border: none;
color: #374151;
font-weight: 600;
padding: 15px;
}
.booking-table tbody td {
padding: 18px 15px;
vertical-align: middle;
}
/* ==========================================
RECOMMENDED VENDORS
========================================== */
.recommended-vendors {
margin-bottom: 40px;
}
.vendor-placeholder {
background: #fff;
border: 1px dashed #D1D5DB;
border-radius: 18px;
padding: 45px 30px;
text-align: center;
transition: .3s;
height: 100%;
}
.vendor-placeholder:hover {
border-color: #2563EB;
transform: translateY(-5px);
}
.vendor-placeholder i {
font-size: 50px;
color: #2563EB;
margin-bottom: 20px;
}
.vendor-placeholder h5 {
font-weight: 600;
margin-bottom: 10px;
color: #111827;
}
.vendor-placeholder p {
color: #6B7280;
margin: 0;
line-height: 1.7;
}
/* ==========================================
MY BOOKINGS
========================================== */
.booking-summary {
margin-top: 30px;
margin-bottom: 30px;
}
.summary-card {
background: #fff;
border-radius: 16px;
padding: 25px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
transition: .3s;
height: 100%;
}
.summary-card:hover {
transform: translateY(-5px);
}
.summary-icon {
width: 65px;
height: 65px;
border-radius: 14px;
background: #eef5ff;
color: #2563eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.summary-content h3 {
font-size: 30px;
font-weight: 700;
margin-bottom: 5px;
color: #111827;
}
.summary-content p {
margin: 0;
color: #6b7280;
font-size: 15px;
}
/* ==========================================
BOOKING FILTERS
========================================== */
.booking-filters {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.booking-filter-left {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.filter-btn {
border: none;
background: #fff;
color: #374151;
padding: 12px 22px;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: .3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}
.filter-btn:hover {
background: #2563EB;
color: #fff;
}
.filter-btn.active {
background: #2563EB;
color: #fff;
}
.booking-filter-right {
min-width: 280px;
}
.booking-search {
position: relative;
}
.booking-search i {
position: absolute;
top: 50%;
left: 18px;
transform: translateY(-50%);
color: #9CA3AF;
}
.booking-search input {
width: 100%;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 48px;
outline: none;
transition: .3s;
background: #fff;
}
.booking-search input:focus {
border-color: #2563EB;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
/* ==========================================
BOOKINGS LIST
========================================== */
.bookings-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
/* ==========================================
BOOKING CARD
========================================== */
.booking-card {
background: #fff;
border-radius: 16px;
padding: 25px;
border: 1px solid #E5E7EB;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
transition: .3s;
}
.booking-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}
.booking-card hr {
margin: 20px 0;
border-color: #E5E7EB;
}
/* ==========================================
EMPTY STATE
========================================== */
.empty-booking {
text-align: center;
padding: 70px 30px;
}
.booking-empty-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #EEF4FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 38px;
}
.empty-booking h4 {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
color: #111827;
}
.empty-booking p {
color: #6B7280;
margin-bottom: 25px;
}
/* ==========================================
BOOKING STATUS
========================================== */
.booking-status {
display: inline-block;
padding: 8px 18px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
}
.booking-status.upcoming {
background: #DBEAFE;
color: #2563EB;
}
.booking-status.completed {
background: #DCFCE7;
color: #15803D;
}
.booking-status.cancelled {
background: #FEE2E2;
color: #DC2626;
}
/* ==========================================
BOOKING ACTIONS
========================================== */
.booking-actions {
display: flex;
justify-content: flex-end;
gap: 15px;
flex-wrap: wrap;
}
/* ==========================================
FAVORITES
========================================== */
.favorites-summary {
margin-top: 30px;
margin-bottom: 30px;
}
/* ==========================================
FAVORITES FILTERS
========================================== */
.favorites-filters {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.favorites-filter-left {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.favorites-filter-right {
min-width: 300px;
}
.favorites-search {
position: relative;
}
.favorites-search i {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
}
.favorites-search input {
width: 100%;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 48px;
outline: none;
background: #fff;
transition: .3s;
}
.favorites-search input:focus {
border-color: #2563EB;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
/* ==========================================
FAVORITES LIST
========================================== */
.favorites-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
/* ==========================================
FAVORITE CARD
========================================== */
.favorite-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
transition: .3s;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.favorite-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}
/* ==========================================
EMPTY STATE
========================================== */
.empty-favorites {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.favorite-empty-icon {
width: 90px;
height: 90px;
margin: 0 auto 20px;
border-radius: 50%;
background: #FEE2E2;
color: #DC2626;
display: flex;
align-items: center;
justify-content: center;
}
.favorite-empty-icon i {
font-size: 36px;
}
.empty-favorites h4 {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
color: #111827;
}
.empty-favorites p {
color: #6B7280;
margin-bottom: 25px;
}
/* ==========================================
NOTIFICATIONS
========================================== */
.notification-summary {
margin-top: 30px;
margin-bottom: 30px;
}
/* ==========================================
NOTIFICATION FILTERS
========================================== */
.notification-filters {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.notification-filter-left {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.notification-filter-right {
min-width: 300px;
}
.notification-search {
position: relative;
}
.notification-search i {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
}
.notification-search input {
width: 100%;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 48px;
outline: none;
background: #fff;
transition: .3s;
}
.notification-search input:focus {
border-color: #2563EB;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
/* ==========================================
NOTIFICATIONS LIST
========================================== */
.notifications-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
/* ==========================================
EMPTY NOTIFICATIONS
========================================== */
.empty-notifications {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.notification-empty-icon {
width: 90px;
height: 90px;
margin: 0 auto 20px;
border-radius: 50%;
background: #EEF4FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
}
.notification-empty-icon i {
font-size: 36px;
}
.empty-notifications h4 {
font-size: 24px;
font-weight: 600;
color: #111827;
margin-bottom: 10px;
}
.empty-notifications p {
color: #6B7280;
margin-bottom: 0;
}
/* ==========================================
PROFILE
========================================== */
.profile-section {
margin-bottom: 30px;
}
/* ==========================================
PROFILE HEADER
========================================== */
.profile-header {
margin-bottom: 30px;
}
.profile-header-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.profile-avatar-wrapper {
position: relative;
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.profile-camera-btn {
position: absolute;
right: 0;
bottom: 0;
width: 38px;
height: 38px;
border: none;
border-radius: 50%;
background: #2563EB;
color: #fff;
cursor: pointer;
transition: .3s;
}
.profile-camera-btn:hover {
background: #1D4ED8;
}
.profile-header-content {
flex: 1;
}
.profile-header-content h3 {
font-size: 28px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.profile-header-content p {
color: #6B7280;
margin: 0;
}
/* ==========================================
DASHBOARD CARD
========================================== */
.dashboard-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.dashboard-card-header {
padding: 20px 25px;
border-bottom: 1px solid #E5E7EB;
}
.dashboard-card-header h4 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 600;
}
.dashboard-card-body {
padding: 25px;
}
/* ==========================================
PROFILE PHOTO
========================================== */
.profile-photo-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.profile-photo-preview {
display: flex;
align-items: center;
justify-content: center;
}
.profile-photo-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
border: 4px solid #DBEAFE;
}
.profile-photo-actions {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}
/* ==========================================
PROFILE ACTIONS
========================================== */
.profile-actions {
display: flex;
justify-content: flex-end;
gap: 15px;
flex-wrap: wrap;
}
.outline-btn {
height: 48px;
padding: 0 24px;
border: 1px solid #D1D5DB;
border-radius: 10px;
background: #fff;
color: #374151;
font-weight: 500;
cursor: pointer;
transition: .3s;
}
.outline-btn:hover {
border-color: #2563EB;
color: #2563EB;
}
.danger-btn {
border-color: #DC2626;
color: #DC2626;
}
.danger-btn:hover {
background: #DC2626;
color: #fff;
}
/* ==========================================
SETTINGS
========================================== */
.settings-section {
margin-bottom: 30px;
}
/* ==========================================
SETTINGS CARD
========================================== */
.settings-section .dashboard-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.settings-section .dashboard-card-header {
padding: 20px 25px;
border-bottom: 1px solid #E5E7EB;
}
.settings-section .dashboard-card-header h4 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 20px;
font-weight: 600;
color: #111827;
}
.settings-section .dashboard-card-body {
padding: 25px;
}
/* ==========================================
SETTINGS TOGGLE LIST
========================================== */
.settings-toggle-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.settings-toggle-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid #F3F4F6;
}
.settings-toggle-item:last-child {
border-bottom: none;
}
.settings-toggle-content {
flex: 1;
}
.settings-toggle-content h6 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: #111827;
}
.settings-toggle-content p {
margin: 0;
color: #6B7280;
font-size: 14px;
line-height: 1.6;
}
/* ==========================================
TOGGLE SWITCH
========================================== */
.switch {
position: relative;
display: inline-block;
width: 56px;
height: 30px;
flex-shrink: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
background: #D1D5DB;
border-radius: 50px;
transition: .3s;
}
.slider::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 4px;
top: 4px;
background: #fff;
border-radius: 50%;
transition: .3s;
}
.switch input:checked+.slider {
background: #2563EB;
}
.switch input:checked+.slider::before {
transform: translateX(26px);
}
/* ==========================================
DANGER ZONE
========================================== */
.danger-card {
border-color: #FECACA;
}
.danger-zone {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.danger-content {
flex: 1;
}
.danger-content h5 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
color: #B91C1C;
}
.danger-content p {
margin: 0;
color: #6B7280;
line-height: 1.7;
}
/* ==========================================
SETTINGS ACTIONS
========================================== */
.settings-actions {
display: flex;
justify-content: flex-end;
gap: 15px;
flex-wrap: wrap;
}
/* ==========================================
VENDOR DASHBOARD
========================================== */
.vendor-summary {
margin-bottom: 30px;
}
.vendor-bookings-section,
.vendor-reviews-section,
.vendor-quick-actions {
margin-bottom: 30px;
}
/* ==========================================
DASHBOARD CARD HEADER
========================================== */
.dashboard-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.dashboard-card-header h4 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 20px;
font-weight: 600;
}
/* ==========================================
VIEW ALL LINK
========================================== */
.view-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #2563EB;
text-decoration: none;
transition: .3s;
}
.view-all-link:hover {
color: #1D4ED8;
}
.view-all-link i {
font-size: 13px;
}
/* ==========================================
QUICK ACTION CARD
========================================== */
.quick-action-card {
display: flex;
align-items: center;
gap: 18px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
text-decoration: none;
transition: .3s;
height: 100%;
box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}
.quick-action-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}
.quick-action-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.quick-action-content {
flex: 1;
}
.quick-action-content h5 {
margin-bottom: 6px;
color: #111827;
font-size: 18px;
font-weight: 600;
}
.quick-action-content p {
margin: 0;
color: #6B7280;
font-size: 14px;
line-height: 1.6;
}
/* ==========================================
SERVICES PAGE
========================================== */
.services-summary {
margin-bottom: 30px;
}
.services-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.services-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.services-toolbar-right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.services-search {
position: relative;
}
.services-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
}
.services-search input {
width: 280px;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 45px;
outline: none;
transition: .3s;
background: #fff;
}
.services-search input:focus {
border-color: #2563EB;
}
.services-grid-section {
margin-bottom: 30px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
}
/* ==========================================
VENDOR BOOKINGS PAGE
========================================== */
.bookings-summary {
margin-bottom: 30px;
}
.bookings-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.bookings-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.bookings-toolbar-right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.bookings-search {
position: relative;
}
.bookings-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
}
.bookings-search input {
width: 280px;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 45px;
background: #fff;
outline: none;
transition: .3s;
}
.bookings-search input:focus {
border-color: #2563EB;
}
.vendor-bookings-section {
margin-bottom: 30px;
}
.vendor-bookings-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ==========================================
EMPTY BOOKINGS
========================================== */
.empty-bookings {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.empty-bookings-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 25px;
}
.empty-bookings h4 {
margin-bottom: 12px;
color: #111827;
font-size: 24px;
font-weight: 600;
}
.empty-bookings p {
max-width: 500px;
margin-bottom: 30px;
color: #6B7280;
line-height: 1.8;
}
/* ==========================================
VENDOR EARNINGS PAGE
========================================== */
.earnings-summary {
margin-bottom: 30px;
}
.earnings-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.earnings-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.earnings-toolbar-right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.earnings-search {
position: relative;
}
.earnings-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
}
.earnings-search input {
width: 280px;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 45px;
background: #fff;
outline: none;
transition: .3s;
}
.earnings-search input:focus {
border-color: #2563EB;
}
.vendor-earnings-section {
margin-bottom: 30px;
}
.vendor-earnings-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ==========================================
EMPTY EARNINGS
========================================== */
.empty-earnings {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.empty-earnings-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 25px;
}
.empty-earnings h4 {
margin-bottom: 12px;
color: #111827;
font-size: 24px;
font-weight: 600;
}
.empty-earnings p {
max-width: 500px;
margin-bottom: 30px;
color: #6B7280;
line-height: 1.8;
}
/* ==========================================
VENDOR REVIEWS PAGE
========================================== */
.reviews-summary {
margin-bottom: 30px;
}
.reviews-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.reviews-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.reviews-toolbar-right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.reviews-search {
position: relative;
}
.reviews-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
}
.reviews-search input {
width: 280px;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 45px;
background: #fff;
outline: none;
transition: .3s;
}
.reviews-search input:focus {
border-color: #2563EB;
}
.vendor-reviews-section {
margin-bottom: 30px;
}
.vendor-reviews-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ==========================================
EMPTY REVIEWS
========================================== */
.empty-reviews {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.empty-reviews-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 25px;
}
.empty-reviews h4 {
margin-bottom: 12px;
color: #111827;
font-size: 24px;
font-weight: 600;
}
.empty-reviews p {
max-width: 500px;
margin-bottom: 30px;
color: #6B7280;
line-height: 1.8;
}
/* ==========================================
VENDOR NOTIFICATIONS PAGE
========================================== */
.notifications-summary {
margin-bottom: 30px;
}
.notifications-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.notifications-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.notifications-toolbar-right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.notifications-search {
position: relative;
}
.notifications-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
}
.notifications-search input {
width: 280px;
height: 48px;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 0 18px 0 45px;
background: #FFFFFF;
outline: none;
transition: .3s;
}
.notifications-search input:focus {
border-color: #2563EB;
}
.vendor-notifications-section {
margin-bottom: 30px;
}
.vendor-notifications-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ==========================================
EMPTY NOTIFICATIONS
========================================== */
.empty-notifications {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 70px 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.empty-notifications-icon {
width: 90px;
height: 90px;
border-radius: 50%;
background: #EFF6FF;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 25px;
}
.empty-notifications h4 {
margin-bottom: 12px;
color: #111827;
font-size: 24px;
font-weight: 600;
}
.empty-notifications p {
max-width: 500px;
margin-bottom: 30px;
color: #6B7280;
line-height: 1.8;
}
/* ==========================================
VENDOR PROFILE PAGE
========================================== */
.vendor-profile-header {
margin-bottom: 30px;
}
.vendor-profile-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 30px;
display: flex;
align-items: center;
gap: 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}
.vendor-profile-left {
flex-shrink: 0;
}
.vendor-profile-image {
position: relative;
width: 150px;
height: 150px;
}
.vendor-profile-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid #EFF6FF;
}
.change-photo-btn {
position: absolute;
bottom: 5px;
right: 5px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #2563EB;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s;
border: 3px solid #fff;
}
.change-photo-btn:hover {
background: #1D4ED8;
}
.vendor-profile-right {
flex: 1;
}
.vendor-profile-title {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.vendor-profile-title h2 {
margin: 0;
font-size: 28px;
font-weight: 700;
color: #111827;
}
.verification-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #ECFDF5;
color: #059669;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
}
.vendor-profile-info h5 {
margin-bottom: 10px;
color: #374151;
}
.vendor-profile-info p {
margin-bottom: 15px;
color: #6B7280;
}
.vendor-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #6B7280;
font-size: 15px;
}
.profile-form-section {
margin-bottom: 30px;
}
.profile-actions {
margin-top: 10px;
margin-bottom: 40px;
}
.profile-actions-wrapper {
display: flex;
justify-content: flex-end;
gap: 15px;
flex-wrap: wrap;
}
/* ==========================================
VENDOR SETTINGS PAGE
========================================== */
.settings-section {
margin-bottom: 30px;
}
.settings-section .dashboard-card {
border: 1px solid #E5E7EB;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
overflow: hidden;
}
.settings-section .dashboard-card-header {
padding: 24px 30px;
border-bottom: 1px solid #E5E7EB;
background: #FAFAFA;
}
.settings-section .dashboard-card-header h3 {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
color: #111827;
}
.settings-section .dashboard-card-header p {
margin: 0;
color: #6B7280;
font-size: 14px;
}
.settings-section .dashboard-card-body {
padding: 30px;
}
/* ==========================================
NOTIFICATION SWITCHES
========================================== */
.settings-switch-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.settings-switch-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 18px 20px;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #FFFFFF;
transition: .3s;
}
.settings-switch-item:hover {
border-color: #2563EB;
background: #F8FAFC;
}
.settings-switch-item h6 {
margin: 0 0 5px;
font-weight: 600;
color: #111827;
}
.settings-switch-item small {
color: #6B7280;
}
.settings-switch-item .form-check {
margin: 0;
}
.settings-switch-item .form-check-input {
width: 48px;
height: 24px;
cursor: pointer;
}
/* ==========================================
SECURITY
========================================== */
.settings-security-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.settings-security-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px;
border: 1px solid #E5E7EB;
border-radius: 12px;
}
.settings-security-item h6 {
margin: 0 0 6px;
font-weight: 600;
}
.settings-security-item small {
color: #6B7280;
}
/* ==========================================
ACTION BUTTONS
========================================== */
.settings-actions {
margin-top: 10px;
margin-bottom: 40px;
}
.settings-actions-wrapper {
display: flex;
justify-content: flex-end;
gap: 15px;
flex-wrap: wrap;
}
/* ==========================================
CONTACT INFORMATION
========================================== */
.contact-info {
padding: 80px 0;
}
.contact-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 35px 25px;
text-align: center;
transition: .3s;
height: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.contact-card:hover {
transform: translateY(-6px);
border-color: #2563EB;
box-shadow: 0 15px 35px rgba(37, 99, 235, .15);
}
.contact-card i {
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
background: #2563EB;
color: #fff;
font-size: 28px;
margin-bottom: 20px;
}
.contact-card h4 {
font-size: 22px;
font-weight: 700;
color: #111827;
margin-bottom: 12px;
}
.contact-card p {
margin: 0;
color: #6B7280;
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
GOOGLE MAP
========================================== */
.contact-map {
padding: 80px 0;
}
.contact-map iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
/*==================================================
ABOUT HERO
==================================================*/
.about-hero {
padding: 100px 0;
background: #f8fbff;
}
.about-hero .section-tag {
display: inline-block;
background: #e8f1ff;
color: #2563eb;
padding: 8px 18px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.about-hero h1 {
font-size: 52px;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
margin-bottom: 20px;
}
.about-hero p {
font-size: 17px;
color: #6b7280;
line-height: 1.9;
margin-bottom: 30px;
}
.about-hero img {
width: 100%;
border-radius: 20px;
}
/*==================================================
OUR STORY
==================================================*/
.our-story {
padding: 100px 0;
background: #ffffff;
}
.our-story img {
width: 100%;
border-radius: 20px;
}
.our-story .section-tag {
display: inline-block;
background: #e8f1ff;
color: #2563eb;
padding: 8px 18px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.our-story h2 {
font-size: 42px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.our-story p {
color: #6b7280;
line-height: 1.9;
margin-bottom: 18px;
font-size: 16px;
}
/*==================================================
MISSION & VISION
==================================================*/
.mission-vision {
padding: 100px 0;
background: #f8fbff;
}
.mission-card {
background: #fff;
border-radius: 18px;
padding: 40px 35px;
text-align: center;
box-shadow: 0 12px 35px rgba(0, 0, 0, .06);
transition: .3s;
height: 100%;
}
.mission-card:hover {
transform: translateY(-8px);
}
.mission-icon {
width: 80px;
height: 80px;
margin: auto;
margin-bottom: 25px;
border-radius: 50%;
background: #2563eb;
display: flex;
align-items: center;
justify-content: center;
}
.mission-icon i {
color: #fff;
font-size: 30px;
}
.mission-card h3 {
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin-bottom: 18px;
}
.mission-card p {
color: #6b7280;
line-height: 1.9;
margin: 0;
}
/*==================================================
WHY CHOOSE BOOKEASE
==================================================*/
.about-features {
padding: 100px 0;
background: #ffffff;
}
.feature-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 40px 30px;
text-align: center;
transition: .3s;
height: 100%;
box-shadow: 0 12px 30px rgba(0, 0, 0, .05);
}
.feature-card:hover {
transform: translateY(-8px);
border-color: #2563eb;
}
.feature-card i {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-size: 30px;
margin-bottom: 25px;
}
.feature-card h4 {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin-bottom: 15px;
}
.feature-card p {
color: #6b7280;
line-height: 1.8;
margin: 0;
}
/*==================================================
STATISTICS
==================================================*/
.statistics {
padding: 100px 0;
background: #f8fbff;
}
.stat-card {
background: #fff;
border-radius: 18px;
padding: 35px 25px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
transition: .3s;
}
.stat-card:hover {
transform: translateY(-8px);
}
.stat-card i {
font-size: 34px;
color: #2563eb;
margin-bottom: 20px;
}
.stat-card h2 {
font-size: 42px;
font-weight: 700;
color: #1f2937;
margin-bottom: 10px;
}
.stat-card p {
color: #6b7280;
margin: 0;
}
/*==================================================
CTA
==================================================*/
.cta {
padding: 100px 0;
}
.cta-box {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-radius: 24px;
padding: 70px 40px;
text-align: center;
color: #fff;
}
.cta-tag {
display: inline-block;
background: rgba(255, 255, 255, .15);
padding: 8px 20px;
border-radius: 50px;
margin-bottom: 20px;
font-weight: 600;
}
.cta-box h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
}
.cta-box p {
max-width: 700px;
margin: 0 auto 35px;
line-height: 1.9;
opacity: .95;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.btn-primary-custom {
background: #fff;
color: #2563eb;
padding: 14px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: .3s;
}
.btn-primary-custom:hover {
background: #f3f4f6;
}
.btn-secondary-custom {
border: 2px solid #fff;
color: #fff;
padding: 14px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: .3s;
}
.btn-secondary-custom:hover {
background: #fff;
color: #2563eb;
}
/*==================================================
PRIVACY HERO
==================================================*/
.privacy-hero {
padding: 100px 0;
background: #f8fbff;
text-align: center;
}
.privacy-hero .section-tag {
display: inline-block;
background: #e8f1ff;
color: #2563eb;
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.privacy-hero h1 {
font-size: 52px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.privacy-hero p {
max-width: 750px;
margin: auto;
color: #6b7280;
font-size: 17px;
line-height: 1.9;
}
.last-updated {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 30px;
background: #fff;
padding: 12px 22px;
border-radius: 50px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
color: #374151;
font-weight: 500;
}
.last-updated i {
color: #2563eb;
}
/*==================================================
PRIVACY CONTENT
==================================================*/
.privacy-content {
padding: 100px 0;
background: #ffffff;
}
.privacy-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 35px;
margin-bottom: 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
transition: .3s;
}
.privacy-card:hover {
transform: translateY(-5px);
border-color: #2563eb;
}
.privacy-card h2 {
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.privacy-card p {
color: #6b7280;
line-height: 1.9;
margin-bottom: 15px;
}
.privacy-card ul {
margin: 0;
padding-left: 20px;
}
.privacy-card ul li {
color: #6b7280;
margin-bottom: 12px;
line-height: 1.8;
}
.privacy-card strong {
color: #1f2937;
}
/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:991px) {
.privacy-hero,
.privacy-content {
padding: 80px 0;
}
.privacy-hero h1 {
font-size: 42px;
}
}
@media(max-width:768px) {
.privacy-hero h1 {
font-size: 34px;
}
.privacy-card {
padding: 25px;
}
.privacy-card h2 {
font-size: 24px;
}
}
@media(max-width:576px) {
.privacy-hero h1 {
font-size: 28px;
}
.privacy-hero p {
font-size: 15px;
}
.last-updated {
font-size: 14px;
padding: 10px 18px;
}
.privacy-card {
padding: 20px;
}
.privacy-card h2 {
font-size: 22px;
}
}
/*==================================================
TERMS HERO
==================================================*/
.terms-hero {
padding: 100px 0;
background: #f8fbff;
text-align: center;
}
.terms-hero .section-tag {
display: inline-block;
background: #e8f1ff;
color: #2563eb;
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.terms-hero h1 {
font-size: 52px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.terms-hero p {
max-width: 760px;
margin: auto;
color: #6b7280;
font-size: 17px;
line-height: 1.9;
}
.terms-hero .last-updated {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 30px;
background: #fff;
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
color: #374151;
font-weight: 500;
}
.terms-hero .last-updated i {
color: #2563eb;
}
/*==================================================
TERMS CONTENT
==================================================*/
.terms-content {
padding: 100px 0;
background: #ffffff;
}
.terms-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 35px;
margin-bottom: 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
transition: .3s ease;
}
.terms-card:hover {
transform: translateY(-5px);
border-color: #2563eb;
}
.terms-card h2 {
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.terms-card p {
color: #6b7280;
line-height: 1.9;
margin-bottom: 15px;
}
.terms-card ul {
margin: 0;
padding-left: 22px;
}
.terms-card ul li {
color: #6b7280;
line-height: 1.9;
margin-bottom: 12px;
}
.terms-card strong {
color: #1f2937;
}
/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:991px) {
.terms-hero,
.terms-content {
padding: 80px 0;
}
.terms-hero h1 {
font-size: 42px;
}
}
@media(max-width:768px) {
.terms-hero h1 {
font-size: 34px;
}
.terms-card {
padding: 25px;
}
.terms-card h2 {
font-size: 24px;
}
}
@media(max-width:576px) {
.terms-hero h1 {
font-size: 28px;
}
.terms-hero p {
font-size: 15px;
}
.terms-hero .last-updated {
font-size: 14px;
padding: 10px 18px;
}
.terms-card {
padding: 20px;
}
.terms-card h2 {
font-size: 22px;
}
}
/*==================================================
404 ERROR PAGE
==================================================*/
.error-page {
padding: 100px 0;
background: #f8fbff;
min-height: 80vh;
display: flex;
align-items: center;
}
.error-box {
background: #fff;
border-radius: 24px;
padding: 60px 40px;
text-align: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}
.error-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px;
background: #2563eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.error-icon i {
font-size: 42px;
color: #fff;
}
.error-code {
font-size: 120px;
font-weight: 700;
color: #2563eb;
line-height: 1;
margin-bottom: 15px;
}
.error-box h2 {
font-size: 36px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.error-box p {
max-width: 650px;
margin: 0 auto 35px;
color: #6b7280;
font-size: 17px;
line-height: 1.9;
}
.error-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 45px;
}
.error-buttons .btn {
padding: 14px 28px;
}
.popular-links {
border-top: 1px solid #e5e7eb;
padding-top: 35px;
}
.popular-links h5 {
font-size: 22px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.popular-links-list {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.popular-links-list a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
transition: .3s;
}
.popular-links-list a:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* ==========================================================
ADMIN CUSTOMERS
========================================================== */
/* ==========================================
Page Header
========================================== */
.dashboard-welcome {
margin-bottom: 30px;
}
.dashboard-welcome h2 {
font-size: 30px;
font-weight: 700;
color: #212529;
margin-bottom: 8px;
}
.dashboard-welcome p {
margin: 0;
color: #6c757d;
font-size: 15px;
}
/* ==========================================
Filter Section
========================================== */
.dashboard-content {
margin-bottom: 30px;
}
.dashboard-card {
background: #ffffff;
border-radius: 16px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}
.dashboard-card .form-control,
.dashboard-card .form-select {
height: 50px;
border-radius: 12px;
border: 1px solid #dee2e6;
box-shadow: none;
transition: .3s;
}
.dashboard-card .form-control:focus,
.dashboard-card .form-select:focus {
border-color: #3b5bdb;
box-shadow: 0 0 0 0.15rem rgba(59, 91, 219, .15);
}
.dashboard-card .btn {
height: 50px;
border-radius: 12px;
font-weight: 600;
}
/* ==========================================
Card Header
========================================== */
.card-header-custom {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 15px;
flex-wrap: wrap;
}
.card-header-custom h4 {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #212529;
}
.card-header-custom span {
color: #6c757d;
font-size: 14px;
font-weight: 500;
}
/* ==========================================================
CUSTOMERS TABLE
========================================================== */
.dashboard-card .table {
margin-bottom: 0;
vertical-align: middle;
}
.dashboard-card .table thead {
background: #f8f9fc;
}
.dashboard-card .table th {
padding: 16px;
font-size: 14px;
font-weight: 600;
color: #495057;
border-bottom: 1px solid #e9ecef;
white-space: nowrap;
}
.dashboard-card .table td {
padding: 18px 16px;
vertical-align: middle;
color: #495057;
border-bottom: 1px solid #f1f3f5;
}
.dashboard-card .table tbody tr {
transition: .3s;
}
.dashboard-card .table tbody tr:hover {
background: #f8f9fc;
}
/* ==========================================
Customer Profile
========================================== */
.customer-profile {
display: flex;
align-items: center;
gap: 12px;
}
.customer-profile img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: #f1f3f5;
}
.customer-profile h6 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #212529;
}
.customer-profile small {
color: #6c757d;
font-size: 13px;
}
/* ==========================================
Status Badge
========================================== */
.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
}
.status-active {
background: #e9f7ef;
color: #198754;
}
.status-blocked {
background: #fdeaea;
color: #dc3545;
}
.status-pending {
background: #fff8e6;
color: #b78103;
}
/* ==========================================
Action Buttons
========================================== */
.action-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.action-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s;
background: #f8f9fc;
}
.action-btn i {
font-size: 15px;
}
.action-view {
color: #0d6efd;
}
.action-edit {
color: #198754;
}
.action-delete {
color: #dc3545;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0, 0, 0, .08);
}
/* ==========================================
Empty State
========================================== */
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state i {
font-size: 52px;
color: #ced4da;
margin-bottom: 18px;
}
.empty-state h5 {
margin-bottom: 10px;
font-size: 22px;
font-weight: 600;
color: #343a40;
}
.empty-state p {
margin: 0;
color: #6c757d;
font-size: 15px;
}
/* ==========================================================
CUSTOMERS PAGE FINAL
========================================================== */
/* ==========================================
Bulk Actions
========================================== */
.bulk-actions {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.bulk-actions .form-select {
min-width: 220px;
}
.bulk-actions small {
color: #6c757d;
font-size: 14px;
}
/* ==========================================
Pagination
========================================== */
.pagination {
gap: 8px;
}
.pagination .page-link {
border: none;
min-width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: #495057;
font-weight: 500;
background: #f8f9fc;
transition: .3s;
}
.pagination .page-link:hover {
background: #212529;
color: #ffffff;
}
.pagination .page-item.active .page-link {
background: #212529;
color: #ffffff;
}
.pagination .page-item.disabled .page-link {
background: #f1f3f5;
color: #adb5bd;
}
/* ==========================================
Footer
========================================== */
.dashboard-footer {
text-align: center;
padding: 25px 0;
color: #6c757d;
font-size: 14px;
}
/* ==========================================
Scrollbar
========================================== */
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: #f1f3f5;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #ced4da;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #adb5bd;
}
/* ==========================================
Responsive
========================================== */
@media (max-width:992px) {
.card-header-custom {
flex-direction: column;
align-items: flex-start;
}
.bulk-actions {
flex-direction: column;
align-items: stretch;
}
.bulk-actions .form-select {
width: 100%;
min-width: 100%;
}
}
@media (max-width:768px) {
.customer-profile {
min-width: 180px;
}
.action-buttons {
gap: 6px;
}
.action-btn {
width: 36px;
height: 36px;
}
}
@media (max-width:576px) {
.dashboard-card {
padding: 18px;
}
.dashboard-welcome h2 {
font-size: 24px;
}
.dashboard-welcome p {
font-size: 14px;
}
.pagination {
justify-content: center;
flex-wrap: wrap;
}
}