/* Trust Factor - Logo Gray #808080 to Green #0B3D2E on hover */
.logo-svg{filter:brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(90%);transition:filter 0.3s ease;}
.logo-hover-item:hover .logo-svg,.logo-hover-item:active .logo-svg{filter:brightness(0) saturate(100%) invert(17%) sepia(12%) saturate(2800%) hue-rotate(115deg) brightness(92%) contrast(92%);}
.logo-hover-item:hover span,.logo-hover-item:active span{color:#0B3D2E !important;}
.logo-hover-item{transition:transform 0.2s ease;padding:10px 8px;}
.logo-hover-item:hover{transform:scale(1.1);}
.animate-scroll-logos{display:flex;animation:scrollLogos 30s linear infinite;width:max-content;}
.animate-scroll-logos:hover{animation-play-state:paused;}
@keyframes scrollLogos{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}


/* ============================================
   FLOATING BUY BUTTON
   ============================================ */
.floating-buy-bar {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 50;
    background: #EFF8F2;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.40);
    padding: 14px 18px;
    max-width: 620px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.3s ease;
}
.floating-buy-bar.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.floating-buy-bar .floating-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.floating-buy-bar .badge-offer {
    background: #F4C430;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.floating-buy-bar .price-section {
    display: flex;
    align-items: center;
    gap: 8px;
}
.floating-buy-bar .price-original {
    font-size: 1.25rem;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
}
.floating-buy-bar .price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0B3D2E;
}
.floating-buy-bar .price-current.free {
    color: #16a34a;
}
.floating-buy-bar .social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}
.floating-buy-bar .social-proof strong {
    color: #1f2937;
    font-weight: 700;
}
.floating-buy-bar .btn-float {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}
.floating-buy-bar .btn-float-primary {
    background: #0B3D2E;
    color: #fff;
}
.floating-buy-bar .btn-float-primary:hover {
    background: rgba(11, 61, 46, 0.9);
}
.floating-buy-bar .btn-float-free {
    background: #16a34a;
    color: #fff;
}
.floating-buy-bar .btn-float-free:hover {
    background: rgba(22, 163, 74, 0.9);
}
.floating-buy-bar .divider {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
}
.floating-buy-bar .desktop-view {
    display: flex;
}
.floating-buy-bar .mobile-view {
    display: none;
}
.floating-buy-bar .row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.floating-buy-bar .row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .floating-buy-bar {
        bottom: 55px;
        left: 12px;
        right: 12px;
        max-width: none;
        padding: 10px 12px;
    }
    .floating-buy-bar .desktop-view {
        display: none;
    }
    .floating-buy-bar .mobile-view {
        display: block;
    }
    .floating-buy-bar .badge-offer {
        font-size: 9px;
        padding: 3px 6px;
    }
    .floating-buy-bar .price-original {
        font-size: 1rem;
    }
    .floating-buy-bar .price-current {
        font-size: 1.1rem;
    }
    .floating-buy-bar .social-proof {
        font-size: 11px;
    }
    .floating-buy-bar .btn-float {
        padding: 10px 16px;
        font-size: 12px;
    }
    .floating-buy-bar .divider {
        display: none;
    }
}

/* Fix: Modal above floating bar */
.fixed.inset-0[role="dialog"] { z-index: 9999 !important; }
/* ============================================ */


/* ========================================
/* ========================================
   PAGINATION - Course Listing
   ======================================== */
.pagination {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}
.pagination-mobile {
    display: flex;
    gap: 1rem;
}
.pagination-desktop {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.pagination-info {
    font-size: 0.875rem;
    color: #374151;
}
.pagination-info span {
    font-weight: 600;
}
.pagination-buttons {
    display: inline-flex;
    border: 2px solid #F4C430;
    border-radius: 6px;
    overflow: hidden;
}
.pagination-btn {
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: #0B3D2E;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-right: 1px solid #F4C430;
    transition: background-color 0.2s;
}
.pagination-btn:last-child {
    border-right: none;
}
.pagination-btn:hover {
    background-color: #049f82;
    color: white;
}
.pagination-btn.pagination-active {
    background-color: white;
    color: #0B3D2E;
    font-weight: 700;
}
.pagination-btn.pagination-disabled {
    background-color: #6b7280;
    color: #d1d5db;
    cursor: not-allowed;
}
.pagination-btn.pagination-arrow {
    padding: 0.5rem 0.75rem;
}
.pagination-btn.pagination-dots {
    background-color: #0B3D2E;
    cursor: default;
}
.pagination-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}
@media (min-width: 640px) {
    .pagination-mobile {
        display: none;
    }
    .pagination-desktop {
        display: flex;
    }
}
   CATEGORY COURSES LIST - Mobile Responsive
   Transform table to stacked cards on mobile
   ============================================ */
