/* Unified Card Styles - Apply homepage action-card shadowing to all cards */

/* Base card shadow style (matching homepage action-card) */
.card-shadow-base {
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.card-shadow-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.card-shadow-base:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

.card-shadow-base:active {
    transform: translateY(2px) translateZ(0);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Apply to booking cards */
.booking-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
}

.booking-card:not(.home-page-card) {
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.booking-card:not(.home-page-card)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.booking-card:not(.home-page-card):hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Apply to vehicle record cards */
.vehicle-record-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.vehicle-record-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.vehicle-record-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Apply to payment summary card */
.payment-summary-card {
    background: linear-gradient(to bottom, #f9fafb 0%, #f5f5f5 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Apply to booking form */
.booking-form {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.booking-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Apply to payment section */
.payment-section {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.payment-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Apply to welcome card */
.welcome-card {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Apply to contractor appointment cards */
.appointment-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.appointment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.appointment-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Apply to admin content cards */
.content-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Apply to service option cards (service-selection.html) - Must override booking.css */
.service-option-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%) !important;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0);
    border-radius: 18px !important;
    overflow: visible !important;
}

/* Increase all text sizes by factor of 1.4 */
.service-card-content {
    font-size: 1.4em !important;
}

.service-card-content h3 {
    font-size: 1.82rem !important; /* 1.3rem * 1.4 */
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

.service-card-content .service-duration {
    font-size: 1.4rem !important; /* 1rem * 1.4 */
    margin-bottom: 12px !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

.service-card-content .service-description {
    font-size: 1.33rem !important; /* 0.95rem * 1.4 */
    color: #4a4a4a !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

.service-card-content .service-price {
    font-size: 2.1rem !important; /* 1.5rem * 1.4 */
    font-weight: 700 !important;
    color: #000000 !important;
    margin-top: auto !important;
}

.service-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 18px 18px 0 0;
}

.service-option-card:hover {
    transform: translateY(-4px) translateZ(0) !important;
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.service-option-card:active {
    transform: translateY(2px) translateZ(0) !important;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Apply to vehicle cards (my-vehicles.html) */
.vehicle-card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%) !important;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.vehicle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.vehicle-card:hover {
    transform: translateY(-4px) translateZ(0) !important;
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.vehicle-card:active {
    transform: translateY(2px) translateZ(0) !important;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Generic card class for any other cards */
.card {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.25),
        0 28px 56px rgba(0, 0, 0, 0.22),
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}