/**
 * @package     Joomla.Site
 * @subpackage  mod_gcalendar_booking
 * @copyright   (C) 2026 IFS-ERP Dariusz Mysliwiec
 * @license     GNU General Public License version 2 or later
 */

/* Scoped Styles for FullCalendar */
.mod-gcalendar-container .fc {
    font-family: var(--gcal-font-family);
    font-size: var(--gcal-font-size-sm);
    line-height: var(--gcal-line-height-tight);
    color: var(--gcal-text-color);
    background: var(--gcal-bg-color);
    border-radius: var(--gcal-border-radius-md);
}

.mod-gcalendar-container .fc-header-toolbar {
    margin-bottom: var(--gcal-spacing-lg) !important;
    flex-wrap: wrap;
    gap: var(--gcal-spacing-sm);
}

.mod-gcalendar-container .fc-toolbar-title {
    font-size: var(--gcal-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--gcal-text-color-dark) !important;
    margin: 0 !important;
}

.mod-gcalendar-container .fc-button-group {
    gap: var(--gcal-spacing-xs) !important;
}

.mod-gcalendar-container .fc-button-primary {
    background: var(--gcal-primary-gradient) !important;
    border: none !important;
    border-radius: var(--gcal-border-radius-md) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: var(--gcal-spacing-sm) var(--gcal-spacing-md) !important;
    text-transform: none !important;
    box-shadow: var(--gcal-shadow-sm) !important;
    transition: var(--gcal-transition-base) !important;
    color: white !important;
    font-size: var(--gcal-font-size-sm) !important;
    position: relative;
    overflow: hidden;
}

.mod-gcalendar-container .fc-button-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.mod-gcalendar-container .fc-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
    filter: none !important;
}

.mod-gcalendar-container .fc-button-primary:active::after {
    opacity: 1;
    transform: scale(2);
    transition: transform 0s, opacity 0s;
}

.mod-gcalendar-container .fc-button-primary:active {
    transform: translateY(0);
    box-shadow: var(--gcal-shadow-sm) !important;
}

.mod-gcalendar-container .fc-button-primary:disabled {
    background-color: var(--gcal-secondary-color) !important;
    border-color: var(--gcal-secondary-color) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.mod-gcalendar-container .fc-event {
    background: var(--gcal-primary-gradient) !important;
    border: none !important;
    border-radius: var(--gcal-border-radius-sm) !important;
    padding: var(--gcal-spacing-xs) var(--gcal-spacing-sm) !important;
    cursor: pointer !important;
    transition: var(--gcal-transition-base) !important;
    font-size: var(--gcal-font-size-sm) !important;
    font-weight: 600 !important;
    color: white !important;
    box-shadow: var(--gcal-shadow-sm) !important;
}

.mod-gcalendar-container .fc-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
    filter: none !important;
}

.mod-gcalendar-container .fc-daygrid-day {
    transition: var(--gcal-transition) !important;
}

.mod-gcalendar-container .fc-daygrid-day:hover {
    background-color: var(--gcal-bg-color-light) !important;
}

.mod-gcalendar-container .fc-day-today {
    background-color: rgba(59, 130, 246, 0.05) !important;
    border-color: var(--gcal-primary-color) !important;
}

.mod-gcalendar-container .fc-col-header {
    background-color: var(--gcal-bg-color-light) !important;
    border-bottom: 1px solid var(--gcal-border-color) !important;
}

.mod-gcalendar-container .fc-col-header-cell {
    font-weight: 600 !important;
    color: var(--gcal-text-color-dark) !important;
    padding: var(--gcal-spacing-sm) !important;
}

/* Booking Button Overlay/Wrapper */
.gcal-booking-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--gcal-spacing-lg);
}

.gcal-book-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gcal-spacing-sm);
    background: var(--gcal-primary-gradient);
    color: #fff !important;
    padding: var(--gcal-spacing-md) var(--gcal-spacing-xl);
    border-radius: var(--gcal-border-radius-md);
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: var(--gcal-transition-base);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
    border: none;
}

.gcal-book-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.gcal-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    color: #fff;
    text-decoration: none;
}

.gcal-book-btn:active::after {
    opacity: 1;
    transform: scale(2);
    transition: transform 0s, opacity 0s;
}

/* States */
.gcal-state-msg {
    padding: var(--gcal-spacing-xl);
    text-align: center;
    border-radius: var(--gcal-border-radius-lg);
    margin: var(--gcal-spacing-lg) 0;
    font-weight: 500;
    font-size: var(--gcal-font-size);
    line-height: var(--gcal-line-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gcal-spacing-md);
    position: relative;
    overflow: hidden;
}

.gcal-state-msg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--gcal-border-radius-lg) 0 0 var(--gcal-border-radius-lg);
}

.gcal-error {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.08) 0%, rgba(240, 147, 251, 0.08) 100%);
    color: var(--gcal-error-color);
    border: 1px solid rgba(245, 87, 108, 0.1);
}

.gcal-error::before {
    background: var(--gcal-error-gradient);
}

.gcal-loading {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    color: var(--gcal-primary-color);
    border: 1px solid rgba(102, 126, 234, 0.1);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.gcal-loading::before {
    background: var(--gcal-primary-gradient);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Debug - Glassmorphism */
.gcal-debug {
    background: var(--gcal-glass-bg-strong);
    backdrop-filter: var(--gcal-glass-blur);
    -webkit-backdrop-filter: var(--gcal-glass-blur);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--gcal-spacing-md);
    border-radius: var(--gcal-border-radius-md);
    font-size: var(--gcal-font-size-sm);
    margin-bottom: var(--gcal-spacing-lg);
    color: var(--gcal-text-color-light);
    box-shadow: var(--gcal-shadow-sm);
}

.gcal-debug strong {
    color: var(--gcal-text-color-dark);
    display: block;
    margin-bottom: var(--gcal-spacing-xs);
    font-weight: 600;
}

/* Tooltip Premium Styling */
.tippy-box[data-theme~='light-border'] {
    background-color: var(--gcal-bg-color);
    color: var(--gcal-text-color);
    border: 1px solid var(--gcal-border-color-light);
    border-radius: var(--gcal-border-radius-lg);
    box-shadow: var(--gcal-shadow-xl);
    padding: var(--gcal-spacing-sm);
    font-family: var(--gcal-font-family);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tippy-content {
    font-size: var(--gcal-font-size-sm);
    line-height: var(--gcal-line-height);
    padding: var(--gcal-spacing-xs);
}

.tippy-content strong {
    color: var(--gcal-primary-color);
    font-size: var(--gcal-font-size);
    font-weight: 600;
    display: block;
    margin-bottom: var(--gcal-spacing-xs);
}