/* Shared responsive safety layer for Silver Star Agencies pages. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

button,
a {
  touch-action: manipulation;
}

.site-header {
  max-width: 100vw;
  min-width: 0;
}

.site-brand,
.logo,
.header h1,
.hero h1,
h1,
h2,
h3,
p,
li,
a,
button,
label,
span,
td,
th {
  overflow-wrap: anywhere;
}

.site-brand {
  min-width: 0;
}

.header-actions,
.header-nav {
  min-width: 0;
  flex-wrap: wrap;
}

.header-actions a,
.header-nav a {
  white-space: nowrap;
}

.sidebar {
  max-width: 86vw;
}

.sidebar-nav a {
  min-width: 0;
}

.sidebar-label,
.sidebar-nav a span:not(.sidebar-icon) {
  min-width: 0;
}

.main,
main,
.container,
.layout,
.auth-wrapper,
.register-box,
.section,
.card,
.package-card,
.product-card,
.header,
.hero,
.panel {
  max-width: 100%;
}

.container,
.main,
main {
  width: 100%;
}

.cards,
.packages-grid,
.ads-grid,
.top-actions,
.grid,
.stats-grid,
.actions-grid,
.package-grid,
.dashboard-grid,
.form-grid,
.market-strip,
.trade-bottom {
  min-width: 0;
}

.card,
.package-card,
.ad-card,
.section,
.panel,
.product-card,
.amount-card,
.trade-card,
.market-box {
  min-width: 0;
}

.table-wrapper,
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

footer {
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

footer a {
  color: #facc15;
  text-decoration: none;
  font-weight: 700;
}

body > .sidebar + .main {
  margin-left: 0 !important;
  width: 100% !important;
}

#tradingViewWidget,
#tradingViewWidget iframe,
.tradingview-widget-container,
.chart-stage,
.chart-shell {
  max-width: 100%;
}

@media (max-width: 900px) {
  .site-header {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-brand {
    font-size: clamp(15px, 4.2vw, 19px);
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions a,
  .header-nav a {
    padding: 8px 9px;
    font-size: 13px;
  }

  .main,
  main,
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cards,
  .packages-grid,
  .ads-grid,
  .top-actions,
  .grid,
  .stats-grid,
  .actions-grid,
  .package-grid,
  .dashboard-grid,
  .market-strip,
  .trade-bottom {
    grid-template-columns: 1fr !important;
  }

  .ref-box,
  .search-box,
  .table-controls,
  .wa-calc {
    flex-direction: column;
    align-items: stretch;
  }

  .ref-box input,
  .search-box input,
  .table-controls select {
    min-width: 0;
    width: 100%;
  }

  .chart-shell {
    min-height: 420px;
  }

  table {
    min-width: 0 !important;
    table-layout: fixed;
  }

  th,
  td {
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 600px) {
  .menu-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .header-actions a:not(.header-logout):not(.header-profile):not(.header-settings),
  .header-nav a:not(:first-child) {
    display: none;
  }

  .header-actions svg {
    width: 18px;
    height: 18px;
  }

  .header,
  .hero,
  .section,
  .card,
  .panel,
  .package-body,
  .product-card,
  .register-box {
    padding-left: 14px;
    padding-right: 14px;
  }

  h1,
  .header h1,
  .hero h1 {
    font-size: clamp(22px, 8vw, 30px) !important;
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(18px, 6vw, 24px) !important;
    line-height: 1.2;
  }

  p,
  li,
  label,
  input,
  select,
  textarea,
  button,
  a {
    font-size: 14px;
  }

  .btn,
  .buy-btn,
  .download-btn,
  .register-btn,
  .action-btn {
    width: 100%;
    min-height: 44px;
  }

  footer {
    padding: 20px 14px !important;
    font-size: 13px !important;
    line-height: 1.6;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 0 !important;
    table-layout: fixed;
  }

  th,
  td {
    padding: 10px 8px !important;
    white-space: normal;
    word-break: break-word;
    font-size: 12px;
  }

  table .btn,
  table button,
  td .btn,
  td button {
    width: auto;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
    margin: 2px 0;
  }

  .chart-shell {
    min-height: 360px;
  }
}

@media (max-width: 420px) {
  .main,
  main,
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-brand {
    font-size: 15px;
  }

  .header-actions a,
  .header-nav a {
    padding: 7px;
  }

  .sidebar {
    width: 86vw;
    left: -88vw;
  }

  .sidebar.active {
    left: 0;
  }
}