/* RESET */
*{
  box-sizing:border-box;
  font-family:system-ui;
}

html,body{
  margin:0;
  padding:0;
  background:#eef2f7;
  height:auto;
}

/* APP WRAPPER */
.app{
  width:100%;
  display:block;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
}

.title{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon{
  background:#4f46e5;
  color:#fff;
  padding:10px;
  border-radius:10px;
}





























/* =====================================
🚀 ULTRA PRO ACTION TOOLBAR
===================================== */

.actions{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:12px;

  margin-top:4px;
}



/* =====================================
🔥 GLOBAL BUTTON SYSTEM
===================================== */

.actions .btn,
.theme-toggle-btn{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  height:46px;

  padding:0 20px;

  border-radius:14px;

  border:
  1px solid rgba(148,163,184,.16);

  font-size:14px;

  font-weight:600;

  letter-spacing:.2px;

  cursor:pointer;

  user-select:none;

  isolation:isolate;

  overflow:visible;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease;

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);
}



/* =====================================
✨ PREMIUM SHINE EFFECT
===================================== */

.actions .btn::before,
.theme-toggle-btn::before{

  content:"";

  position:absolute;

  top:0;

  left:-120%;

  width:70%;

  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );

  transform:skewX(-20deg);

  transition:.7s ease;

  border-radius:inherit;

  pointer-events:none;
}



/* =====================================
✨ SHINE HOVER
===================================== */

.actions .btn:hover::before,
.theme-toggle-btn:hover::before{

  left:140%;
}



/* =====================================
🌙 DARK MODE BUTTON
===================================== */

.theme-toggle-btn{

  color:#ffffff;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #111827
  );

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



/* =====================================
🔥 PRIMARY BUTTON
===================================== */

.actions .primary{

  position:relative;

  color:#ffffff;

  border:none;

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #2563eb
  );

  box-shadow:
    0 10px 22px rgba(99,102,241,.22);
}



/* =====================================
✨ PRIMARY GLOW
===================================== */

.actions .primary::after{

  content:"";

  position:absolute;

  inset:-3px;

  border-radius:inherit;

  background:
  linear-gradient(
    90deg,
    #7c3aed,
    #2563eb,
    #06b6d4,
    #7c3aed
  );

  background-size:300% 300%;

  z-index:-1;

  filter:blur(14px);

  opacity:.62;

  animation:
    glowMove 5s linear infinite;

  pointer-events:none;
}



/* =====================================
🔥 GLOW ANIMATION
===================================== */

@keyframes glowMove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}



/* =====================================
🤍 LIGHT BUTTON
===================================== */

.actions .light{

  color:#111827;

  background:
  rgba(255,255,255,.74);

  border:
  1px solid rgba(203,213,225,.42);

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



/* =====================================
🤍 OUTLINE BUTTON
===================================== */

.actions .outline{

  color:#111827;

  background:
  rgba(255,255,255,.82);

  border:
  1px solid rgba(203,213,225,.48);

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



/* =====================================
🔵 ADD BUTTON
===================================== */

.actions .add{

  color:#ffffff;

  margin-top:10px;

  border:none;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  box-shadow:
    0 10px 22px rgba(37,99,235,.22);
}



/* =====================================
🔥 GLOBAL HOVER
===================================== */

.actions .btn:hover,
.theme-toggle-btn:hover{

  transform:
    translateY(-2px);

  border-color:
    rgba(99,102,241,.28);

  box-shadow:
    0 0 0 1px rgba(99,102,241,.10),
    0 10px 24px rgba(99,102,241,.18),
    0 0 24px rgba(99,102,241,.18);
}



/* =====================================
🔥 ACTIVE / CLICK STATE
===================================== */

.actions .btn:active,
.theme-toggle-btn:active{

  transform:
    scale(.97);

  color:#ffffff;

  border-color:
    rgba(99,102,241,.40);

  background:
  linear-gradient(
    135deg,
    #4f46e5,
    #2563eb
  );

  box-shadow:
    0 0 0 1px rgba(99,102,241,.22),
    0 12px 28px rgba(99,102,241,.24),
    0 0 28px rgba(99,102,241,.30);
}



/* =====================================
🌙 DARK MODE SUPPORT
===================================== */

body.dark-theme .actions .light,
body.dark-theme .actions .outline{

  color:#e2e8f0;

  background:
  rgba(30,41,59,.88);

  border:
  1px solid rgba(148,163,184,.10);

  box-shadow:
    0 6px 18px rgba(0,0,0,.26);
}



/* =====================================
🌙 DARK MODE HOVER
===================================== */

body.dark-theme .actions .btn:hover{

  box-shadow:
    0 14px 30px rgba(0,0,0,.34);
}



/* =====================================
📱 MOBILE RESPONSIVE
===================================== */

@media(max-width:768px){

  .actions{

    gap:10px;
  }

  .actions .btn,
  .theme-toggle-btn{

    height:42px;

    padding:0 16px;

    border-radius:12px;

    font-size:13px;
  }

}




































/* ================================
   🔥 FIX: ADD ITEM CUT ISSUE
   ================================ */




/* Invoice Items container fix */
.invoice-items{
  display: block;                 /* proper layout */
  height: auto !important;        /* auto expand */
  max-height: none !important;    /* koi limit nahi */
  overflow: visible !important;   /* content cut nahi hoga */
}







/* 🔥 FINAL WORKING ALIGNMENT */

.summary {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.summary > div {
  display: flex;
  justify-content: space-between;
  width: 240px;
  margin: 4px 0;
}

.summary span:first-child {
  width: 140px;
  text-align: left;
}

.summary span:last-child {
  width: 100px;
  text-align: right;
  font-weight: 600;
}






/* 🔥 ADD + REMOVE BUTTON SAME LINE */


.btn.remove {
  background: #ef4444;
  color: #fff;
}

.btn.remove:hover {
  background: #dc2626;
}














/* 🔥 COLLAPSE HEADER */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* 🔥 BODY hidden */
.card-body {
  display: none;
  margin-top: 10px;
}

/* 🔥 OPEN state */
.card.open .card-body {
  display: block;
}








/* 🔥 ACCORDION TOGGLE */

.toggle-icon{

  width:32px;

  height:32px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:10px;

  background:
  rgba(255,255,255,0.06);

  border:
  1px solid rgba(255,255,255,0.08);

  color:var(--text-color,#111827);

  font-size:12px;

  font-weight:700;

  transition:all .25s ease;

  flex-shrink:0;
}



/* 🔥 HOVER */

.card-header:hover .toggle-icon{

  background:
  rgba(255,255,255,0.12);

  transform:scale(1.05);
}



/* 🔥 OPEN STATE */

.card.open .toggle-icon{

  background:
  rgba(99,102,241,0.22);

  border-color:
  rgba(99,102,241,0.35);

  color:#c7d2fe;
}









































/* =====================================
   🌙 THEME TOGGLE BUTTON
===================================== */

.theme-toggle-btn{

  padding:12px 18px;

  border:none;

  border-radius:10px;

  background:#111827;

  color:#fff;

  cursor:pointer;

  font-size:14px;

  font-weight:600;

  transition:0.3s;
}

.theme-toggle-btn:hover{

  opacity:0.9;
}









/* =====================================
   🌙 DARK THEME
===================================== */

body.dark-theme{

  background:#0b1020;

  color:#ffffff;
}


/* 🔥 MAIN UI */
body.dark-theme .main{

  background:#0f172a;
}










/* 🔥 RIGHT PANEL */
body.dark-theme .right{

  background:#111827;

  border-radius:14px;
}


/* 🔥 INPUTS */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select{

  background:#1f2937;

  color:#fff;

  border:1px solid #374151;
}








/* =====================================
   🔥 DARK MODE TEMPLATE BUTTONS
===================================== */

body.dark-theme .template-bar{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  align-items:center;
}


/* 🔥 NORMAL BUTTON */
body.dark-theme .template-btn{

  background:#182235;

  color:#dbeafe;

  border:1px solid #25324a;

  padding:12px 20px;

  border-radius:12px;

  font-size:14px;

  font-weight:600;

  transition:all 0.25s ease;

  cursor:pointer;

  box-shadow:none;
}


/* 🔥 HOVER */
body.dark-theme .template-btn:hover{

  background:#22304a;

  border-color:#3b82f6;

  color:#ffffff;

  transform:translateY(-1px);
}


/* 🔥 ACTIVE BUTTON */
body.dark-theme .template-btn.active{

  background:linear-gradient(
    135deg,
    #4f46e5,
    #2563eb
  );

  border-color:#4f46e5;

  color:#ffffff;

  box-shadow:
  0 0 18px rgba(79,70,229,0.35);
}




/* =====================================
   🌙 DARK MODE TEMPLATE FIX
===================================== */

body.dark-theme .template{

  background:#1e293b !important;

  color:#ffffff !important;

  border:1px solid #334155 !important;

  opacity:1 !important;

  filter:none !important;

  transition:0.3s;
}


/* 🔥 ACTIVE TEMPLATE */
body.dark-theme .template.active{

  background:#4f46e5 !important;

  color:#ffffff !important;

  border-color:#4f46e5 !important;
}


/* 🔥 HOVER */
body.dark-theme .template:hover{

  background:#334155 !important;
}




/* =====================================
   🌙 DARK MODE ZOOM BUTTON FIX
===================================== */

body.dark-theme .zoom-btn{

  background:#1e293b !important;

  color:#ffffff !important;

  border:1px solid #334155 !important;
}


/* 🔥 HOVER */
body.dark-theme .zoom-btn:hover{

  background:#334155 !important;
}


/* 🔥 ZOOM TEXT */
body.dark-theme #zoomLevel{

  color:#ffffff !important;
}







/* =====================================
   🌙 DARK MODE PREVIEW AREA FIX
===================================== */

body.dark-theme .preview-frame{

  background:#dfe4ea !important;
}


/* 🔥 IFRAME AREA */
body.dark-theme #invoiceFrame{

  background:#dfe4ea !important;
}























/* =========================
   🔥 MAIN UI CARD (AI STYLE)
========================= */
.preview-frame{

  width:100%;

  background:#fff;

  border-radius:16px;

  padding:20px;

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

  overflow:auto;
}



















/* 🔥 FINAL GLASS PANEL FIX */
.left{

  max-width:480px;   /* 🔥 MAGIC */

  width:100%;
  
  
  
  
  
  

  background:rgba(255,255,255,0.22);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.25);

box-shadow:
0 10px 35px rgba(0,0,0,0.08);

  padding:22px;

  border-radius:20px;

  margin-left:16px;

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.20);

  position:relative;

  overflow:visible;
}








