:root{

    --red:#c8102e; --red-dark:#8a0a1f; --red-soft:#fde8ec;

    --grey-900:#1f2937; --grey-800:#273141; --grey-700:#374151;

    --grey-500:#6b7280; --grey-300:#d1d5db; --grey-200:#e5e7eb;

    --grey-100:#f3f4f6; --grey-50:#f9fafb; --white:#fff;

    --warn:#fff7d6; --warn-text:#8a6d00;

    --ok:#dcfce7; --ok-text:#15803d;

    --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);

  }

  *{box-sizing:border-box}

  html,body{margin:0;padding:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;color:var(--grey-900);background:var(--grey-100)}

  button{font-family:inherit;cursor:pointer}

  a{color:var(--red);text-decoration:none}



/* ===== LOGIN PAGE NEW DESIGN ===== */



/* ===== LOGIN DESIGN ===== */



#loginScreen{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#f4f4f4;

  padding:30px;

}



.login-wrapper{

  width:100%;

  max-width:1100px;

  min-height:650px;

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  display:grid;

  grid-template-columns:1fr 1fr;

  box-shadow:0 20px 60px rgba(0,0,0,.12);

}



/* LEFT */



.login-left{

  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);

  color:#fff;

  padding:50px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}



.login-brand{

  display:flex;

  align-items:center;

  gap:12px;

}



.brand-icon{

  /* width:100px;

  height:100px; */

  color:var(--red);

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:800;

  font-size:20px;

}

.img-icon{

  /* background:#fff; */

  overflow:hidden;

  padding:4px;

}



.img-icon img{

  width:100%;

  height:100%;

  object-fit:contain;

}

.login-brand h2{

  margin:0;

  font-size:28px;

  font-weight:700;

}



.login-content h1{

  font-size:70px;

  line-height:1.1;

  margin:0 0 20px;

  font-weight:800;

  text-align: center;

}



.login-content p{

  font-size:20px;

  line-height:1.7;

  color:#ffe5ea;

  max-width:480px;

}



.login-footer{

  font-size:14px;

  color:#ffd6dc;

}



/* RIGHT */



.login-right{

  background:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:50px;

}



.login-card{

  width:100%;

  max-width:420px;

}



.login-head h1{

  margin:0;

  font-size:52px;

  color:var(--grey-900);

  font-weight:800;

}



.login-head p{

  margin:12px 0 35px;

  color:var(--grey-500);

  font-size:18px;

  line-height:1.5;

}



.field{

  margin-bottom:22px;

}



.field label{

  display:block;

  margin-bottom:10px;

  font-size:15px;

  font-weight:700;

  color:var(--grey-700);

}



.input-box{

  display:flex;

  align-items:center;

  gap:12px;

  background:#f7f7f9;

  border:1px solid #e5e7eb;

  border-radius:16px;

  padding:0 16px;

  transition:.2s;

}



.input-box:focus-within{

  border-color:var(--red);

  box-shadow:0 0 0 4px rgba(200,16,46,.1);

}



.input-box span{

  font-size:18px;

  color:#9ca3af;

}



.input-box input{

  width:100%;

  height:58px;

  border:none;

  background:transparent;

  outline:none;

  font-size:16px;

  color:var(--grey-900);

}



/* OPTIONS */



.login-options{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin:5px 0 25px;

  font-size:15px;

}



.remember{

  display:flex;

  align-items:center;

  gap:8px;

  color:var(--grey-700);

}



.login-options a{

  color:var(--red);

  font-weight:600;

  text-decoration:none;

}



/* BUTTON */



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  border:none;

  border-radius:14px;

  padding:14px 20px;

  font-weight:700;

  font-size:16px;

  transition:.2s;

  cursor:pointer;

}



.btn-primary{

  background:var(--red);

  color:#fff;

}

.btn-secondary{

    background:#fff;

  color:#000;

}

.btn-primary:hover{

  background:var(--red-dark);

  transform:translateY(-1px);

}



.btn-block{

  width:100%;

  height:58px;

  font-size:18px;

}



/* HINT */



