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

/* Body styling */
body {
    font-family: 'Poppins', sans-serif;

    background-color: #f0f4f8; /* Light background */
    color: #333;
    line-height: 1.6;
}

/* Navbar */
.navbar1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    /*background-color: #9ec485; Cool blue color#cbda96*/
    background: rgba(131, 223, 11, 0.11); /* Transparent white background */
    backdrop-filter: blur(50px); /* Apply blur to create glass effect */
    -webkit-backdrop-filter: blur(30px); /* For Safari support */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar1 .logo img {
    max-width: 100px;
}

nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.6s ease;
    
}

nav ul li a:hover {
    background-color: #6ac791; /* Gen-Z pink color #77dba1*/
    color: rgb(255, 255, 255);
     text-decoration: none;
}


/* Hamburger menu (hidden by default) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger .bar {
    width: 30px;
    height: 3px;
    background-color: #000;
    border-radius: 5px;
}
/* Mobile View (Small Screens) */

/* Hero section */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    background-color: #e6ffcf; /* Bold pink background */
    color: #000000;
    padding: 100px 20px;
    text-align: center;
    margin-top: 80px; /* Offset the fixed navbar */
    border-radius: 0 0 20px 20px;
}

.hero h2 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.cta-btn {
    background-color: #cbf8e1;
    color: #ff66cc;
    padding: 12px 40px;
    font-size: 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

.cta-btn:hover {
    background-color: #ff3385; /* Darker pink #d3f0e1*/
    color: white;
}

/* Features section */
.features {
    display: flex;
    justify-content: space-around;
    padding: 50px 20px;
    margin-top: 0; /* Remove top margin to eliminate extra space */
    margin-bottom: 0;
    background-color: #cbf8e1;
}

.feature {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1;
    max-width: 280px;
    margin: 0 20px;
    transition: transform 0.3s;
}

.feature:hover {
    transform: translateY(-18px); /* Hover effect */
}

.feature h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}
/* General Styles */
/* Feature Section Styling */
.feature-section {
    background: linear-gradient(135deg, #d3f5c1, #b7f5e2); /* Gen Z pastel gradient */
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
    color: #333;
    text-align: center;
}

.feature-section:hover {
    transform: scale(1.03); /* Slight zoom effect on hover */
}

/* Heading and Paragraph Styles */
.feature-section h2 {
    font-family: 'Poppins', sans-serif; /* Trendy font */
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.feature-section p {
    font-size: 1.2rem;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    color: #555;
}

/* Styling for Bullet Points */
.feature-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.feature-section ul li {
    font-size: 1.1rem;
    color: #555;
    padding-left: 20px;
    position: relative;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
}

/* Bullet Color */
.feature-section ul li:before {
    
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

/* Button Styling */
.cta-btn1 {
    background-color: #b8b0b5; /* Pink Button */
    color: white;
    padding: 12px 25px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    margin-top: 20px;
}

.cta-btn1:hover {
    background-color: #ff3385; /* Darker Pink on Hover */
}




.feature p {
    font-size: 1rem;
    color: #777;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 0px;
    border-radius: 0 0 20px 20px;
}

footer p {
    font-size: 14px;
}






/* Main Container */
.main-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
    background-color: #dff5f4;
}

/* Vendor List Section #d8f7ef #dff5f4 background: linear-gradient(135deg, #e8f7a8, #e0f2fe);  */
.vendor-list-section {
    width: 50%;
    /*padding: 20px;*/
    padding: 14px 16px 16px;
  /* Define a linear gradient from the top-left to the bottom-right */
    background: linear-gradient(
        135deg, /* Angle of the gradient */
        #c3e5fa 0%, /* Very light blue/cyan */
        #c6fad7 100% /* Light purple/lavender */
    );
    
   /* background: #c5f4f7;*/
    border-radius: 16px;
   
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.35);

    /*background: linear-gradient(135deg, #f2f3b8, #e0f2fe); */

    /*
    background: linear-gradient(135deg, #b8ecf3, #e0f2fe);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    height: 80vh;
    overflow-y: scroll;
    flex: 1;
}



/* select checkbox */
.vendor-row {
    display: flex;
    align-items: flex-start;   /* keep checkbox + text aligned */
    gap: 10px;                 /* slightly tighter gap */
    padding: 15px;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* checkbox fixed size */
.vendor-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;            /* ✅ prevents checkbox resizing */
    margin-top: 2px;           /* aligns with vendor name text */
}

/* vendor name stays next to checkbox */
.vendor-row strong {
    display: inline-block;
}

/* select-all row (no change, just cleaned) */
.select-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}




/* =========================
   Vendor List (Responsive)
   ========================= */

.vendor-list-section ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Card */
.vendor-list-section li {
   padding: 8px 12px;
  margin-bottom: 8px;
  margin-top: 12px;  
  /* glassmorphism background rgba(252, 253, 232, 0.55)*/
  background: rgb(248, 243, 243);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);

  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);

  display: flex;
  flex-direction: column;
  gap: 10px;
}



