/**
 * Vedubox LMS Integration - Frontend Styles
 * LearnPress course buttons, WooCommerce order actions, My Account grids and
 * entitlement timing badges share these classes for a consistent experience.
 */

/* ------------------------------------------------------------------
   Timing badge ("90 gün kaldı", "Süre doldu", "X tarihinde başlayacak")
   ------------------------------------------------------------------ */
.vedubox-course-timing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    white-space: normal;
}

.vedubox-course-timing.is-countdown {
    background-color: #e0f2fe;
    color: #075985;
    border: 1px solid #7dd3fc;
}

.vedubox-course-timing.is-expired {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.vedubox-course-timing.is-pending {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.vedubox-course-timing.is-information {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* ------------------------------------------------------------------
   Primary action buttons ("Eğitimi İzle", "Paketteki Eğitimlere Git", "Satın Al")
   ------------------------------------------------------------------ */
.vedubox-action-button,
.vedubox-purchased-courses__button,
.vedubox-order-course-action .button,
.vedubox-purchase-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 32px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    min-width: 160px !important;
}

/* Keep the purchase wrapper aligned with sibling buttons (e.g. wishlist). */
.vedubox-purchase-course {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100% !important;
    vertical-align: middle;
}

/* Make the primary course purchase CTA fill the available sidebar area. */
.vedubox-purchase-course .vedubox-purchase-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 18px 32px !important;
    font-size: 18px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box !important;
}

.vedubox-action-button.is-active,
.vedubox-purchased-courses__button:not(.is-disabled),
.vedubox-order-course-action .button:not(.disabled),
.vedubox-purchase-button:not(.disabled) {
    background-color: #00758c !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.vedubox-action-button.is-active:hover,
.vedubox-action-button.is-active:focus,
.vedubox-purchased-courses__button:not(.is-disabled):hover,
.vedubox-purchased-courses__button:not(.is-disabled):focus,
.vedubox-order-course-action .button:not(.disabled):hover,
.vedubox-order-course-action .button:not(.disabled):focus,
.vedubox-purchase-button:not(.disabled):hover,
.vedubox-purchase-button:not(.disabled):focus {
    background-color: #005f73 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Keep pointer focus quiet while preserving a strong keyboard focus ring. */
.vedubox-action-button:focus:not(:focus-visible),
.vedubox-purchased-courses__button:focus:not(:focus-visible),
.vedubox-order-course-action .button:focus:not(:focus-visible),
.vedubox-purchase-button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.vedubox-action-button:focus-visible,
.vedubox-purchased-courses__button:focus-visible,
.vedubox-order-course-action .button:focus-visible,
.vedubox-purchase-button:focus-visible {
    outline: 3px solid #111827 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

/* LearnPress/EduBlink declares a more specific box-shadow reset on its CTA. */
body.vedubox-integrated-course
.vedubox-purchase-course
.vedubox-purchase-button:focus-visible,
body.vedubox-purchased-courses-page
.vedubox-purchased-courses
.vedubox-purchased-courses__button:focus-visible {
    box-shadow: 0 0 0 3px #ffffff !important;
}

.vedubox-action-button.is-active:active,
.vedubox-purchased-courses__button:not(.is-disabled):active,
.vedubox-order-course-action .button:not(.disabled):active,
.vedubox-purchase-button:not(.disabled):active {
    transform: translateY(1px) !important;
}

/* ------------------------------------------------------------------
   Disabled / expired button states ("Eğitimin süresi bitti")
   ------------------------------------------------------------------ */
.vedubox-action-button.is-disabled,
.vedubox-purchased-courses__button.is-disabled,
.vedubox-order-course-action .button.disabled,
.vedubox-purchase-button.disabled {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.vedubox-action-button.is-expired,
.vedubox-purchased-courses__button.is-expired,
.vedubox-order-course-action .button.is-expired,
.vedubox-purchase-button.disabled.is-expired {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

/* ------------------------------------------------------------------
   WooCommerce order detail action wrapper
   ------------------------------------------------------------------ */
.vedubox-order-course-action {
    margin-top: 10px;
}

.vedubox-order-course-action .vedubox-course-timing {
    display: block;
    width: fit-content;
    margin-bottom: 8px;
}

/*
 * WooCommerce's full-width checkout label rule must not expand labels that
 * are intentionally available to screen readers only. On 320px viewports the
 * expanded absolute label otherwise creates horizontal page overflow.
 */
body.vedubox-managed-checkout .woocommerce .screen-reader-text {
    width: 1px !important;
    white-space: nowrap !important;
}

body.vedubox-managed-checkout form.checkout {
    display: flow-root;
}

@media (min-width: 992px) {
    body.vedubox-managed-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 30px;
        align-items: start;
    }

    body.vedubox-managed-checkout form.checkout > #customer_details {
        grid-column: 1;
        grid-row: 1 / span 2;
        float: none;
        width: 100%;
        min-width: 0;
    }

    body.vedubox-managed-checkout form.checkout > #order_review_heading {
        grid-column: 2;
        grid-row: 1;
        float: none;
        width: 100%;
        min-width: 0;
        margin-top: 0;
    }

    body.vedubox-managed-checkout form.checkout > #order_review {
        grid-column: 2;
        grid-row: 2;
        float: none;
        width: 100%;
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   Purchased courses grid (My Account & LearnPress profile)
   ------------------------------------------------------------------ */
.vedubox-purchased-courses {
    margin: 24px 0;
}

.vedubox-purchased-courses__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111827;
}

.vedubox-purchased-courses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.vedubox-purchased-courses__item {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.vedubox-purchased-courses__item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vedubox-purchased-courses__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f3f4f6;
}

.vedubox-purchased-courses__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vedubox-purchased-courses .vedubox-purchased-courses__name {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 16px 4px;
    margin: 0;
    color: #111827;
    background-color: #f8f8f8;
}

.vedubox-purchased-courses__item .vedubox-course-timing {
    margin: 8px 16px;
}

.vedubox-purchased-courses__button {
    margin: auto 16px 16px;
}

/* ------------------------------------------------------------------
   Responsive adjustments
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /*
     * The course sidebar owns the single purchase/launch CTA. Reorder the
     * existing nodes instead of cloning the CTA, and keep the rule resilient
     * when a child theme inserts an extra wrapper around the course row.
     */
    body.vedubox-integrated-course
    .edublink-course-details-page
    .edublink-row:has(> .ed-course-sidebar):has(> #learn-press-course) {
        display: flex;
        flex-direction: column;
    }

    body.vedubox-integrated-course
    .edublink-course-details-page
    .edublink-row > .ed-course-sidebar {
        order: 1;
        width: 100%;
    }

    body.vedubox-integrated-course
    .edublink-course-details-page
    .edublink-row > #learn-press-course {
        order: 2;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vedubox-purchased-courses__grid {
        grid-template-columns: 1fr;
    }

    .vedubox-action-button,
    .vedubox-purchased-courses__button,
    .vedubox-order-course-action .button,
    .vedubox-purchase-button {
        width: 100% !important;
    }
}