/**
 * Mauritius Trust Badges - Stunning Responsive Design
 * Compact, modern, and consistent across all screens
 */

/* ========================================
   CONTAINER & BASE STYLES
======================================== */

.mtb-trust-badges {
    width: 100%;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}

.mtb-badges-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}


/* ========================================
   BADGE BASE STYLES
======================================== */

.mtb-badge {
    flex: 1 1 0;
    min-width: 110px;
    width: auto;
    max-width: 100%;
    min-height: clamp(58px, 7vh, 70px);
    height: auto;
    flex-shrink: 1;
    /* Use explicit colors that won't be affected by dark mode */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    border-top: 3px solid rgba(25, 127, 140, 1) !important;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: clamp(8px, 1vw, 12px) clamp(8px, 1.2vw, 14px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-shadow:
        0 2px 8px rgba(25, 127, 140, 0.15),
        0 1px 3px rgba(25, 127, 140, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}

.mtb-badge::before {
    display: none;
}

.mtb-badge:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(25, 127, 140, 0.25),
        0 2px 8px rgba(25, 127, 140, 0.15) !important;
    border-top-color: rgba(25, 127, 140, 1) !important;
    background: rgba(255, 255, 255, 1) !important;
}

.mtb-badge:hover::before {
    display: none;
}

/* ========================================
   ICON STYLES
======================================== */

.mtb-badge-icon {
    flex-shrink: 0 !important;
    width: clamp(24px, 2.8vw, 30px) !important;
    height: clamp(24px, 2.8vw, 30px) !important;
    min-width: clamp(24px, 2.8vw, 30px) !important;
    min-height: clamp(24px, 2.8vw, 30px) !important;
    max-width: clamp(24px, 2.8vw, 30px) !important;
    max-height: clamp(24px, 2.8vw, 30px) !important;
    border-radius: 6px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 1.4vw, 18px) !important;
    /* Use explicit colors that won't be affected by dark mode */
    background: rgba(25, 127, 140, 0.1) !important;
    color: rgba(25, 127, 140, 1) !important;
    box-shadow: 0 2px 6px rgba(25, 127, 140, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    visibility: visible !important;
    opacity: 1 !important;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}

.mtb-badge-icon i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: clamp(12px, 1.4vw, 18px) !important;
    /* Prevent dark mode from affecting icon color */
    color: rgba(25, 127, 140, 1) !important;
}

.mtb-badge:hover .mtb-badge-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(25, 127, 140, 0.15) !important;
    box-shadow: 0 3px 10px rgba(25, 127, 140, 0.3) !important;
}

/* All icons use teal background - with !important to override dark mode */
.mtb-badge-1 .mtb-badge-icon {
    background: rgba(25, 127, 140, 0.1) !important;
    color: rgba(25, 127, 140, 1) !important;
}

.mtb-badge-2 .mtb-badge-icon {
    background: rgba(25, 127, 140, 0.1) !important;
    color: rgba(25, 127, 140, 1) !important;
}

.mtb-badge-3 .mtb-badge-icon {
    background: rgba(25, 127, 140, 0.1) !important;
    color: rgba(25, 127, 140, 1) !important;
}

.mtb-badge-4 .mtb-badge-icon {
    background: rgba(25, 127, 140, 0.1) !important;
    color: rgba(25, 127, 140, 1) !important;
}

/* ========================================
   CONTENT STYLES
======================================== */

.mtb-badge-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    position: relative;
    z-index: 10;
    gap: 2px;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
}

.mtb-badge-title {
    font-size: clamp(10px, 1.2vw, 16px) !important;
    font-weight: 700;
    /* Use explicit color that won't be affected by dark mode */
    color: rgba(25, 127, 140, 1) !important;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: left;
    white-space: pre-line;
    display: block;
    overflow: visible;
    max-width: 100%;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}

.mtb-badge-title br {
    display: block;
    margin: 0;
    line-height: 0.8;
}

.mtb-badge-subtitle {
    font-size: clamp(10px, 1.2vw, 16px) !important;
    font-weight: 700;
    /* Use explicit color that won't be affected by dark mode */
    color: rgba(25, 127, 140, 1) !important;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: left;
    white-space: normal;
    overflow: visible;
    max-width: 100%;
    display: block;
    /* Prevent dark mode from affecting colors */
    color-scheme: light;
}

/* Hide subtitle when empty */
.mtb-badge-subtitle:empty {
    display: none !important;
}

/* Adjust badge height for two-line titles and subtitle */
.mtb-badge-1,
.mtb-badge-3,
.mtb-badge-4 {
    min-height: clamp(58px, 7vh, 70px);
    height: auto;
}

.mtb-badge-2 {
    min-height: clamp(58px, 7vh, 70px);
    height: auto;
}

/* ========================================
   LAYOUT: HORIZONTAL (DEFAULT)
======================================== */

.mtb-layout-horizontal .mtb-badges-container {
    flex-direction: row;
}