.left input,
.left textarea{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ddd;
  border-radius:6px;
}





.template-bar{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-bottom:14px;
}
















/* =========================
🔥 TEMPLATE BUTTON ACTIVE
========================= */

.template {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 🔥 ACTIVE STATE */
.template.active {
  background: #4f46e5;   /* blue */
  color: #fff;
  border-color: #4f46e5;
}

/* 🔥 HOVER */
.template:hover {
  border-color: #4f46e5;
}





/* 🔵 ACTIVE BUTTON FORCE */
.actions .btn.active {
  background: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
}




















/* =========================
   🔥 ITEM HEADER FIX (MOBILE)
========================= */
.item-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 6px;
  font-size: 12px;
}

/* 🔥 MOBILE FIX */
@media (max-width: 768px) {
  .item-head {
    grid-template-columns: repeat(3, 1fr); /* 3 column */
    font-size: 11px;
    gap: 4px;
  }
}



















/* =========================
   🔥 TAX ROW PERFECT ALIGN FIX
========================= */

.tax-row {
  display: flex;
  gap: 10px;
  align-items: stretch; /* 🔥 IMPORTANT */
}

/* 🔥 COMMON STYLE (SAME HEIGHT FOR BOTH) */
.tax-row select,
.tax-row input {
  height: 44px;              /* exact same height */
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;    /* 🔥 important */
  font-size: 14px;
}

/* dropdown width fix */
.tax-row select {
  width: 120px;
}

/* input full width */
.tax-row input {
  flex: 1;
}








/* =========================
   🔥 CLEAN FORM LAYOUT
========================= */

.item-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
}



.field input {
  flex: 1;
  padding: 8px;
}

/* 🔥 description full width */
.field.full {
  flex-direction: column;
  align-items: flex-start;
}

.field.full label {
  width: 100%;
}

.field.full input {
  width: 100%;
}







/* =====================================
🔥 FIELD LABEL FIX
===================================== */

.field label{

  display:block;

  margin-bottom:6px;

  font-size:13px;

  font-weight:600;

  color:#111827 !important;

}



/* 🌙 DARK MODE */

body.dark-theme .field label{

  color:#cbd5e1 !important;

}































/* =========================
🔥 SIGNATURE BLOCK
========================= */

.signature-block{

  margin-top:18px;

  position:relative;
}



/* =========================
🔥 SIGNATURE LABEL
========================= */

.signature-block label{

  display:block;

  font-size:11px;

  font-weight:700;

  color:#64748b;

  margin-bottom:8px;

  letter-spacing:.6px;

  text-transform:uppercase;
}



/* =========================
🔥 SIGNATURE SELECT
========================= */