.login-hint{

  margin-top:28px;

  padding:18px;

  border-radius:16px;

  background:#fff5f6;

  border:1px solid #ffd6dc;

  color:var(--grey-700);

  font-size:13px;

  line-height:1.8;

}



/* ERROR */



.err{

  color:var(--red);

  font-size:14px;

  margin-bottom:14px;

  min-height:20px;

}



/* MOBILE */



@media(max-width:900px){



  .login-wrapper{

    grid-template-columns:1fr;

  }



  .login-left{

    min-height:280px;

  }



  .login-content h1{

    font-size:42px;

  }



  .login-content p{

    font-size:17px;

  }



  .login-right{

    padding:35px 25px;

  }



  .login-head h1{

    font-size:40px;

  }



}

/* ===== ADDRESS FORM UI ===== */



.address-page{

  background:#fff;

  border-radius:24px;

  padding:32px;

  box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.address-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:28px;

  flex-wrap:wrap;

}



.address-header-left h2{

  margin:0;

  font-size:32px;

  font-weight:800;

  color:var(--grey-900);

}



.address-header-left p{

  margin:10px 0 0;

  color:var(--grey-500);

  font-size:15px;

  line-height:1.7;

}



.address-client{

  display:flex;

  align-items:center;

  gap:18px;

  padding:20px;

  border-radius:20px;

  background:linear-gradient(135deg,#fff5f6,#f9fafb);

  border:1px solid #f4d6dc;

  margin-bottom:30px;

}



.address-client-icon{

  width:65px;

  height:65px;

  border-radius:18px;

  background:var(--red);

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:26px;

  font-weight:800;

  box-shadow:0 10px 20px rgba(200,16,46,.18);

}



.address-client h3{

  margin:0;

  font-size:22px;

  color:var(--grey-900);

}



.address-client span{

  display:block;

  margin-top:4px;

  font-size:14px;

  color:var(--grey-500);

}



.address-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:22px;

}



.address-field{

  display:flex;

  flex-direction:column;

}



.address-field.full{

  grid-column:1/-1;

}



.address-field label{

  margin-bottom:10px;

  font-size:14px;

  font-weight:700;

  color:var(--grey-700);

}



.address-field input,

.address-field select{

  width:100%;

  height:56px;

  border:1px solid var(--grey-300);

  border-radius:16px;

  background:#fff;

  padding:0 16px;

  font-size:15px;

  color:var(--grey-900);

  transition:.25s;

}



.address-field input::placeholder{

  color:#9ca3af;

}



.address-field input:focus,

.address-field select:focus{

  outline:none;

  border-color:var(--red);

  box-shadow:0 0 0 4px rgba(200,16,46,.10);

}



.address-checkbox{

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:38px;

}



.address-checkbox input{

  width:18px;

  height:18px;

  accent-color:var(--red);

}



.address-checkbox label{

  margin:0;

  font-size:14px;

  font-weight:600;

  color:var(--grey-700);

}



.address-footer{

  display:flex;

  justify-content:flex-end;

  gap:14px;

  margin-top:35px;

  flex-wrap:wrap;

}



.address-footer .btn{

  min-width:160px;

  height:54px;

  border-radius:14px;

}



.address-footer .btn-secondary{

  background:#eef0f3;

  color:var(--grey-700);

}



.address-footer .btn-secondary:hover{

  background:#dde2e7;

}



@media(max-width:768px){



  .address-page{

    padding:22px;

  }



  .address-grid{

    grid-template-columns:1fr;

  }



  .address-header-left h2{

    font-size:26px;

  }



  .address-client{

    align-items:flex-start;

  }



}

  /* ===== APP SHELL ===== */

  #app{display:none;min-height:100vh}

  .layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

  .sidebar{background:var(--grey-900);color:#fff;display:flex;flex-direction:column;

  }

  .brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid #ffffff15}

  .brand .dot{

 width: 175px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 4px;

}



