body { font-family: 'Poppins', sans-serif; background-color: #FEFBF9; }
        h1, h2, h3, .clock { font-family: 'Playfair Display', serif; }
/* Add this to the end of your style.css file */
.calendar-day.is-holiday, #holiday-calendar-grid .is-holiday {
    background-color: #fee2e2; /* red-100 */
    text-decoration: line-through;
    color: #9ca3af; /* gray-400 */
    cursor: not-allowed;
}

#holiday-calendar-grid .day-cell {
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

#holiday-calendar-grid .day-cell:hover {
    background-color: #fbcfe8; /* pink-200 */
}

#holiday-calendar-grid .is-today {
    font-weight: bold;
    border: 1px solid #db2777; /* pink-600 */
}
/* Style for the Task Manager Category Icon */
.task-item .fa-shopping-cart,
.task-item .fa-tools,
.task-item .fa-clipboard-list {
    width: 20px; /* Ensures icons are aligned */
}
/* Task Manager Styles */
.task-item .task-description.completed {
    text-decoration: line-through;
    color: #9ca3af; /* gray-400 */
}

.task-item .task-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.task-item:hover .task-actions {
    opacity: 1;
}

/* Style for highlighting the current day in the calendar */
.calendar-day.is-today {
    background-color: #fef3c7; /* A light yellow (amber-100) */
    border: 1px solid #fcd34d; /* A slightly darker yellow border (amber-300) */
}

.calendar-day.is-today .font-bold {
    color: #b45309; /* A darker amber text color for contrast */
    position: relative;
    display: inline-block;
}

/* Optional: Add a small circle around today's date number */
.calendar-day.is-today .font-bold::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fde68a; /* A brighter yellow (amber-200) */
    z-index: -1;
}
/* Royalty Card Display on Client Dashboard */
.royalty-card-container {
    max-width: 450px;
    margin: 1rem auto;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.royalty-card {
    border-radius: 0.75rem;
    padding: 1rem;
    background-image: linear-gradient(to br, #fff1f2, #ffe4e6); /* rose-50 to rose-100 */
    border: 1px solid #fecdd3; /* rose-200 */
    color: #9f1239; /* rose-900 */
}

.royalty-card-header {
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #fda4af; /* rose-300 */
}

.stamp-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
}

.stamp {
    width: 50px;
    height: 50px;
    border: 2px dashed #fb7185; /* rose-400 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fb7185; /* rose-400 */
    margin: auto;
    transition: all 0.3s ease;
}

.stamp.stamped {
    background-color: #f43f5e; /* rose-500 */
    border-color: #f43f5e; /* rose-500 */
    color: white;
    transform: scale(1.1);
}

.stamp.stamped .fa-cut {
    font-size: 1.5rem;
}

.royalty-card-footer {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px dashed #fda4af; /* rose-300 */
    font-weight: 600;
}
/* Royalty Card Specific Styles */
.royalty-card-header {
    text-align: center;
    padding-top: 8px;
    color: #831843; /* pink-900 */
}
.stamp-grid-designer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 0 16px;
}
.stamp-outline {
    width: 40px;
    height: 40px;
    border: 2px dashed #fb7185; /* rose-400 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fb7185; /* rose-400 */
    margin: auto;
}
.quick-nav-link {
    @apply text-sm font-medium text-pink-600 bg-pink-50 px-3 py-1 rounded-full;
    @apply hover:bg-pink-100 hover:text-pink-700 transition-colors;
}
.quick-nav-link {
    margin: 0 5px;
    font-weight: bold;
}
#admin-quick-nav {
    /* This ensures the nav bar stays at the top of the viewport when scrolling */
    top: 70px; /* Adjust this value based on your main header's height */
}
.nail-shape-svg-wrapper {
    height: 100px;
    width: 80px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 8px;
}

.nail-shape-svg-wrapper svg {
    width: 100%;
    height: 100%;
}

