/* Custom-Eduzek: small additions layered on top of the Skillgro theme for the
   blog and course pages. Kept in its own file (loaded after main.css) so it
   never has to touch the vendor theme files directly. */

/* ---------------------------------------------------------------------------
   Course pricing tiers ("Choose Your Training Format")
   Lives in the main content column now (previously a purple sidebar block
   using ".delivery-option*" classes -- removed, since nothing references
   them anymore). Light-card treatment on the page's white background so it
   doesn't compete with the theme's brand-colour CTA buttons, and reads as a
   deliberate comparison section rather than a sidebar footnote.
--------------------------------------------------------------------------- */
.courses__pricing-tiers {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #EAEAEA;
}

.courses__pricing-tiers .title {
    margin-bottom: 8px;
}

.pricing-tier-delivery-note {
    font-size: 14px;
    color: var(--tg-body-color);
    margin-bottom: 20px;
}

.pricing-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin-bottom: 16px;
}

.pricing-tier-card {
    position: relative;
    background: #fff;
    border: 1px solid #E5E4F5;
    border-radius: 12px;
    padding: 28px 22px 24px;
    box-shadow: 0px 4px 16px 0px rgba(24, 22, 60, 0.05);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    overflow: hidden;
}

/* Small colour accent along the top edge of every card -- gives each tier
   its own visual anchor without needing a "GET FEES"-style banner/table
   treatment (explicitly not what we're going for here). */
.pricing-tier-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tg-theme-primary), var(--tg-common-color-yellow, #F8BC24));
}

.pricing-tier-card:hover {
    border-color: var(--tg-theme-primary);
    box-shadow: 0px 10px 28px 0px rgba(87, 81, 225, 0.14);
    transform: translateY(-3px);
}

.pricing-tier-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--tg-heading-color);
    margin-bottom: 10px;
}

.pricing-tier-price {
    font-weight: 700;
    font-size: 20px;
    color: var(--tg-theme-primary);
    margin-bottom: 10px;
}

.pricing-tier-desc {
    font-size: 14px;
    color: var(--tg-body-color);
    margin-bottom: 18px;
    min-height: 42px;
}

.pricing-tier-cta {
    display: inline-block;
    font-size: 13px;
    padding: 8px 18px !important;
}

.pricing-tier-cert {
    font-size: 13px;
    color: var(--tg-body-color);
    margin-top: 6px;
}

.pricing-tier-cert i {
    color: var(--tg-common-color-yellow, #F8BC24);
    margin-right: 4px;
}

.pricing-tier-disclaimer {
    font-size: 12px;
    color: #9A99AC;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Shown under the pricing-tier grid whenever a Corporate/1:1 tier has no
   price -- explains why in plain words instead of just leaving a gap where
   a price would normally be. */
.pricing-tier-note {
    font-size: 13px;
    color: var(--tg-heading-color);
    background: #FFF7E6;
    border: 1px solid #F8E3B5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 4px;
    margin-bottom: 0;
}

.pricing-tier-note i {
    color: var(--tg-common-color-yellow, #F8BC24);
    margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Course page -- WhatsApp chat + lead form
--------------------------------------------------------------------------- */
.course-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    padding: 13px 16px;
    margin-bottom: 20px;
    text-decoration: none;
    transition: 0.3s;
}

.course-whatsapp-btn:hover {
    background: #1DA851;
    color: #fff;
}

.course-whatsapp-btn i {
    font-size: 19px;
}

.course-whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.22);
    z-index: 999;
    transition: 0.3s;
}

.course-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08);
}

@media (max-width: 575.98px) {
    .course-whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

.course-lead-form-wrap {
    position: relative;
    border: 1px solid #ececf3;
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(20, 10, 60, 0.05);
    overflow: hidden;
}

/* Same thin brand-colour accent used on the pricing-tier cards, so this
   block reads as part of the same design language rather than a bolted-on
   widget. */
.course-lead-form-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tg-theme-primary), var(--tg-common-color-yellow, #F8BC24));
}

.course-lead-form-wrap .title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.course-lead-form-wrap .title i {
    color: var(--tg-theme-primary);
}

/* Native lead form (shown once Admin -> Site Settings turns it on; the
   Microsoft Forms iframe below is what shows by default). Icon-prefixed
   inputs on a soft card read a lot calmer than plain boxed fields stacked
   in a narrow sidebar column. */
.course-lead-form .form-grp {
    position: relative;
    margin-bottom: 12px;
}