.signature-block select{

  width:100%;

  height:50px;

  margin-top:6px;

  padding:0 15px;

  border-radius:15px;

  border:
  1px solid rgba(203,213,225,.75);

  background:
  rgba(255,255,255,.82);

  backdrop-filter:
  blur(10px);

  -webkit-backdrop-filter:
  blur(10px);

  color:#111827;

  font-size:14px;

  font-weight:600;

  transition:
  all .22s ease;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45);

  color-scheme:light;
}



/* =========================
🔥 SIGNATURE OPTION
========================= */

.signature-block select option{

  background:#ffffff;

  color:#111827;
}



/* =========================
🔥 SIGNATURE CANVAS
========================= */

.signature-block textarea{

  width:100%;

  min-height:130px;

  margin-top:14px;

  padding:16px;

  border-radius:20px;

  border:
  1px dashed rgba(203,213,225,.9);

  background:
  rgba(255,255,255,.58);

  backdrop-filter:
  blur(10px);

  -webkit-backdrop-filter:
  blur(10px);

  color:#111827;

  font-size:14px;

  resize:vertical;

  transition:
  all .22s ease;
}



/* =========================
🔥 SIGNATURE INPUT
========================= */

.signature-block input{

  width:100%;

  height:52px;

  margin-top:14px;

  padding:0 16px;

  border-radius:15px;

  border:
  1px solid rgba(203,213,225,.75);

  background:
  rgba(255,255,255,.82);

  backdrop-filter:
  blur(10px);

  -webkit-backdrop-filter:
  blur(10px);

  color:#111827;

  font-size:14px;

  transition:
  all .22s ease;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45);
}



/* =========================
🔥 PLACEHOLDER
========================= */

.signature-block input::placeholder,
.signature-block textarea::placeholder{

  color:#64748b;
}



/* =========================
🔥 HOVER
========================= */

.signature-block select:hover,
.signature-block textarea:hover,
.signature-block input:hover{

  border-color:#8b5cf6;

  transform:translateY(-1px);
}



/* =========================
🔥 FOCUS
========================= */

.signature-block select:focus,
.signature-block textarea:focus,
.signature-block input:focus{

  outline:none;

  border-color:#8b5cf6;

  box-shadow:
    0 0 0 4px rgba(139,92,246,.12),
    0 10px 24px rgba(139,92,246,.08);

  background:#ffffff;
}



/* =========================
🌙 DARK MODE
========================= */

body.dark-theme .signature-block label{

  color:#94a3b8;
}



body.dark-theme .signature-block select,
body.dark-theme .signature-block input{

  background:#162033;

  color:#ffffff;

  border-color:#334155;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.03);

  color-scheme:dark;
}



body.dark-theme .signature-block textarea{

  background:
  linear-gradient(
    135deg,
    rgba(30,41,59,.92),
    rgba(15,23,42,.92)
  );

  color:#ffffff;

  border:
  1px dashed rgba(148,163,184,.18);
}



body.dark-theme .signature-block select option{

  background:#162033;

  color:#ffffff;
}



body.dark-theme .signature-block input::placeholder,
body.dark-theme .signature-block textarea::placeholder{

  color:#94a3b8;
}



body.dark-theme .signature-block select:focus,
body.dark-theme .signature-block textarea:focus,
body.dark-theme .signature-block input:focus{

  background:#1e293b;

  border-color:#8b5cf6;

  box-shadow:
    0 0 0 4px rgba(139,92,246,.18),
    0 10px 24px rgba(139,92,246,.10);
}



/* =========================
📱 MOBILE
========================= */

@media(max-width:768px){

  .signature-block textarea{

    min-height:110px;
  }

}








































/* =====================================
   🔥 AI STYLE BIG PREVIEW LAYOUT
===================================== */
.main{

  display:grid;

  grid-template-columns:
  minmax(380px, 530px)
  minmax(0, 1fr);

  gap:1px;

  padding:3px;

  width:100%;

  max-width:1800px;

  margin:auto;

  align-items:start;

  min-width:0;
}































/* =====================================
   🔥 PREVIEW SIDE BACKGROUND
===================================== */



/* DARK */
body.dark-theme .preview-frame{
  background:#161b22 !important;
}




/* =====================================
   🌙 DARK PREVIEW SIDE AREA
===================================== */

body.dark-theme .a4-container{

  background:#2a2f38 !important;
}


/* 🔥 iframe outer area */
body.dark-theme #invoiceFrame{

  background:#2a2f38 !important;
}











/* =========================
   🔥 CENTER PREVIEW
========================= */

.a4-container{

  width:100%;

  background:#f9fbfd;

  border-radius:10px;

  padding:0;

  min-width:0;
  
  
  overflow:auto;
max-width:100%;
}
/* =========================
   🔥 IFRAME AUTO HEIGHT FIX
========================= */

#invoiceFrame{

  width:100%;

  height:calc(100vh - 220px);

  min-height:900px;

  border:0;

  display:block;

  background:#fff;

  overflow:auto;

  transition:height 0.2s ease;
}

/* =========================
   🔥 ELEMENTOR WIDTH FIX
========================= */
.elementor-section,
.elementor-container{
  max-width:100% !important;
  width:100% !important;
}

.elementor-widget-container{
  width:100% !important;
}







/* =====================================
   🔥 PREVIEW ZOOM TOOLBAR
===================================== */

.preview-toolbar{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:14px;

  margin-bottom:14px;

  padding-right:18px;   /* 🔥 MAGIC FIX */
}

/* 🔥 BUTTON */
.zoom-btn{

  border:none;

  background:#111827;

  color:#fff;

  width:38px;

  height:38px;

  border-radius:10px;

  cursor:pointer;

  font-size:18px;

  transition:0.2s ease;
}

.zoom-btn:hover{
  background:#2563eb;
}

/* 🔥 ZOOM TEXT */
#zoomLevel{

  min-width:60px;

  text-align:center;

  font-size:14px;

  font-weight:600;

  color:#111827;
}









/* =====================================
   📱 MOBILE + TABLET RESPONSIVE
===================================== */

@media (max-width: 1024px){

  /* 🔥 MAIN LAYOUT STACK */
  .main{

    grid-template-columns:1fr;

    gap:12px;

    padding:10px;
  }

  /* 🔥 LEFT PANEL */
  .left{

    width:100%;

    max-width:100%;

    margin-left:0;

    padding:18px;

    border-radius:18px;
  }

  /* 🔥 RIGHT PREVIEW */
  .right{

    width:100%;

    min-width:0;
  }

  /* 🔥 PREVIEW FRAME */
  .preview-frame{

    padding:8px;

    border-radius:14px;

    overflow:auto;
  }

  /* 🔥 PREVIEW CONTAINER */
  .a4-container{

    padding:0;

    overflow:auto;
  }

  /* 🔥 IFRAME */
  #invoiceFrame{

    width:100%;

    height:950px;

    min-height:950px;

    border-radius:10px;
  }

  /* 🔥 TOOLBAR */
  .preview-toolbar{

    justify-content:center;

    padding-right:0;

    flex-wrap:wrap;
  }

}





