.pricing {

   margin: 0;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url('../images/1backgroundblue.png') no-repeat center center/cover;
   font-family: Arial, sans-serif;
   font-size: 14px;
   color: #fff;
 }

 .input-group input {
   width: 100%;
   box-sizing: border-box;

 }

 .input-group {
   position: relative;
   /* for positioning suggestions */
   margin-right: 10px;
 }

 .total-price {
   text-align: center;
   margin-bottom: 0.2rem;
 }

 /* space between inputs */
 .suggestions {
   position: absolute;
   /* make it overlay */
   top: 100%;
   /* position right below the input */
   left: 0;
   width: 100%;
   background: #fff;
   /* solid white background */
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 0 0 5px 5px;
   color: #000;
   /* dark text */
   z-index: 1000;
   /* keep it above content */
   box-sizing: border-box;
   max-height: 216px;
   /* 6 items * 36px each */
   overflow-y: auto;
   display: none;
 }

 .suggestion-item {
   padding: 8px 12px;
   cursor: pointer;
   background: #fff;
   /* solid white for items too */
   color: #000;
   height: 36px;
   line-height: 36px;
 }

 .suggestion-item:hover {
   background: #f0f0f0;
   /* highlight on hover */
 }

 .suggestion-item:hover {
   background: #e0e0e0;
   color: #333;
 }

 .input-group input:focus+.suggestions,
 .input-group .suggestions:has(.suggestion-item) {
   display: block;
 }

 .glass-container {
   margin-top: 5rem;
   margin-bottom: 3rem;
   width: 1260px;
   max-width: 90%;
   height: auto;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
   padding: 2rem;
   border: 1px solid rgba(255, 255, 255, 0.3);
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }

 /* -------- TOP SECTION ---------- */
 .top-section,
 .top-section-login {
   text-align: center;
 }

 .top-section h1 .top-section-login h1 {
   margin: 0;
   font-size: 22px;
   font-weight: 600;
 }

 .search-bar {
   margin: 1rem 0;
   display: flex;
   justify-content: center;
   gap: 1rem;
 }

 .search-bar input {
   padding: 8px 12px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.15);
   color: #fff;

 }

 .search-bar button {
   height: 36px;
   padding: 8px 16px;
   border: none;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.7);
   color: #000;
   cursor: pointer;
   font-weight: 600;
 }

 .top-section p .top-section-login p {
   font-size: 12px;
   margin-top: 0.5rem;
 }

 .top-section a {
   color: #5ab9ff;
   text-decoration: none;
   font-weight: 600;
 }

 .search-bar input::placeholder {
   color: rgb(255, 255, 255);
   /* white with 60% opacity */

 }

 /* -------- BOTTOM SECTION ---------- */
 .bottom-section {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 3fr;
   gap: 4rem;
   align-items: start;
 }

 /* option button groups */
 .repair-options {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .repair-options button {
   padding: 10px;
   border-radius: 6px;
   border: none;
   background: rgba(255, 255, 255, 0.25);
   color: #fff;
   cursor: pointer;
   font-weight: 500;
 }

 /* middle image */
 .phone-preview {
   text-align: center;
 }

 .phone-preview img {
   width: 180px;
   display: block;
   margin: 0 auto;
 }

 .phone-preview p {
   margin-top: 0.5rem;
   font-size: 13px;
 }

 /* right details */
 .repair-details h2 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .repair-details ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .repair-details li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   
   font-size: 13px;
 }
.repair-description-p {
       color: #8e8e8e;
    font-size: 0.8rem;
    /* margin-top: 0px; */
    margin-bottom: 0.8rem;
 }
 .price {
   background: none;
   border: 2px solid rgba(255, 255, 255, 0.2);
   cursor: pointer;
   padding: 8px 16px;
   border-radius: 6px;
   margin-left: 2rem;
   white-space: nowrap;
 }

 .price:hover {
   background: rgba(255, 255, 255, 0.062);
 }

 .shop-group.rtype-btn.active {
   background: rgba(183, 255, 185, 0.45);
 }

 .rtype_description{
      font-size: 0.8rem;
    margin-top: 2rem;
 }

 /* bottom right button */
 .save-btn {
   margin-top: 5rem;
   display: flex;
   justify-content: flex-end;
 }

 .save-btn button {
   padding: 10px 20px;
   border-radius: 6px;
   border: none;
   background: #fff;
   color: #000;
   cursor: pointer;
   font-weight: 600;
 }

 .save-btn button[type="button"]:hover {
   background: #c7c7c7;
 }

 .save-btn button[type="button"]:active {
   background: #7c7c7c;
 }


 .shop-action.add.active {
   background: rgba(255, 255, 255, 0.2);

 }

 @media (max-width: 768px) {
   .bottom-section {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .save-btn {
     justify-content: center;
   }

   .phone-preview img {
     width: 120px;
     order: 0;
   }

   .repair-options {
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     gap: 0.5rem;
     order: 1;
   }

   .repair-options button {
     flex: 1 1 40%;
     max-width: 100%;
     min-height: 35px;
     font-size: 12px;
     padding: 8px;
   }

   .repair-details {
     order: 2;
   }



   .search-bar {
     flex-direction: column;
     gap: 0.5rem;
   }

   .glass-container {
     max-width: 410px;
     width: 100%;
     height: 100%;
   }
 }