.main-section-wrapper{margin-bottom: 40px;}
.no-scroll {
    overflow: hidden;
    height: 100%;
}

.recharge-plans-container{padding: 32px;border-radius: 24px;background: #fff;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);}
.recharge-plans-title{font-size: 36px;line-height: 40px;margin-bottom: 24px;color: #1f2937;font-weight: 700;}
.recharge-plans-title.active{display: block;}
.recharge-plans-tabs{display: flex;gap: 12px;padding-bottom: 16px;margin-bottom: 32px;border-bottom: 1px solid #e5e7eb;flex-wrap: wrap;}
.recharge-plans-btns{background: #f9fafb;font-size: 16px;line-height: 24px;padding: 10px 24px;transition-duration: .2s;color: #6b7280;font-weight: 500;border-radius: 12px;cursor: pointer;border: none;}
.recharge-plans-btns.active{color: #16a34a;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);background: #f0fdf4;}

.recharge-plans-tabs_content{}
.mobile-operator-grid{display: grid;gap: 10px;grid-template-columns: repeat(3, minmax(0, 1fr));margin-bottom: 8px;align-items: flex-end;}
.grid-4{grid-template-columns: repeat(4, minmax(0, 1fr)) !important;}
.mobile-operator-grid .gb-rechrg-dropdown-selected{min-width: unset !important;padding: 12px 10px !important;}
.browse-plans-btns{transition-duration: .2s;color: #fff;font-weight: 600;padding: 15px 24px;background: #374151;border-radius: 8px;white-space: nowrap;cursor: pointer;border: none;}
.browse-plans-btns:hover{background: #1f2937;}
.recharge-plans-tabs_content{
    /* display: none; */
    position: relative;
}



.mobile-plans-container{padding: 24px;}
.gb-recharge-common-header{font-size: 24px;line-height: 32px;margin-bottom: 12px;font-weight: 700;color: #111827;}
.common-desc{color: #4b5563;margin-bottom: 24px;display: block;font-size: 16px;line-height: 24px;}
.gb-rechrg-mobile-sort {display: flex;align-items: center;gap: 12px;justify-content: flex-end;margin-bottom: 24px;}
.sort-label {font-size: 14px;color: #374151;line-height: 20px;display: block;}
.gb-rechrg-custom-dropdown {position: relative;user-select: none;}
.gb-rechrg-dropdown-selected {background: #ffffff;padding: 8px 16px;border-radius: 8px;border: 1px solid #d1d5db;display: flex;justify-content: space-between;align-items: center;cursor: pointer;min-width: 180px;}
.sel-text {font-size: 14px;line-height: 20px;font-weight: 500;color: #111827;}
.gb-rechrg-filt-arrow {font-size: 12px;transition: transform 0.3s ease;width: 16px;height: 16px;}
.gb-rechrg-filt-arrow svg {width: 16px;height: 16px;color: #6b7280;}
.gb-rechrg-dropdown-options {position: absolute;top: 120%;left: 0;width: 100%;background: #ffffff;border-radius: 8px;border: 1px solid #e5e7eb;display: none;overflow: hidden;z-index: 100;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);max-height: 300px;height: auto; overflow-y: auto !important;scrollbar-width: none;}
.gb-rechrg-custom-dropdown.active .gb-rechrg-dropdown-options {display: block;}
.option {padding: 10px 16px;cursor: pointer;font-size: 14px;color: #374151;line-height: 20px;}
.option.active {background: #629c491a;font-weight: 500;color: #629c49;}
.gb-rechrg-custom-dropdown.active .gb-rechrg-filt-arrow {transform: rotate(180deg);}
.gb-filter-rt-container .gb-rechrg-mobile-sort{justify-content: flex-start;}


.gb-mobile-plans-list{margin-bottom: 24px;}
.gb-mobile-plans-row{padding: 16px;transition-duration: .2s;background: #f9fafb;border-bottom: 1px solid #e5e7eb;}
.gb-mobile-plans-row:nth-child(odd){background: #f9fafb;}
.gb-mobile-plans-row:nth-child(even){background: #ffffff;}
.gb-mobile-plans-row:nth-child(n+7) {display: none;}
.gb-mobile-plans-data{margin-bottom: 12px;color: rgb(98, 156, 73);font-size: 12px;line-height: 16px;padding: 4px 12px;font-weight: 500;background: #eff6ff;border-radius: 9999px;display: inline-block;}
.gb-mobile-plans-dtls{display: flex;gap: 12px;align-items: center;flex-direction: row;justify-content: space-between;}
.gb-mobile-plans-dtls-lt{display: flex;gap: 32px;align-items: center;width: auto;flex: 1 1 0%;}
.comm-flex{display: flex;gap: 4px;min-width: 80px;align-items: center;flex-direction: column;}
.common-circle{width: 40px;height: 40px;border-radius: 9999px;justify-content: center;align-items: center;display: flex;}
.common-circle svg{width: 20px;height: 20px;color: #fff;display: block;vertical-align: middle;}
.airtel{background-color: rgb(237, 28, 36);}
.company-name-text{font-size: 12px;line-height: 16px;color: #1f2937;font-weight: 600;}
.plan-price-rs{font-size: 20px;line-height: 28px;color: #1f2937;font-weight: 700;}
.plan-price-text, .plan-data-text, .plan-validity-text{font-size: 12px;line-height: 16px;color: #4b5563;}
.plan-data, .plan-validity{font-size: 14px;line-height: 20px;color: #1f2937;font-weight: 700;}
.plans-dtls-moreinfo{font-size: 14px;line-height: 20px;padding: 8px 24px;width: auto;transition-duration: .2s;color: #fff;font-weight: 500;background: #374151;border-radius: 8px;cursor: pointer;border: none;}
.plans-dtls-moreinfo:hover{background: #1f2937;}
.jio{background-color: rgb(10, 40, 133);}
.bsnl{background-color: rgb(0, 102, 204);}
.gb-moreplans-block{text-align: center;}
.moreplans-btn{font-size: 16px;line-height: 24px;padding: 12px 32px;transition-duration: .2s;color: #fff;font-weight: 600;background: #374151;border-radius: 8px;cursor: pointer;border: none;}
.moreplans-btn:hover{background: #1f2937;}



.common-section-wrapper{margin-bottom: 32px;}
.gb-rechangeplans-grid{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 16px;}
.gb-rechangeplans-block{transition-duration: .3s;background: #fff;border-radius: 12px;overflow: hidden;cursor: pointer;box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);}
.gb-rechangeplans-thumb{background: #f3f4f6;overflow: hidden;aspect-ratio: 3 / 2;}
.gb-rechangeplans-thumb img{transition-duration: .3s;padding: 8px;-o-object-fit: contain;object-fit: contain;width: 100%;height: 100%;display: block;vertical-align: middle;box-sizing: border-box;}
.gb-rechangeplans-desc{padding: 12px;font-size: 14px;line-height: 20px;color: #1f2937;font-weight: 600;text-align: center;white-space: initial;}
.gb-rechangeplans-block:hover .gb-rechangeplans-thumb img{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform: translate(0,0) rotate(0) skew(0) skewY(0) scaleX(1.05) scaleY(1.05);}
.gb-rechangeplans-block:hover .gb-rechangeplans-desc{color: #16a34a;}
.gb-rechangeplans-block:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);}


.gb-dthplans-grid{display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));gap: 16px;}
.gb-dthplans-grid .gb-rechangeplans-thumb{background: #f3f4f6;}


.broadband-plan-slider-wrapper{position: relative;width: 1000px;overflow: hidden;}
.gb-broadband-plan-slider{list-style-type: none;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;scroll-behavior: smooth;padding-bottom: 8px;}
.trending-right {
    right: 5px;
}
.tradingarrow {
    width: 40px;
    height: 40px;
    background: #fff;border-radius: 9999px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    position: absolute;
    cursor: pointer;top:55px;z-index: 111;
}
.trending-left {
    left: 5px;
    display: none;
}
.gb-broadband-plan-slider .gb-rechangeplans-block{width: 160px;display: inline-block;margin-right: 28px;vertical-align: top;}
.gb-broadband-plan-slider .gb-rechangeplans-block:last-child{margin-right: 0px;}

/* FAQ */

.faq-item {background: #ffffff;border-radius: 12px;margin-bottom: 15px;overflow: hidden;border: 1px solid #e5e7eb;}
.faq-question {padding: 20px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: 600;font-size: 16px;line-height: 24px;color: #111827;}
.faq-question:hover{background: #f9fafb;}
.faq-answer {padding: 5px 20px 20px;font-size: 16px;line-height: 24px;color: #374151;display: none;}
.faq-item.active .faq-answer {display: block;}
.faq-icon {font-size: 16px;width: 20px;height: 20px;}
.faq-icon svg{color: #6b7280;}
.faq-item.active .faq-icon svg {transform: rotate(180deg);}
.gb-recharge-faq .gb-faq-container .faq-item:last-child{margin-bottom: 0px;}
.faq-icon svg {color: #6b7280;transition-duration: .2s;}

/* sidebar-css */
.gb-recharge-common-sidebar{border-radius: 16px;background: #fff;padding: 24px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);margin-bottom: 32px;}
.gb-recharge-common-sideheader{display: flex;align-items: center;gap: 12px;margin-bottom: 24px;}
.common-sidehead-icon{border-radius: 9999px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}
.green-call{background: #dcfce7;}
.common-sidehead-icon svg{width: 20px;height: 20px;display: block;}
.call-icon{color: #16a34a;}
.common-sidehead{color: #1f2937;font-size: 18px;line-height: 28px;font-weight: 700;}
.gb-recharge-common-side-list a{transition-duration: .2s;padding: 16px;background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 12px;display: block;margin-bottom: 12px;}
.gb-recharge-common-side-list a:hover{background: #f0fdf4;border: 1px solid #22c55e;}
.gd-customer-flex{display: flex;align-items: center;justify-content: space-between;}
.customer-connection{color: #1f2937;font-weight: 600;font-size: 14px;line-height: 20px;}
.customercarnum{font-size: 12px;line-height: 16px;color: #6b7280;}
.customer-car-num{color: #374151;font-weight: 700;font-size: 18px;line-height: 28px;}
.gb-recharge-common-side-list a:hover .customer-connection{color: #15803d;}
.gb-recharge-common-side-list a:hover .customer-car-num{color: #15803d;}
.gb-recharge-common-side-list a:last-child{margin-bottom: 0px;}
.blue-topics{background: #dbeafe;}
.topic-icon{color: #2563eb;}
.trending-topics-btn{transition-duration: .2s;text-align: left;padding: 12px;background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 8px;width: 100%;cursor: pointer;margin-bottom: 8px;}
.trending-topics-flex{display: flex;align-items: center;gap: 12px;}
.trending-topics-no{background: #dbeafe;border-radius: 9999px;justify-content: center;align-items: center;display: flex;flex-shrink: 0;width: 24px;height: 24px;}
.trending-topics-no span{color: #2563eb;font-weight: 700;font-size: 12px;line-height: 16px;}
.trending-topic{color: #374151;font-weight: 500;font-size: 14px;line-height: 20px;}
.trending-topics-btn:last-child{margin-bottom: 0px;}
.trending-topics-btn:hover{background: #eff6ff;border:1px solid #3b82f6;}
.trending-topics-btn:hover .trending-topic{color: #1d4ed8;}



/* page-2 */
.gb-recharge-filter-flex{display: flex;flex-direction: row;gap: 24px;margin-bottom: 40px;}
.gb-recharge-filter-lt{width: 300px;position: sticky;top: 32px;padding: 24px;background: #fff;border-radius: 16px;height: fit-content;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);}
.gb-recharge-filter-head{display: flex;align-items: center;justify-content: space-between;margin-bottom: 24px;}
.filter-head-title{color: #1f2937;font-size: 18px;line-height: 28px;font-weight: 700;}
.filter-all{    color: rgb(98, 156, 73);font-weight: 500;font-size: 14px;line-height: 20px;cursor: pointer;background: none;border: none;}
.filter-head-text{color: #374151;font-weight: 600;font-size: 14px;line-height: 20px;margin-bottom: 12px;}
.validity-search{position: relative;margin-bottom: 12px;}
.search-icon{color: #9ca3af;width: 16px;height: 16px;left: 12px;top: 11px; position: absolute;display: block;vertical-align: middle;}
.validity-search-input{font-size: 14px;line-height: 20px;padding: 8px 36px;border: 1px solid #d1d5db;width: 100%;border-radius: 8px;box-sizing: border-box;}
.gb-v-filter-content label {display: flex;align-items: center;gap: 8px;padding: 6px;cursor: pointer;font-size: 14px;line-height: 16px;color: #374151;margin-top: 8px;}
.gb-v-filter-content label span{color: #6b7280;}
.gb-v-filter-content label:hover{background: #f9fafb;}
.gb-v-max-filter-height{
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #629c49 #f1f1f1;}
    .gb-v-filter-content {
  position: relative;width: 100%;
}
/* scroll area */
.gb-v-max-filter-height {
    max-height: 180px;position: relative;
  overflow: hidden;
  padding-bottom: 40px; /* space for button */
}
.gb-filtr-more-options {
  display: none;
  margin-top: 5px;
}
/* fixed button */
.gb-v-filter-content .filtr-show-more {
  padding: 10px;
  cursor: pointer;margin-top: 0px;font-size: 14px;
  
}
.gb-v-filter-content.active {
  overflow-y: auto;
}
.filter-scroll-area.active {
  overflow-y: auto;
}
.filter-scroll-area{max-height: 180px;
  overflow: hidden; /* no scroll initially */}
  .filter-scroll-area.active {
  max-height: 180px;   /* keep fixed height */
  overflow-y: auto;    /* ✅ scroll enabled */
}
.gb-filter-valitity-block{margin-top: 15px;padding-top: 16px;border-top: 1px solid #e5e7eb;}
.gb-filter-filter-dtls{box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);padding: 24px;border-radius: 16px;background: #fff;margin-bottom: 32px;}
.gb-filter-filter-dtls .gb-recharge-common-header{margin-bottom: 16px;}
.gb-all-recharge-tabs{display: flex;flex-wrap: wrap;margin-bottom: 16px;gap: 8px;padding-bottom: 16px;border-bottom: 1px solid #e5e7eb;}
.recharge-tab{transition-duration: .2s;color: #374151;font-weight: 500;font-size: 14px;line-height: 20px;padding: 8px 16px;background: #f3f4f6;border-radius: 8px;cursor: pointer;border: none;}
.recharge-tab:hover{background: #e5e7eb;}
.recharge-tab.active{background-color: rgb(98, 156, 73);color: #fff;}
.recharge-tab.active:hover{}
.gb-recharge-filter-rt .gb-recharge-filter{justify-content: flex-start;} 


.gb-recharge-otherstate-plans table{width: 100%;border-collapse: collapse;}
.gb-recharge-otherstate-plans table tr{border-bottom: 1px solid #e5e7eb;}
.gb-recharge-otherstate-plans table tr th{background: #f9fafb;color: #374151;font-weight: 600;font-size: 14px;line-height: 20px;text-align: left;padding: 12px 16px;}
.gb-recharge-otherstate-plans table tr td{color: #1f2937;font-size: 14px;line-height: 20px;text-align: left;padding: 12px 16px;}



/* popup-css */
.gb-recharge-popup-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);display: none;justify-content: center;align-items: center;z-index: 1111;}
.popup-box {max-width: 512px;width: 100%;background: #fff;border-radius: 12px;overflow: hidden;overflow-y: auto;}
.gb-recharge-popup-head{padding: 16px;background: #b91c1c ;border-top-left-radius: 12px;border-top-right-radius: 12px;position: relative;}
.gb-recharge-popup-head-flex{display: flex;align-items: center;gap: 12px;}
.recharge-tower{font-size: 36px;line-height: 40px;}
.gb-recharge-plan-flex{display: flex;align-items: center;gap: 16px;}
.gb-recharge-plan-company{font-size: 20px;line-height: 28px;color: #fff;font-weight: 700;}
.mobile-plan-text{font-size: 14px;line-height: 20px;--tw-text-opacity: .9;color: #ffffffe6;}
.gb-recharge-plan-rt{text-align: right;}
.plan-price-text{font-size: 12px;line-height: 16px;--tw-text-opacity: .9;color: #ffffffe6;}
.plan-price-amunt{font-size: 24px;line-height: 32px;color: #fff;font-weight: 700;}
.gb-recharge-popup-close{color: #fff;padding: 6px;border-radius: 9999px;top: 8px;right: 8px;position: absolute;cursor: pointer;border: none;background: none;}
.gb-recharge-popup-close svg{width: 20px;height: 20px;}

.gb-recharge-popup-body{padding: 16px;}
.gb-recharge-popup-body-grid{display: grid;gap: 8px;grid-template-columns: repeat(2, minmax(0, 1fr));margin-bottom: 12px;}
.gb-recharge-plan-box{padding: 10px;border-radius: 8px;}
.wifibox{background: #eff6ff;border: 1px solid #bfdbfe;}
.validitybox{background: #f0fdf4;border: 1px solid #bbf7d0;}
.callsbox{background: #fff7ed;border: 1px solid #fed7aa;}
.smsbox{background: #fdf2f8;border: 1px solid #fbcfe8;}
.gb-recharge-plan-box-head{display: flex;align-items: center;gap: 8px;margin-bottom: 4px;}
.data-text{color: #374151;font-size: 12px;line-height: 16px;font-weight: 600;}
.data-icon{color: #2563eb;width: 16px;height: 16px;}
.validity-icon{color: #16a34a;width: 16px;height: 16px;}
.gb-recharge-plan-box .call-icon{color: #ea580c;width: 16px;height: 16px;}
.sms-icon{color: #db2777;width: 16px;height: 16px;}
.gb-recharge-plan-box-content{font-size: 18px;line-height: 28px;font-weight: 600;color: #111827;}
.callsbox .gb-recharge-plan-box-content{font-size: 14px;line-height: 20px;}
.smsbox .gb-recharge-plan-box-content{font-size: 14px;line-height: 20px;}
.gb-recharge-more-benifits{padding: 12px;background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 8px;margin-top: 8px;}
.more-benifits-head{display: flex;align-items: center;gap: 6px;margin-bottom: 8px;}
.more-benif-icon{color: #4b5563;width: 16px;height: 16px;display: block;}
.other-benif-text{color: #374151;font-weight: 600;font-size: 12px;line-height: 16px;}
.benifits-flex{display: flex;align-items: flex-start;gap: 8px;}
.benifits-icon{width: 12px;height: 12px;color: #6b7280;}
.benifits-list-text{color: #374151;font-size: 12px;line-height: 18px;}
.cell svg{color: #16a34a;}