/* =====================================
   📱 MOBILE EXTRA SMALL
===================================== */

@media (max-width: 768px){

  /* 🔥 HEADER STACK */
  .header{

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

    padding:14px;
  }

  /* 🔥 ACTION BUTTONS */
  .actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    width:100%;
  }

  .actions .btn{

    flex:1;
  }

  /* 🔥 LEFT PANEL */
  .left{

    padding:14px;

    border-radius:16px;
  }

  /* 🔥 TEMPLATE BUTTON WRAP */
  .template-bar{

    flex-wrap:wrap;

    gap:8px;
  }

  .template{

    flex:1;

    text-align:center;
  }

  /* 🔥 ITEM ACTION BUTTONS */
  .item-actions{

    flex-wrap:wrap;

    gap:8px;
  }

  .item-actions .btn{

    flex:1;
  }

  /* 🔥 SUMMARY FULL WIDTH */
  .summary{

    align-items:stretch;
  }

  .summary > div{

    width:100%;
  }

  /* 🔥 FORM FIX */
  .field{

    flex-direction:column;

    align-items:stretch;

    gap:6px;
  }

  /* 🔥 TAX ROW */
  .tax-row{

    flex-direction:column;
  }

  .tax-row select{

    width:100%;
  }

  /* 🔥 PREVIEW FRAME */
  .preview-frame{

    padding:4px;

    border-radius:12px;
  }

  /* 🔥 A4 CONTAINER */
  .a4-container{

    overflow:auto;
  }

  /* 🔥 MOBILE PREVIEW HEIGHT */
  #invoiceFrame{

    width:100%;

    height:780px;

    min-height:780px;
  }

  /* 🔥 TOOLBAR */
  .preview-toolbar{

    justify-content:center;

    gap:10px;

    padding:0;

    flex-wrap:wrap;
  }

  /* 🔥 COLOR PANEL SAFE */
  .color-panel{

    width:100%;

    left:0;

    border-radius:22px;
  }

}





/* =====================================
   📱 EXTRA SMALL DEVICES
===================================== */

@media (max-width: 480px){

  .main{

    padding:6px;

    gap:10px;
  }

  .left{

    padding:12px;
  }

  .preview-frame{

    padding:2px;
  }

  #invoiceFrame{

    height:720px;

    min-height:720px;
  }

  .btn{

    font-size:13px;

    padding:8px 10px;
  }

  .template{

    font-size:13px;
  }

}






 







/* =====================================
   🔥 PREMIUM UNDO REDO
===================================== */

.history-tools{

  display:flex;

  align-items:center;

  gap:10px;

  margin-right:10px;
}


/* 🔥 GLASS BUTTON */
.history-btn{

  width:42px;

  height:42px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  font-size:20px;

  font-weight:600;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #111827,
    #1f2937
  );

  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.08);

  transition:all 0.25s ease;
}


/* 🔥 HOVER */
.history-btn:hover{

  transform:translateY(-2px);

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #4f46e5
  );

  box-shadow:
    0 10px 24px rgba(37,99,235,0.28);
}


/* 🔥 CLICK */
.history-btn:active{

  transform:scale(0.96);
}


/* 🔥 DISABLED */
.history-btn.disabled{

  opacity:0.35;

  cursor:not-allowed;

  transform:none !important;

  box-shadow:none;
}


/* 🌙 DARK MODE */
body.dark-theme .history-btn{

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #1e293b
  );
}











/* =====================================
   🔥 shareInvoice
===================================== */


#shareInvoice{

  transition:0.25s ease;
}

#shareInvoice:hover{

  background:#4f46e5;

  color:#fff;

  border-color:#4f46e5;
}










/* =====================================
   ✍ SIGNATURE PAD
===================================== */

.signature-pad-wrap{

  margin-top:14px;
}


#signaturePad{

  width:100%;

  height:120px;

  background:#fff;

  border:2px dashed #cbd5e1;

  border-radius:14px;

  cursor:crosshair;

  touch-action:none;
}


.signature-actions{

  margin-top:10px;

  display:flex;

  justify-content:flex-end;
}


#clearSignature{

  border:none;

  padding:8px 14px;

  border-radius:10px;

  cursor:pointer;

  background:#111827;

  color:#fff;

  font-size:13px;
}





























/* =====================================
🎨 ULTRA PRO COLOR PANEL
===================================== */

.brand-tools{

  position:relative;

  overflow:visible;
  
  margin-bottom:14px;

  background:
  rgba(255,255,255,0.08);

  backdrop-filter:blur(22px);

  -webkit-backdrop-filter:blur(22px);

  border:
  1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 8px 30px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);

  border-radius:22px;

  padding:12px 18px;

  min-height:88px;
}



/* 🔥 SOFT BACK LIGHT */

.brand-tools::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
  radial-gradient(
    circle at top left,
    rgba(99,102,241,0.22),
    transparent 45%
  ),
  radial-gradient(
    circle at top right,
    rgba(6,182,212,0.16),
    transparent 40%
  );

  pointer-events:none;
}













/* 🔥 PREMIUM SHINE */

.brand-tools::after{

  content:"";

  position:absolute;

  top:0;

  left:-60%;   /* 🔥 shorter start */

  width:22%;   /* 🔥 shorter shine */

  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );

  transform:skewX(-20deg);

  transition:0.6s ease;

  pointer-events:none;
}



/* 🔥 HOVER */

.brand-tools:hover::after{

  transform:
  translateX(260%)
  skewX(-20deg);
}









/* =====================================
🎨 TOP BAR
===================================== */

.brand-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}



/* LABEL */

.brand-label{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:16px;

  font-weight:700;

  color:#111827;

  letter-spacing:-0.2px;
}





/* =====================================
🎨 MAIN PREVIEW BUTTON
===================================== */

.color-preview-btn{

  width:62px;

  height:62px;

  border:none;

  border-radius:20px;

  background:#f8fafc;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  transition:all 0.22s ease;

  box-shadow:
  0 10px 24px rgba(15,23,42,0.10);

  position:relative;
}



.color-preview-btn:hover{

  transform:
  translateY(-2px)
  scale(1.03);
}



/* ACTIVE COLOR BOX */

#activeColorPreview{

  width:40px;

  height:40px;

  border-radius:14px;

  display:block;

  border:3px solid #fff;

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





/* =====================================
🎨 FLOATING PANEL
===================================== */