@media (max-width: 640px) {
    /* Hide table header on mobile */
    .mt-12.border-t table thead {
        display: none !important;
    }
    /* Transform table body */
    .mt-12.border-t table,
    .mt-12.border-t table tbody,
    .mt-12.border-t table { min-width: 0 !important; }
    .mt-12.border-t .overflow-x-auto { overflow: hidden !important; }
    .mt-12.border-t table tr,
    .mt-12.border-t table td {
        display: block !important;
        width: 100% !important;
    }
    /* Each row becomes a card */
    .mt-12.border-t table tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    /* Reset cell padding */
    .mt-12.border-t table td {
        padding: 4px 0;
        border: none;
        text-align: left;
    }
    /* Title cell - full width, bold */
    .mt-12.border-t table td:first-child {
        font-weight: 600;
        font-size: 1rem;
        padding-bottom: 8px;
    }
    /* Type pill and price inline */
    .mt-12.border-t table td:nth-child(2),
    .mt-12.border-t table td:nth-child(3) {
        display: inline-block !important;
        width: auto;
        margin-right: 12px;
    }
    /* Action button - full width */
    .mt-12.border-t table td:last-child {
        display: block !important;
        text-align: left;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid #f3f4f6;
    }
    .mt-12.border-t table td:last-child a {
        display: inline-block !important;
        width: auto;
    }
    /* Remove horizontal scroll wrapper */
    .mt-12.border-t .overflow-x-auto {
        overflow-x: visible !important;
    }
}
/* ============================================
   END CATEGORY COURSES LIST MOBILE
   ============================================ */

/* ============================================
   SCOPE SECTION STYLES
   ============================================ */