.nail-shape-svg-wrapper .nail {
    transition: fill 0.2s ease-in-out;
}
/* Add this to the end of your style.css file */
.color-brand-btn.active {
    background-color: #d63384;
    color: white;
}
.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: transform 0.2s;
}
.color-swatch:hover {
    transform: scale(1.1);
}
        /* Common Form Styles */
        .form-input:focus, .form-select:focus, .form-checkbox:focus, button:focus-visible {
            outline: none;
            border-color: #d63384;
            box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.2);
        }
        .form-checkbox {
            appearance: none; background-color: #fff; margin-right: 0.5em; color: currentColor; width: 1.15em;
            height: 1.15em; border: 0.15em solid #e2e8f0; border-radius: 0.25em; transform: translateY(-0.075em);
            display: grid; place-content: center; flex-shrink: 0;
        }
        .form-checkbox::before {
            content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #d63384; transform-origin: bottom left;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }
        .form-checkbox:checked::before { transform: scale(1); }
        
        /* Main App Tab Styles */
        .tab-btn.active { border-color: #d63384; color: #d63384; background-color: #fdf2f8; }
        .tab-btn { border-color: transparent; }
        .sub-tab-btn.active { background-color: #d63384; color: white; }

        /* Landing Page Hero Section */
        .hero-section-new {
             background-image: url('https://images.unsplash.com/photo-1519014816548-bf5fe059798b?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
        }
        .hero-overlay-new {
            background-color: rgba(254, 251, 249, 0.7); /* Light overlay */
        }


        /* Modal Animation */
        .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
        .modal.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; }

        /* Calendar Styles */
        #calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }
        .calendar-day { min-height: 100px; cursor: pointer; }
        .calendar-day:hover { background-color: #fdf2f8; }
.appointment-entry {
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
   margin-bottom: 4px;
}
        .tech-filter-btn.active { background-color: #db2777; color: white; }

        /* Service Accordion on Landing Page */
        .service-accordion .subcategory-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height: 0.5s ease-in-out;
        }
        .service-accordion.open .subcategory-list {
            max-height: 1000px; /* Arbitrary large number */
        }
        .service-accordion.open .accordion-icon {
            transform: rotate(180deg);
        }
        .accordion-icon {
            transition: transform 0.3s ease;
        }

        /* Dashboard Styles */
        .dashboard-card {
            padding: 1.5rem;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        /* Notification Bell Styles */
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -10px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 10px;
            font-weight: bold;
            border: 2px solid white;
        }

        .notification-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 10px;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            width: 300px;
            z-index: 50;
            max-height: 400px;
            overflow-y: auto;
        }
        .notification-item {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #f3f4f6;
            font-size: 14px;
        }
        .notification-item:last-child {
            border-bottom: none;
        }
        
        /* Top Navigation Styles */
        .top-nav-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s, color 0.2s;
            font-weight: 600; /* Make menu text bold */
        }
        .top-nav-btn:hover {
            background-color: #fdf2f8;
            color: #d63384;
        }
        .top-nav-btn.active {
            background-color: #d63384;
            color: white;
        }

        /* New styles for scrollable modals */
        .modal {
            overflow-y: auto; /* Enable vertical scrolling for the modal container */
            padding: 2rem 1rem; /* Add padding for small screens to prevent touching edges */
        }

 /* Add this to the end of your style.css file */
#mobile-sidebar {
    transition: transform 0.3s ease-in-out;
}
#mobile-sidebar.translate-x-full {
    transform: translateX(100%);
}
        .gallery-item .overlay {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        /* Toggle Switch Styles */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #d63384;
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: #d63384;
        }

        /* Notification Bell Animation */
        @keyframes ring {

            0%,
            100% {
                transform: rotate(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: rotate(-10deg);
            }

            20%,
            40%,
            60%,
            80% {
                transform: rotate(10deg);
            }
        }

        .ring-animation {
            animation: ring 1s ease-in-out;
        }

        .font-parisienne {
            font-family: 'Parisienne', cursive;
        }

        /* Print styles for Gift Card */
        @media print {
            body * {
                visibility: hidden;
            }

            .printable-gift-card-area,
            .printable-gift-card-area * {
                visibility: visible;
            }

            .printable-gift-card-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0;
                page-break-after: always;
            }

            .printable-gift-card {
                width: 100%;
                height: auto;
                aspect-ratio: 1.75 / 1;
                border-radius: 0 !important;
                box-shadow: none !important;
                border: 1px solid #ccc !important;
                -webkit-print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
        }
/* Add this to the end of your style.css file */
.scrollable-tabs {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-x: auto;
    flex-wrap: nowrap !important;
}
.scrollable-tabs::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}