.color-panel{

  position:absolute;

  top:92px;

  left:0;

  width:370px;

  background:#ffffff;

  border-radius:32px;

  padding:24px;

  display:none;

  z-index:9999;

  border:1px solid rgba(0,0,0,0.06);

  box-shadow:
  0 30px 90px rgba(15,23,42,0.18);

  animation:ragoColorPopup 0.22s ease;
}



/* SHOW */

.color-panel.show{

  display:block;
}



/* FLOATING ARROW */

.color-panel::before{

  content:'';

  position:absolute;

  top:-11px;

  left:42px;

  width:24px;

  height:24px;

  background:#ffffff;

  transform:rotate(45deg);

  border-left:
  1px solid rgba(0,0,0,0.06);

  border-top:
  1px solid rgba(0,0,0,0.06);
}



/* ANIMATION */

@keyframes ragoColorPopup{

  from{

    opacity:0;

    transform:
    translateY(10px)
    scale(0.96);
  }

  to{

    opacity:1;

    transform:
    translateY(0)
    scale(1);
  }
}





/* =====================================
🎨 TABS
===================================== */

.color-tabs{

  display:flex;

  gap:12px;

  margin-bottom:24px;
}



.color-tabs .tab{

  flex:1;

  height:48px;

  border:none;

  border-radius:16px;

  background:#f3f4f6;

  color:#6b7280;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:0.2s ease;
}



.color-tabs .tab:hover{

  background:#ebeef3;
}



.color-tabs .tab.active{

  background:#5B587A;

  color:#fff;

  box-shadow:
  0 8px 20px rgba(91,88,122,0.28);
}








/* =====================================
🎨 EXTRA PANELS
===================================== */

.gradient-panel,
.pattern-panel{

  display:none;

  margin-top:14px;
}



/* SHOW */

.gradient-panel.show,
.pattern-panel.show{

  display:block;
}



/* LABEL */

.gradient-panel label,
.pattern-panel label{

  display:block;

  margin-bottom:8px;

  font-size:13px;

  font-weight:600;
}



/* SECOND COLOR */

#gradientSecondColor{

  width:100%;

  height:52px;

  border:none;

  border-radius:16px;

  overflow:hidden;

  cursor:pointer;

  background:none;

  padding:0;
}
































/* =====================================
🎨 BODY
===================================== */

.color-panel-body{

  display:flex;

  gap:18px;

  align-items:flex-start;

  margin-bottom:24px;
}





/* =====================================
🎨 BIG PREVIEW
===================================== */

.big-color-preview{

  width:120px;

  height:120px;

  border-radius:28px;

  overflow:hidden;

  flex-shrink:0;

  border:1px solid #e5e7eb;

  background:#f8fafc;

  box-shadow:
  inset 0 1px 2px rgba(255,255,255,0.5);
}



#bigPreviewBox{

  width:100%;

  height:100%;
}





/* =====================================
🎨 CONTROLS
===================================== */

.color-controls{

  flex:1;

  display:flex;

  flex-direction:column;

  gap:16px;
}





/* HEX INPUT */

#hexInput{

  width:100%;

  height:58px;

  border-radius:18px;

  border:1px solid #e5e7eb;

  background:#ffffff;

  padding:0 18px;

  font-size:22px;

  font-weight:700;

  color:#111827;

  outline:none;

  transition:0.2s ease;
}



#hexInput:focus{

  border-color:#5B587A;

  box-shadow:
  0 0 0 4px rgba(91,88,122,0.12);
}





/* =====================================
🎨 COLOR PICKER
===================================== */

#customBrandColor{

  width:100%;

  height:52px;

  border:none;

  padding:0;

  background:none;

  border-radius:18px;

  cursor:pointer;

  overflow:hidden;

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



#customBrandColor::-webkit-color-swatch-wrapper{

  padding:0;
}



#customBrandColor::-webkit-color-swatch{

  border:none;

  border-radius:18px;
}





/* =====================================
🎨 PRESET COLORS
===================================== */

.brand-colors{

  display:flex;

  align-items:center;

  gap:16px;

  flex-wrap:wrap;

  margin-top:6px;
}



/* BUTTON */

.brand-color{

  width:50px;

  height:50px;

  border-radius:50%;

  border:none;

  cursor:pointer;

  transition:all 0.22s ease;

  position:relative;

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



.brand-color:hover{

  transform:
  translateY(-2px)
  scale(1.06);
}



/* ACTIVE */

.brand-color.active{

  transform:scale(1.08);

  box-shadow:
  0 0 0 4px #fff,
  0 0 0 7px rgba(91,88,122,0.22),
  0 10px 22px rgba(15,23,42,0.16);
}





/* =====================================
🌙 DARK MODE
===================================== */

body.dark-theme .brand-tools,
body.dark-theme .color-panel{

  background:#111827;

  border-color:rgba(255,255,255,0.08);
}



body.dark-theme .brand-label{

  color:#ffffff;
}



body.dark-theme #hexInput{

  background:#1f2937;

  border-color:#374151;

  color:#ffffff;
}



body.dark-theme .color-tabs .tab{

  background:#1f2937;

  color:#cbd5e1;
}



body.dark-theme .color-tabs .tab.active{

  background:#5B587A;

  color:#ffffff;
}



body.dark-theme .big-color-preview{

  border-color:#374151;
}



body.dark-theme .color-preview-btn{

  background:#1f2937;
}










/* =====================================
🟣 PATTERN PANEL
===================================== */

.pattern-panel{

  margin-top:18px;

}





/* =====================================
🟣 LABEL
===================================== */

.pattern-panel label{

  display:block;

  margin-bottom:12px;

  font-size:13px;

  font-weight:600;

  color:#d1d5db;

  letter-spacing:.3px;

}





/* =====================================
🟣 GRID LAYOUT
===================================== */

.pattern-grid{

  display:grid;

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

  gap:10px;

}





/* =====================================
🟣 BUTTON BASE
===================================== */

.pattern-btn{

  position:relative;

  overflow:hidden;

  border:none;

  border-radius:14px;

  padding:14px 10px;

  cursor:pointer;

  font-size:12px;

  font-weight:600;

  letter-spacing:.3px;

  color:#fff;

  background:#1e293b;

  transition:
  transform .18s ease,
  box-shadow .18s ease,
  border .18s ease,
  opacity .18s ease;

  min-height:68px;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.05),
  0 4px 12px rgba(0,0,0,.25);

}





/* =====================================
🔥 HOVER
===================================== */

.pattern-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 10px 24px rgba(0,0,0,.35);

}





/* =====================================
🔥 ACTIVE
===================================== */

