/* ==========================================================================
   Great Dubai - "more" buttons
   ==========================================================================
   Load More / See More / View More / View All turned up in at least nine
   different costumes across the modules: .btn.btn-primary.btn-lg.clrbtn (a
   129x48 gradient slab with 20px/400 text), .btn.btn-theme-light.rounded,
   .new-btn-blog, .btn-more, .exact-pill-btn, .btn--common, and a few bare
   <button> elements with no class at all.

   They are all the same control, so they all get the same look: the home
   page's "View more" pill, which is itself the card CTA's gradient.

     44px tall, 0 24px padding, 10px radius
     linear-gradient(135deg, #7c3dae, #2e4bbd 52%, #0164b6)
     #fff, 13px / 700, 1px lift on hover

   Everything is !important because the legacy rules are too (Bootstrap's
   .btn-lg alone would win on font-size).
   ========================================================================== */

#load-more,
#loadMore,
#loadMoreBtn,
#load-more-btn,
#see-more-button,
[data-next-page],
.btn-more,
.new-btn-blog,
.new-btn-index,
.new-btn-category,
.new-btn-1.new-btn-11,
a.btn.btn-theme-light.rounded,
button.btn.btn-theme-light.rounded,
.btn.gbtn.btn-lg,
.btn--common.btn--primary,
.exact-pill-btn,
.gd-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #7c3dae 0%, #2e4bbd 52%, #0164b6 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px -10px rgba(124, 61, 175, 0.6) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}

/* the legacy markup often nests the label in a span that carried its own colour */
#load-more > *,
#loadMore > *,
#loadMoreBtn > *,
#see-more-button > *,
[data-next-page] > *,
.btn-more > *,
.new-btn-blog > *,
a.btn.btn-theme-light.rounded > *,
.btn.gbtn.btn-lg > *,
.gd-more-btn > * {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

#load-more:hover,
#loadMore:hover,
#loadMoreBtn:hover,
#load-more-btn:hover,
#see-more-button:hover,
[data-next-page]:hover,
.btn-more:hover,
.new-btn-blog:hover,
.new-btn-index:hover,
.new-btn-category:hover,
.new-btn-1.new-btn-11:hover,
a.btn.btn-theme-light.rounded:hover,
button.btn.btn-theme-light.rounded:hover,
.btn.gbtn.btn-lg:hover,
.btn--common.btn--primary:hover,
.exact-pill-btn:hover,
.gd-more-btn:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -10px rgba(124, 61, 175, 0.72) !important;
}

#load-more:focus-visible,
#loadMore:focus-visible,
#loadMoreBtn:focus-visible,
#see-more-button:focus-visible,
[data-next-page]:focus-visible,
.btn-more:focus-visible,
.btn.gbtn.btn-lg:focus-visible,
.gd-more-btn:focus-visible {
  outline: 2px solid #7c3dae !important;
  outline-offset: 2px !important;
}

#load-more[disabled],
#loadMore[disabled],
#loadMoreBtn[disabled],
#see-more-button[disabled],
[data-next-page][disabled],
.btn-more[disabled],
.gd-more-btn[disabled] {
  opacity: 0.55 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* A block-level variant keeps its width - only the skin changes. */
#load-more.btn-block,
#load-more.w-100,
#load-more.full-width,
[data-next-page].btn-block,
[data-next-page].w-100,
[data-next-page].full-width,
.btn.btn-theme-light.rounded.full-width {
  width: 100% !important;
}

@media (max-width: 575.98px) {
  #load-more,
  #loadMore,
  #loadMoreBtn,
  #load-more-btn,
  #see-more-button,
  [data-next-page],
  .btn-more,
  .new-btn-blog,
  .new-btn-index,
.new-btn-index,
  .new-btn-category,
  .new-btn-1.new-btn-11,
  a.btn.btn-theme-light.rounded,
  button.btn.btn-theme-light.rounded,
  .btn.gbtn.btn-lg,
  .btn--common.btn--primary,
  .exact-pill-btn,
.gd-more-btn {
    min-height: 40px !important;
    padding: 0 20px !important;
    font-size: 12.5px !important;
  }
}