/* Google Calendar Booking Button Custom Styling to match premium website aesthetics */

/* Theme root definition to ensure Material 3 surface colors resolve correctly */
:root {
    --gm3-sys-color-surface: #ffffff;
}

/* Hero booking button: outline glow-card styled to match Request Proposal but with Teal theme */
.flex-wrap button.qxCTlb {
    height: auto !important;
    min-height: unset !important;
    padding: 1rem 2.5rem !important; /* px-10 py-4 */
    border-radius: 1rem !important; /* rounded-2xl */
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important; /* font-black */
    font-size: 11px !important; /* text-[11px] */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important; /* tracking-widest */
    color: #cbd5e1 !important; /* text-slate-300 */
    border: 1px solid #334155 !important; /* border-slate-700 */
    background-color: rgba(30, 41, 59, 0.4) !important; /* glow-card bg */
    backdrop-filter: blur(16px) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important; /* gap-3 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flex-wrap button.qxCTlb:hover {
    transform: translateY(-4px) !important; /* hover:-translate-y-1 */
    border-color: #2dd4bf !important; /* hover:border-teal-400 */
    color: #ffffff !important; /* hover:text-white */
    background-color: rgba(45, 212, 191, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(45, 212, 191, 0.1) !important;
}

.flex-wrap button.qxCTlb:active {
    transform: translateY(0) scale(0.95) !important; /* active:scale-95 */
}

.flex-wrap button.qxCTlb::before {
    content: "\f133" !important; /* FontAwesome calendar icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important; /* text-lg / 18px */
    color: #2dd4bf !important; /* text-teal-400 */
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.flex-wrap button.qxCTlb:hover::before {
    color: #ffffff !important;
}

/* Footer booking button: styled to look exactly like the Telegram and Networking links */
#footer-book-container button.qxCTlb {
    height: auto !important;
    min-height: unset !important;
    width: 100% !important; /* w-full */
    padding: 0.75rem 1.5rem !important; /* px-6 py-3 */
    border-radius: 0.75rem !important; /* rounded-xl */
    font-family: 'Fira Code', monospace !important; /* mono */
    font-weight: 500 !important;
    font-size: 10px !important; /* text-[10px] */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important; /* tracking-widest */
    color: #cbd5e1 !important; /* text-slate-300 */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(30, 41, 59, 0.4) !important; /* glow-card background */
    backdrop-filter: blur(16px) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

#footer-book-container button.qxCTlb:hover {
    transform: translateY(-10px) scale(1.01) !important;
    color: #fb7185 !important; /* hover:text-rose-400 */
    border-color: rgba(251, 113, 133, 0.4) !important; /* hover:border-rose-400/40 */
    background-color: rgba(251, 113, 133, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 113, 133, 0.1) !important;
}

#footer-book-container button.qxCTlb:active {
    transform: translateY(0) scale(0.98) !important;
}

#footer-book-container button.qxCTlb::after {
    content: "\f133" !important; /* FontAwesome calendar icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    color: currentColor !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

#footer-book-container button.qxCTlb:hover::after {
    transform: translateX(4px) !important; /* group-hover:translate-x-1 */
}

/* Google Calendar Widget Modal & Popup Overrides */
.hur54b {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background-color: rgba(9, 13, 22, 0.75) !important;
    z-index: 9999 !important;
}

.mmGMM {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
}

.Xfsokf {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
}

.Xfsokf:hover {
    background-color: #334155 !important;
    transform: scale(1.05) !important;
}

/* Mobile Overrides for Modal */
@media (max-width: 768px) {
    .hur54b {
        padding: 16px !important;
        padding-top: 72px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .mmGMM {
        border-radius: 12px !important;
        width: 100% !important;
        height: 100% !important;
        max-height: calc(100vh - 88px) !important;
    }

    .Xfsokf {
        top: 18px !important;
        right: 16px !important;
        z-index: 10001 !important;
    }
}