.pattern-btn.active{

  outline:
  2px solid #8b5cf6;

  box-shadow:
  0 0 0 4px rgba(139,92,246,.20),
  0 10px 24px rgba(0,0,0,.35);

}





/* =====================================
🔵 DOTS
===================================== */

.pattern-btn[data-pattern="dots"]{

  background:
  radial-gradient(
    rgba(255,255,255,.30) 2px,
    transparent 2px
  ),
  #4f46e5;

  background-size:
  18px 18px;

}





/* =====================================
🟩 GRID
===================================== */

.pattern-btn[data-pattern="grid"]{

  background:
  linear-gradient(
    rgba(255,255,255,.15) 1px,
    transparent 1px
  ),
  linear-gradient(
    90deg,
    rgba(255,255,255,.15) 1px,
    transparent 1px
  ),
  #0f172a;

  background-size:
  20px 20px;

}





/* =====================================
🟠 LINES
===================================== */

.pattern-btn[data-pattern="lines"]{

  background:
  repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.14) 10px,
    transparent 10px,
    transparent 20px
  ),
  #ea580c;

}





/* =====================================
🟣 MESH
===================================== */

.pattern-btn[data-pattern="mesh"]{

  background:
  linear-gradient(
    45deg,
    rgba(255,255,255,.10) 25%,
    transparent 25%
  ),
  linear-gradient(
    -45deg,
    rgba(255,255,255,.10) 25%,
    transparent 25%
  ),
  #7c3aed;

  background-size:
  28px 28px;

}





/* =====================================
⚡ ZIGZAG
===================================== */

.pattern-btn[data-pattern="zigzag"]{

  background:
  repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.20),
    rgba(255,255,255,.20) 10px,
    transparent 10px,
    transparent 20px
  ),
  #db2777;

}





/* =====================================
⚪ NOISE
===================================== */

.pattern-btn[data-pattern="noise"]{

  background:
  radial-gradient(
    rgba(255,255,255,.18) 1px,
    transparent 1px
  ),
  #52525b;

  background-size:
  6px 6px;

}





/* =====================================
🧊 HEX
===================================== */

.pattern-btn[data-pattern="hex"]{

  background:
  radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,.25) 2px,
    transparent 3px
  ),
  #0891b2;

  background-size:
  24px 24px;

}





/* =====================================
🌊 WAVE
===================================== */

.pattern-btn[data-pattern="wave"]{

  background:
  radial-gradient(
    circle at 100% 50%,
    rgba(255,255,255,.18) 10%,
    transparent 11%
  ),
  radial-gradient(
    circle at 0% 50%,
    rgba(255,255,255,.18) 10%,
    transparent 11%
  ),
  #2563eb;

  background-size:
  36px 36px;

}





/* =====================================
⚫ CARBON
===================================== */

.pattern-btn[data-pattern="carbon"]{

  background:
  repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.04) 10px,
    rgba(0,0,0,.10) 10px,
    rgba(0,0,0,.10) 20px
  ),
  #111827;

}





/* =====================================
🍏 GLASS
===================================== */

.pattern-btn[data-pattern="glass"]{

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.06)
  ),
  #64748b;

  backdrop-filter:
  blur(6px);

}





/* =====================================
🔷 DIAGONAL
===================================== */

.pattern-btn[data-pattern="diagonal"]{

  background:
  repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.16),
    rgba(255,255,255,.16) 8px,
    transparent 8px,
    transparent 16px
  ),
  #0f766e;

}





/* =====================================
📱 MOBILE
===================================== */

@media(max-width:768px){

  .pattern-grid{

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

  }

}








/* =====================================
📱 MOBILE TOOLBAR FIX
===================================== */

@media(max-width:768px){

  .brand-top{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

  }



  .brand-right{

    width:100%;

    overflow-x:auto;

    padding-bottom:4px;

  }



  .preview-toolbar{

    width:max-content;

  }



  /* 🔥 HIDE SCROLLBAR */

  .brand-right::-webkit-scrollbar{

    display:none;

  }

}



















/* =====================================
✨ ULTRA PRO AI BUTTON
===================================== */

.top-ai-btn{

  position:relative;
  
  
  

  width:100%;

  height:56px;

  margin-bottom:16px;

  border:none;

  border-radius:18px;

  overflow:hidden;

  cursor:pointer;

  font-size:16px;

  font-weight:800;

  letter-spacing:.3px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #4f46e5,
    #7c3aed,
    #06b6d4
  );
  
  
 

  background-size:
  220% 220%;

  animation:
  aiGradientMove 6s ease infinite;

  box-shadow:
  0 10px 28px rgba(79,70,229,.35),
  0 0 22px rgba(124,58,237,.22);

  transition:
  transform .25s ease,
  box-shadow .25s ease;

}





/* =====================================
🔥 GLOW LAYER
===================================== */

.top-ai-btn::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:20px;

  background:
  linear-gradient(
    90deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.45),
    rgba(255,255,255,.10)
  );

  transform:
  translateX(-120%);

  animation:
  shineMove 3.5s linear infinite;

}





/* =====================================
🔥 HOVER
===================================== */

.top-ai-btn:hover{

  transform:
  translateY(-3px)
  scale(1.01);

  box-shadow:
  0 18px 38px rgba(79,70,229,.45),
  0 0 34px rgba(124,58,237,.34);

}





/* =====================================
🔥 ACTIVE PRESS
===================================== */

.top-ai-btn:active{

  transform:scale(.98);

}





/* =====================================
🌈 GRADIENT MOVE
===================================== */

@keyframes aiGradientMove{

  0%{

    background-position:
    0% 50%;

  }

  50%{

    background-position:
    100% 50%;

  }

  100%{

    background-position:
    0% 50%;

  }

}





/* =====================================
✨ SHINE EFFECT
===================================== */

@keyframes shineMove{

  0%{

    transform:
    translateX(-120%);

  }

  100%{

    transform:
    translateX(120%);

  }

}




















/* =====================================
🌙 DARK MODE
===================================== */

body.dark-theme .top-ai-btn{

  box-shadow:
  0 12px 32px rgba(79,70,229,.42),
  0 0 38px rgba(6,182,212,.18);

}






/* =====================================
🚀 RAGO TIMER MODAL
===================================== */

#ragoTimerModal{

  position:fixed;

  inset:0;

  z-index:999999;

}

.rago-overlay{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.65);

  backdrop-filter:blur(8px);

}

.rago-modal{

  position:absolute;

  top:25%;

  left:50%;

  transform:translate(-50%,-50%);

  width:420px;

  max-width:90%;

  background:#111827;

  border-radius:28px;

  padding:40px;

  color:#fff;

  text-align:center;

  box-shadow:
  0 30px 80px rgba(0,0,0,.45);

}