.brand .dot img{

  width:100%;

  height:100%;

  object-fit:contain;

}

  .nav{padding:14px 10px;overflow:auto}

  .nav button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;color:#e5e7eb;padding:10px 12px;border-radius:8px;font-size:14px;text-align:left;margin-bottom:2px;position:relative}

  .nav button:hover{background:#ffffff10;color:#fff}

  .nav button.active{background:#ffffff15;color:#fff}

  .nav button.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:4px;background:var(--red);border-radius:2px}

  .nav .icon{width:18px;display:inline-block;text-align:center}

  .nav .group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#ffffff60;padding:14px 12px 6px}

  .sidebar .foot{padding:12px;border-top:1px solid #ffffff15;font-size:12px;color:#ffffff70}



  .main{display:flex;flex-direction:column;min-width:0}

  .topbar{background:#fff;height:62px;border-bottom:1px solid var(--grey-200);display:flex;align-items:center;justify-content:space-between;padding:0 24px}

  .topbar h2{margin:0;font-size:18px}

  .topbar .right{display:flex;align-items:center;gap:14px}

  .role-pill{display:inline-block;padding:4px 8px;border-radius:5px;font-size:11px;font-weight:700;background:var(--red);color:#fff;margin-left:4px;text-transform:uppercase;letter-spacing:.04em; height: 24px}

  .role-pill.manager{background:var(--grey-700)}

  .role-pill.sales{background:#0ea5a4}

  .role-pill.viewer{background:var(--grey-500)}

  .lock-banner{background:var(--warn);color:var(--warn-text);border:1px solid #f1d775;padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:14px}

  .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--grey-100);font-size:13px;color:var(--grey-700)}

  .chip .av{width:24px;height:24px;border-radius:5px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}



  .content{padding:24px;overflow:auto}



  /* ===== KPI ===== */

  .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}

  .kpi{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow);border-left:4px solid var(--red);position:relative;overflow:hidden}

  .kpi .label{font-size:12px;color:var(--grey-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

  .kpi .value{font-size:30px;font-weight:800;color:var(--grey-900);margin-top:6px}

  .kpi .sub{font-size:12px;color:var(--grey-500);margin-top:4px}

  .kpi.alt{border-left-color:var(--grey-700)}

  .kpi.warn{border-left-color:#eab308}

  .kpi.ok{border-left-color:#16a34a}



  /* ===== Card / Table ===== */

  .card{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}

  .card-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:16px 18px;

  border-bottom:1px solid var(--grey-200);

  flex-wrap:nowrap;

}



.card-head h3{

  margin:0;

  font-size:16px;

  white-space:nowrap;

}



.toolbar{

  display:flex;

  gap:8px;

  align-items:center;

  justify-content:flex-end;

  flex:1;

  flex-wrap:nowrap;

}



.toolbar input,

.toolbar select{

  padding:8px 10px;

  border:1px solid var(--grey-300);

  border-radius:8px;

  font-size:13px;

  outline:none;

  background:#fff;

}



.toolbar input:focus,

.toolbar select:focus{

  border-color:var(--red);

  box-shadow:0 0 0 3px var(--red-soft);

}



.toolbar .select2-container{

  width:180px !important;

}



.toolbar input{

  min-width:240px;

}



  .table-wrap{overflow:auto;max-width:100%}

  table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:1100px}

  table.tbl thead th{background:var(--red);color:#fff;text-align:left;padding:11px 12px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0}

  table.tbl thead th:hover{background:var(--red-dark)}

  table.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--grey-200);vertical-align:top;width: 0%;}

  table.tbl tbody tr:nth-child(even){background:var(--grey-50)}

  table.tbl tbody tr:hover{background:var(--red-soft)}

  td.actions{white-space:nowrap}

  .icon-btn{background:transparent;border:1px solid var(--grey-300);padding:5px 8px;border-radius:6px;font-size:12px;margin-right:4px;color:var(--grey-700);cursor:pointer}

  .icon-btn:hover{border-color:var(--red);color:var(--red)}

  .icon-btn:disabled{opacity:.45;cursor:not-allowed}

  .icon-btn.addr{border-color:var(--grey-700);color:var(--grey-900)}

  .icon-btn.addr:hover{background:var(--grey-900);color:#fff;border-color:var(--grey-900)}

  .icon-btn.act:not(:disabled){border-color:#16a34a;color:#16a34a}

  .icon-btn.act:not(:disabled):hover{background:#16a34a;color:#fff}

  .icon-btn.del:not(:disabled):hover{border-color:var(--red);color:#fff;background:var(--red)}

  tr.inactive td{opacity:.55;text-decoration:line-through}

  tr.inactive td.actions{opacity:1;text-decoration:none}



  /* row severity */

  tr.urgent td{color:var(--red);font-weight:600}

  tr.warn-row{background:var(--warn) !important}



  .badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}

  .badge.complete{background:var(--ok);color:var(--ok-text)}

  .badge.progress{background:var(--warn);color:var(--warn-text)}

  .badge.draft{background:var(--grey-200);color:var(--grey-700)}

  .badge.sent{background:#dbeafe;color:#1e40af}



  /* ===== Modal ===== */

  .overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:50;align-items:center;justify-content:center;padding:20px}

  .overlay.show{display:flex}

  .modal{background:#fff;border-radius:12px;width:100%;max-width:560px;max-height:90vh;overflow:auto}

  .modal-head{padding:16px 20px;border-bottom:1px solid var(--grey-200);display:flex;justify-content:space-between;align-items:center}

  .modal-head h3{margin:0;font-size:16px}

  .modal-body{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}

  .modal-body .full{grid-column:1/-1}

  .modal-foot{padding:14px 20px;border-top:1px solid var(--grey-200);display:flex;justify-content:flex-end;gap:8px}

  .field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--grey-300);border-radius:8px;font-size:14px;outline:none;background:#fff}

  .field textarea{min-height:70px;resize:vertical;font-family:inherit}

  .x-btn{background:transparent;border:none;font-size:22px;color:var(--grey-500);cursor:pointer;line-height:1}

  .x-btn:hover{color:var(--red)}



  .placeholder{background:#fff;border-radius:12px;padding:60px 20px;text-align:center;box-shadow:var(--shadow);color:var(--grey-500)}

  .placeholder h3{color:var(--grey-700);margin:0 0 6px}



  @media (max-width:900px){

    .layout{grid-template-columns:64px 1fr}

    .sidebar .name,.nav button span.lbl,.group-label,.sidebar .foot{display:none}

    .nav button{justify-content:center}

    .kpi-grid{grid-template-columns:repeat(2,1fr)}

    .modal-body{grid-template-columns:1fr}

  }

  /* ================================

   QUOTATION ITEM TABLE STYLING

================================ */



.quote-item-row td{

  padding:14px 12px;

  vertical-align:middle;

  border-bottom:1px solid #eceff3;

}



/* SKU COLUMN */

.quote-sku-col{

  min-width:120px;

  font-weight:700;

  color:#000;

  background:#fff5f7;

  border-left:4px solid #c8102e;

  text-align:center;

  letter-spacing:0.5px;

  font-size:13px;

  border-radius:8px 0 0 8px;

}



/* PRODUCT COLUMN */

.quote-product-col{

  min-width:220px;

}



.quote-product-select{

  width:100%;

  height:42px;

  padding:0 12px;

  border:1px solid #d8dee8;

  border-radius:10px;

  background:#fff;

  font-size:14px;

  transition:all .3s ease;

}



.quote-product-select:focus{

  border-color:#c8102e;

  outline:none;

  box-shadow:0 0 0 4px rgba(200,16,46,.10);

}

.select2-container .select2-selection--single{

  height: 38px !important;

  border: 1px solid #ced4da !important;

}



.select2-container--default .select2-selection--single .select2-selection__rendered{

  line-height: 38px !important;

}



.select2-container--default .select2-selection--single .select2-selection__arrow{

  height: 38px !important;

}

/* DESCRIPTION */

.quote-desc-col{

  min-width:260px;

}



.quote-desc-textarea{

  width:100%;

  /* min-height:70px; */

  padding:10px 12px;

  border:1px solid #d8dee8;

  border-radius:10px;

  resize:vertical;

  font-size:14px;

  transition:all .3s ease;

}



.quote-desc-textarea:focus{

  border-color:#c8102e;

  outline:none;

  box-shadow:0 0 0 4px rgba(200,16,46,.10);

}



/* INPUTS */

.quote-number-input{

  width:100%;

  height:42px;

  padding:0 12px;

  border:1px solid #d8dee8;

  border-radius:10px;

  font-size:14px;

  transition:all .3s ease;

}



.quote-number-input:focus{

  border-color:#c8102e;

  outline:none;

  box-shadow:0 0 0 4px rgba(200,16,46,.10);

}



/* TOTAL */

.quote-total-col{

  font-size:15px;

  font-weight:700;

  color:#111827;

  text-align:center;

  white-space:nowrap;

}



/* DELETE BUTTON */

.quote-delete-btn{

  width:38px;

  height:38px;

  border:none;

  border-radius:12px;

  background:#ffe8ec;

  color:#c8102e;

  font-size:20px;

  cursor:pointer;

  transition:all .3s ease;

}



.quote-delete-btn:hover{

  background:#c8102e;

  color:#fff;

  transform:scale(1.06);

}



/* ACTION COLUMN */

.quote-action-col{

  text-align:center;

  width:70px;

}

/* =========================================

   QUOTATION FORM MAIN DESIGN

========================================= */



.quote-editor-card{

  border-radius:24px;

  overflow:hidden;

  background:#fff;

  box-shadow:0 10px 40px rgba(15,23,42,.08);

  border:1px solid #edf0f5;

}



/* HEADER */

.quote-editor-head{

  padding:22px 28px;

  background: linear-gradient(135deg, rgb(255, 245, 246), rgb(249, 250, 251));

    border: 1px solid rgb(244, 214, 220);

    border-radius: 20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:14px;

  margin: 32px;

}

.create-quote-editor-title {

    color: #000;

    font-size: 24px;

    font-weight: 700;

    margin: 0;

    letter-spacing: .3px;

    display: flex;

    align-items: center;

    gap: 12px;

}

.quote-editor-title{

  color:#000;

  font-size:24px;

  font-weight:700;

  margin:0;

  letter-spacing:.3px;

}



.quote-editor-toolbar{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}



/* BODY */

.quote-editor-body{

  padding:28px;

  background:#f8fafc;

}



/* SECTIONS */

.quote-section{

  background:#fff;

  border-radius:20px;

  padding:22px;

  margin-bottom:24px;

  border:1px solid #edf0f5;

  box-shadow:0 4px 18px rgba(15,23,42,.04);

}



.quote-section-title{

  margin:0 0 18px;

  color:#c8102e;

  font-size:18px;

  font-weight:700;

  padding-bottom:10px;

  border-bottom:1px solid #f1f3f7;

}



/* GRID */

.quote-form-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;

}



.quote-summary-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:16px;

}



.quote-notes-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:16px;

}



/* FIELD */

.quote-field{

  display:flex;

  flex-direction:column;

}



.quote-field label{

  font-size:13px;

  font-weight:600;

  margin-bottom:8px;

  color:#475569;

}



.quote-field input,

.quote-field select,

.quote-field textarea{

  width:100%;

  border:1px solid #dbe2ea;

  border-radius:12px;

  padding:12px 14px;

  font-size:14px;

  background:#fff;

  transition:.3s ease;

}



.quote-field textarea{

  resize:vertical;

  min-height:120px;

}



.quote-field input:focus,

.quote-field select:focus,

.quote-field textarea:focus{

  border-color:#c8102e;

  outline:none;

  box-shadow:0 0 0 4px rgba(200,16,46,.10);

}



/* READONLY */

.quote-readonly{

  background:#f1f5f9 !important;

  font-weight:600;

}



/* GRAND TOTAL */

.quote-grand-total{

  grid-column:span 4;

}



.quote-grand-total input{

  background:#fff5f7 !important;

  color:#c8102e;

  font-size:22px !important;

  font-weight:800 !important;

  text-align:center;

  border:2px solid #ffd5dd;

}



/* TABLE */

.quote-table-wrap{

  overflow:auto;

  border-radius:16px;

  border:1px solid #edf0f5;

}



/* ADD BUTTON */

.quote-add-btn{

  margin-top:14px;

  color: #212529;

    background-color: #f7f2f2;

    border-color: #f1f2f3;

}

.btn-secondary{

    color: #212529;

    background-color: #f7f2f2;

    border-color: #f1f2f3;

}

.quote-add-btn,.btn-secondary:hover {

    color: #212529;

    background-color: #f3e6e6;

    border-color: #f1f2f3;

}

/* RESPONSIVE */

@media(max-width:992px){



  .quote-form-grid,

  .quote-summary-grid,

  .quote-notes-grid{

    grid-template-columns:1fr;

  }



  .quote-grand-total{

    grid-column:span 1;

  }



  .quote-editor-head{

    align-items:flex-start;

  }

}



/* vendor pricing header */



.vp-header-line{

  display:flex;

  align-items:center;

  padding: 20px;

  border-radius: 20px;

  background: linear-gradient(135deg, #fff5f6, #f9fafb);

  /* border: 1px solid #f4d6dc; */

  gap: 15px;

}



.vp-header-left{

  display:flex;

  align-items:center;

  gap:14px;

}



.vp-header-icon{

  width:52px;

  height:52px;

  border-radius:14px;

  background:#dc143c;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:22px;

  font-weight:700;

  box-shadow:0 8px 20px rgba(220,20,60,.18);

}



.vp-header-title{

  margin:0;

  font-size:28px;

  font-weight:700;

  color:#0f172a;

}



.vp-header-info{

  display:flex;

  align-items:center;

  gap:18px;

  flex-wrap:wrap;

}



.vp-header-text{

  margin:0;

  padding:10px 14px;

  background:#f8fafc;

  border:1px solid #e5e7eb;

  border-radius:12px;

  font-size:14px;

  color:#475569;

}



.vp-header-text b{

  color:#0f172a;

}



@media(max-width:768px){



  .vp-header-line{

    align-items:flex-start;

  }



  .vp-header-title{

    font-size:22px;

  }



  .vp-header-info{

    width:100%;

  }



}

/* Tooltip for Contact Person */



/* Base button wrapper */

.cp-tooltip {

  position: relative;

  overflow: visible;

}



/* Tooltip box (BOTTOM) */

.cp-tooltip::after {

  content: attr(data-tooltip);



  position: absolute;

  left: 50%;

  top: 130%;              /* changed from bottom → top */

  transform: translateX(-50%) translateY(-6px);



  background: #ffffff;

  color: #1f2937;



  padding: 6px 10px;

  font-size: 12px;

  font-weight: 500;



  border-radius: 8px;

  border: 1px solid #e5e7eb;



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);



  white-space: nowrap;



  opacity: 0;

  visibility: hidden;

  transition: all 0.2s ease;

  z-index: 999;

}



/* Arrow (BOTTOM) */

.cp-tooltip::before {

  content: "";

  position: absolute;

  left: 50%;

  top: 118%;              /* changed from bottom → top */

  transform: translateX(-50%) rotate(45deg);



  width: 8px;

  height: 8px;



  background: #ffffff;

  border-left: 1px solid #e5e7eb;

  border-top: 1px solid #e5e7eb;  /* changed direction */



  opacity: 0;

  visibility: hidden;

  transition: all 0.2s ease;

}



/* Hover state */

.cp-tooltip:hover::after,

.cp-tooltip:hover::before {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}

.qv-disclaimer-section {

  margin-top: 24px;

  padding: 18px 20px;

  /* background: #fdf8f0; */

  /* border: 1px solid #f0e0c0; */

  border-radius: 8px;

}

.qv-disclaimer-text {

  font-size: 13px;

  color: #555;

  margin: 0 0 6px 0;

  line-height: 1.6;

}

.qv-disclaimer-bold {

  font-size: 13px;

  font-weight: 700;

  color: #333;

  margin: 0 0 12px 0;

}

.qv-divider {

  border: none;

  border-top: 1px solid #ddd;

  margin: 12px 0;

}

.qv-contact-text {

  font-size: 13px;

  color: #444;

  margin: 0 0 12px 0;

  line-height: 1.7;

}

.qv-contact-text a {

  color: #c8102e;

  text-decoration: none;

}

.qv-contact-text a:hover {

  text-decoration: underline;

}

.qv-thankyou {

  font-size: 15px;

  font-weight: 800;

  color: #c8102e;

  text-align: center;

  letter-spacing: 1.5px;

  margin: 4px 0 0 0;

}