/* Uploaded tag (Row 2) */
.uploaded-tag {
  grid-area: uploaded;
  display: inline-block;   /* ✅ important */
  width: fit-content;

  font-size: 13px !important;
  padding: 3px 8px;
  border-radius: 999px;

  /* same as Created pill */
  background: rgba(206, 215, 226, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #000000;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}



/* Actions (Row 3) */
.vendor-row .buttons {
  grid-area: actions;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

/* Ensure the delete form doesn't break layout */
.vendor-row form.buttons {
  margin: 0;
  display: inline-flex;
}

/* Buttons style */
.vendor-row .buttons a,
.vendor-row .buttons button {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

/* View */
.vendor-row .buttons a[href*="view"] {
  background: #e0f2fe;
  border-color: #2f9dd8;
  color: #064ee9;
}

/* Download */
.vendor-row .buttons a.download{
  background: #d0f5dc;
  border-color: #49c976;
  color: #0d632d;
}
.vendor-row .buttons a.build{
  background: #e2e4fc;
  border-color: #878ee6;
  
}


.vendor-row .buttons a.build:hover {
  filter: brightness(0.97);
}
.vendor-row .buttons a.download:hover {
  filter: brightness(0.97);
}


.vendor-row .buttons a.view:hover {
  filter: brightness(0.97);
}

/* Delete hover */
.vendor-row .buttons .delete:hover,
.vendor-row .buttons button.delete:hover {
  filter: brightness(0.97);
}
/* Delete */
.vendor-row .buttons button {
  background: #fee2e2;
  border-color: #f39595;
  color: #dc2626;
}










/* Gen-Z upload card */
/* Upload Form Section (right side, 45%) */
.upload-form-section {

    width: 40%;
    padding: 0;                    /* card will have its own padding */
    background-color: transparent; /* let the card handle background */
    border-radius: 0;
    box-shadow: none;
    position: sticky;
    top: 20px;
    max-height: 90vh;
    flex-shrink: 0;
}

/* Inner card (wrap your upload form #ffffec in .form1) */
.upload-form-section .form1 {
  /* background: linear-gradient(135deg, #d6f83c, #e0f2fe);*/
     /* background: linear-gradient(135deg, #a4faee, #e0f2fe);*/
     background: linear-gradient(135deg, #89ddec, #ecf0fa);
    border-radius: 18px;
    padding: 18px 20px 22px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Title: Upload New Rate Card */
.upload-form-section .up1 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f172a;
    margin-bottom: 6px;
}

/* Optional small subtitle under title (if you add <p>) */
.upload-form-section .form1 p.subtitle {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

/* Django form layout inside card */
.upload-form-section form {
    margin-bottom: 0;
}

.upload-form-section form p {
    margin-bottom: 10px;
}

/* Labels */
.upload-form-section label {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    display: block;
    margin-bottom: 4px;
}

/* Inputs (text + file) */
.upload-form-section input[type="text"],
.upload-form-section input[type="file"] {
    width: 100%;
    font-size: 13px;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #f8fafc;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.upload-form-section input[type="text"]:focus,
.upload-form-section input[type="file"]:focus {
    border-color: #38bdf8;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3);
}

/* Gen-Z pill upload button (reuse your .upload-button class) */
.upload-button {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0;
    width: 32%;                 /* desktop width */
    margin: 14px auto 0;        /* center horizontally */
    display: block;

    border-radius: 999px;
    cursor: pointer;
    border: none;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}



.upload-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.45);
    filter: brightness(1.04);
}

.upload-button:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.35);
}
















.part1{

    padding-top: 9%;
    
}
.part2{
    position: fixed;
    text-align: center;
    background-color: #c3fceb;
}
.form1{
    background-color: #caf0fa;
}

.form2{
    background-color: #afeefd;
}

.up1{
text-align: left;
margin-bottom: 6%;
}

.up11{
text-align: left;
margin-bottom: 3%;

}




/* ===== Clean Gen-Z SaaS Button ===== */


.up111{
  appearance: none;
  background: #c9f7fa;              /* #E9FFD6soft sky */
  border: 1px solid #a5dcf5;

  color: #075985;
  font-size: 13px;                  /* smaller */
  font-weight: 600;

  padding: 6px 12px;                /* reduced size */
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  line-height: 1.2;

  transition: all .15s ease;
  cursor: pointer;
}

/* Hover */
.up111:hover{
  background: #bae6fd;
  border-color: #38bdf8;
  
}

/* Active */
.up111:active{
  background: #7dd3fc;
  transform: translateY(0);
}

/* Focus */
.up111:focus-visible{
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Remove link underline issue */
a .up111{
  text-decoration: none;
}



.up1112{
  appearance: none;
  background: #ecfdf5;
  border: 1px solid #b3f7db;

  color: #065f46;
  font-size: 13px;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  line-height: 1.2;

  transition: all .15s ease;
  cursor: pointer;
}

.up1112:hover{
  background: #d1fae5;
  border-color: #6adab1;
 
}

.up1112:active{
  background: #a7f3d0;
  transform: translateY(0);
}

.up1112:focus-visible{
  outline: 2px solid #34d399;
  outline-offset: 2px;
}



.up1113{
  appearance: none;
  background: #f3f1f8;
  border: 1px solid #e4defd;

  color: #4c1d95;
  font-size: 13px;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  line-height: 1.2;

  transition: all .15s ease;
  cursor: pointer;
}

.up1113:hover{
  background: #ede9fe;
  border-color: #a78bfa;
  
}

.up1113:active{
  background: #ddd6fe;
  transform: translateY(0);
}

.up1113:focus-visible{
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}


.up1114{
  appearance: none;
  background: #fcfaf2;
  border: 1px solid #f1e5b5;

  color: #92400e;
  font-size: 13px;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  line-height: 1.2;

  transition: all .15s ease;
  cursor: pointer;
}

.up1114:hover{
  background: #fef3c7;
  border-color: #fbbf24;
  
}

.up1114:active{
  background: #fde68a;
  transform: translateY(0);
}

.up1114:focus-visible{
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}










.vvvv{
  background: linear-gradient(
        135deg, /* Angle of the gradient */
        #c3e5fa 0%, /* Very light blue/cyan */
        #c6fae6 100% /* Light purple/lavender */
    );
    /*background-color: #c9f3f1;*/
}

.mainvendor{
    background-color: #6ac791;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}







/* ==== RETURN CSV BOX ==== #ecfdd1*/

/* Outer card */
.upload-form-section1 {
    width: 50%;
    padding: 0;                    /* card will have its own padding */
    background-color: transparent; /* let the card handle background */
    border-radius: 0;
    box-shadow: none;
    position: sticky;
    top: 20px;
   height: 100%;
    flex-shrink: 0;
}
.form3 {
    position: sticky;          /* keeps the box visible while scrolling */
    top: 220px;                /* adjust depending on your header height */
    background: #c8eff1;
    border-radius: 16px;
    padding: 14px 16px 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Title */
.form3 .up1 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

/* Scrollable list area */
.returned-csv-list {
    margin-top: 6px;
    max-height: 450px;          /* list scrolls if more files */
    overflow-y: auto;
    padding-right: 4px;         /* room for scrollbar */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each CSV “row” */
.csv-item {
    background: #f1e787;
    border-radius: 8px;
    padding: 4px 8px;             /* was ~8–10, now smaller */
    border: 1px solid #f1caca;
}

/* File name – single line, ellipsis if too long */
.csv-item strong {
    display: block;
    font-size: 12px;              /* smaller */
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta text (prefix / country / created) */
.csv-item-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
}

/* Action links */
.csv-item-meta {
    font-size: 10px;              /* smaller */
    color: #64748b;
    margin-top: 1px;              /* less space */
}

/* Action links */
.csv-item-actions {
    margin-top: 2px;              /* less space */
    font-size: 11px;
}

.csv-item-actions a {
    text-decoration: none;
    margin-right: 6px;
    color: #2563eb;
}

.csv-item-actions a.csv-delete {
    color: #dc2626;
}

.csv-item-actions a:hover {
    text-decoration: none;
}




















/* ================= BULK FILTER MODAL DESIGN ================= */
/* ================= MODAL (Improved Design) ================= */
/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background: linear-gradient(135deg, #d1fdf4, #f0fdfa);
    border-radius: 12px;
    margin: 5% auto; /* Reduced top margin for better view on taller modals */
    padding: 30px;
    border: 1px solid #888;
    width: 90%; /* Responsive base width */
    max-width: 700px; /* INCREASED WIDTH FROM 500px to 700px */
    min-height: 550px; /* INCREASED HEIGHT */
    position: relative;
    box-sizing: border-box;
}

/* Heading inside modal */
.modal-content h3 {
    color: #000000;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 1px solid #000000;
    padding-bottom: 12px;
    text-align: center;
}

/* Field Container Logic */
.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allows wrapping on very small screens */
}

.select2-container {
    flex: 0 0 60%; /* Fixed width for the dropdown boxes */
    width: 60% !important;
    min-width: 250px;
}

/* --- User Friendly Dropdown Design --- */
.select2-container--default .select2-dropdown {
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #d1fdf4 !important;
    color: #000 !important;
}

/* Force Select2 dropdown to stay below the input */
.select2-container--open .select2-dropdown--above {
    margin-top: 45px !important; 
    border-top: 1px solid #ccc !important;
}

.select2-container--open .select2-dropdown {
    border-radius: 0 0 8px 8px !important;
}

/* Submit button */
.modal-content button[type="submit"] {
    width: 60%;
    display: block;
    margin: 40px auto 0;
    padding: 12px;
    background: linear-gradient(135deg, #bdf3ef, #b4c8f5);
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease;
}






.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* --- Modal Button with Rotating Hover Border --- */
.modal-content button[type="submit"] {
    position: relative;
    width: 60%;
    display: block;
    margin: 25px auto 10px;
    padding: 12px;
    /* YOUR SPECIFIC COLORS */
    background: linear-gradient(135deg, #bdf3ef, #b4c8f5); 
    color: #000;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    z-index: 1;
    overflow: hidden; /* Clips the rotating light to the button shape */
    transition: transform 0.2s ease;
}

/* The Rotating Light Effect (Hidden until Hover) */
.modal-content button[type="submit"]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Blue Rotation Colors based on image_5537c9.png */
    background: conic-gradient(
        transparent, 
        #46c7e0, /* Light Blue */
        #4ca0e9, /* Dark Blue */
        transparent 40%
    );
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* The "Inner" Button - This preserves your gradient color while showing the border */
.modal-content button[type="submit"]::after {
    content: '';
    position: absolute;
    inset: 3px; /* This creates a 3px thick border effect */
    background: linear-gradient(135deg, #bdf3ef, #b4c8f5);
    border-radius: 999px;
    z-index: -1;
}

/* --- Hover State --- */
.modal-content button[type="submit"]:hover {
    transform: translateY(-2px);
}

.modal-content button[type="submit"]:hover::before {
    opacity: 1;
    animation: rotateBorder 1.5s linear infinite; /* 1.5s for a smooth rotation */
}
























#select-all {
     width: 20px;
    height: 20px;
 /* transform: scale(1.5); /* Increase size to 1.5 times the original size */
  margin-left: 14px; 
  
}



















/* Modal Background */
.error-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Modal Content */
.error-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 50%; /* Can adjust the size */
  max-width: 500px; /* Optional: set maximum width */
}

/* Close Button (x) */
.error-close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.error-close-btn:hover,
.error-close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Style the text message */
.error-modal-content p {
  font-size: 18px;
  color: #f44336; /* Red for error message */
}











.popup-container {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 20px;
            border-radius: 5px;
            display: none;
            z-index: 1000;
        }

        .popup-message {
            font-size: 16px;
            color: #721c24;
            margin: 0;
        }















/* Success Modal Background */
.success-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* Success Modal Background */
.success-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex; /* Ensure it takes the full screen and aligns centered */
}

/* Success Modal Content */
.success-modal-content {
  background-color: #d4edda; /* Light green background */
  margin: 15% auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 50%; /* Adjust the size as per your need */
  max-width: 500px; /* Optional: set maximum width */
  text-align: center;
}

/* Close Button (x) */
.success-close-btn {
  color: #28a745; /* Green color for success */
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.success-close-btn:hover,
.success-close-btn:focus {
  color: #155724; /* Darker green when hovered */
  text-decoration: none;
  cursor: pointer;
}

/* Style the text message */
.success-modal-content p {
  font-size: 18px;
  color: #155724; /* Dark green for success message */
}

.delete-btn{
    background-color: rgb(253, 129, 129);
     border: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 15.5px;
   border-radius: 4px;
   color: white;
   width: 5%;
   height: 4.6%;
}

.delete-btn i {
    font-size: 15px; /* Adjusts the size of the icon */
    color: rgb(255, 255, 255); /* Sets the icon color to red */
    cursor: pointer; /* Makes the icon clickable */
    transition: color 0.3s ease; /* Smooth color transition */
   

}

.delete-btn:hover i {
    color: rgb(221, 214, 214); /* Changes color to dark red when hovered */
}

















/* Style the modal */
.upload-modal-new {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
}

/* Modal Content */
.modal-content-new {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* You can adjust the width */
    max-width: 600px;
}

/* The Close Button */
.close-new {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    float: right;
    cursor: pointer;
}

.close-new:hover,
.close-new:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}









/* The Modal (background) */
.edit-filter-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be adjusted */
    max-width: 500px;
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Add this to your CSS file (styles.css) */
.newpage {
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
    width: 100%;
     background-image: url('images/back.png'); background-size: cover;
}





.edit-filter-section4 {
   background-color: #b5eef1; 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 56%;
    margin: 0 auto;
    
}

.edit-filter-section4 h3 {
    text-align: center;
    margin-bottom: 20px;
   
  
   
}

.filter-field4 {
    margin-bottom: 15px;
}

.filter-field4 label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.filter-input4 {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    resize: none;
    overflow-y: auto;
}

.filter-input4::placeholder {
    color: #aaa;
}

.button-container4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.button-container4 button {
    background-color: #4CAF50;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-container4 button:hover {
    background-color: #45a049;
}

.button-container4 button.delete-btn4 {
    background-color: #f57e75;
}

.button-container4 button.delete-btn4:hover {
    background-color: #e53935;
}

.form-container4 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.row4 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.form-container4 .filter-field4 {
    width: 48%;
}
button#save-filter4 {
    display: block;
    width: 26%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px auto 0; /* This centers the button horizontally */
}

button#save-filter4:hover {
    background-color: #05ee11;
    color: black;
}


.now{
    margin-top: 10%;
   background-color: rgb(217, 247, 241);
}

.add-filter-btn4{
    color: #000000;
    background-color: #7cf817;
  border: none;
     width: 10%;
     cursor: pointer;
     
}

.delete-btn4{

    display: block;
    width: 26%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px auto 0; 
    color: rgb(255, 254, 254);
    background-color: rgb(243, 128, 128);
   
}
.delete-btn4:hover{
     background-color: rgb(228, 10, 10);
}





.newpage{
    background-color: rgb(252, 253, 243);
}






/* Wrapper */
.returncsv-wrap {
  background: #cef7f7;
  border-radius: 14px;
  padding: 14px;
}

/* Header */
.returncsv-header {
  display: grid;
  /* Updated grid to ensure header and body alignment matches the image */
  grid-template-columns: 34px 2.5fr 1fr 1.5fr 1fr 2fr; 
  gap: 15px;
  padding: 10px 15px;
  background: #ffffff;
  border: 1px solid #cfeeee;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Body */
.returncsv-body {
  margin-top: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Row */
.returncsv-row {
  background: #ffffff;
  border: 1px solid #d3eeee;
  padding: 6px 6px !important;
  margin-bottom: 11px !important;
  border-radius: 12px;
}

.returncsv-row:hover {
  background-color: rgb(226, 243, 250);
}

.returncsv-row:has(.rowChk:checked) {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

/* Grid row - MUST MATCH HEADER */
.returncsv-grid {
  display: grid;
  grid-template-columns: 34px 2.5fr 1fr 1.5fr 1fr 2fr;
  gap: 15px !important;
  align-items: center;
}

/* Cells */
.cell {
  color: #1f2937;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.cell.strong {
  font-weight: 700;
}

.text-clip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Checkbox column */
.col-check {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Checkbox style */
.chk {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* Actions */
.actions {
  display: flex;
  gap: 6px !important;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-link {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Sub info */
.returncsv-subinfo {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #b0f8f8;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tags */
.tag {
  font-size: 10.5px !important;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(5, 126, 196, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #16274e;
}

/* Action Button Colors from Image */
.actions .btn-link {
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.2;
  width: 85px;
  text-align: center;
}

.actions .btn-link[href*="view"] {
  background: #d1fae5; /* Light green */
  color: #059669;
  border: 1px solid #10b98144;
}

.actions .btn-link[href*="download"] {
  background: #eff6ff; /* Light blue */
  color: #2563eb;
  border: 1px solid #3b82f644;
}

.actions .btn-link.danger {
  background: #fee2e2; /* Light red */
  color: #dc2626;
  border: 1px solid #f8717144;
}




















/* ===== Smooth Popup Transition ===== */

.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When modal is shown */
.modal.show {
    opacity: 1;
    visibility: visible;
}

/* Modal content animation */
.modal-content {
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

/* Animate content when modal is active */
.modal.show .modal-content {
    transform: scale(1);
}





/* ===== Actions row (Apply Markup + Customer Rate Card link) ===== */
/* ===== Actions row (Apply Markup + Customer Rate Card link) ===== */
.returncsv-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 12px 0 18px;
  flex-wrap:wrap;
}


.crm-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  font-weight: 600;
  cursor: pointer;

  font-size: 14px;
  line-height: 1;              /* 🔑 KEY FIX */
  box-sizing: border-box;      /* 🔑 KEY FIX */
  height: 40px;      
  transition: 
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;          /* 🔑 FORCE SAME HEIGHT */
}

.crm-btn{
  
 /* background: rgba(221, 247, 150, 0.65); #D6F5F9 background: rgba(222, 248, 174, 0.65);  background: rgba(34,197,94,0.12); */
  background-color: #cdf5fa;
  color: #0f172a;
  text-decoration: none;
}

.crm-link{
  
 
  color: #0f172a;
  text-decoration: none;
}

/* Default button hover */
.crm-btn:hover{
  background: rgba(221, 247, 150, 0.85);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

.crm-btn.danger{
  background-color:#fae4e4 ;
  border-color: #fecaca;
  color: #3f3939;
}

/* Danger button hover */
.crm-btn.danger:hover{
  background: #fecaca;
  border-color: #fca5a5;
  color: #7f1d1d;
  box-shadow: 0 12px 28px rgba(153, 27, 27, 0.25);
  transform: translateY(-1px);
}

/* Link button hover */
.crm-link:hover{
  background: rgba(34,197,94,0.22);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.25);
  transform: translateY(-1px);
}

/* ===== Modal (unique names) ===== */
.crm-modal{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 23, 0.55);
  padding: 18px;
}

.crm-modal-content{
  width: min(720px, 100%);
  margin: 6vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(235, 247, 225, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  padding: 18px;
  position: relative;
}

.crm-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.75);
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
}

.crm-title{ margin: 0 0 4px; }
.crm-subtitle{ margin: 0 0 14px; opacity: 0.85; }

.crm-checkline{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 8px 0 12px;
  font-weight: 600;
}

.crm-filebox{
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  padding: 10px;
  max-height: 260px;
  overflow:auto;
}

.crm-file-row{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 12px;
}

.crm-file-row:hover{
  background: rgba(34,197,94,0.08);
}

.crm-file-name{
  word-break: break-word;
}

.crm-empty{
  padding: 12px;
  opacity: 0.75;
}

.crm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.crm-field label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

.crm-field select,
.crm-field input{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.85);
  outline: none;
}

.crm-hint{
  display:block;
  margin-top: 6px;
  opacity: 0.75;
}

.crm-submit{
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.28);
}










/* Modal overlay */
.modal33{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 9999;
  padding: 18px;
}

/* Modal box */
.modal-content33{
  max-width: 820px;
  width: 100%;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

/* Header */
.modal-head33{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: #e0f2fe;
  border-bottom: 1px solid rgba(125, 211, 252, 0.7);
}
.modal-title33{ margin:0; font-size: 14px; font-weight: 800; color:#075985; }
.modal-close33{
  width: 28px; height: 28px;
  border: 1px solid rgba(7,89,133,0.25);
  background: #ffffff;
  border-radius: 8px;
  cursor:pointer;
}

/* Form */
.edit-form33{ padding: 14px; }
.lbl33{ font-size: 12px; font-weight: 700; color:#0f172a; display:block; margin: 8px 0 4px; }
.inp33{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #ffffff;
  font-size: 12px;
  outline: none;
}
.inp33:focus{ border-color:#38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }

.hr33{ border:0; border-top: 1px dashed rgba(148,163,184,.55); margin: 12px 0; }
.note33{ margin: 0 0 6px; font-size: 12px; color:#475569; }

.grid33{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.actions33{ margin-top: 12px; display:flex; justify-content:center; }
.save-btn33{
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: #22c55e;
  color: white;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}


/* ===============================
   CUSTOMER RATE CARD – 201
   Appears AFTER navbar
================================ */

/* ===============================
   Sticky header + scroll content
================================ */
/* Page base */
.customer-rate-page-201 {
  font-family: 'Poppins', sans-serif;
  background: #f3f6fb;

  /* Full viewport minus navbar */
  height: calc(100vh - var(--navbar-height-201));
  display: flex;
  flex-direction: column;
}

/* Sticky header container */
.customer-rate-header-201 {
  position: sticky;
  top: var(--navbar-height-201);
  z-index: 50;
  background: #f3f6fb;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  padding: 18px 0 10px;
}

/* Title */

/* Title .up1-201 {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}*/
.up1-201 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}
/* Messages */
.messages-wrap-201 {
  max-width: 980px;
  margin: 10px auto 0;
  padding: 0 18px;
}

.popup-message-201 {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 8px;
}

.popup-message-201.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid rgba(22, 101, 52, 0.15);
}

.popup-message-201.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(153, 27, 27, 0.15);
}

/* Scroll zone (only list scrolls) */
.customer-rate-scroll-201 {
  flex: 1;
  overflow-y: auto;
  padding: 18px 0 40px;
}

/* Scrollbar */
.customer-rate-scroll-201::-webkit-scrollbar {
  width: 8px;
}
.customer-rate-scroll-201::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 10px;
}
.customer-rate-scroll-201::-webkit-scrollbar-track {
  background: transparent;
}

/* Cards container */
.returncsv-body-201 {
 max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card */
.returncsv-row-201 {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.returncsv-grid-201 {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 
    2.2fr    /* Name */
    1.6fr    /* Markup */
    1.2fr    /* Rows */
    1.8fr    /* Created */
    auto;    /* Actions */
  align-items: center;
  gap: 14px;
}


.strong-201 {
  font-size: 15px;
  font-weight: 700;
  color: #020617;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Normal cell */
.cell-201 {
  font-size: 14px;
  color: #334155;
  line-height: 1.35;
}

.actions-201 {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}


.inline-form-201 {
  display: inline;
  margin: 0;
}

/* Buttons */
.btn-link-201 {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.20);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.btn-link-201:hover {
  background: rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

/* Delete */
.danger-201 {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.25);
}

.danger-201:hover {
  background: rgba(220, 38, 38, 0.18);
}

/* Empty message */
.empty-msg-201 {
  max-width: 980px;
  margin: 24px auto 0;
  padding: 0 18px;
  text-align: center;
  color: #64748b;
  font-size: 15px;
}


/* Header line: title + back link */
.customer-rate-header-line-201 {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Back link */
.back-link-201 {
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.back-link-201:hover {
  text-decoration: underline;
}


/* 🔴 Delete / Error message */
.popup-message-201.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(153, 27, 27, 0.25);
}

/* ===============================
   Popup Messages - 401 (Toast)
================================ */

.popup-message-401 {
  position: fixed;
  top: 80px;              /* change if navbar overlaps */
  right: 18px;
  z-index: 9999;

  min-width: 280px;
  max-width: 360px;

  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;

  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  color: #0f172a;

  animation: toastIn401 0.25s ease;
}

/* Success */
.popup-message-401.success {
  background: #dcfce7;
  color: #166534;
  border-color: rgba(22, 101, 52, 0.22);
}

/* Error */
.popup-message-401.error {
  background: #fee2e2;
  color: #991b1b;
  border-color: rgba(153, 27, 27, 0.22);
}

/* Warning */
.popup-message-401.warning {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(146, 64, 14, 0.22);
}

/* Info */
.popup-message-401.info {
  background: #e0f2fe;
  color: #075985;
  border-color: rgba(7, 89, 133, 0.22);
}

/* Exit animation */
.popup-message-401.toast-out-401 {
  animation: toastOut401 0.25s ease forwards;
}

@keyframes toastIn401 {
  from { opacity: 0; transform: translateY(-10px) translateX(8px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}

@keyframes toastOut401 {
  from { opacity: 1; transform: translateY(0) translateX(0); }
  to   { opacity: 0; transform: translateY(-10px) translateX(8px); }
}




/* General Styling for the View Rate Card Page */
.view-rate-card12 {
    font-family: Arial, sans-serif;
    margin: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.view-rate-card12 h1 {
    font-size: 28px;
    color: #333;
}

.view-rate-card12 p {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
}

.view-rate-card12 h2 {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
}

.view-rate-card12 .rate-card-details {
    margin-top: 20px;
    font-size: 16px;
}

.view-rate-card12 .rate-card-row {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
}

.view-rate-card12 .rate-card-row strong {
    font-weight: bold;
}

.view-rate-card12 .btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.view-rate-card12 .btn-back:hover {
    background-color: #0056b3;
}










/* General Modal Layout */
/* General Modal Layout */
/* =========================
   Modern SaaS Palette (Full CSS)
   ========================= */
/* Backdrop */
/* Backdrop / Overlay scrolls */
/* =========================
   Backdrop / Overlay (scrolls)
   ========================= */
.crm-modal10 {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(15, 23, 42, 0.55);
    padding: 16px;

    /* Full-page scrolling */
    overflow-y: auto;

    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar (Firefox) */
    scrollbar-width: none;
}

/* Hide scrollbar (Chrome, Edge, Safari) */
.crm-modal10::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* =========================
   Modal Container (narrower)
   ========================= */
.crm-modal-content10 {
    /* 🔽 Reduced width */
    width: min(600px, 100%);
    max-width: 92%;

    margin: 5vh auto 5vh;

    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.8);

    /*background: rgba(237, 247, 209, 0.92);*/
    background: rgba(217, 248, 244, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    padding: 18px;

    position: relative;

    /* ❌ No inner scrolling */
    max-height: none;
    overflow: visible;
}


/* Close Button */
.crm-close10 {
    position: absolute;
    top: 10px;
    right: 12px;

    width: 38px;
    height: 38px;
    border-radius: 999px;

    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.9);

    cursor: pointer;
    font-size: 20px;
    line-height: 1;

    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.crm-close10:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

/* Title & Subtitle */
.crm-title10 {
    font-size: 18px;
    margin: 0 0 4px;
    color: #0f172a;
    font-weight: 800;
}

/* Form Layout */
/* Form Layout (supports both ids) */
#crmMarkupForm10,
#crmMarkupForm {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.6;
}


/* Grid */
.crm-grid10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

/* Glass Card Blocks */
.crm-field-box10 {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;

    border: 1px solid rgba(178, 233, 134, 0.9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

/* Fields */
.crm-field10 {
    margin-bottom: 12px;
    width: 100%;
}

.crm-field10 label {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 14px;
    color: #0f172a;
}

/* Inputs */
.crm-field10 input,
.crm-field10 select {
    width: 100%;
    padding: 12px 14px;

    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;

    outline: none;
    font-size: 14px;
    color: #0f172a;
}

.crm-field10 input::placeholder {
    color: #94a3b8;
}

.crm-field10 input:focus,
.crm-field10 select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Hint text */
.crm-hint10 {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    text-align: left;
}

/* Bigger Field Sizes */
.crm-field-size input,
.crm-field-size select {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;

    border-radius: 12px;
    border: 1px solid #6a6a6b;
    background: white;
    outline: none;
}

.crm-field-size label {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 6px;
    color: #0f172a;
}

.crm-field-size {
    margin-bottom: 18px;
}
.crm-field-size input:focus,
.crm-field-size select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* ✅ Small + Centered Submit Button (ONLY ONE BLOCK) */
.crm-submit10 {
    display: block;
    width: fit-content;
    margin: 14px auto 0;

    padding: 8px 18px;      /* ⬆ slightly bigger */
    font-size: 13px;        /* ⬆ slightly bigger text */
    font-weight: 600;

    border-radius: 999px;
    border: none;

    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;

    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.30);
    cursor: pointer;
}

.crm-submit10:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.40);
}

.crm-submit10:active {
    transform: translateY(0);
}


/* Optional secondary buttons */
.crm-btn10 {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.9);
    backdrop-filter: blur(10px);
    color: #0f172a;
}

.crm-btn10:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.crm-btn10.danger {
    background: rgba(254, 226, 226, 0.9);
    border-color: rgba(252, 165, 165, 0.9);
    color: #991b1b;
}

/* Link button */
.crm-link10 {
    background: rgba(56, 189, 248, 0.12);
    color: #0f172a;
    text-decoration: none;
}

.crm-link10:hover {
    background: rgba(56, 189, 248, 0.20);
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.20);
    transform: translateY(-1px);
}

/* File box */
.crm-filebox10 {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 10px;
    max-height: 260px;
    overflow: auto;
    font-size: 12px;
}

.crm-file-row10 {
    display: flex;
    gap: 10px;
    align-items: center;

    padding: 10px 10px;
    border-radius: 12px;
}

.crm-file-row10:hover {
    background: rgba(56, 189, 248, 0.10);
}

.crm-file-name10 {
    word-break: break-word;
}




.tag-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  background: #fff;
  gap: 5px;
}

.tag-container input {
  border: none !important;
  outline: none !important;
  flex: 1;
  min-width: 100px;
}

.tag-chip {
  background-color: #dbeafe; /* Light blue */
  color: #000000; /* Dark blue text */
  padding: 1px 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.remove-tag {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
}

.remove-tag:hover {
  color: #ef4444; /* Red on hover */
}