.course-lead-form .form-grp i {
    position: absolute;
    left: 14px;
    top: 13px;
    font-size: 13px;
    color: #a9a9bd;
    pointer-events: none;
}

.course-lead-form .form-grp--textarea i {
    top: 14px;
}

.course-lead-form input,
.course-lead-form textarea {
    width: 100%;
    border: 1px solid #e6e6ef;
    border-radius: 8px;
    padding: 11px 14px 11px 38px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background: #f9f9fc;
    resize: vertical;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.course-lead-form input:focus,
.course-lead-form textarea:focus {
    outline: none;
    border-color: var(--tg-theme-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(123, 47, 247, 0.12);
}

/* The Contact page reuses .course-lead-form inside the theme's own
   .contact-form-wrap card. That theme card has its own, more specific
   ".contact-form-wrap .form-grp input" rule (2 classes) which otherwise
   beats ".course-lead-form input" (1 class) on CSS specificity alone,
   silently dropping the left padding that keeps the icon from sitting on
   top of the text. These three-class overrides are specific enough to win
   without having to touch either page's HTML. */
.contact-form-wrap .course-lead-form .form-grp input,
.contact-form-wrap .course-lead-form .form-grp textarea {
    height: auto;
    padding: 11px 14px 11px 38px;
    font-size: 14px;
}

.course-lead-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 50px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--tg-theme-primary);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.course-lead-submit:hover {
    opacity: 0.9;
}

.course-lead-submit:active {
    transform: scale(0.98);
}

.course-lead-submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.course-lead-response {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.course-lead-response.success {
    color: #1f8a3d;
    background: #eaf7ee;
}

.course-lead-response.error {
    color: #d0342c;
    background: #fdecec;
}

/* Fallback box shown in the sidebar video slot when a course has a VideoUrl
   set but no real banner image to use as its poster thumbnail. */
.courses__details-video-placeholder {
    min-height: 200px;
    border-radius: 8px;
    background: #f2f2f2;
}

/* ---------------------------------------------------------------------------
   Course card price / "Enroll Now" button spacing
   The theme's own .courses__item-bottom is already flex + wrap, but on
   narrower cards (and with longer struck-through price text, e.g.
   "₹45,000₹40,000") there wasn't enough breathing room between the price and
   the button, so they visually ran into each other. A gap + a guaranteed
   wrap point fixes that without touching the vendor theme file.
--------------------------------------------------------------------------- */
.courses__item-bottom {
    gap: 10px 16px;
}

.courses__item-bottom .price {
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 420px) {
    .courses__item-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .courses__item-bottom .price {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   Corporate Training page -- format cards (no pricing shown by default; see
   Views/CorporateTraining/Index.cshtml). Reuses the same card language as
   the course pricing tiers above, but with an icon and no price emphasis,
   since the whole point of this page is "talk to us for a quote."
--------------------------------------------------------------------------- */
.corp-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.corp-format-card {
    background: #fff;
    border: 1px solid #E5E4F5;
    border-radius: 14px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0px 4px 16px 0px rgba(24, 22, 60, 0.05);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.corp-format-card:hover {
    border-color: var(--tg-theme-primary);
    box-shadow: 0px 10px 28px 0px rgba(87, 81, 225, 0.14);
    transform: translateY(-3px);
}

.corp-format-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 26px;
}

.corp-format-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--tg-heading-color);
    margin-bottom: 10px;
}

.corp-format-desc {
    font-size: 14px;
    color: var(--tg-body-color);
    margin-bottom: 14px;
}

/* Deliberately its own button style, not the theme's .btn-two -- that one's
   bold yellow-fill/black-border/hard-drop-shadow treatment is meant for an
   urgent "Enroll Now" moment. Here the CTA is "let's talk," and it sits
   centered inside an already-soft card, so a quiet outlined pill (fills in
   on hover) reads calmer and fits the rest of this page better. */
.corp-format-cta {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 50px;
    border: 1.5px solid var(--tg-theme-primary);
    background: transparent;
    color: var(--tg-theme-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.corp-format-cta:hover,
.corp-format-cta:focus-visible {
    background: var(--tg-theme-primary);
    color: #fff;
}

.corp-info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 24px;
    background: #F7F7FC;
    border-radius: 12px;
    padding: 24px 26px;
}

.corp-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.corp-info-item i {
    color: var(--tg-theme-primary);
    margin-top: 4px;
    flex-shrink: 0;
}

.corp-info-item p {
    margin: 0;
    font-size: 14px;
    color: var(--tg-body-color);
}

.corp-quote-note {
    font-size: 13px;
    color: #9A99AC;
    margin-top: 20px;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Upcoming Batches table
--------------------------------------------------------------------------- */
.courses__upcoming-batches {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #EAEAEA;
}

.batch-table-wrap {
    overflow-x: auto;
}

.batch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.batch-table th,
.batch-table td {
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid #EAEAEA;
    white-space: nowrap;
}

.batch-table th {
    color: var(--tg-heading-color);
    font-weight: 600;
    background: #F7F7FC;
}

.batch-table td {
    color: var(--tg-body-color);
}

.badge-seats {
    display: inline-block;
    background: rgba(248, 188, 36, 0.15);
    color: #B5790B;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Blog thumbnail placeholders
   Shown instead of an <img> whenever a post's ImageThumbUrl/ImageBannerUrl
   doesn't resolve to a real file (see Helper/ImageAvailability.cs) -- a
   missing/placeholder image path used to render the browser's broken-image
   icon, which reads as a bug. Sized to match the theme's own image slots
   exactly so the grid/list layout doesn't shift between "has image" and
   "no image" posts.
--------------------------------------------------------------------------- */
.blog-thumb-placeholder {
    width: 100%;
    height: 224px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 42px;
}

@media (max-width: 767.98px) {
    .blog-thumb-placeholder {
        height: 180px;
    }
}

.rc-post-thumb {
    /* Theme only sets a fixed width (74px); giving it a fixed height too
       means a real thumbnail and the placeholder box below line up exactly. */
    height: 64px;
    overflow: hidden;
    border-radius: 3px;
}

.rc-post-thumb img {
    width: 74px;
    height: 64px;
    object-fit: cover;
}

.rc-post-thumb-placeholder {
    width: 74px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 20px;
}

/* ---------------------------------------------------------------------------
   Course thumbnail placeholders (same idea as the blog ones above) -- shown
   when a course's ImageThumbUrl/ImageBannerUrl doesn't resolve to a real
   file, e.g. a brand-new course added before its real photography/graphics
   are ready. Sized to match the theme's own image slots for the grid card,
   the list-view card, the homepage carousel, and the details page banner.
--------------------------------------------------------------------------- */
.courses__item-thumb-placeholder {
    width: 100%;
    height: 190px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 38px;
}

.courses__item-three .courses__item-thumb-placeholder {
    width: 280px;
    height: 100%;
    min-height: 210px;
    border-radius: 0;
}

@media (max-width: 767.98px) {
    .courses__item-three .courses__item-thumb-placeholder {
        width: 100%;
    }
}

.courses__details-thumb-placeholder {
    width: 100%;
    height: 320px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 56px;
}

/* Instructors tab avatar -- shown instead of the theme's own placeholder
   image (which literally had "225X225" baked into it) since there's no real
   per-trainer photo to show. Same circular 225px slot the real <img> used. */
.courses__instructors-thumb-placeholder {
    width: 225px;
    height: 225px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDEBFC 0%, #F7F7FC 100%);
    color: var(--tg-theme-primary);
    font-size: 64px;
}

@media (max-width: 575.98px) {
    .courses__instructors-thumb-placeholder {
        width: 160px;
        height: 160px;
        font-size: 48px;
    }
}

/* Related course card at the bottom of a blog post -- reuses the same
   .courses__item card the course listing grid already uses (so it needs no
   new card styling of its own), just narrowed and left-aligned here since
   it's a single card sitting in a wide content column rather than one cell
   in a 3-column grid. */
.blog-related-course {
    max-width: 360px;
}

.blog-related-course-title {
    margin-bottom: 14px;
}

/* Blog sidebar widgets */
.blog-sidebar .widget {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.blog-sidebar .widget-title {
    margin-bottom: 14px;
}

.blog__post-item-two {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.blog__post-thumb-two img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

.blog__post-content-two .title {
    font-size: 14px;
    margin: 0;
}

.tg-post-tags {
    margin: 20px 0;
}

.tg-post-tags a {
    display: inline-block;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 4px 14px;
    margin: 0 6px 6px 0;
    font-size: 13px;
}

/* So the "Enroll Now" / "Get A Quote" / "Request Corporate Training"
   buttons on a course page glide down to the lead form below instead of
   jumping there instantly. Skipped for anyone with reduced-motion set. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}