/* ==========================================================================
   Generic theme (Miami-ready)
   - Dark gray base (no bg image)
   - Top-bar only (no sidebar)
   - Gentle rounded components
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

/* ---- Core palette (defaults; overridden by inline vars in head.twig) ---- */
:root {
  --color-bg: #181818 !important;
  --color-brighter-bg: #202020 !important;

  --color-text: #f2f2f2 !important;
  --color-text-secondary: #c4c4c4 !important;

  /* primary defaults; inline style later can override these */
  --color-primary: #41C4C3;
  --color-primary-hover: #36aead;
  --color-primary-text: #0b0b0b;
  --color-primary-text-hover: var(--color-primary-text);

  /* secondary defaults to a neutral */
  --color-secondary: #3a3a3a;
  --color-secondary-hover: #4a4a4a;
  --color-secondary-text: var(--color-text);
  --color-secondary-text-hover: var(--color-text);

  --color-tertiary: transparent;
  --color-tertiary-hover: rgba(255,255,255,0.12);
  --color-tertiary-text: var(--color-text);
  --color-tertiary-text-hover: var(--color-text);
  
    /* min 980px, fluid up to 92vw, but never exceed 1480px (tweak the 3 numbers) */
  --page-max: clamp(980px, 92vw, 1700px);
  /* fluid side padding: 16px → 32px as screen grows */
  --content-pad: clamp(16px, 3vw, 32px);
}

/* ---- Base ---- */
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--color-bg) !important;
  color: var(--color-text);
}

/* Remove legacy page-hero overlay image */
body::before {
  content: none !important;
  background: none !important;
}

/* ========================================================================== */
/* Buttons & micro UI                                                         */
/* ========================================================================== */
.btn-primary,
.btn-secondary,
.btn-tertiary { border-radius: 2px; }

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus {
  box-shadow: 0 0 6px rgb(from var(--btn-color-bg-hover) r g b / 0.6);
}

.quantity-field { border-radius: 5px; }

/* ========================================================================== */
/* Header odds & ends (safe defaults; a custom theme like neon.css can override) */
/* ========================================================================== */
.site-header-inner .info .image { border-radius: 5px; }
.site-header-inner .user-name ul li { overflow: hidden; }
.site-header-inner .user-name ul li:first-child {
  border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.site-header-inner .user-name ul li:last-child {
  border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
}

/* Ensure brand logo looks right even without neon.css */
.miami-logo { height: 40px; width: auto; object-fit: contain; border-radius: 6px; }

.site-footer {
  position: relative;
  background: var(--mint-bg2);
  color: var(--mint-text2);
  padding: 40px 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100%;
  background: var(--mint-bg2);
  z-index: -1; /* ide iza sadržaja */
}

.site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}



/* ========================================================================== */
/* Panels, widgets, lists                                                     */
/* ========================================================================== */
.site-sale-banner { border-radius: 5px; }

.site-home-categories .category {
  border-radius: 5px;
  padding: 20px var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: color .15s ease-in-out;
}
.site-home-categories .category:hover { color: var(--color-primary); }

.category-description { border-radius: 5px; background: var(--color-brighter-bg); }

.store-text {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-text h1, .store-text h2, .store-text h3,
.store-text h4, .store-text h5, .store-text h6 { text-align: center; }

.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-products-images .store-product { text-align: center; }

.widget-title { text-align: center; }
.widget .store-product { text-align: center; }

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border-radius: 5px;
}

.store-product-full { border-radius: 5px; background: var(--color-brighter-bg); }

.store-product .quantity-field {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type="number"] { border: none; }

/* ========================================================================== */
/* Navigation look (rounded dropdowns)                                        */
/* ========================================================================== */
@media (width > 960px) { .navigation-horizontal > ul { border-radius: 5px; } }
.navigation-horizontal .has-children > ul { border-radius: 5px; }

/* ========================================================================== */
/* Widgets & popups                                                           */
/* ========================================================================== */
.widget { border-radius: 5px; background: var(--color-brighter-bg); }
@media (width <= 960px) {
  .widget.site-navigation { border-radius: 0; background: transparent; }
}

.widget-gift-card .gift-card-input { border-radius: 2px; }
.widget-top-donator .avatar { border-radius: 50%; }

.widget-community-goal .progress,
.widget-goal .progress { border-radius: 2px; }
.widget-community-goal .progress-bar,
.widget-goal .progress-bar { border-radius: 2px; }

.popup-content { border-radius: 5px; }
.popup-close { border-radius: 0 5px 0 5px; }
.basket-popup-content,
.basket-popup-content .popup-close { border-radius: 0; }

.basket-items { padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding)); }
.basket-item { border-radius: 5px; }
.basket-item .quantity { border-radius: 2px; }

.toast { border-radius: 6px; }
.toast-close { border-radius: 2px; }

/* ========================================================================== */
/* Tiered layout & media slider                                               */
/* ========================================================================== */
.store-category-tiered { border-radius: 5px; background: var(--color-brighter-bg); }

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 { text-align: center; }

.store-product-tiered { border-radius: 5px; background: rgb(from var(--color-bg) r g b / .5); }

.media-slider .slider, .media-slider .thumb { border-radius: 5px; }
.media-slider .open-lightbox { border-radius: 2px; }

.popup.popup-media-slider .thumb { border-radius: 5px; }
.popup.popup-media-slider .popup-close { border-radius: 5px; }

/* ========================================================================== */
/* TOP BAR ONLY — Remove sidebar & fix grid                                   */
/* ========================================================================== */
.store-sidebar,
.widget.site-navigation { display: none !important; }

.site-content-widgets {
  display: grid !important;
  grid-template-columns: 1fr !important;  /* single column */
  gap: var(--widget-padding) !important;
}
body.is-sidebar-right .site-content-widgets { grid-template-columns: 1fr !important; }

/* Make all remaining children span full width */
.site-content-widgets > *:not(.store-sidebar) {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}

.nav-wide,
.hero-inner,
.features-inner,
.site-content {
  max-width: var(--page-max) !important;
  padding-left: var(--content-pad) !important;
  padding-right: var(--content-pad) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}