/* Responsive Styles for Gold Price Based on Weight Plugin */
/* Ensures perfectly consistent UI scaling across all device categories */

/* Box sizing rule */
.preciousuite-gold-price *,
.preciousuite-gold-price *::before,
.preciousuite-gold-price *::after,
.preciousuite-wrapper *,
.preciousuite-wrapper *::before,
.preciousuite-wrapper *::after,
.preciousuite-dashboard-shell * {
  box-sizing: border-box;
}

/* Prevent images and inputs from stretching */
.preciousuite-gold-price img,
.preciousuite-wrapper img,
.preciousuite-dashboard-shell img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.preciousuite-gold-price input,
.preciousuite-gold-price select,
.preciousuite-gold-price textarea,
.preciousuite-wrapper input,
.preciousuite-wrapper select,
.preciousuite-wrapper textarea,
.preciousuite-dashboard-shell input,
.preciousuite-dashboard-shell select,
.preciousuite-dashboard-shell textarea {
  max-width: 100%;
}

/* Base resets to avoid overflow */
.preciousuite-gold-price p,
.preciousuite-gold-price h1,
.preciousuite-gold-price h2,
.preciousuite-gold-price h3,
.preciousuite-gold-price h4,
.preciousuite-gold-price h5,
.preciousuite-gold-price h6,
.preciousuite-gold-price span,
.preciousuite-gold-price div,
.preciousuite-dashboard-shell p,
.preciousuite-dashboard-shell span,
.preciousuite-dashboard-shell div,
.preciousuite-dashboard-shell h1,
.preciousuite-dashboard-shell h2,
.preciousuite-dashboard-shell h3 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================= */
/* 5. Large Desktop (1920px and above)       */
/* ========================================= */
@media screen and (min-width: 1920px) {

  .preciousuite-wrapper,
  .preciousuite-gold-price .preciousuite-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 350px !important;
    width: 100% !important;
    max-width: 1600px !important;
  }

  .preciousuite-gold-price #preciousuite-container {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    padding: 32px !important;
    /* gap: 32px !important; */
  }

  /* Grids and Fields */
  .preciousuite-fields-wrapper,
  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* gap: 24px !important; */
  }

  .preciousuite-info-grid,
  .preciousuite-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap: 24px !important; */
  }
}

/* ========================================= */
/* 4. Desktop (1440px - 1919px)              */
/* ========================================= */
@media screen and (max-width: 1919px) {

  .preciousuite-wrapper,
  .preciousuite-gold-price .preciousuite-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    width: 100% !important;
    max-width: 1400px !important;
  }

  .preciousuite-gold-price #preciousuite-container {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    padding: 24px !important;
    /* gap: 24px !important; */
  }

  /* Grids and Fields */
  .preciousuite-fields-wrapper,
  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* gap: 20px !important; */
  }

  .preciousuite-info-grid,
  .preciousuite-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap: 24px !important; */
  }
}

/* ========================================= */
/* 3. Laptop (1024px - 1439px)               */
/* ========================================= */
@media screen and (max-width: 1439px) {

  .preciousuite-wrapper,
  .preciousuite-gold-price .preciousuite-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    width: 100% !important;
    max-width: 96% !important;
  }

  .preciousuite-gold-price #preciousuite-container {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    padding: 24px !important;
    /* gap: 24px !important; */
  }

  /* Grids and Fields */
  .preciousuite-fields-wrapper,
  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap: 16px !important; */
  }

  .preciousuite-ads,
  .preciousuite-gold-price .preciousuite-ads {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* gap: 16px !important; */
  }

  .preciousuite-info-grid,
  .preciousuite-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap: 24px !important; */
  }

  #preciousuite-toolkit,
  .preciousuite-toolkit-list .preciousuite-product,
  .preciousuite-toolkit-list .preciousuite-products {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-dashboard-hero-image {
    width: 125px !important;
  }

  .preciousuite-plugin-tasks-group .preciousuite-task-table {
    overflow-x: scroll;
  }
}

@media screen and (max-width: 1365px) {

  .preciousuite-gold-price .preciousuite-info-grid,
  .preciousuite-video-tutorials .preciousuite-dashboard-grid {
    display: flex !important;
    flex-direction: column;
  }
}

@media screen and (max-width: 1280px) {
  .preciousuite-faq-section .preciousuite-faq-list {
    display: flex;
    flex-direction: column;
  }

  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: flex !important;
    flex-direction: column;
  }
}

