/* ===================================================================
   LEEFHub – Purchase & Trial Shortcodes
   FINAL Unified, Organized & Fully Working Version
=================================================================== */


/* ===================================================================
   0. SUBTITLE + STACKED HEADINGS
=================================================================== */

.lh-checkout-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lh-text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
}

/* Product Name (big heading) */
.lh-plan-product {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lh-primary);
    margin-bottom: 4px;
}

/* Price Label (subtitle style under product) */
.lh-checkout-price-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lh-text-muted);
    opacity: 0.95;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .lh-plan-product {
        font-size: 1.2rem;
    }
}


/* ===================================================================
   1. SHORTCODE WRAPPER
=================================================================== */

.leefhub-shortcode {
    display: block;
    width: 100%;
    gap: 1.5rem;
    margin: 1.5rem 0;
    box-sizing: border-box;
}


/* ===================================================================
   2. PURCHASE BUTTON (Main CTA)
=================================================================== */

.leefhub-purchase-btn {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: var(--lh-sc-primary, var(--lh-primary));
    color: var(--lh-text-button, var(--lh-text-contrast));
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.leefhub-purchase-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* ===================================================================
   3. TRIAL BUTTON
=================================================================== */

.leefhub-trial-btn,
.leefhub-trial-start {
    display: inline-block;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.375rem 0;
    color: var(--lh-sc-primary, var(--lh-primary));
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.leefhub-trial-btn:hover,
.leefhub-trial-start:hover {
    opacity: 0.8;
    text-decoration: none;
    border-bottom: 1px solid var(--lh-sc-primary, var(--lh-primary));
}


/* ===================================================================
   4. INLINE CHECKOUT FORM WRAPPER
=================================================================== */

.leefhub-checkout-inline {
    width: 100%;
    max-width: 480px;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.leefhub-inline-form {
    position: relative;
    margin-top: 14px;
    padding: 22px 18px 18px 18px;
    border-left: 3px solid var(--lh-sc-primary, var(--lh-primary));
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    width: 100%;
    transition: all 0.25s ease;
}


/* ===================================================================
   5. INPUT FIELDS
=================================================================== */

.leefhub-inline-fields > * {
    margin-bottom: 14px;
}

.leefhub-inline-fields > *:last-child {
    margin-bottom: 0;
}

.leefhub-inline-form input {
    font-size: 16px;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--lh-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.leefhub-inline-form input:focus {
    border-color: var(--lh-primary);
    box-shadow: 0 0 0 2px rgb(135 90 239 / 20%);
    outline: none;
}


/* ===================================================================
   6. CLOSE BUTTON (X)
=================================================================== */

.leefhub-close-form {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.leefhub-close-form:hover {
    background: rgba(0,0,0,0.05);
}


/* ===================================================================
   7. SUMMARY NOTE
=================================================================== */

.leefhub-inline-summary {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--lh-text-muted);
    margin-top: 12px;
    margin-bottom: 18px;
}


/* ===================================================================
   8. SUBMIT BUTTON
=================================================================== */

.leefhub-submit-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-top: 18px;
    border: none;
    border-radius: 10px;
    background: var(--lh-sc-primary, var(--lh-primary));
    color: var(--lh-text-button, var(--lh-text-contrast));
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.leefhub-submit-btn:hover {
    background: var(--lh-sc-primary-hover, var(--lh-primary-hover));
    transform: translateY(-1px);
}


/* ===================================================================
   9. RESPONSIVE ADJUSTMENTS
=================================================================== */

@media (max-width: 600px) {
    .leefhub-inline-form {
        padding: 18px 14px;
        border-left-width: 2px;
    }

    .leefhub-submit-btn {
        padding: 12px;
        font-size: 1rem;
    }

    .leefhub-purchase-btn {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

/* ===================================================================
   10. Checkout Notice
=================================================================== */

/* Unified checkout note block */
.lh-checkout-note {
    background: #f9fafb;
    border: 1px solid #e4e6e8;
    padding: 14px 16px;
    margin-top: 18px;
    border-radius: 10px;

    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--lh-text-muted);
    text-align: center;
}

.lh-checkout-note strong {
    color: var(--lh-text-muted);
    font-weight: 700;
}

.lh-checkout-note em {
    font-style: italic;
    opacity: 0.9;
}

.lh-phase-details {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lh-text-muted);
    opacity: 0.95;
}