/**
 * Maven Booking Frontend Styles
 * 
 * Reusable styles for booking pages including checkout and booking management
 */

/* ============================================
   Reusable Tooltip System
   ============================================ */

/**
 * Tooltip for disabled buttons/elements
 * 
 * USAGE:
 * Simply add a 'title' attribute to any disabled button, input, or link element.
 * The tooltip will automatically appear on hover.
 * 
 * BASIC EXAMPLE:
 * <button disabled title="Please accept terms to continue">Submit</button>
 * 
 * POSITIONING VARIANTS:
 * - Default: Tooltip appears centered above the element
 * - Right-aligned: Add class 'tooltip-right' or use in .checkout-terms-modal-footer
 * - Left-aligned: Add class 'tooltip-left'
 * - Top: Add class 'tooltip-top' (tooltip appears below)
 * 
 * EXAMPLES:
 * <button disabled title="Tooltip text" class="tooltip-right">Right</button>
 * <button disabled title="Tooltip text" class="tooltip-left">Left</button>
 * <button disabled title="Tooltip text" class="tooltip-top">Top</button>
 * 
 * CONTAINER:
 * For proper positioning, ensure parent has 'position: relative' or use
 * class 'maven-booking-tooltip-container' on the parent element.
 */
.maven-booking-tooltip-enabled[title]:hover::after,
button[title]:disabled:hover::after,
input[title]:disabled:hover::after,
a[title]:disabled:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tooltip positioning variants */
.maven-booking-tooltip-right[title]:hover::after,
button[title]:disabled.tooltip-right:hover::after,
.terms-modal-footer button[title]:disabled:hover::after {
    left: auto;
    right: 0;
    transform: none;
}

.maven-booking-tooltip-left[title]:hover::after,
button[title]:disabled.tooltip-left:hover::after {
    left: 0;
    right: auto;
    transform: none;
}

.maven-booking-tooltip-top[title]:hover::after,
button[title]:disabled.tooltip-top:hover::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

/* Ensure parent elements have relative positioning for tooltips */
.maven-booking-tooltip-container {
    position: relative;
}

button[title]:disabled,
input[title]:disabled,
a[title]:disabled {
    position: relative;
}

/* Cursor help for elements with tooltips */
.maven-booking-tooltip-enabled[title],
button[title]:disabled,
input[title]:disabled,
a[title]:disabled {
    cursor: help;
}

/* ============================================
   Booking Summary Card Styles
   ============================================ */

/* These styles are kept in the theme's checkout.less file
   but can be extended here if needed for booking pages */

/* ============================================
   Availability Error Overlay
   ============================================ */