@media screen and (max-width: 1224px) {
  .form-table .button.jicg-media-upload {
    margin-top: 10px;
  }
}

@media screen and (max-width: 1080px) {
  .preciousuite-dashboard-shell {
    flex-direction: column;
  }

  .preciousuite-dashboard-nav,
  .preciousuite-dashboard-sidebar {
    width: 100% !important;
  }

  .preciousuite-dashboard-nav nav {
    gap: 10px !important;
  }

  .preciousuite-gold-price .preciousuite-page-brand {
    margin-bottom: 0px !important;
  }
}

/* ========================================= */
/* 2. Tablet (768px - 1023px)                */
/* ========================================= */
@media screen and (max-width: 1023px) {

  /* Layout */
  .preciousuite-dashboard-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .preciousuite-dashboard-nav {
    width: 100% !important;
  }

  .preciousuite-dashboard-sidebar {
    grid-column: 1 / -1 !important;
  }

  .preciousuite-wrapper,
  .preciousuite-gold-price .preciousuite-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 96% !important;
    margin: 20px auto !important;
  }

  .preciousuite-gold-price #preciousuite-container {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) !important;
    padding: 20px !important;
  }

  /* Header and Footer */
  .preciousuite-header,
  .preciousuite-footer {
    padding: 20px 25px !important;
  }

  /* Grids and Fields */
  .preciousuite-fields-wrapper,
  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .preciousuite-ads,
  .preciousuite-gold-price .preciousuite-ads {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .preciousuite-ads-card,
  .preciousuite-gold-price .preciousuite-ads-card {
    width: 100% !important;
  }

  .preciousuite-info-grid,
  .preciousuite-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .preciousuite-dashboard-sidebar {
    width: 100% !important;
  }

  .preciousuite-support-shell {
    grid-template-columns: 1fr !important;
  }

  .form-table .button.jicg-media-upload {
    margin-top: 0px;
  }
}

/* ========================================= */
/* 1. Mobile (320px - 767px)                 */
/* ========================================= */
@media screen and (max-width: 767px) {

  /* Layout */
  .preciousuite-wrapper,
  .preciousuite-gold-price .preciousuite-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto !important;
  }

  .preciousuite-box.preciousuite-page-title {
    text-align: start;
  }

  .preciousuite-dashboard {
    padding: 24px 10px 24px 0px !important;
  }

  .preciousuite-dashboard-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .preciousuite-dashboard-nav {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ps-border) !important;
    padding-bottom: 20px !important;
  }

  .preciousuite-dashboard-sidebar {
    width: 100% !important;
  }

  .preciousuite-dashboard-main {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .preciousuite-gold-price #preciousuite-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
  }

  /* Header and Footer */
  .preciousuite-header,
  .preciousuite-footer {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 15px !important;
  }

  .preciousuite-header .preciousuite-logo img,
  .preciousuite-footer .preciousuite-logo img,
  .preciousuite-gold-price .preciousuite-header .preciousuite-logo img,
  .preciousuite-gold-price .preciousuite-footer .preciousuite-logo img {
    margin: 0 auto !important;
    max-width: 150px !important;
  }

  /* Tabs */
  .preciousuite-gold-price .preciousuite-tabs {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .preciousuite-gold-price .preciousuite-tabs .nav-tab {
    flex: 1 1 calc(50% - 10px) !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Grids and Fields */
  .preciousuite-fields-wrapper,
  .preciousuite-gold-price .preciousuite-fields-wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  .preciousuite-ads,
  .preciousuite-gold-price .preciousuite-ads {
    display: flex !important;
    flex-direction: column !important;
  }

  .preciousuite-ads-card,
  .preciousuite-gold-price .preciousuite-ads-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
  }

  .preciousuite-info-grid,
  .preciousuite-dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .preciousuite-support-page {
    padding: 24px 10px 24px 0px !important;
  }

  .preciousuite-dashboard-hero-image,
  .preciousuite-support-hero-image {
    display: none;
  }

  .preciousuite-dashboard-hero-content,
  .preciousuite-support-hero-text {
    max-width: 100% !important;
  }

  .form-table .button.jicg-media-upload {
    margin-top: 10px;
  }
}

