@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.formMain {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pledge-card {
    margin: 0 auto; /* ensures horizontal centering */
    max-width: 470px;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 25px 20px 0;
    color: #000;
    background: url("./img/Asset 1@3x.png") no-repeat center center / cover;
    overflow: visible !important;
    margin-left: auto;
    margin-right: auto;
}



 /* Header */
 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
 }

 .header-left {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .blue-circle {
     width: 35px;
     height: 35px;
     border: 4px solid #004aad;
     border-radius: 50%;
     margin-bottom: 6px;
 }

 .header-left h6 {
     font-size: 15px;
     font-weight: 600;
     margin: 0;
     color: #000;
 }

 .header-left h6 span {
     color: #4a90e2;
 }

 .header-left span {
     font-size: 12px;
     color: #004aad;
 }

 .header-right {
     display: flex;
     flex-direction: column;
     text-align: center;
     font-weight: 700;
     color: #004aad;
     font-size: 16.5px;
     line-height: 1.2;
     letter-spacing: 0.3px;
     padding-right: 8px;
 }

 .header-right span {
     display: block;
 }

 .header-right span:nth-child(2) {
     align-self: center;
 }

 .upload-circle {
     margin: 25px auto 20px;
     border: 1.8vw solid #4a90e2;
     width: 52vw;
     height: 52vw;
     max-width: 285px;
     max-height: 285px;
     min-width: 180px;
     min-height: 180px;
     border-radius: 50%;
     background-color: rgba(233, 243, 252, 0.7);
     position: relative;
     overflow: hidden;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #000;
     font-weight: 600;
     text-align: center;
     transition: all 0.3s ease;
 }

 /* Same size after download */
 .upload-circle.expanded {
     width: 52vw;
     height: 52vw;
     max-width: 285px;
     max-height: 285px;
     border-width: 1.8vw;
 }

 .upload-img-wrapper {
     width: 100%;
     height: 100%;
     clip-path: circle(50% at 50% 50%);
     overflow: hidden;
     position: absolute;
     inset: 0;
 }

 .upload-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .upload-circle:hover {
     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
 }

 .upload-circle input[type="file"] {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     cursor: pointer;
     z-index: 2;
 }

 .quote-box {
     position: relative;
     border-left: 6px solid #004aad;
     border-radius: 10px;
     background: transparent;
     padding: 30px 35px 45px;
     margin: 40px 0 30px;
     text-align: left;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 .quote-box,
 .final-preview {
     max-width: 85%;
     margin-left: auto;
     margin-right: auto;
 }

 /* ✅ Quote Box (before download & JPEG output) */
 .quote-box,
 .final-preview {
     position: relative;
     border-left: 6px solid #004aad;
     border-radius: 12px;
     background: transparent;
     padding: 30px 35px 45px;
     margin: 40px auto 30px;
     text-align: left;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     max-width: 85%;
 }

 /* ✅ Responsive tweak for small screens */
 @media (max-width: 480px) {

     .quote-box,
     .final-preview {
         padding: 24px 25px 40px;
         border-left-width: 5px;
         max-width: 90%;
     }
 }

 .quote-box input,
 .quote-box select {
     border: none;
     background: transparent;
     width: 100%;
     font-weight: 700;
     font-size: 17px;
     color: #000;
     margin-bottom: 12px;
     outline: none;
 }

 .quote-box input,
 .quote-box select {
     background: transparent !important;
     color: #000 !important;
     -webkit-text-fill-color: #000 !important;
     box-shadow: 0 0 0px 1000px transparent inset !important;
 }

 .quote-box input:-webkit-autofill,
 .quote-box select:-webkit-autofill {
     transition: background-color 9999s ease-in-out 0s;
     -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
     -webkit-text-fill-color: #000 !important;
 }

 /* ✅ Download Button */
 .download-btn {
     position: absolute;
     left: 50%;
     bottom: -28px;
     transform: translateX(-50%);
     background: #fff;
     border: 1px solid #000;
     border-radius: 25px;
     padding: 8px 40px;
     font-weight: 600;
     font-size: 15px;
     color: #000;
     cursor: pointer;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     transition: all 0.3s ease;
 }

 .download-btn:hover {
     background: #004aad;
     color: #fff;
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
 }

 /* ✅ Footer (Logo Bar) */
 .logo-bar {
     background: #fff;
     margin: 40px -20px 0;
     display: flex;
     justify-content: space-around;
     align-items: center;
     border-top: none;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 18px 0;
     flex-wrap: nowrap;
 }

 /* ✅ Fixed, consistent logo sizing */
 .logo-bar img {
     height: 85px;
     width: auto !important;
     object-fit: contain;
     vertical-align: middle;
     flex-shrink: 0;
     image-rendering: -webkit-optimize-contrast;
     transform: none !important;
     filter: brightness(1.1) contrast(1.1);
 }

 /* smaller 4th logo adjust only slightly */
 .logo-bar img:last-child {
     height: 75px;
 }


 @media (max-width: 480px) {
     .logo-bar img {
         height: 70px;
     }

     .logo-bar img:last-child {
         height: 60px;
     }
 }

 /* ✅ Preview Styling */
 .final-preview .name {
     color: #004aad;
     font-weight: 700;
 }

 .final-preview .designation {
     color: #e60000;
     font-weight: 600;
 }

 .final-preview .pledge {
     color: #000;
     font-weight: 500;
 }

 /* ✅ Responsive Fixes */
 @media (max-width: 1024px) {
     .pledge-card {
         max-width: 90%;
     }

     .logo-bar img {
         width: 22%;
         height: 85px;
     }

     .logo-bar img:last-child {
         width: 19%;
         height: 65px;
         transform: scale(0.93);
     }
 }

 @media (max-width: 768px) {
    
    .pledge-card {
        max-width: 85%;
        padding: 20px 15px 0 15px;
        margin: 0 auto;
    }
    
     .pledge-card {
         padding: 20px 15px 0 15px;
     }

     .upload-circle {
         width: 185px;
         height: 185px;
         border-width: 8px;
     }

     .quote-box {
         padding: 25px 20px 45px;
     }

     .quote-box input,
     .quote-box select {
         font-size: 15px;
     }

     .download-btn {
         bottom: -22px;
         padding: 6px 30px;
         font-size: 14px;
     }

     .logo-bar {
         justify-content: space-around;
         gap: 8px;
         /* padding: 12px; */
     }

     .logo-bar img {
         height: 85px;
     }

     .logo-bar img:last-child {
         height: 70px;
     }
 }

 @media (max-width: 480px) {
    
    
     .header-right {
         font-size: 14px;
     }

     .header-left h6 {
         font-size: 13px;
     }

     .blue-circle {
         width: 28px;
         height: 28px;
         border-width: 3px;
     }

     .upload-circle {
         width: 165px;
         height: 165px;
     }

     .quote-box {
         padding: 20px 18px 40px;
     }

     .download-btn {
         padding: 5px 25px;
         font-size: 13px;
     }

     .logo-bar img {
         height: 80px;
     }

     .logo-bar img:last-child {
         height: 68px;
     }
 }

 @media (max-width: 360px) {

     .upload-circle {
         width: 180px;
         height: 180px;
     }

     .logo-bar img {
         height: 70px;
     }

     .logo-bar img:last-child {
         height: 58px;
     }
 }
 
 
 /* === Colored Input Fields === */
#name {
  color: #004AAD !important; /* Blue for name */
  font-weight: 700;
}

#designation {
  color: #E60000 !important; /* Red for designation */
  font-weight: 600;
}

#pledgeDropdown .dropdown-selected {
  color: #000 !important; /* Black for pledge */
  font-weight: 500;
}