.rago-badge{

  display:inline-block;

  padding:8px 16px;

  border-radius:999px;

  background:#4f46e5;

  margin-bottom:18px;

}

.rago-timer{

  font-size:72px;

  font-weight:800;

  margin:24px 0;

}

.rago-progress{

  height:10px;

  background:#1f2937;

  border-radius:999px;

  overflow:hidden;

  margin-top:25px;

}

.rago-fill{

  width:0%;

  height:100%;

  background:
  linear-gradient(
    90deg,
    #7c3aed,
    #3b82f6
  );

  transition:.3s;

}

.rago-status{

  margin-top:18px;

  opacity:.9;

}








/* =====================================
🔥 REAL MOBILE PDF FIX
===================================== */

@media print{

  html,
  body{

    width:210mm !important;

    min-width:210mm !important;

    margin:0 !important;

    padding:0 !important;

    overflow:visible !important;

    background:#fff !important;
  }

  /* 🔥 REMOVE SCROLL AREA */
  .preview-frame,
  .a4-container{

    overflow:visible !important;

    height:auto !important;

    max-height:none !important;

    padding:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  /* 🔥 iframe FULL */
  #invoiceFrame{

    width:210mm !important;

    min-width:210mm !important;

    height:auto !important;

    overflow:visible !important;

    display:block !important;

    background:#fff !important;
  }

  /* 🔥 ACTUAL PAPER */
  .invoice{

    width:210mm !important;

    min-width:210mm !important;

    min-height:297mm !important;

    margin:0 auto !important;

    transform:none !important;

    zoom:1 !important;

    scale:1 !important;

    overflow:visible !important;

    box-shadow:none !important;
  }

}




























/* =====================================
🚀 ULTRA PRO BRAND UPLOAD SECTION
===================================== */



.brand-upload-grid{

  display:grid;

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

  gap:18px;

  width:100%;

  clear:both;

  margin-top:0;
}









/* =====================================
📦 ULTRA GLASS CARD
===================================== */

.upload-box{

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  width:100%;

  min-height:50px;

  padding:16px;

  border-radius:22px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.38)
  );

  backdrop-filter:
  blur(16px);

  -webkit-backdrop-filter:
  blur(16px);

  border:
  1px solid rgba(255,255,255,.52);

  box-shadow:
    0 6px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.45);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}






/* =====================================
🔥 SEPARATE COUNTRY FROM GRID
===================================== */

.country-row{

  margin-bottom:24px;
}



/* =====================================
🔥 REMOVE TOP STICK
===================================== */

.brand-upload-grid{

  margin-top:10px;
}










/* =====================================
✨ TOP LIGHT GLOW
===================================== */

.upload-box::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
  radial-gradient(
    circle at top left,
    rgba(99,102,241,.20),
    transparent 42%
  ),
  radial-gradient(
    circle at top right,
    rgba(6,182,212,.16),
    transparent 38%
  );

  pointer-events:none;
}



/* =====================================
✨ SHINE EFFECT
===================================== */

.upload-box::after{

  content:"";

  position:absolute;

  top:0;

  left:-65%;

  width:35%;

  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );

  transform:skewX(-22deg);

  transition:.7s ease;

  pointer-events:none;
}



/* =====================================
🔥 HOVER
===================================== */

.upload-box:hover{

  transform:
  translateY(-2px);

  border-color:
  rgba(79,70,229,.24);

  box-shadow:
    0 10px 24px rgba(79,70,229,.08),
    0 0 12px rgba(124,58,237,.05);
}


/* ✨ SHINE MOVE */

.upload-box:hover::after{

  transform:
  translateX(280%)
  skewX(-22deg);
}



/* =====================================
🏷 PREMIUM LABEL
===================================== */

.upload-label{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:14px;

  font-size:12px;

  font-weight:800;

  letter-spacing:1px;

  text-transform:uppercase;

  color:#4f46e5;
}



/* =====================================
📁 FILE INPUT
===================================== */

.modern-file{

  width:100%;

  min-height:56px;

  padding:12px;

  border-radius:18px;

  border:
  2px dashed #c7d2fe;

  background:
  rgba(255,255,255,0.88);

  cursor:pointer;

  font-size:13px;

  font-weight:600;

  color:#111827;

  transition:
  all .25s ease;

  outline:none;
}



/* HOVER */

.modern-file:hover{

  border-color:#4f46e5;

  background:#f8faff;

  box-shadow:
  0 0 0 5px rgba(79,70,229,.08);
}



/* =====================================
🌍 SELECT
===================================== */

.modern-select{

  width:100%;

  height:56px;

  padding:0 16px;

  border-radius:18px;

  border:
  1px solid #dbe3f0;

  background:
  rgba(255,255,255,0.92);

  font-size:14px;

  font-weight:700;

  color:#111827;

  outline:none;

  transition:
  all .22s ease;

  appearance:none;
}



/* FOCUS */

.modern-select:focus{

  border-color:#4f46e5;

  box-shadow:
  0 0 0 5px rgba(79,70,229,.10);
}



/* =====================================
✨ ACTIVE GLOW
===================================== */

.modern-file:focus,
.modern-select:focus{

  transform:translateY(-1px);
}



/* =====================================
🌙 DARK MODE
===================================== */

body.dark-theme .upload-box{

  background:
  linear-gradient(
    135deg,
    rgba(17,24,39,.92),
    rgba(17,24,39,.72)
  );

  border-color:
  rgba(255,255,255,.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
}



/* DARK GLOW */

body.dark-theme .upload-box::before{

  background:
  radial-gradient(
    circle at top left,
    rgba(99,102,241,.24),
    transparent 42%
  ),
  radial-gradient(
    circle at top right,
    rgba(6,182,212,.18),
    transparent 38%
  );
}



/* LABEL */

body.dark-theme .upload-label{

  color:#c7d2fe;
}



/* INPUTS */

body.dark-theme .modern-file,
body.dark-theme .modern-select{

  background:#1f2937;

  border-color:#374151;

  color:#fff;
}



/* HOVER */

body.dark-theme .modern-file:hover{

  border-color:#6366f1;

  background:#273449;

  box-shadow:
  0 0 0 5px rgba(99,102,241,.12);
}



/* =====================================
📱 MOBILE
===================================== */

@media(max-width:768px){

  .brand-upload-grid{

    grid-template-columns:1fr;

    gap:14px;
  }

  .brand-upload-grid .upload-box:last-child{

    grid-column:auto;
  }

  .upload-box{

    padding:16px;

    border-radius:22px;
  }

}
































/* =====================================
🔥 INVOICE INFO TOP
===================================== */

.invoice-info-top{

  display:flex;

  gap:18px;

  margin-bottom:18px;

  align-items:flex-end;
}



/* =====================================
🔥 PREMIUM GLASS CARD
===================================== */

.invoice-card{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.52),
    rgba(255,255,255,.30)
  );

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.34);

  box-shadow:
    0 12px 34px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.55);

  border-radius:26px;

  padding:20px;

  transition:
  transform .25s ease,
  box-shadow .25s ease,
  border-color .25s ease;
}



