/* ===============================================
   KARDERA - CARD COMPONENTS
   =============================================== */

/* INFO BOX */
.info-box {
    background: var(--gradient);
    border: 1px solid rgba(234, 38, 65, 0.3);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    transition: var(--transition);
    height: 100%;
}

.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.info-box .icon,
.info-box .icon i {
    color: var(--accent) !important;
    font-size: 2rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.info-box:hover .icon,
.info-box:hover .icon i {
    color: var(--primary) !important;
    transform: scale(1.1);
}

.info-box h4,
.info-box h5 {
    color: var(--black) !important;
    font-weight: 600;
}

.info-box p {
    color: var(--black) !important;
    margin-bottom: 0;
}

.info-box small {
    color: var(--primary) !important;
}

/* INFO ICON STYLING */
.info-icon {
    color: var(--accent) !important;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.info-box:hover .info-icon {
    color: var(--primary) !important;
    transform: scale(1.1);
}

/* FEATURE CARDS */
.feature-card {
    background: var(--gradient) !important;
    border: 1px solid rgba(234, 38, 65, 0.3) !important;
    transition: var(--transition);
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    color: var(--accent) !important;
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    color: var(--primary) !important;
    transform: scale(1.1);
}

.feature-card .card-title {
    color: var(--black) !important;
    font-weight: 600 !important;
}

.feature-card .card-text {
    color: var(--black) !important;
}

/* STAT CARDS */
.stat-card {
    background: var(--white) !important;
    border: 1px solid rgba(234, 38, 65, 0.2) !important;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary) !important;
}

.stat-icon i {
    color: var(--accent) !important;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-icon i {
    color: var(--primary) !important;
    transform: scale(1.1);
}

.stat-number {
    color: var(--primary) !important;
    font-weight: bold !important;
}

.stat-label {
    color: var(--black) !important;
}

/* SIDEBAR CARDS */
.sidebar-card {
    background: var(--gradient) !important;
    border: 1px solid rgba(234, 38, 65, 0.3) !important;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: var(--transition);
}

.sidebar-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.sidebar-card .d-flex i {
    color: var(--primary) !important;
    font-size: 1.2rem !important;
}

.sidebar-card .card-title {
    color: var(--black) !important;
    font-weight: 600 !important;
}

.sidebar-card p {
    color: var(--black) !important;
}

.sidebar-card .styled-list li {
    color: var(--black) !important;
    margin-bottom: 0.5rem;
}

.sidebar-card .styled-list li i {
    color: var(--primary) !important;
}

.sidebar-card .styled-list li span {
    color: var(--black) !important;
}

/* PROMO BADGE ITEM */
.promo-badge-item {
    background: var(--white);
    border: 2px solid var(--secondary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
    height: 100%;
}

.promo-badge-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.promo-badge-item .badge-icon {
    background: var(--primary-10);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    transition: var(--transition);
}

.promo-badge-item:hover .badge-icon {
    background: var(--primary);
    transform: scale(1.1);
}

.promo-badge-item .badge-icon i {
    color: var(--primary);
    font-size: 1.5rem;
    transition: var(--transition);
}

.promo-badge-item:hover .badge-icon i {
    color: var(--white);
}

.promo-badge-item h5 {
    color: var(--black);
    font-weight: var(--font-weight-700);
    margin-bottom: var(--space-sm);
}

.promo-badge-item p {
    color: var(--gray);
    font-size: var(--font-size-small);
    margin-bottom: 0;
}

/* CONTACT SECTION TEXT COLORS */
.bg-light .section-title {
    color: var(--dark) !important;
}

.bg-light .section-subtitle {
    color: var(--dark-70) !important;
}

.bg-light .contact-card h5,
.bg-light .contact-card p,
.bg-light .contact-card small {
    color: var(--dark) !important;
}

/* MISSION ITEM STYLING */
.mission-item {
    background: var(--white);
    border: 1px solid rgba(234, 38, 65, 0.1);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: var(--transition);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mission-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(234, 38, 65, 0.3);
}

.mission-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    transition: var(--transition);
}

.mission-item:hover .mission-number {
    transform: scale(1.1);
    box-shadow: var(--shadow);
}

.mission-content {
    flex: 1;
}

.mission-content h5 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.mission-content p {
    margin-bottom: 0;
    line-height: 1.6;
}

/* LEGAL & AMAN ICON CONSISTENCY */
.promo-badge-item i,
.stat-icon i,
.info-icon i,
.mission-number i,
.service-icon i {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Specific styling for shield icons to ensure visibility */
.fas.fa-shield-alt,
.fas.fa-shield-check {
    color: var(--primary) !important;
    font-size: inherit;
    font-weight: 900;
}

/* Ensure mission-number icons are visible */
.mission-number i {
    color: var(--white) !important;
    font-size: 1.5rem !important;
}

/* Ensure promo-badge icons are visible */
.promo-badge-item i {
    color: var(--white) !important;
    font-size: 2.5rem !important;
    opacity: 1 !important;
}

/* Ensure stat-icon icons are visible */
.stat-icon i {
    color: var(--primary) !important;
    font-size: 3.5rem !important;
    opacity: 1 !important;
}

/* Ensure info-icon icons are visible */
.info-icon i {
    color: var(--accent) !important;
    font-size: 2.5rem !important;
    opacity: 1 !important;
}

/* Ensure service-icon icons are visible */
.service-icon i {
    color: var(--primary) !important;
    font-size: 2rem !important;
    opacity: 1 !important;
}

/* SHIELD-ALT ICON COMPATIBILITY */
.info-icon .fa-shield-alt,
.mission-number .fa-shield-alt {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Info box shield-alt specific */
.info-box .info-icon .fa-shield-alt {
    color: var(--accent) !important;
}

.info-box:hover .info-icon .fa-shield-alt {
    color: var(--primary) !important;
}

/* Mission number shield-alt specific */
.mission-number .fa-shield-alt {
    color: var(--white) !important;
}

/* Additional safety for Font Awesome icons */
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}