/**
 * Custom Instructor Landing Page Styles
 * Matching the site's flat, modern design system
 */

/* ========================================
   Instructor Landing Cards
   ======================================== */

.instructor-landing-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 16px;
    padding: 32px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.instructor-landing-card:hover {
    border-color: #1976D2;
    transform: translateY(-8px);
    box-shadow: 0px 12px 40px rgba(25, 118, 210, 0.12);
}

/* Icon Container */
.instructor-landing-card .icon-container {
    width: 80px;
    height: 80px;
    background: #E3F2FD;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.instructor-landing-card:hover .icon-container {
    background: #1976D2;
    transform: scale(1.05);
}

.instructor-landing-card .icon-container i {
    font-size: 28px;
    color: #1976D2;
    transition: all 0.3s ease;
}

.instructor-landing-card:hover .icon-container i {
    color: #FFFFFF;
}

.instructor-landing-card .card-title {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.instructor-landing-card:hover .card-title {
    color: #1976D2;
}

.instructor-landing-card .card-text {
    color: #5F6368;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   Steps Card
   ======================================== */

.instructor-steps-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}

.instructor-steps-card:hover {
    border-color: #1976D2;
    box-shadow: 0px 8px 24px rgba(25, 118, 210, 0.08);
}

.instructor-steps-card h4 {
    color: #1A1A1A;
    font-weight: 700;
    margin-bottom: 24px;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #E3F2FD;
    color: #1976D2;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    margin-left: 12px;
}

.step-badge.step-success {
    background: #E8F5E9;
    color: #2E7D32;
}

.step-text {
    color: #1A1A1A;
    font-weight: 600;
}

.step-arrow {
    color: #BDBDBD;
}

/* ========================================
   Revenue Section
   ======================================== */

.instructor-revenue-card {
    background: #1976D2;
    border: none;
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    color: #FFFFFF;
}

.instructor-revenue-card .revenue-icon {
    font-size: 48px;
    margin-bottom: 24px;
    opacity: 0.9;
}

.instructor-revenue-card h2 {
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 16px;
}

.instructor-revenue-card .revenue-percentage {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 16px;
    color: #FFFFFF;
}

.instructor-revenue-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin-bottom: 24px;
}

.instructor-revenue-card .revenue-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.instructor-revenue-card .revenue-features li {
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
    font-size: 16px;
}

.instructor-revenue-card .revenue-features li:last-child {
    margin-bottom: 0;
}

.instructor-revenue-card .revenue-features i {
    color: #90CAF9;
    margin-left: 8px;
}

/* ========================================
   CTA Section
   ======================================== */

.instructor-cta-card {
    background: #15487E;
    border: none;
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    color: #FFFFFF;
}

.instructor-cta-card .cta-icon {
    font-size: 48px;
    margin-bottom: 24px;
    color: #93C0E7;
}

.instructor-cta-card h2 {
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 16px;
}

