/*
Theme Name: Landing Page
Theme URI: 
Author: Gautam Surana
Author URI: 
Description: Custom WordPress theme for course landing page
Version: 1.2
Text Domain: landing-page
*/

@import url('https://cdn.jsdelivr.net/npm/@fontsource/cal-sans@latest/index.css');

/* ==========================================================================
   Razorpay Sales Shortcode Overrides
   ========================================================================== */

/* 1. Price Widget Styling */
.my-course-price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-family: "Cal Sans", Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
}

.my-course-price .rp-price--original {
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
    color: #6b7280 !important;
    /* text-gray-500 */
    font-size: 14px !important;
    text-decoration: line-through !important;
    margin-right: 4px !important;
    font-weight: 400 !important;
    line-height: inherit !important;
}

.my-course-price .rp-price--discounted,
.my-course-price .rp-price--regular {
    font-family: "Cal Sans", Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
    color: #2c0c09 !important;
    /* text-brand-950 */
    font-weight: 800 !important;
    /* font-extrabold */
    font-size: 24px !important;
    margin-right: 2px !important;
    line-height: 1 !important;
}

.my-course-price::after {
    /* content: "onwards" !important; */
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    /* text-xs is 12px */
    color: #4b5563 !important;
    /* text-gray-600 */
    font-weight: 400 !important;
    margin-left: 4px !important;
}

/* 2. Coupon Tag Styling (Display Only) */
.my-course-coupon {
    display: inline-flex !important;
    align-items: center !important;
}

.my-course-coupon .rp-coupon-tag {
    display: inline-block !important;
    background-color: #FFF5F5 !important;
    border: 1px solid rgba(252, 165, 165, 0.4) !important;
    color: #a8322c !important;
    padding: 2px 10px !important;
    /* py-0.5 (2px) px-2.5 (10px) */
    border-radius: 4px !important;
    /* rounded (4px) */
    font-weight: 800 !important;
    /* font-extrabold */
    font-size: 11px !important;
    /* text-[11px] */
    letter-spacing: 0.05em !important;
    /* tracking-wide */
    text-transform: uppercase !important;
    /* uppercase */
    box-sizing: border-box !important;
}

/* 3. Purchase Button Form Overrides */
.rp-purchase-form {
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
}

/* Specific to Mobile Bottom Bar layout */
#mobile-bottom-bar .rp-purchase-form {
    flex-grow: 1 !important;
    display: block !important;
    width: auto !important;
    /* override global width: 100% to allow equal flex-grow division */
    min-width: 0 !important;
}

#mobile-bottom-bar .rp-purchase-form button {
    display: block !important;
    width: 100% !important;
}

/* 4. Custom Enroll Buttons */
.my-course-enroll-button {
    display: block !important;
    width: 100% !important;
    background-color: #a8322c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 14px !important;
    /* text-sm */
    padding: 12px 24px !important;
    /* py-3 px-6 */
    border-radius: 8px !important;
    /* rounded-lg */
    transition: background-color 0.2s, color 0.2s !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    /* shadow-sm */
    letter-spacing: 0.025em !important;
    /* tracking-wide */
}

.my-course-enroll-button:hover {
    background-color: #8b2924 !important;
}

.my-mobile-enroll-button {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #a8322c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 14px !important;
    /* text-sm */
    padding: 14px 16px !important;
    /* py-3.5 px-4 */
    border-radius: 8px !important;
    /* rounded-lg */
    transition: background-color 0.2s, color 0.2s !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    /* shadow-sm */
}

.my-mobile-enroll-button:hover {
    background-color: #8b2924 !important;
}

/* 5. Hero Section Enroll Button */
.my-hero-enroll-button {
    display: block !important;
    background-color: #9d2828 !important;
    /* brand-700 */
    color: #ffffff !important;
    font-weight: 400 !important;
    text-align: center !important;
    font-size: 18px !important;
    /* text-base */
    padding: 14px 32px !important;
    /* py-3.5 px-8 */
    border-radius: 6px !important;
    /* rounded-md */
    transition: background-color 0.2s, color 0.2s !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    border:none;
    letter-spacing: 1px;
    /* shadow-sm */
}

.my-hero-enroll-button:hover {
    background-color: #822424 !important;
    /* brand-800 */
}

.my-hero-cta-container .rp-purchase-form {
    width: 100% !important;
}

@media (min-width: 640px) {
    .my-hero-cta-container .rp-purchase-form {
        width: auto !important;
    }
}

/* ==========================================================================
   6. Premium Coupon Input Form (Inactive State)
   ========================================================================== */
.my-coupon-input-container {
    width: 100% !important;
    margin-top: 12px !important;
}

.my-coupon-input-container .my-course-coupon {
    display: block !important;
    width: 100% !important;
}

.my-coupon-input-container .rp-coupon-form {
    display: flex !important;
    width: 100% !important;
    border: 1.5px solid #E5E7EB !important;
    /* Premium light border */
    border-radius: 8px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
}

.my-coupon-input-container .rp-coupon-form:hover {
    border-color: #D1D5DB !important;
}

.my-coupon-input-container .rp-coupon-form:focus-within {
    border-color: #a8322c !important;
    /* Highlight with maroon on focus */
    box-shadow: 0 0 0 3px rgba(168, 50, 44, 0.1) !important;
}

.my-coupon-input-container .rp-coupon-form input[type="text"] {
    flex-grow: 1 !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    color: #1F2937 !important;
    font-family: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}

.my-coupon-input-container .rp-coupon-form input[type="text"]::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

.my-coupon-input-container .rp-coupon-form button {
    background-color: #a8322c !important;
    /* Maroon brand color */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border: none !important;
    border-radius: 0 6.5px 6.5px 0 !important;
    /* Matches parent 8px radius with 1.5px border subtract */
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    white-space: nowrap !important;
    margin: 0 !important;
    height: auto !important;
    line-height: inherit !important;
}

.my-coupon-input-container .rp-coupon-form button:hover {
    background-color: #8b2924 !important;
}

/* 3. Thank You Page Alert Styling */
.rp-thank-you {
    display: inline-block !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    margin: 12px auto !important;
    text-align: center !important;
}

.rp-thank-you--success {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.rp-thank-you--failed {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}

.rp-thank-you--pending {
    background-color: #fffbef !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}