/* ============================================
   WIDGET: STATE-WISE GOLD PRICE TABLE (Frame 38)
   Expandable state rows revealing city sub-rows
   ============================================ */

/* ---- Outer white card ---- */
.gst-card {
  background-color: #ffffff;
  border: 2px solid #f1f1f1;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
}

section.gst-card.listingPg {
    margin-bottom: 40px;
}

.goldDesciption {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}
.goldDesciption p{

color: #000;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 175% */
}
/* ---- Header block ---- */
.gst-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.gst-header__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #000000;
  margin: 0;
  word-break: break-word;
}

.gst-header__subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #898989;
  margin: 0;
}

/* ---- Table wrapper — plain container, NO overflow ---- */
.gst-table-wrapper {
  width: 100%;
}

/* ---- Table rows container ---- */
.gst-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ---- Header row: [scroll-cells] + [fixed toggle] ---- */
.gst-header-row {
  display: flex;
  align-items: stretch;
  background-color: #f6f6f6;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
}

.gst-header-row .gst-cell {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  padding: 13px 20px;
}

/* ---- State item (wrapper for trigger row + expanded panel) ---- */
.gst-state-item {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f6f6f6;
}

/* ---- State trigger row: [scroll-cells] + [fixed toggle] ---- */
.gst-state-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: #f6f6f6;
  transition: background-color 0.15s ease;
}
 
.gst-state-row:hover, .gst-cell--toggle:hover{
  background-color: #eee;
}
 .gst-state-row:hover .gst-cell--toggle {
  background-color: #eee;
}

/* ---- Scrollable inner cells wrapper ---- */
/* Wraps State + Price cells; overflows horizontally */
.gst-row-cells {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar — scroll is synced via JS */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gst-row-cells::-webkit-scrollbar {
  display: none;
}

/* ---- Shared cell base ---- */
.gst-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  white-space: nowrap;
  padding: 13px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.gst-cell a {
    color: #000000;
}

/* State name cell — fixed width, semibold */
.gst-cell--state {
  width: 150px;
  font-weight: 600;
}

/* Karat price cells — equal width */
.gst-cell--price {
  min-width: 130px;
  flex: 1 0 130px;
  font-weight: 400;
}

/* Toggle cell — fixed outside the scroll container, always visible */
.gst-cell--toggle {
  width: 70px;
  flex-shrink: 0;
  padding: 11px 20px;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle left shadow to separate from scrolling content */
  /* box-shadow: -3px 0 6px rgba(0,0,0,0.06); */
}

/* ---- Expand toggle button ---- */
.gst-toggle-btn {
  width: 24px;
  height: 24px;
  background-color: #d71920;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  padding: 0;
}

.gst-toggle-btn svg {
  width: 14px;
  height: 14px;
  fill: #ffffff;
  transition: transform 0.25s ease;
  display: block;
}

/* Rotate chevron when open */
.gst-state-item--open .gst-toggle-btn svg {
  transform: rotate(180deg);
}

/* ---- Expanded cities panel ---- */
.gst-cities-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background-color: #efefef;
}

.gst-state-item--open .gst-cities-panel {
  max-height: 600px;
}
.gst-cities-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease;
}

.gst-cities-panel.gst-open{
    overflow:hidden;
}
/* ---- Cities inner content ---- */
.gst-cities-inner {
  padding: 10px 0;
  padding-left: 30px;
    padding-right: 80px;
}

/* ---- Single city row: [scroll-cells] + [fixed last price] ---- */
.gst-city-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #d5d5d5;
}

.gst-city-row:last-child {
  border-bottom: none;
}