.mtb-layout-horizontal .mtb-badge {
    flex: 1 1 0;
    min-width: 110px;
    max-width: 150px;
    width: auto;
    flex-shrink: 1;
}

/* ========================================
   LAYOUT: GRID (2x2)
======================================== */

.mtb-layout-grid .mtb-badges-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow: visible;
}

.mtb-layout-grid .mtb-badge {
    flex: 1 1 0;
    min-width: 110px;
    width: auto;
    max-width: 100%;
    min-height: 58px;
    flex-shrink: 1;
}

/* ========================================
   LAYOUT: COMPACT
======================================== */

.mtb-layout-compact .mtb-badge {
    flex: 1 1 0;
    min-width: 110px;
    width: auto;
    max-width: 100%;
    min-height: 58px;
    padding: 8px 8px;
    gap: 6px;
    flex-shrink: 1;
}

.mtb-layout-compact .mtb-badge-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

.mtb-layout-compact .mtb-badge-title {
    font-size: 10px !important;
}

.mtb-layout-compact .mtb-badge-subtitle {
    font-size: 10px !important;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Large Desktop (1200px+) - Same as base */
@media (min-width: 1200px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        max-width: 1200px;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        min-width: 160px;
        max-width: 200px;
        flex-shrink: 1;
    }
    
    .mtb-badge-title {
        font-size: clamp(13px, 1.5vw, 18px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(13px, 1.5vw, 18px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(26px, 3vw, 32px) !important;
        height: clamp(26px, 3vw, 32px) !important;
        min-width: clamp(26px, 3vw, 32px) !important;
        min-height: clamp(26px, 3vw, 32px) !important;
        max-width: clamp(26px, 3vw, 32px) !important;
        max-height: clamp(26px, 3vw, 32px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(13px, 1.5vw, 18px) !important;
    }
    
    .mtb-badge {
        padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px) !important;
    }
}

/* Tablet Landscape (1024px to 1199px) - Same as base */
@media (min-width: 1024px) and (max-width: 1199px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        min-width: 150px;
        max-width: 180px;
        flex-shrink: 1;
    }
    
    .mtb-badge-title {
        font-size: clamp(12px, 1.4vw, 16px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(12px, 1.4vw, 16px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(24px, 2.8vw, 30px) !important;
        height: clamp(24px, 2.8vw, 30px) !important;
        min-width: clamp(24px, 2.8vw, 30px) !important;
        min-height: clamp(24px, 2.8vw, 30px) !important;
        max-width: clamp(24px, 2.8vw, 30px) !important;
        max-height: clamp(24px, 2.8vw, 30px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(12px, 1.4vw, 16px) !important;
    }
    
    .mtb-badge {
        padding: clamp(10px, 1.1vw, 13px) clamp(10px, 1.3vw, 16px) !important;
    }
}

/* Tablet Portrait (768px to 1023px) - Same as base */
@media (min-width: 768px) and (max-width: 1023px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        min-width: 110px;
        max-width: 140px;
        flex-shrink: 1;
    }
    
    .mtb-badge-title {
        font-size: clamp(11px, 1.8vw, 13px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(11px, 1.8vw, 13px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(22px, 3.5vw, 26px) !important;
        height: clamp(22px, 3.5vw, 26px) !important;
        min-width: clamp(22px, 3.5vw, 26px) !important;
        min-height: clamp(22px, 3.5vw, 26px) !important;
        max-width: clamp(22px, 3.5vw, 26px) !important;
        max-height: clamp(22px, 3.5vw, 26px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(11px, 1.8vw, 13px) !important;
    }
    
    .mtb-badge {
        padding: clamp(9px, 1.5vw, 12px) clamp(9px, 1.8vw, 13px) !important;
    }
}

/* Mobile (below 768px) - Same as base */
@media (max-width: 767px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        display: flex !important;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        flex-shrink: 1;
        min-width: 100px;
        width: auto;
        max-width: 100%;
    }
    
    .mtb-badge-title {
        font-size: clamp(10px, 2.2vw, 13px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(10px, 2.2vw, 13px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(20px, 4vw, 24px) !important;
        height: clamp(20px, 4vw, 24px) !important;
        min-width: clamp(20px, 4vw, 24px) !important;
        min-height: clamp(20px, 4vw, 24px) !important;
        max-width: clamp(20px, 4vw, 24px) !important;
        max-height: clamp(20px, 4vw, 24px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(10px, 2.2vw, 13px) !important;
    }
    
    .mtb-badge {
        padding: clamp(8px, 1.5vw, 11px) clamp(8px, 1.8vw, 12px) !important;
        min-height: clamp(58px, 7vh, 65px) !important;
    }
}

/* Small Mobile (below 480px) - Same as base */
@media (max-width: 480px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        display: flex !important;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        flex-shrink: 1;
        min-width: 100px;
        width: auto;
        max-width: 100%;
        min-height: clamp(65px, 8vh, 85px) !important;
    }
    
    .mtb-badge-title {
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(20px, 4.5vw, 24px) !important;
        height: clamp(20px, 4.5vw, 24px) !important;
        min-width: clamp(20px, 4.5vw, 24px) !important;
        min-height: clamp(20px, 4.5vw, 24px) !important;
        max-width: clamp(20px, 4.5vw, 24px) !important;
        max-height: clamp(20px, 4.5vw, 24px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }
    
    .mtb-badge {
        padding: clamp(8px, 1.8vw, 10px) clamp(8px, 2vw, 11px) !important;
        min-height: clamp(55px, 6.5vh, 62px) !important;
    }
}

/* Extra Small Mobile (below 360px) - Same as base */
@media (max-width: 360px) {
    .mtb-badges-container {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        display: flex !important;
    }
    
    .mtb-badge {
        flex: 1 1 0;
        flex-shrink: 1;
        min-width: 80px;
        width: auto;
        max-width: 100%;
        min-height: clamp(60px, 8vh, 80px) !important;
    }
    
    .mtb-badge-title {
        font-size: clamp(9px, 2.2vw, 11px) !important;
    }
    
    .mtb-badge-subtitle {
        font-size: clamp(9px, 2.2vw, 11px) !important;
    }
    
    .mtb-badge-icon {
        width: clamp(18px, 4vw, 22px) !important;
        height: clamp(18px, 4vw, 22px) !important;
        min-width: clamp(18px, 4vw, 22px) !important;
        min-height: clamp(18px, 4vw, 22px) !important;
        max-width: clamp(18px, 4vw, 22px) !important;
        max-height: clamp(18px, 4vw, 22px) !important;
    }
    
    .mtb-badge-icon i {
        font-size: clamp(9px, 2.2vw, 11px) !important;
    }
    
    .mtb-badge {
        padding: clamp(7px, 1.5vw, 9px) clamp(7px, 1.8vw, 10px) !important;
        min-height: clamp(52px, 6vh, 58px) !important;
    }
}

/* ========================================
   ALTERNATIVE STYLES (Optional)
======================================== */

/* ========================================
   ANIMATIONS
======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mtb-badge {
    animation: fadeInUp 0.5s ease forwards;
}

.mtb-badge:nth-child(1) {
    animation-delay: 0.1s;
}

.mtb-badge:nth-child(2) {
    animation-delay: 0.2s;
}

.mtb-badge:nth-child(3) {
    animation-delay: 0.3s;
}

.mtb-badge:nth-child(4) {
    animation-delay: 0.4s;
}

/* ========================================
   ACCESSIBILITY
======================================== */

.mtb-badge:focus-within {
    outline: 3px solid #946D43;
    outline-offset: 3px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .mtb-badge,
    .mtb-badge-icon,
    .mtb-badge::before {
        transition: none;
        animation: none;
    }
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    .mtb-badge {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }

    .mtb-badge-icon {
        background: #ffffff !important;
        print-color-adjust: exact;
    }
}

/* ========================================
   DARK MODE OVERRIDE - PRESERVE COLORS
   Force light appearance for all badge elements
======================================== */

@media (prefers-color-scheme: dark) {
    .mtb-trust-badges,
    .mtb-badges-container,
    .mtb-badge,
    .mtb-badge-icon,
    .mtb-badge-title,
    .mtb-badge-subtitle {
        color-scheme: light !important;
    }

    .mtb-badge {
        background: rgba(255, 255, 255, 0.95) !important;
        border-top-color: rgba(25, 127, 140, 1) !important;
        box-shadow: 0 2px 8px rgba(25, 127, 140, 0.15) !important;
    }

    .mtb-badge:hover {
        background: rgba(255, 255, 255, 1) !important;
        border-top-color: rgba(25, 127, 140, 1) !important;
        box-shadow: 0 4px 16px rgba(25, 127, 140, 0.25) !important;
    }

    .mtb-badge-icon {
        background: rgba(25, 127, 140, 0.1) !important;
        color: rgba(25, 127, 140, 1) !important;
        box-shadow: 0 2px 6px rgba(25, 127, 140, 0.2) !important;
    }

    .mtb-badge-icon i {
        color: rgba(25, 127, 140, 1) !important;
    }

    .mtb-badge:hover .mtb-badge-icon {
        background: rgba(25, 127, 140, 0.15) !important;
        box-shadow: 0 3px 10px rgba(25, 127, 140, 0.3) !important;
    }

    .mtb-badge-title,
    .mtb-badge-subtitle {
        color: rgba(25, 127, 140, 1) !important;
    }

    .mtb-badge-1 .mtb-badge-icon,
    .mtb-badge-2 .mtb-badge-icon,
    .mtb-badge-3 .mtb-badge-icon,
    .mtb-badge-4 .mtb-badge-icon {
        background: rgba(25, 127, 140, 0.1) !important;
        color: rgba(25, 127, 140, 1) !important;
    }
}