.scope-container { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.5rem 2rem; }
.scope-hook-wrapper { position: relative; margin-bottom: 2.25rem; padding-bottom: 1.75rem; border-bottom: 3px solid #F4C430; }
.scope-hook { position: relative; font-size: 1.75rem; font-weight: 700; color: #0B3D2E; line-height: 1.35; letter-spacing: -0.02em; font-style: italic; }
.scope-relevance { font-size: 1.0625rem; color: #4b5563; line-height: 1.8; margin-bottom: 2.25rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, rgba(11, 61, 46, 0.03) 0%, rgba(4, 159, 130, 0.015) 100%); border-left: 3px solid #0B3D2E; border-radius: 0 10px 10px 0; }
.scope-enrollment-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #f59e0b;border-radius:50px;font-size:0.875rem;font-weight:600;color:#92400e;margin-bottom:1.5rem;}.scope-enrollment-badge svg{width:16px;height:16px;color:#f59e0b;}
.scope-included-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;margin-bottom:1.75rem;}.scope-included-header{font-size:1.125rem;font-weight:700;color:#0B3D2E;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;}.scope-included-header svg{width:20px;height:20px;color:#0B3D2E;}.scope-included-item{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0;font-size:0.9375rem;color:#374151;}.scope-included-item svg{width:18px;height:18px;color:#16a34a;flex-shrink:0;}.scope-included-divider{height:1px;background:#e2e8f0;margin:0.75rem 0;}.scope-bundle-highlight{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border:1px solid #10b981;border-radius:8px;padding:1rem;margin-top:0.75rem;}.scope-bundle-title{font-size:0.9375rem;font-weight:700;color:#065f46;margin-bottom:0.625rem;display:flex;align-items:center;gap:0.5rem;}.scope-bundle-title svg{width:18px;height:18px;}.scope-bundle-worth{font-size:0.8125rem;color:#047857;font-weight:600;margin-bottom:0.625rem;}.scope-bundle-list{display:grid;grid-template-columns:1fr 1fr;gap:0.375rem 1rem;}.scope-bundle-item{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:#374151;}.scope-bundle-item svg{width:12px;height:12px;color:#10b981;flex-shrink:0;}
.scope-teaser-block{text-align:center;background:linear-gradient(135deg,#fefce8 0%,#fef9c3 100%);border:2px dashed #eab308;border-radius:12px;padding:1.5rem;margin-bottom:1.75rem;position:relative;}.scope-teaser-lock{position:absolute;top:-12px;right:16px;background:#fbbf24;color:#78350f;padding:0.25rem 0.75rem;border-radius:50px;font-size:0.75rem;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:0.25rem;}.scope-teaser-lock svg{width:12px;height:12px;}.scope-teaser-header{font-size:1rem;font-weight:700;color:#78350f;margin-bottom:0.5rem;}.scope-teaser-subtext{font-size:0.8125rem;color:#92400e;margin-bottom:1rem;}.scope-teaser-list{display:grid;grid-template-columns:1fr 1fr;gap:0.375rem 1rem;margin-bottom:1rem;width:fit-content;margin-left:auto;margin-right:auto;}.scope-teaser-item{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:#713f12;opacity:0.8;}.scope-teaser-item svg{width:12px;height:12px;color:#ca8a04;flex-shrink:0;}.scope-teaser-explore{font-size:0.9375rem;font-weight:700;color:#78350f;margin-bottom:0.75rem;}.scope-teaser-buttons{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;}.scope-teaser-btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 1.5rem;min-width:100px;flex:1;max-width:120px;justify-content:center;font-size:0.8125rem;font-weight:600;border-radius:6px;text-decoration:none;transition:all 0.2s ease;background:#0B3D2E;color:#fff;}.scope-teaser-btn:hover{background:#0f5240;transform:translateY(-1px);}.scope-teaser-btn svg{flex-shrink:0;width:12px;height:12px;}
.scope-value-header { font-size: 1.25rem; font-weight: 700; color: #0B3D2E; margin-bottom: 1.125rem; letter-spacing: -0.01em; }
.scope-value-list { list-style: none; padding: 0; margin: 0 0 2.25rem 0; display: flex; flex-direction: column; gap: 0.625rem; }
.scope-value-item { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; transition: all 0.2s ease; }
.scope-value-item:hover { border-color: #0B3D2E; background: #fafbfa; box-shadow: 0 2px 8px rgba(11, 61, 46, 0.06); transform: translateX(4px); }
.scope-value-number { min-width: 28px; height: 28px; background: #0B3D2E; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #F4C430; letter-spacing: 0.02em; }
.scope-value-text { font-size: 1rem; color: #1f2937; line-height: 1.5; font-weight: 500; padding-top: 3px; }
.scope-credibility-wrapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; justify-content: center; }
.scope-credibility-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; text-align: center; flex-wrap: wrap; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 50px; transition: all 0.2s ease; flex: 1; }
.scope-credibility-pill:hover { border-color: #0B3D2E; background: #f0fdf4; }
.scope-credibility-icon { width: 20px; height: 20px; color: #0B3D2E; }
.scope-credibility-text { font-size: 0.875rem; font-weight: 600; color: #0B3D2E; }
.scope-credibility-desc { font-size: 0.8125rem; color: #6b7280; width: 100%; text-align: center; }
.scope-divider { height: 2px; background: linear-gradient(90deg, transparent 0%, #F4C430 50%, transparent 100%); margin: 1.5rem 0 1.75rem; border: none; }
.scope-unlock-block { background: linear-gradient(135deg, #0B3D2E 0%, #0f5240 100%); border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 16px rgba(11, 61, 46, 0.2); position: relative; overflow: hidden; }
.scope-unlock-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #F4C430; }
.scope-unlock-subtitle { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 1rem; line-height: 1.5; }
.scope-unlock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8125rem 1.75rem; background: #F4C430; color: #0B3D2E; font-size: 0.9375rem; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none; box-shadow: 0 3px 10px rgba(244, 196, 48, 0.25); }
.scope-unlock-btn:hover { background: #e6b82e; transform: translateY(-2px); box-shadow: 0 5px 14px rgba(244, 196, 48, 0.35); }
.scope-unlock-btn svg { width: 16px; height: 16px; }
.scope-unlock-block.free-course { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.scope-unlock-block.free-course::before { background: #4ade80; }
.scope-unlock-block.free-course .scope-unlock-btn { background: #ffffff; color: #16a34a; }
.scope-unlock-block.free-course .scope-unlock-btn:hover { background: #f0fdf4; }
@media (max-width: 768px) {
    .scope-container { padding: 2rem 1rem 1.5rem; }
    .scope-hook { font-size: 1.5rem; line-height: 1.4; }
    .scope-relevance { font-size: 1rem; padding: 1rem 1.25rem; }
    .scope-value-header { font-size: 1.125rem; }
    .scope-value-item { padding: 0.75rem; }
    .scope-value-item:hover { transform: none; }
    .scope-value-number { min-width: 26px; height: 26px; font-size: 0.7rem; }
    .scope-value-text { font-size: 0.9375rem; padding-top: 2px; }
    .scope-credibility-wrapper { flex-direction: column; align-items: stretch; }
    .scope-credibility-pill { justify-content: center; padding: 0.75rem 1rem; }
    .scope-credibility-pill { text-align: center; flex-wrap: wrap; }
    .scope-credibility-desc { border-left: none; padding-left: 0; margin-left: 0; width: 100%; font-size: 0.75rem; text-align: center; margin-top: 0.25rem; }
    .scope-teaser-list { grid-template-columns: 1fr; }
    .scope-bundle-list { grid-template-columns: 1fr; }
    .scope-unlock-block { padding: 1.25rem; }
    .scope-unlock-subtitle { font-size: 0.875rem; }
    .scope-unlock-btn { width: 100%; padding: 0.875rem 1.5rem; }
}
@media (max-width: 480px) {
    .scope-hook { font-size: 1.375rem; }
}


/* ============================================
   REVIEWS PAGE STYLES
   ============================================ */
.review-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:9999px;font-size:11px;font-weight:500;margin-right:6px;margin-bottom:6px;}
.review-badge-type{background:#e0f2fe;color:#0369a1;}
.review-badge-category{background:#fef3c7;color:#92400e;}
.review-badge-language{background:#f3e8ff;color:#7c3aed;}
.review-form-container{background:#f3fbf6;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.review-form-input,.review-form-select,.review-form-textarea{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color 0.2s,box-shadow 0.2s;}
.review-form-input:focus,.review-form-select:focus,.review-form-textarea:focus{outline:none;border-color:#049f82;box-shadow:0 0 0 3px rgba(4,159,130,0.1);}
.review-form-textarea{min-height:100px;resize:vertical;}
.review-form-btn{background:#049f82;color:#ffffff;padding:12px 32px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s;}
.review-form-btn:hover{background:#037a65;}
.review-char-counter{font-size:12px;color:#6b7280;text-align:right;margin-top:4px;}
.review-success-msg{text-align:center;padding:24px;color:#059669;}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;}
.star-rating input{display:none;}
.star-rating label{cursor:pointer;color:#d1d5db;transition:color 0.15s;}
.star-rating label svg{width:28px;height:28px;}
.star-rating label:hover,.star-rating label:hover ~ label,.star-rating input:checked ~ label{color:#F4C430;}
.stars-display{display:inline-block;font-size:16px;letter-spacing:2px;background:linear-gradient(90deg,#F4C430 var(--rating),#d1d5db var(--rating));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stars-display::before{content:"★★★★★";}

/* Course Type Badges */
.review-badge-degree{background:#dbeafe;color:#1e40af;}
.review-badge-diploma{background:#d1fae5;color:#065f46;}
.review-badge-free{background:#fef3c7;color:#92400e;}

/* Course Type Badges - Theme Colors */
.review-badge-degree{background:rgba(0,95,78,0.12);color:#005F4E;}
.review-badge-diploma{background:rgba(58,95,58,0.12);color:#3A5F3A;}
.review-badge-free{background:rgba(22,163,74,0.12);color:#16a34a;}

/* ============================================
   RESOURCES SECTION - Course Page
   ============================================ */
.resources-section{margin-top:3rem;padding:2rem 0;border-top:1px solid #e5e7eb;}
.resources-container{max-width:800px;margin:0 auto;padding:2rem;background:#f8fdf9;border-radius:12px;border:1px solid #d1e7d5;}
.resources-header{text-align:center;margin-bottom:1.5rem;}
.resources-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:#e6f4ea;border-radius:50%;margin-bottom:1rem;color:#0b3d2e;}
.resources-icon-success{background:#d1fae5;color:#059669;}
.resources-title{font-size:1.5rem;font-weight:700;color:#0b3d2e;margin:0 0 0.25rem 0;}
.resources-subtitle{font-size:0.9375rem;color:#6b7280;margin:0;}
.resources-contents{margin-bottom:1.5rem;}
.resources-contents-intro{font-size:0.9375rem;color:#374151;margin-bottom:0.75rem;font-weight:500;}
.resources-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 1rem;}
.resources-list-item{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:#374151;}
.resources-check{color:#059669;font-weight:600;flex-shrink:0;}
.resources-item-name{font-weight:500;}
.resources-item-desc{color:#6b7280;font-size:0.875rem;}
.resources-action{text-align:center;padding-top:1rem;border-top:1px solid #d1e7d5;}
.resources-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 2rem;font-size:1rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s;}
.resources-btn-download{background:#0b3d2e;color:#ffffff;}
.resources-btn-download:hover{background:#094a38;transform:translateY(-1px);}
.resources-btn-locked{background:#9ca3af;color:#ffffff;cursor:not-allowed;}
.resources-btn-disabled{background:#d1d5db;color:#6b7280;cursor:not-allowed;}
.resources-limit-text{font-size:0.8125rem;color:#6b7280;margin:0.75rem 0 0 0;}
.resources-limit-reached{color:#dc2626;}
.resources-enroll-hint{font-size:0.8125rem;color:#6b7280;margin:0.75rem 0 0 0;}
.resources-upgrade-box{text-align:center;padding:2rem;background:#ffffff;border-radius:8px;border:2px dashed #d1d5db;}
.resources-lock-icon{color:#9ca3af;margin-bottom:1rem;}
.resources-upgrade-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0 0 0.5rem 0;}
.resources-upgrade-text{font-size:0.9375rem;color:#6b7280;margin:0 0 1.25rem 0;max-width:400px;margin-left:auto;margin-right:auto;}
.resources-upgrade-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;background:#0b3d2e;color:#ffffff;font-size:0.9375rem;font-weight:600;border-radius:8px;text-decoration:none;transition:all 0.2s;}
.resources-upgrade-btn:hover{background:#094a38;color:#ffffff;text-decoration:none;}
@media(max-width:640px){.resources-list{grid-template-columns:1fr;}.resources-container{padding:1.25rem;margin:0 1rem;}.resources-title{font-size:1.25rem;}.resources-list-item{}.resources-item-desc{width:100%;padding-left:1.25rem;}.resources-btn{width:100%;padding:1rem;}}

/* ===================================================================
   INLINE CSS FIXES - Utility Classes
   Added: February 7, 2026
   Purpose: Replace hardcoded inline styles with reusable classes
   =================================================================== */

/* Color Utilities - Brand */
.text-brand { color: #0b3d2e !important; }
.text-brand-light { color: #1a5a42 !important; }
.text-teal { color: #049f82 !important; }
.text-accent { color: #F4C430 !important; }
.bg-brand { background-color: #0b3d2e !important; }
.bg-teal { background-color: #049f82 !important; }
.bg-accent { background-color: #F4C430 !important; }

/* Alert/Callout Utilities */
.alert-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #059669;
    padding: 12px 16px;
    border-radius: 8px;
}

/* Flex Utilities */
.flex-inline-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.flex-start-gap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Button Utilities */
.btn-upgrade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    text-align: center;
}

/* Resource Worth Badge */
.worth-badge {
    color: #059669;
    font-weight: 600;
}

/* Icon Utilities */
.icon-danger {
    color: #991b1b;
    flex-shrink: 0;
}


/* ============================================
   LOGO .COM ANIMATION
   ============================================ */
.logo-dot-com {
    color: #F4C430;
    display: inline-block;
    animation: logoDotCom 6s ease-in-out infinite;
}
@keyframes logoDotCom {
    0%   { opacity: 0; transform: translateX(6px); color: #049f82; }
    8%   { opacity: 1; transform: translateX(0);   color: #049f82; }
    20%  { opacity: 1; transform: translateX(0);   color: #F4C430; }
    33%  { opacity: 0; transform: translateX(6px); color: #F4C430; }
    100% { opacity: 0; transform: translateX(6px); color: #F4C430; }
}