.service-detail {
    max-width: 920px;
    margin: 2rem auto;
}
/* featured image smaller and tighter */
.featured-image {
    max-height: 120px;
    border-radius: 12px;
    margin-bottom: 1rem;
    object-fit: cover;
}
/* images inside the post content get a max height and maintain aspect */
.post-content img {
    max-height: 280px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0.75rem 0;
}
/* booking card: modern, interactive and responsive */
.booking-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #dde1eaff 100%);
    padding: 1rem;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.06);
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
        box-shadow 260ms ease, filter 260ms ease;
    will-change: transform;
}
.booking-card::after {
    /* subtle animated gradient edge */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    transform: translateX(-30%);
    transition: transform 700ms ease, opacity 400ms ease;
    opacity: 0;
}
.booking-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(59, 130, 246, 0.14);
    filter: brightness(1.01);
}
.booking-card:hover::after {
    transform: translateX(0);
    opacity: 1;
}

.booking-card .info {
    max-width: 72%;
    position: relative;
    z-index: 2;
}
.booking-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.booking-card p {
    margin: 0;
}

/* animated icon bounce on hover */
.booking-card .fa-calendar-check {
    display: inline-block;
    transition: transform 280ms ease;
}
.booking-card:hover .fa-calendar-check {
    transform: translateY(-4px) rotate(-6deg);
}

/* gradient animated button */
.btn-book {
    position: relative;
    z-index: 2;
    /* use inline-flex so flex properties (justify/align) apply without forcing block layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        90deg,
        #06b6d4 0%,
        #3b82f6 25%,
        #7c3aed 50%,
        #3b82f6 75%,
        #06b6d4 100%
    );
    color: #fff;
    border: none;
    padding: 0.65rem 1.05rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.16);
    text-decoration: none;
    font-weight: 600;
    transition: transform 180ms ease, box-shadow 180ms ease;
    background-size: 200% 100%;
}
.btn-book:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 36px rgba(59, 130, 246, 0.18);
    background-position: 100% 0;
}
.btn-book:active {
    transform: translateY(-1px) scale(0.99);
}

/* subtle shimmer on the button when visible */
@keyframes shimmer {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}
.btn-book[data-animate="true"] {
    animation: shimmer 3.2s linear infinite;
}

/* fallback edit button */
.btn-edit {
    position: relative;
    z-index: 2;
    background: transparent;
    border: 1px solid #e6e9f2;
    color: #374151;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-edit:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.btn-delete {
    position: relative;
    z-index: 2;
    background: transparent;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
}

.btn-delete:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* fancy gradient separator used between content and final booking card */
.fancy-sep {
    height: 12px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.14) 0%,
        rgba(124, 58, 237, 0.12) 25%,
        rgba(16, 185, 129, 0.12) 50%,
        rgba(59, 130, 246, 0.14) 75%,
        rgba(124, 58, 237, 0.12) 100%
    );
    background-size: 200% 100%;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin: 1.25rem 0 1.5rem 0;
    transition: transform 320ms ease, filter 320ms ease;
    will-change: transform;
}
.fancy-sep:hover {
    transform: translateY(-4px) scaleX(1.01);
    filter: brightness(1.02);
}

@keyframes fancy-slide {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 200% 0%;
    }
}
.fancy-sep[data-animated="true"] {
    animation: fancy-slide 6s linear infinite;
}

/* responsive stacking */
@media (max-width: 720px) {
    .booking-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .booking-card .info {
        max-width: 100%;
    }
    .booking-card .actions,
    .booking-card > div:last-child {
        display: flex;
        justify-content: flex-end;
    }
}