/* =============================================
   Majmua Premium Banner Slider – Public CSS
   ============================================= */

/* ---------- CSS Variables ---------- */
:root {
    --mbs-gold:       #c8a96e;
    --mbs-gold-light: #e8c98a;
    --mbs-gold-dark:  #a07840;
    --mbs-white:      #ffffff;
    --mbs-dark:       #111111;
    --mbs-radius:     0px;
    --mbs-transition: 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    --mbs-arrow-size: 52px;
    --mbs-font-head:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --mbs-font-body:  'Jost', 'Montserrat', sans-serif;
}

/* ---------- Google Fonts (self-loading) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Jost:wght@300;400;500&display=swap');

/* ---------- Wrapper ---------- */
.mbs-slider-wrapper {
    position:    relative;
    width:       100%;
    overflow:    hidden;
    height:      var(--mbs-desktop-h, 800px);
    background:  #0a0a0a;
    user-select: none;
}

/* ---------- Track ---------- */
.mbs-slides-track {
    position: relative;
    width:    100%;
    height:   100%;
}

/* ---------- Individual Slide ---------- */
.mbs-slide {
    position:   absolute;
    inset:      0;
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--mbs-transition), visibility var(--mbs-transition);
    will-change: opacity;
}

.mbs-slide.mbs-active {
    opacity:    1;
    visibility: visible;
    z-index:    2;
}

/* Slide transition — zoom */
.mbs-slider-wrapper.mbs-transition-zoom .mbs-slide .mbs-bg-img {
    transform:  scale(1.0);
    transition: transform 6s ease-out;
}
.mbs-slider-wrapper.mbs-transition-zoom .mbs-slide.mbs-active .mbs-bg-img {
    transform: scale(1.06);
}

/* Slide transition — slide */
.mbs-slider-wrapper.mbs-transition-slide .mbs-slide {
    transform:  translateX(100%);
    opacity:    1;
    visibility: hidden;
    transition: transform var(--mbs-transition), visibility 0s var(--mbs-transition);
}
.mbs-slider-wrapper.mbs-transition-slide .mbs-slide.mbs-active {
    transform:  translateX(0);
    visibility: visible;
}
.mbs-slider-wrapper.mbs-transition-slide .mbs-slide.mbs-leaving {
    transform: translateX(-100%);
}

/* ---------- Background Image ---------- */
.mbs-bg-picture {
    position: absolute;
    inset:    0;
    display:  block;
    width:    100%;
    height:   100%;
}
.mbs-bg-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
}

/* ---------- Overlay ---------- */
.mbs-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,calc(var(--overlay-opacity,0.5) + 0.1)) 0%,
        rgba(0,0,0,var(--overlay-opacity,0.5))              50%,
        rgba(5,3,1,calc(var(--overlay-opacity,0.5) - 0.05)) 100%
    );
    z-index:    1;
}

/* ---------- Gold Decorative Line ---------- */
.mbs-gold-line {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     3px;
    background: linear-gradient(90deg, transparent, var(--mbs-gold), var(--mbs-gold-light), var(--mbs-gold), transparent);
    z-index:    10;
}

/* ---------- Content ---------- */
.mbs-content {
    position:       absolute;
    inset:          0;
    z-index:        5;
    display:        flex;
    align-items:    center;
    padding:        0 80px;
}

.mbs-align-center { justify-content: center; text-align: center; }
.mbs-align-left   { justify-content: flex-start; text-align: left; }
.mbs-align-right  { justify-content: flex-end; text-align: right; }

.mbs-content-inner {
    max-width: 760px;
}

