/*
Theme Name: Spike Business Child
Template: spike-business
Version: 1.45
*/

/* === Utility ======================================================== */
.hidden{display:none;}

.hidden{
   display:none !important;
}

/*** home */

.brands-logos img{
	filter: grayscale(1);
    opacity: 50%;
}


/*** carousel slider */


.vp-carousel {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-block: 2rem;

}

.swiper-wrapper {
  cursor: grab;
}

.swiper-wrapper * {
  cursor: inherit;
}

.vp-slide {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto !important;  
  gap: 1.75rem;
  background: #f6f6f6;
  padding: 1em;
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
}
.vp-slide:active {
  cursor: grabbing;
}
.vp-title {
  font: 600 1rem/1.2 sans-serif;
  text-align: center;
  margin: 0;
  color: #333;
}

.svg-object-wrapper {
  width: 80%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*cursor: grab;*/
  /*user-select: none;*/
  -webkit-user-drag: none;
}

.vp-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /*user-select: none;*/
  /*-webkit-user-drag: none;*/
  pointer-events: none;
}

.swiper-button-next,
.swiper-button-prev {
  color: #1B49BA;
}

.swiper-pagination-bullet-active {
  background: #1B49BA;
}

  .modal        { display: none; }
  .modal.is-open { display: block; }

  /* purely cosmetic –- helps you see the dialog */
  .modal__overlay   { position: fixed; inset: 0; background: rgba(0,0,0,.6); }
  .modal__container { max-width: 26rem; margin: 10% auto; padding: 1.5rem; background:#fff; border-radius: .25rem; }

/* ----------  Micro-modal overlay fixes  ----------------- */

/* dark glass behind dialog */
.modal__overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.70);      /* darker → stronger separation */
    display:flex; justify-content:center; align-items:start; /*if center unable to select close button on screen with narrow height*/
    overflow-y:auto;                 /* dialog can scroll if it’s tall */
    z-index:10000;                   /* above everything */
}

/* white card */
.modal__container{
    background:#fff;
    border-radius:20px;
    max-width:860px;
    /*width:100%;*/
    box-shadow:0 8px 40px rgba(0,0,0,.25);
    overflow:hidden;                 /* keeps button flush with edges */
    padding: 45px;
    align-items: center;
}


/*modal__icon and modal__features make them responsive to smaller screens*/

.modal__icon, .modal__desc-container{
	flex: 1 1 0;
}


.modal__close:hover,
.modal__close:focus{color:#000;}

.modal__content{
    display: flex;
    flex-wrap: wrap;
	gap: 30px;
}

/* title */
.modal__title{
    margin:0; font:700 2rem/1.2 var(--wp--preset--font-family--system, sans-serif); flex: 1 1 100%; text-align:center;
}

.modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: larger;
}

.modal__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.modal__footer {
    display: flex;
    margin-top: 25px;
}
.modal__header .modal__close:before {
    content: "\2715";
}

/* SVG + description block */
.modal__icon{ width:100%; max-width:200px; margin:1.5rem auto 1rem; display:block; }
.modal__desc{ font-size:1.2rem; line-height:1.6; font-weight: 500; }
#modal-features{ margin:1.5rem auto 1rem; font-size:1rem;}
#modal-features ul{padding-left:1.25rem;}

/* CTA button always full-width */
.modal__btn{
    display:block; width:100%; text-align:center;
    padding:.9rem 1rem;
    font-weight:600; font-size:1rem;
    color:#fff; background:#1655c9;
    border:0; text-decoration:none;
    transition:background .15s ease;
    border-radius:100px;
}
.modal__btn:hover,
.modal__btn:focus{background:#0f47ad;}

/* --- FINAL MOBILE FIX FOR TRADE MODAL (NO BLACK BAR, FULLSCREEN) --- */
@media (max-width: 768px) {

  /* Stretch overlay so modal fills screen */
  .micromodal-slide[aria-hidden="false"] .modal__overlay {
    align-items: stretch !important;
  }

  /* Make modal container full height */
  #trade-modal .modal__container,
  .micromodal-slide[aria-hidden="false"] .modal__container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 20px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: white !important;
  }

  /* Scroll content inside the modal */
  #trade-modal .modal__body,
  #trade-modal .modal__content {
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 260px) !important; /* <-- new adjusted height */
  }

  /* Raise Start Your Journey button */
  #trade-modal .modal__footer,
  #trade-modal .modal__actions,
  #trade-modal .modal__cta {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Prevent text from overflowing horizontally */
  #trade-modal .modal__content * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}


  /* Feature list spacing fix */
  #modal-features {
    margin-top: 1rem !important;
  }
}