/* =====================================
✨ TOP GLOW
===================================== */

.invoice-card::before{

  content:"";

  position:absolute;

  top:-80px;

  right:-80px;

  width:180px;

  height:180px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(139,92,246,.14),
    transparent 70%
  );

  pointer-events:none;
}



/* =====================================
🔥 GLASS HOVER
===================================== */

.invoice-card:hover{

  transform:translateY(-2px);

  border-color:
  rgba(139,92,246,.22);

  box-shadow:
    0 18px 40px rgba(99,102,241,.10),
    inset 0 1px 0 rgba(255,255,255,.62);
}



/* =====================================
🔥 BOX
===================================== */

.invoice-box{

  flex:1;

  display:flex;

  flex-direction:column;
}



/* =====================================
🔥 LABEL
===================================== */

.invoice-box label{

  font-size:11px;

  font-weight:700;

  color:#64748b;

  margin-bottom:8px;

  letter-spacing:.6px;

  text-transform:uppercase;
}



/* =====================================
🔥 SELECT
===================================== */

.invoice-box select{

  width:100%;

  height:50px;

  padding:0 15px;

  border-radius:15px;

  border:
  1px solid rgba(203,213,225,.9);

  background:
  rgba(255,255,255,.82);

  backdrop-filter:
  blur(10px);

  -webkit-backdrop-filter:
  blur(10px);

  font-size:14px;

  font-weight:600;

  color:#111827;

  transition:
  border-color .2s ease,
  box-shadow .2s ease,
  background .2s ease,
  transform .2s ease;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45);

  color-scheme:light;

  appearance:none;
}



/* =====================================
🔥 OPTION STYLE
===================================== */

.invoice-box select option{

  background:#ffffff;

  color:#111827;
}



/* =====================================
🔥 HOVER
===================================== */

.invoice-box select:hover{

  border-color:#8b5cf6;

  background:
  rgba(255,255,255,.96);

  transform:translateY(-1px);
}



/* =====================================
🔥 FOCUS
===================================== */

.invoice-box select:focus{

  outline:none;

  border-color:#8b5cf6;

  background:#fff;

  box-shadow:
    0 0 0 4px rgba(139,92,246,.10),
    0 8px 20px rgba(139,92,246,.08),
    inset 0 1px 2px rgba(255,255,255,.55);
}



/* =====================================
🌙 DARK MODE CARD
===================================== */

body.dark-theme .invoice-card{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    rgba(17,24,39,.96),
    rgba(15,23,42,.92)
  );

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(148,163,184,.10);

  box-shadow:
    0 12px 34px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03);

  border-radius:26px;
}



/* =====================================
✨ DARK GLOW
===================================== */

body.dark-theme .invoice-card::before{

  content:"";

  position:absolute;

  top:-90px;

  right:-90px;

  width:220px;

  height:220px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(99,102,241,.18),
    transparent 72%
  );

  pointer-events:none;
}



/* =====================================
🌙 DARK MODE HOVER
===================================== */

body.dark-theme .invoice-card:hover{

  transform:translateY(-2px);

  border-color:
  rgba(99,102,241,.18);

  box-shadow:
    0 18px 42px rgba(0,0,0,.52),
    0 0 30px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}



/* =====================================
🌙 DARK MODE LABEL
===================================== */

body.dark-theme .invoice-box label{

  color:#94a3b8;
}



/* =====================================
🌙 DARK MODE SELECT
===================================== */

body.dark-theme .invoice-box select{

  background:#162033;

  color:#ffffff;

  border-color:#334155;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.03);

  color-scheme:dark;
}



/* =====================================
🌙 DARK MODE OPTION
===================================== */

body.dark-theme .invoice-box select option{

  background:#162033 !important;

  color:#ffffff !important;
}



/* =====================================
🌙 DARK MODE HOVER
===================================== */

body.dark-theme .invoice-box select:hover{

  border-color:#8b5cf6;

  background:#1b263b;
}



/* =====================================
🌙 DARK MODE FOCUS
===================================== */

body.dark-theme .invoice-box select:focus{

  background:#1e293b;

  border-color:#8b5cf6;

  box-shadow:
    0 0 0 4px rgba(139,92,246,.18),
    0 8px 20px rgba(139,92,246,.12);
}



/* =====================================
📱 MOBILE
===================================== */

@media(max-width:768px){

  .invoice-info-top{

    display:grid;

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

    gap:12px;

    align-items:start;
  }

  .invoice-box{

    width:100%;
  }

  .invoice-box select{

    height:48px;

    font-size:13px;
  }

  .invoice-card{

    padding:18px;

    border-radius:22px;
  }

}
































/* =====================================
🔥 CUSTOM UPLOAD BUTTON
===================================== */
.custom-upload-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  height:40px;

  border-radius:14px;

  cursor:pointer;

  font-size:12px;

  font-weight:700;

  color:#ffffff;

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #2563eb
  );

  transition:.22s ease;
}



/* =====================================
🔥 HOVER
===================================== */

.custom-upload-btn:hover{

  transform:translateY(-1px);

  box-shadow:
    0 8px 18px rgba(99,102,241,.24);
}



/* =====================================
🔥 HIDE REAL INPUT
===================================== */

.hidden-file{

  display:none;
}

















/* =====================================
🔥 PRO ITEM ACTION BUTTONS
===================================== */

.item-actions{

  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:16px;

  flex-wrap:wrap;
}


#addItem,
#removeItem{

  height:32px;

  padding:0 14px;

  border:none;

  border-radius:8px;

  cursor:pointer;

  font-size:12px;

  font-weight:600;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:5px;

  transition:all .2s ease;

  box-shadow:
    0 2px 6px rgba(0,0,0,.06);

  line-height:1;
}



/* =====================================
🔵 ADD BUTTON
===================================== */

#addItem{

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #3b82f6
  );
}

#addItem:hover{

  transform:translateY(-1px);

  box-shadow:
    0 8px 18px rgba(59,130,246,.18);
}



/* =====================================
🔴 REMOVE BUTTON
===================================== */

#removeItem{

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #dc2626,
    #b91c1c
  );
}

#removeItem:hover{

  transform:translateY(-1px);

  box-shadow:
    0 4px 10px rgba(185,28,28,.20);
}



/* =====================================
🔥 CLICK EFFECT
===================================== */

#addItem:active,
#removeItem:active{

  transform:scale(.97);
}