/**
 * Programs Archive Page Styles
 * CSS for /programs/ page - course cards, pricing display, etc.
 */

/* ============================================
   PRICE DISPLAY STYLES
   ============================================ */

/* Force subscription details on new line */
.bb-rl-price {
    white-space: normal !important;
}

.bb-rl-price .subscription-details {
    display: block !important;
    font-size: 0.9em !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
    clear: both !important;
}

/* Force br to create line break */
.bb-rl-price br {
    display: block !important;
    content: "" !important;
    line-height: 0 !important;
    height: 4px !important;
}

/* From prefix styling */
.bb-rl-price .from {
    font-weight: 500 !important;
}

/* Wrap price amount */
.bb-rl-price .woocommerce-Price-amount {
    display: inline-block !important;
}

/* Price display alignment and line height */
.bb-rl-course-card .bb-rl-course-footer .bb-rl-price {
    line-height: 10px !important;
    text-align: right !important;
}

/* ============================================
   HIDE NATIVE BUDDYBOSS FILTERS
   ============================================ */

/* Hide native BuddyBoss filters (Sort by, Category, Instructor) - using custom filters only */
.component-filters {
    display: none !important;
}

/* Hide course filters controls on mobile */
@media (max-width: 768px) {
    .bb-rl-course-filters.bb-rl-sub-ctrls {
        display: none !important;
    }
}

/* ============================================
   AMELIA BOOKING FORM - HIDE PHONE FIELD
   ============================================ */

/* Hide phone field wrapper (intl-tel-input) and its parent in Your Information section */
.amelia-v2-booking .am-fs__item:has(input[type="tel"]),
#amelia-app-booking-wrap .am-fs__item:has(input[type="tel"]) {
    display: none !important;
}

/* Hide Amelia phone field - target specific classes */
.am-input-phone,
.el-form-item:has(.am-input-phone),
.el-form-item__content:has(.am-input-phone),
.am-fs__info-form__label:contains("Phone") {
    display: none !important;
}

/* Target the parent el-form-item that contains phone input */
.el-form-item:has([name="phone"]),
.el-form-item:has(.am-input-phone) {
    display: none !important;
}