.instructor-cta-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.instructor-cta-card .btn-light {
    background: #FFFFFF;
    color: #15487E;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.instructor-cta-card .btn-light:hover {
    background: #E3F2FD;
    transform: translateY(-2px);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Category Cards
   ======================================== */

.instructor-category-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 16px;
    padding: 32px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.instructor-category-card:hover {
    border-color: #1976D2;
    transform: translateY(-8px);
    box-shadow: 0px 12px 40px rgba(25, 118, 210, 0.12);
}

.instructor-category-card .category-icon {
    font-size: 48px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.instructor-category-card .category-icon.text-primary {
    color: #1976D2;
}

.instructor-category-card .category-icon.text-success {
    color: #2E7D32;
}

.instructor-category-card .category-icon.text-info {
    color: #0288D1;
}

.instructor-category-card:hover .category-icon {
    transform: scale(1.1);
}

.instructor-category-card .card-title {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.instructor-category-card:hover .card-title {
    color: #1976D2;
}

.instructor-category-card .card-text {
    color: #5F6368;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   Hero Section
   ======================================== */

.instructor-hero .section__title .sub-title {
    color: #1976D2;
}

.instructor-hero .section__title .title {
    color: #1A1A1A;
}

.instructor-hero p {
    color: #5F6368;
    font-size: 17px;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Section Titles
   ======================================== */

.instructor-section .section__title .sub-title {
    color: #1976D2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.instructor-section .section__title .title {
    color: #1A1A1A;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.instructor-section .section__title p {
    color: #5F6368;
    font-size: 16px;
}

/* ========================================
   Final CTA Section
   ======================================== */

.instructor-final-cta .section__title .title {
    color: #1A1A1A;
    font-size: 28px;
    font-weight: 700;
}

/* ========================================
   Course Guide Section - Bilingual
   ======================================== */

.instructor-guide-section {
    background: #F8FAFC;
}

.instructor-guide-section .guide-subtitle {
    color: #5F6368;
    font-size: 15px;
    font-style: italic;
    margin-top: 8px;
}

/* Main Guide Card */
.guide-main-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.guide-main-card:hover {
    border-color: #1976D2;
    box-shadow: 0px 8px 32px rgba(25, 118, 210, 0.1);
}

.guide-card-header {
    display: flex;
    align-items: center;
    padding: 24px 28px;
    background: #F8FAFC;
    border-bottom: 1px solid #E8EEF7;
}

.guide-card-icon {
    width: 56px;
    height: 56px;
    background: #E3F2FD;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}

.guide-card-icon i {
    font-size: 24px;
    color: #1976D2;
}

.guide-card-title h4 {
    color: #1A1A1A;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.guide-card-title span {
    color: #5F6368;
    font-size: 14px;
}

.guide-card-body {
    padding: 24px 28px;
}

/* Goal Items */
.guide-goal-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #F0F0F0;
}

.guide-goal-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.guide-goal-item > i {
    color: #2E7D32;
    font-size: 18px;
    margin-left: 16px;
    margin-top: 4px;
    flex-shrink: 0;
}

.guide-goal-item p.ar {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.6;
}

.guide-goal-item p.en {
    color: #5F6368;
    font-size: 14px;
    margin: 0;
    font-style: italic;
}

/* Structure Grid */
.guide-structure-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.guide-structure-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #FAFBFC;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.guide-structure-item:hover {
    background: #E3F2FD;
}

.structure-number {
    width: 36px;
    height: 36px;
    background: #1976D2;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin-left: 16px;
    flex-shrink: 0;
}

.structure-content h5 {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.structure-content h5 small {
    color: #5F6368;
    font-size: 12px;
    font-weight: 400;
    margin-right: 8px;
}

.structure-content p {
    color: #5F6368;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Tip Cards */
.guide-tip-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 20px;
    padding: 28px;
    height: 100%;
    transition: all 0.3s ease;
}

.guide-tip-card:hover {
    border-color: #1976D2;
    box-shadow: 0px 8px 32px rgba(25, 118, 210, 0.1);
}

.guide-tip-card.tip-recording .tip-card-header i {
    color: #1976D2;
}

.guide-tip-card.tip-style .tip-card-header i {
    color: #2E7D32;
}

.tip-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8EEF7;
}

.tip-card-header > i {
    font-size: 32px;
    margin-left: 16px;
}

.tip-card-header h5 {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.tip-card-header span {
    color: #5F6368;
    font-size: 13px;
}

.tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tip-list li {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    color: #1A1A1A;
    font-size: 15px;
    line-height: 1.5;
}

.tip-list li i {
    color: #1976D2;
    font-size: 6px;
    margin-left: 12px;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Avoid Card */
.guide-avoid-card {
    background: #FFF8F8;
    border: 2px solid #FFCDD2;
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s ease;
}

.guide-avoid-card:hover {
    border-color: #EF5350;
    box-shadow: 0px 8px 32px rgba(239, 83, 80, 0.1);
}

.avoid-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #FFCDD2;
}

.avoid-header > i {
    font-size: 28px;
    color: #D32F2F;
    margin-left: 16px;
}

.avoid-header h5 {
    color: #C62828;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.avoid-header span {
    color: #5F6368;
    font-size: 13px;
}

.avoid-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.avoid-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFCDD2;
}

.avoid-item i {
    color: #D32F2F;
    font-size: 14px;
    margin-left: 12px;
    flex-shrink: 0;
}

.avoid-item span {
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 500;
}

/* Additions Card */
.guide-additions-card {
    background: #FFFFFF;
    border: 2px solid #E8EEF7;
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s ease;
}

.guide-additions-card:hover {
    border-color: #1976D2;
    box-shadow: 0px 8px 32px rgba(25, 118, 210, 0.1);
}

.additions-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8EEF7;
}

.additions-header > i {
    font-size: 28px;
    color: #1976D2;
    margin-left: 16px;
}

.additions-header h5 {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.additions-header span {
    color: #5F6368;
    font-size: 13px;
}

.additions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.addition-box {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #E8EEF7;
    transition: all 0.3s ease;
}

.addition-box:hover {
    background: #E3F2FD;
    border-color: #1976D2;
}

.addition-box > i {
    font-size: 28px;
    color: #1976D2;
    margin-left: 16px;
    flex-shrink: 0;
}

.addition-box h6 {
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.addition-box p {
    color: #5F6368;
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Guide Section Responsive */
@media (max-width: 991px) {
    .guide-structure-grid {
        grid-template-columns: 1fr;
    }

    .avoid-items {
        grid-template-columns: 1fr;
    }

    .additions-grid {
        grid-template-columns: 1fr;
    }

    .guide-card-header,
    .guide-card-body {
        padding: 20px;
    }

    .guide-tip-card,
    .guide-avoid-card,
    .guide-additions-card {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .guide-card-icon {
        width: 48px;
        height: 48px;
    }

    .guide-card-icon i {
        font-size: 20px;
    }

    .guide-card-title h4 {
        font-size: 18px;
    }

    .tip-card-header > i {
        font-size: 24px;
    }

    .tip-card-header h5 {
        font-size: 16px;
    }

    .structure-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .structure-content h5 {
        font-size: 15px;
    }

    .addition-box > i {
        font-size: 24px;
    }
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 991px) {
    .instructor-landing-card,
    .instructor-category-card {
        padding: 24px 20px;
    }

    .instructor-landing-card .icon-container {
        width: 64px;
        height: 64px;
    }

    .instructor-landing-card .icon-container i {
        font-size: 24px;
    }

    .instructor-revenue-card,
    .instructor-cta-card {
        padding: 36px 24px;
    }

    .instructor-revenue-card .revenue-percentage {
        font-size: 56px;
    }

    .instructor-steps-card {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .instructor-landing-card .card-title,
    .instructor-category-card .card-title {
        font-size: 16px;
    }

    .instructor-landing-card .card-text,
    .instructor-category-card .card-text {
        font-size: 13px;
    }

    .instructor-revenue-card .revenue-percentage {
        font-size: 48px;
    }

    .instructor-revenue-card p,
    .instructor-cta-card p {
        font-size: 15px;
    }

    .instructor-section .section__title .title {
        font-size: 24px;
    }

    .instructor-category-card .category-icon {
        font-size: 36px;
    }
}