/* Animate content in when slide becomes active */
.mbs-slide.mbs-active .mbs-content-inner {
    animation: mbs-content-in 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
@keyframes mbs-content-in {
    from { opacity:0; transform: translateY(24px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Eyebrow / subheading */
.mbs-eyebrow {
    font-family:    var(--mbs-font-body);
    font-size:      clamp(11px, 1.2vw, 14px);
    font-weight:    400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color:          var(--mbs-gold);
    margin:         0 0 16px;
    display:        flex;
    align-items:    center;
    gap:            12px;
}
.mbs-align-center .mbs-eyebrow { justify-content: center; }
.mbs-align-right  .mbs-eyebrow { justify-content: flex-end; }
.mbs-eyebrow::before,
.mbs-eyebrow::after {
    content:    '';
    display:    block;
    width:      40px;
    height:     1px;
    background: var(--mbs-gold);
    flex-shrink:0;
}
.mbs-align-left .mbs-eyebrow::before { display:none; }
.mbs-align-right .mbs-eyebrow::after { display:none; }

/* Heading */
.mbs-heading {
    font-family:  var(--mbs-font-head);
    font-size:    clamp(34px, 5.5vw, 76px);
    font-weight:  300;
    line-height:  1.08;
    color:        var(--mbs-white);
    margin:       0 0 28px;
    text-shadow:  0 2px 40px rgba(0,0,0,0.4);
    letter-spacing: -0.01em;
    font-size: 50px !important;
}
@media (max-width: 600px) {
.mbs-heading {
    font-size: 30px !important;}
}

/* CTA Button */
.mbs-cta-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        14px 36px;
    background:     transparent;
    border:         1.5px solid var(--mbs-gold);
    color:          var(--mbs-white);
    font-family:    var(--mbs-font-body);
    font-size:      13px;
    font-weight:    400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration:none;
    transition:     background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    position:       relative;
    overflow:       hidden;
}
.mbs-cta-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--mbs-gold);
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.77,0,0.175,1);
    z-index:    0;
}
.mbs-cta-btn span,
.mbs-cta-btn svg { position:relative; z-index:1; }
.mbs-cta-btn svg { width:16px; height:16px; transition: transform 0.3s ease; }
.mbs-cta-btn:hover::before   { transform: scaleX(1); }
.mbs-cta-btn:hover           { color: var(--mbs-dark); border-color: var(--mbs-gold); }
.mbs-cta-btn:hover svg       { transform: translateX(4px); }

/* ---------- Navigation Arrows ---------- */
.mbs-arrow {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    z-index:    20;
    width:      var(--mbs-arrow-size);
    height:     var(--mbs-arrow-size);
    background: rgba(0,0,0,0.35);
    border:     1px solid rgba(200,169,110,0.4);
    color:      var(--mbs-white);
    cursor:     pointer;
    display:    flex;
    align-items:    center;
    justify-content:center;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    outline:    none;
    backdrop-filter: blur(6px);
}
.mbs-arrow svg { width:22px; height:22px; }
.mbs-arrow:hover {
    background:   rgba(200,169,110,0.85);
    border-color: var(--mbs-gold);
    transform:    translateY(-50%) scale(1.08);
}
.mbs-prev { left:  24px; }
.mbs-next { right: 24px; }

/* ---------- Dot Navigation ---------- */
.mbs-dots {
    position:       absolute;
    bottom:         28px;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        20;
    display:        flex;
    gap:            10px;
    align-items:    center;
}
.mbs-dot {
    width:      8px;
    height:     8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border:     1.5px solid transparent;
    cursor:     pointer;
    transition: all 0.35s ease;
    padding:    0;
    outline:    none;
}
.mbs-dot.mbs-active {
    background:   var(--mbs-gold);
    border-color: var(--mbs-gold-light);
    transform:    scale(1.35);
}
.mbs-dot:hover:not(.mbs-active) {
    background: rgba(255,255,255,0.7);
}

/* ---------- Trustpilot Badge — Pixel-Perfect ---------- */
.mbs-tp-badge {
    position:        absolute;
    z-index:         25;
    display:         inline-flex;
    align-items:     center;
    gap:             14px;
    padding:         11px 22px 11px 18px;
    background:      rgba(55, 52, 49, 0.88);
    border-radius:   50px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:          1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    transition:      background 0.25s ease, transform 0.25s ease;
    white-space:     nowrap;
    box-shadow:      0 4px 24px rgba(0,0,0,0.35);
}
.mbs-tp-badge:hover {
    background:  rgba(55, 52, 49, 0.98);
    transform:   translateY(-1px);
}

/* Position variants */
.mbs-tp-bottom-left   { bottom: 44px; left:  32px; }
.mbs-tp-bottom-center { bottom: 44px; left:  50%; transform: translateX(-50%); }
.mbs-tp-bottom-right  { bottom: 44px; right: 32px; }
.mbs-tp-bottom-center:hover { transform: translateX(-50%) translateY(-1px); }

/* Logo group: star icon + wordmark */
.mbs-tp-logo {
    display:     flex;
    align-items: center;
    gap:         7px;
}
.mbs-tp-logo-star {
    width:       22px;
    height:      22px;
    flex-shrink: 0;
}
.mbs-tp-wordmark {
    font-family:    'Jost', 'Montserrat', Arial, sans-serif;
    font-size:      15px;
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: -0.01em;
    line-height:    1;
}

/* Vertical divider */
.mbs-tp-divider {
    display:    block;
    width:      1px;
    height:     22px;
    background: rgba(255,255,255,0.18);
    flex-shrink:0;
}