/* ========================================= */
/* 6. Viewport Height Adjustments            */
/* ========================================= */
@media screen and (min-width: 1024px) {

  /* Vertical alignment fixes */
  .preciousuite-gold-price .preciousuite-tabs {
    align-self: start;
    position: sticky;
    top: 48px;
  }

  /* Height 700px */
  @media (min-height: 700px) and (max-height: 799px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 150px) !important;
      overflow-y: auto !important;
    }
  }

  /* Height 800px */
  @media (min-height: 800px) and (max-height: 899px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 180px) !important;
      overflow-y: auto !important;
    }
  }

  /* Height 900px */
  @media (min-height: 900px) and (max-height: 1079px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 200px) !important;
      overflow-y: auto !important;
    }
  }

  /* Height 1080px */
  @media (min-height: 1080px) and (max-height: 1199px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 220px) !important;
      overflow-y: auto !important;
    }
  }

  /* Height 1200px */
  @media (min-height: 1200px) and (max-height: 1439px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 250px) !important;
      overflow-y: auto !important;
    }
  }

  /* Height 1440px and above */
  @media (min-height: 1440px) {
    .preciousuite-gold-price .preciousuite-tabs {
      max-height: calc(100vh - 300px) !important;
      overflow-y: auto !important;
    }
  }
}

@media screen and (min-width: 768px) {
  .preciousuite-gold-price .preciousuite-form-footer {
    display: flex;
    align-items: center;
  }

  .preciousuite-gold-price .btn-submit {
    margin: 20px 0;
  }
}

@media screen and (max-width: 540px) {
  .ptgold-social-extra-list{
    overflow: scroll;
  }
}

@media screen and (max-width: 480px) {
  .preciousuite-score-header {
    flex-direction: column;
  }
}

/* Dashboard Sidebar Responsiveness */
@media (max-width: 1600px) {
  .preciousuite-dashboard-shell {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  .preciousuite-dashboard-sidebar {
    grid-column: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-width: 1100px) {
  .preciousuite-dashboard-shell {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-dashboard-sidebar {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .preciousuite-dashboard-nav {
    width: 100% !important;
  }

  .preciousuite-dashboard-grid,
  .preciousuite-insight-grid,
  .preciousuite-config-grid,
  .preciousuite-toolkit-list .preciousuite-products {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-dashboard-nav,
  .preciousuite-dashboard-sidebar {
    position: static !important;
    grid-column: auto !important;
  }

  .preciousuite-score-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "copy"
      "donut"
      "list" !important;
  }

  .preciousuite-donut {
    grid-area: donut !important;
  }

  .preciousuite-task-table-head,
  .preciousuite-task-table-row {
    grid-template-columns: minmax(200px, 1fr) 90px 100px 90px 34px !important;
  }

  .preciousuite-page-title img {
    max-width: 212px !important;
  }

  .preciousuite-task-progress,
  .preciousuite-task-row .button {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .preciousuite-faq-list,
  .preciousuite-resource-grid,
  .preciousuite-support-sidebar {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-contact-panel {
    display: grid !important;
  }

  .preciousuite-product {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-product-actions {
    align-items: flex-start !important;
  }

  .preciousuite-alert-signup div {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-notification-group {
    grid-template-columns: 1fr !important;
  }

  .preciousuite-notification-group .preciousuite-alert-heading,
  .preciousuite-notification-group .preciousuite-alert-signup,
  .preciousuite-notification-group .preciousuite-notification-row {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .preciousuite-alert-dismiss {
    position: static !important;
    margin-top: 8px !important;
  }

  .preciousuite-notification-row>div {
    padding-right: 0 !important;
  }

  .preciousuite-notification-group .preciousuite-notification-row {
    display: flex;
  }

  .preciousuite-notification-row>span:first-child {
    display: none;
  }
}

/* Mobile Task Table Responsiveness */
@media (max-width: 768px) {
  .preciousuite-task-table-head {
    display: none !important;
  }

  .preciousuite-task-table-row {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 16px 16px 16px 42px !important;
    gap: 8px 16px !important;
    align-items: center !important;
  }

  .preciousuite-task-title {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .preciousuite-task-status {
    left: 14px !important;
    top: 24px !important;
    transform: none !important;
  }

  .preciousuite-task-priority,
  .preciousuite-task-duration,
  .preciousuite-task-pill {
    flex: 0 0 auto !important;
  }

  .preciousuite-task-chevron {
    display: none !important;
  }
}
