/* 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;
    }

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

    .preciousuite-contact-panel {
        flex-direction: column;
        align-items: start;
    }
}

@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;
    }

    .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;
    }

    .preciousuite-dashboard-shell,
    .preciousuite-dashboard-shell.jicg-settings-wrap {
        grid-template-columns: 260px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "nav main"
            "nav sidebar" !important;
    }

    .preciousuite-dashboard-nav {
        grid-area: nav !important;
    }

    .preciousuite-dashboard-main {
        grid-area: main !important;
    }

    .preciousuite-dashboard-sidebar:not(.preciousuite-dashboard-sidebar.preciousuite-support-sidebar) {
        grid-area: sidebar !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !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-shell .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;
    }
}

/* Moved from precioussuite assets admin.css */
@media (max-width: 960px) {

    .precioussuite-layout,
    .precioussuite-support-grid {
        grid-template-columns: 1fr;
    }

    .precioussuite-product {
        flex-direction: column;
    }

    .precioussuite-product-actions {
        align-items: flex-start;
    }
}

@media (max-width: 1280px) {

    .preciousuite-gold-price .preciousuite-wrapper,
    .jicg-settings-wrap {
        grid-template-columns: 1fr !important;
    }

    .preciousuite-gold-price .preciousuite-ads,
    .jicg-premium-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .preciousuite-gold-price .preciousuite-ads {
        position: static;
    }
}

@media (max-width: 900px) {

    .preciousuite-gold-price #preciousuite-container,
    .jicg-premium-body {
        grid-template-columns: 1fr !important;
    }

    .preciousuite-gold-price #preciousuite-container> :not(.preciousuite-tabs),
    .jicg-premium-form,
    .preciousuite-gold-price .preciousuite-tabs,
    .jicg-settings-wrap h2.nav-tab-wrapper.preciousuite-tabs {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static !important;
    }

    .preciousuite-gold-price .preciousuite-fields-wrapper,
    .preciousuite-gold-price .preciousuite-info-grid,
    .preciousuite-gold-price .preciousuite-widgets-fields-wrapper,
    .preciousuite-gold-price .preciousuite-ads,
    .jicg-premium-sidebar {
        grid-template-columns: 1fr !important;
    }

    .preciousuite-gold-price .preciousuite-header {
        display: grid !important;
    }

    .preciousuite-gold-price .preciousuite-buyback-form .form-table tr {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1400px) {

    .preciousuite-dashboard-shell,
    .preciousuite-dashboard-shell.jicg-settings-wrap {
        grid-template-columns: 260px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "nav main"
            "nav sidebar" !important;
    }

    .preciousuite-dashboard-nav {
        grid-area: nav !important;
    }

    .preciousuite-dashboard-main {
        grid-area: main !important;
    }

    .preciousuite-dashboard-sidebar:not(.preciousuite-dashboard-sidebar.preciousuite-support-sidebar) {
        grid-area: sidebar !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

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

    .preciousuite-support-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {

    .preciousuite-dashboard-shell,
    .preciousuite-dashboard-shell.jicg-settings-wrap {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "nav"
            "main"
            "sidebar" !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;
        grid-column: auto;
    }

    .preciousuite-dashboard-sidebar {
        grid-template-columns: 1fr;
    }

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

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

    .preciousuite-task-row {
        grid-template-columns: 22px minmax(0, 1fr);
    }

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

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

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

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

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

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

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

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

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

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

@media (max-width: 900px) {
    .preciousuite-dashboard-shell {
        display: flex !important;
        flex-direction: column !important;
    }

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

    .preciousuite-dashboard .preciousuite-info-grid,
    .preciousuite-gold-price .preciousuite-info-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .preciousuite-dashboard .preciousuite-info-card,
    .preciousuite-gold-price .preciousuite-info-card {
        padding: 16px !important;
        gap: 12px !important;
    }
}