/* ---- Scrollable part of city row (name + 14/18/22 carat) ---- */
.gst-city-row-cells {
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gst-city-row-cells::-webkit-scrollbar {
  display: none;
}

/* City name — matches state column width */
.gst-city-row__name {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  width: 200px;
  flex-shrink: 0;
  padding: 12px 20px;
  box-sizing: border-box;
  white-space: nowrap;
}
.gst-city-row__name a{color: #000000;}


/* Price cells inside scroll wrapper */
.gst-city-row__price {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  white-space: nowrap;
  min-width: 165px;
  flex: 1 0 165px;
  text-align: center;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed last price (24 carat) — always visible on the right */
.gst-city-row__price--last {
  flex-shrink: 0;
  min-width:180px;
  padding: 12px 8px;
  background-color: #efefef;
  /* box-shadow: -3px 0 6px rgba(0,0,0,0.06); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  white-space: nowrap;
}

/* ==== DESKTOP ONLY (>=992px): align city columns with state columns ====
   .gst-city-row__name / .gst-city-row__price used different widths and
   padding than .gst-cell--state / .gst-cell--price, and .gst-cities-inner
   added an extra 30px left offset the state row doesn't have -- together
   these made city data drift out from under the state data above it.
   This block only re-declares sizing/padding to match; it doesn't touch
   or remove any existing rule, and it's scoped to 992px+ so tablet
   (<=991px) and mobile behavior are completely unaffected. */
@media (min-width: 992px) {
  .gst-cities-inner {
    padding-left: 0;
  }
  .gst-city-row-cells {
    flex: 1;
    width: 100%;
  }
  /* State name: was center-aligned (inherited from the shared .gst-cell
     rule), which made long names overflow the fixed 150px box equally on
     both sides — i.e. bleeding LEFT past the shared column edge. Left-
     aligning keeps every name's starting x identical regardless of length. */
  .gst-cell--state {
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gst-city-row__name {
    box-sizing: border-box;
    width: 170px;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gst-city-row__price,
  .gst-city-row__price--last {
    box-sizing: border-box;
    width: 130px;
    min-width: 130px;
    flex: 1 0 130px;
    padding: 13px 20px;
  }
  .blankkk {
    flex: 0 0 70px;
    width: 70px;
  }
}

/* ---- Show More button ---- */
.gst-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background-color: #d71920;
  border: none;
  border-radius: 10px;
  font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #ffffff;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.gst-show-more:hover {
  background-color: #b5151b;
}


.widgt-stateTable-desiciption{
  width: 100%;
  height: auto;
  margin: 40px 0px;
}

.widgt-stateTable-desiciption p{
 color: #000;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 175% */
}

.gst-card.mainState-GoldP {
    margin-top: 24px;
}
.ddpInput {
    width: 100%;
    margin-right: 15px;
    display: grid;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
/* ============================================
   RESPONSIVE: Tablet (≤768px)
   ============================================ */

    

@media (max-width: 1180px) {
   
.gst-state-row:hover {
  background-color: transparent;
}
}



@media screen and (orientation:landscape)
and (min-device-width: 520px) 
and (max-device-width: 1090px) {
     .gst-state-item--open .gst-cities-panel {
        width: 100%;
        max-width: 100%;
    }

.gst-header-row {
width: 100%;
}
.gst-state-row {
width: 100%;
}
.gst-state-item--open .gst-cities-panel {
width: 100%;
max-width: 100%;
}
.gst-cities-panel {
width: 100%;
max-width: 100%;
}

.gst-city-row__name {
width: 120px;
}

.gst-city-row-cells {
width: 100%;
}

}

.ddpSbtn {
    width: calc(100% - 205px);
}
@media (max-width: 991px) {
.ddpInput {width: calc(100% - 156px);}
.ddpSbtn {width: calc(100% - 185px);}
.gst-city-row {padding: 0 0px 10px 0px;}
.gst-city-row__name {width: 70px;white-space: normal;}
/* .gst-city-row {min-width: 660px;} */
.gst-city-row__price {
    min-width: 130px;
    flex: 1 0 130px;
}


.gst-cities-inner {
    padding-right: 50px;
}

    .gst-city-row__name {
        margin-right: 60px;
    }

.gst-city-row__price.gst-city-row__price--last {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.02);
}

.gst-cities-inner .gst-city-row {
    padding-bottom: 0px;
}

}


@media (max-width: 820px) {
       .gst-city-row__name {
        margin-right: 60px;
    }

    .gst-city-row {
        padding: 0 10px 10px 0px;
    }
 .gst-row-cells {
    min-width: 500px;}


  }



@media (max-width: 790px) {
       .gst-city-row__name {
       margin-right: 0;
    padding: 10px 8px
    }

      .gst-city-row {
        padding: 0 50px 10px 0px;
    }

  }


@media (max-width: 768px) {
  .gst-header__title  { font-size: 20px; line-height: 28px; }
  .gst-header__subtitle { font-size: 15px; }

  /* .gst-header-row .gst-cell { font-size: 13px; justify-content: left; padding-left: 10px;} */
  .gst-cell--state    { width: 120px; }

  .gst-row-cells {
   width: 100%;
padding-left: 0px;
}

.gst-header-row {
    overflow: visible;
}

    .gst-cell--price {
        background-color: #f6f6f6;
    }


  .gst-cities-inner   { padding: 14px 20px 14px 30px; }
  .gst-city-row__name { font-size: 16px; }
  .gst-city-row__price { font-size: 15px; }
  .gst-header-row .gst-cell.gst-cell--toggle {
             width: auto;
        padding-right: 29px;
  }

 
  .gst-card.mainState-GoldP {
    margin-top: 20px;
}


.gst-header-row .gst-cell {
    font-size: 14px;
}

.gst-card.mainState-GoldP .gst-header__subtitle {
    color: #898989;
}

.widgt-stateTable-desiciption{
  margin: 20px 0px;
}
  
  .gst-city-row-cells {
width: 100%;
}

    .gst-city-row__name {
        width: 130px;
    }

}



/* ============================================
   RESPONSIVE: Mobile (≤480px)
   ============================================ */
@media (max-width: 767px) {
  .ddpbtn {width:100%}
  .gst-card           { padding: 14px; gap: 16px; }
  .gst-cell           { font-size: 13px; padding: 10px 8px; }
  
  .gst-cell--toggle   { width: 50px; padding: 10px 8px; }
  .gst-cities-inner   { padding: 14px 0px 14px 20px; }
  .gst-city-row__price { font-size: 13px; }
    .gst-cell--toggle {
        display: block;
    }

    span.blankkk {
    width: 52px;
    flex: 0 0 52px;
}


    .gst-city-row__price {
        min-width: 95px;
        flex: 1 0 95px;
    }
    .gst-table {overflow-x: scroll;}
    .gst-state-item {overflow: visible;}

.gst-cell--price {
  min-width: auto;
  flex: 1 0 auto;
} 



.gst-city-row {
        padding: 0 0px 10px 0px;
    }

        .gst-cities-inner .gst-city-row {
        padding-bottom: 0px;
    }

}





@media (max-width: 520px) {

 .gst-header-row {
    width: 360px;
    width: fit-content;
}

 .gst-state-row {width: fit-content;}

 .gst-state-item--open .gst-cities-panel {
        width: fit-content;
        max-width: max-content;
    }
    
.gst-cities-panel {
    width: fit-content;
    max-width: max-content;
}

  .gst-city-row__name {
        font-size: 14px;
        padding-left: 10px;
        width: 125px;
    }


  }

div.peticon_price_cont .ppc-dt {
    width: calc(100% - 0px);
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
}

.peticon_price_cont .ppc {
    width: auto;
}

.peticon_price_cont .p_dt {
    width: auto;
}


.dropDownMenu1 {
    width: auto;
}

@media (max-width: 767px) {
  .ddpSbtn {width: 100%;flex-wrap: nowrap;column-gap: 10px;align-items: center;}
  .ddpSbtn .ddpInput {width: 100%;margin-right: 0px;margin-bottom: 5px;column-gap: 10px;}
  .ddpbtn {width: 41px; width: 148px;margin-top: 0;}
  .dropDownMenu1 {margin-bottom: 0px;}
  .gst-cell--toggle:hover{background-color: #f6f6f6;}
  .gst-state-row:hover .gst-cell--toggle {background-color: #f6f6f6;}
}



.commoditytype {
    position: relative;
}

.commoditytype:before {
    content: "";
    position: absolute;
    right: 10px;
    border: solid #5E5E5E;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
}

.gst-cell.gst-cell--state a {
    color: #0000ff;
}

.gst-city-row__name a {
    color: #0000ff;
}

/* ============================================
   MOBILE: ONE SCROLL FOR THE WHOLE TABLE
   The TABLE WRAPPER is the single horizontal scroller and the table
   is one fixed-width block. Every row is forced to the SAME width, so
   the header, all state rows and the currently-open city list scroll
   together in lockstep. Collapsed panels stay clipped & inert, so the
   cities of other (closed) states never slide into view.
   ============================================ */
@media (max-width: 767px) {

  /* The single horizontal scroller */
  .gst-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gst-table-wrapper::-webkit-scrollbar { display: none; }

  /* Table = one block as wide as its content; it is NOT the scroller */
  .gst-table {
    overflow-x: visible;
    width: max-content;
    min-width: 100%;
  }

  /* Every section spans the full table width => identical widths =>
     no row drifts and no closed row can bleed in from the side */
  .gst-header-row,
  .gst-state-item,
  .gst-state-row,
  .gst-cities-inner,
  .gst-city-row {
    width: 100%;
    min-width: 100%;
    max-width: none;
    overflow: visible;            /* never clip the frozen cells */
  }

  /* Inner cell wrappers are NOT their own scrollers anymore */
  .gst-row-cells,
  .gst-city-row-cells {
    overflow: visible;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Collapsed panels are fully REMOVED on mobile (display:none). This is
     the only method every browser honors — iOS Safari does NOT reliably
     clip a position:sticky descendant with overflow:hidden or
     visibility:hidden, which is why other states' cities kept bleeding in
     (on both the left name side and the right price side) during scroll.
     Only the open panel is rendered, so nothing else can appear. */
  .gst-cities-panel {
    display: none;
    width: 100%;
    min-width: 100%;
  }
  .gst-state-item--open .gst-cities-panel {
    display: block;
    overflow: visible;
    visibility: visible;
    max-height: none;
  }

  .gst-cities-inner { padding-left: 0; padding-right: 0; }

  /* Uniform column widths so columns line up across every row */
  .gst-cell--state           { flex: 0 0 150px; width: 150px; }
  .gst-cell--price           { flex: 0 0 110px; width: 110px; min-width: 110px; }
  .gst-city-row__name        { flex: 0 0 150px; width: 150px; }
  .gst-city-row__price       { flex: 0 0 110px; width: 110px; min-width: 110px; }
  .gst-city-row__price--last { flex: 0 0 110px; width: 110px; min-width: 110px; }
  .gst-header-row .gst-cell.gst-cell--toggle,
  .gst-state-row  .gst-cell.gst-cell--toggle {
    flex: 0 0 52px; width: 52px; padding-left: 8px; padding-right: 8px;
  }

  /* ---- Line up the state name with the city names underneath it ----
     .gst-cell--state was being center-justified (inherited from the
     shared .gst-cell rule) while .gst-city-row__name is left-aligned,
     and the two had slightly different left padding. Forcing identical
     alignment + padding here makes the city names sit directly under
     the state name once the accordion opens, regardless of text length
     or exact screen width. */
  .gst-cell--state {
    justify-content: flex-start;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
  }
  .gst-city-row__name {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ---- FREEZE the name column on the LEFT ---- */
  .gst-cell--state {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: #f6f6f6;              /* opaque so cells pass under */
  }
  .gst-state-item--open .gst-city-row__name {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: #efefef;
    margin-right: 0;
  }

  /* Shadow is minor and only appears once the table has actually been
     scrolled horizontally (class toggled by JS on .gst-table-wrapper) —
     no shadow at rest, a subtle one once scrolling starts. Mobile only. */
  .gst-table-wrapper.gst-scrolled .gst-cell--state,
  .gst-table-wrapper.gst-scrolled .gst-state-item--open .gst-city-row__name {
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.12);
  }

  /* The toggle is intentionally NOT sticky/fixed on the right anymore —
     it used to snap to the visible right edge while its row scrolled
     underneath it, which made it overlap/cut off whichever price cell
     happened to sit there (the bug in the screenshot). Now it simply
     scrolls in normal flow after the last price cell, exactly like the
     blank spacer at the end of each city row, so state rows and city
     rows scroll and line up identically. */
  .gst-header-row .gst-cell.gst-cell--toggle,
  .gst-state-row  .gst-cell.gst-cell--toggle {
    background-color: #f6f6f6;
  }
}
@media (max-width:575px) {
  .ddpSbtn .ddpInput {grid-template-columns: repeat(1, 1fr);margin-bottom: 10px;}
  .ddpSbtn {flex-wrap: wrap;}
  .ddpbtn {width: 100%;}
  .dropDownMenu1:last-child {margin-bottom: 5px;} 
}