/* 5 green star squares */
.mbs-tp-stars {
    display:     flex;
    align-items: center;
    gap:         3px;
}
.mbs-tp-star {
    width:       26px;
    height:      26px;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Rating text */
.mbs-tp-label {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-family: 'Jost', 'Montserrat', Arial, sans-serif;
    font-size:   14px;
    color:       #ffffff;
    line-height: 1;
}
.mbs-tp-label strong {
    font-weight: 700;
    font-size:   15px;
    color:       #ffffff;
}
.mbs-tp-dot {
    color:      rgba(255,255,255,0.45);
    font-size:  16px;
    line-height:1;
}
.mbs-tp-label > span:last-child {
    color:       rgba(255,255,255,0.75);
    font-weight: 400;
    font-size:   13px;
}

/* ---------- Progress Bar ---------- */
.mbs-progress-bar {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     3px;
    background: rgba(255,255,255,0.15);
    z-index:    30;
    overflow:   hidden;
}
.mbs-progress-fill {
    height:           100%;
    width:            0%;
    background:       linear-gradient(90deg, var(--mbs-gold-dark), var(--mbs-gold-light));
    animation:        mbs-progress linear infinite;
    animation-play-state: running;
    transform-origin: left;
}
@keyframes mbs-progress {
    from { width: 0%; }
    to   { width: 100%; }
}
.mbs-slider-wrapper.mbs-paused .mbs-progress-fill {
    animation-play-state: paused;
}

/* ---------- Slide Counter ---------- */
.mbs-counter {
    position:    absolute;
    bottom:      30px;
    right:       32px;
    z-index:     20;
    display:     flex;
    align-items: baseline;
    gap:         4px;
    font-family: var(--mbs-font-body);
    color:       rgba(255,255,255,0.7);
    font-size:   12px;
    letter-spacing: 0.1em;
}
.mbs-counter-current {
    font-size:  20px;
    font-weight:300;
    color:      var(--mbs-gold);
    line-height:1;
}
.mbs-counter-sep { color: rgba(255,255,255,0.3); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .mbs-slider-wrapper {
        height: var(--mbs-mobile-h, 595px) !important;
    }
    .mbs-content {
        padding:        0 24px;
        align-items:    center;
        
    }
    .mbs-align-center,
    .mbs-align-left,
    .mbs-align-right {
        justify-content: flex-start;
        text-align:      center;
    }
    .mbs-content-inner { max-width: 100%; }

    .mbs-eyebrow { font-size:10px; }
    .mbs-eyebrow::before { display:none; }

    .mbs-heading { font-size: clamp(26px, 7vw, 42px); margin-bottom:18px; }

    .mbs-cta-btn { padding:11px 24px; font-size:11px; }

    .mbs-arrow { display:none; }

    .mbs-dots { bottom:14px; }

    .mbs-tp-bottom-left,
    .mbs-tp-bottom-right  { left:50%; right:auto; transform:translateX(-50%); bottom:52px; }
    .mbs-tp-bottom-center { bottom:52px; }
    .mbs-tp-badge         { padding:9px 14px 9px 12px; gap:8px; }
    .mbs-tp-wordmark      { font-size:13px; }
    .mbs-tp-star          { width:21px; height:21px; }
    .mbs-tp-logo-star     { width:18px; height:18px; }
    .mbs-tp-label         { font-size:12px; gap:5px; }
    .mbs-tp-label strong  { font-size:13px; }
    .mbs-tp-label > span:last-child { font-size:11px; }
    .mbs-counter { bottom:18px; right:16px; }
}

/* ---------- Tablet ---------- */
@media (min-width:768px) and (max-width:1199px) {
    .mbs-content { padding:0 48px; }
    .mbs-heading  { font-size: clamp(32px, 4.5vw, 60px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mbs-slide,
    .mbs-cta-btn,
    .mbs-arrow,
    .mbs-bg-img     { transition: none !important; animation: none !important; }
    .mbs-progress-fill { display:none; }
}






















/* Fix content cutting on mobile */
@media (max-width: 767px) {
  .mbs-tp-badge {
    display: flex !important;
    flex-wrap: wrap !important;   /* KEY FIX */
    justify-content: center !important;
    gap: 6px !important;

   
    width: 100% !important;
    overflow: visible !important;
            display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
  }

  .mbs-tp-logo,
  .mbs-tp-stars,
  .mbs-tp-label {
    flex: 0 1 auto !important;
  }

  .mbs-tp-label {
    width: 100% !important;       /* push text to next line */
    text-align: center !important;
    white-space: normal !important;
  }

  .mbs-tp-divider {
    display: none !important;     /* remove dividers on small screens */
  }
}



@media (max-width: 767px) {
    .mbs-tp-label {
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        display: block !important;
    }
}