@charset "utf-8";
/* CSS Document */
/* for product description*/
	
/*===================================================
Red Asterisk Style
=======================================================*/
.required-star {
    color: #dc2626; /* Red color */
    font-weight: bold;
    margin-left: 2px;
}
	
	/* REMOVE GAP ABOVE */
.product-box{
  margin-top:-10px;
}

.prod-head > div{
  text-align:center;
}

.prod-head,
.prod-row{
  display:grid;
  grid-template-columns:65% 8% 10% 17%;
  gap:6px;
}

.prod-head{
  background:#f1f5f9;
  padding:8px;
  font-weight:700;
  font-size:13px;
  border:1px solid #d1d5db;
}

.prod-row{
  border:1px solid #d1d5db;
  border-top:none;
  padding:6px;
  align-items:center;
}

/* INPUTS */
.prod-row input,
.modern-select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  font-size:14px;
  outline:none;
  transition:.25s;
}

.prod-row input:focus,
.modern-select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.2);
}

/* MODERN SELECT */
.modern-select{
  appearance:none;
  background:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}

/* SUB ROW */
.subrow{
  background:#f8fafc;
  transition:.3s ease;
}

/* DISABLED STATE */
.disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(1);
}
		
		
.subrow.disabled{
  opacity:.4;
  pointer-events:none;
  transform:scale(.98);
}
/* TOTAL */
.total{
   font-weight:700;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* for product description ends*/

/*====================================================
Styling for the Class Name (e.g., Class 3 - Individual) 
======================================================*/
#rowClassPreview {
    font-size: 12px;
    color: #555555;
    font-weight: normal;
    line-height: 1.2;
}

/* Styling for the Token Info (e.g., HyperSecu Token) */
#rowTokenPreview {
    font-size: 12px;
    color: #555555;
    margin-top: 4px; /* Creates the gap between Class and Token */
    font-style: italic; /* Example: making token info look different */
		}
	
#rowClassPreview, #rowTokenPreview {
    font-family: 'DejaVu Sans', sans-serif; /* Recommended for Dompdf Rupee support */
    display: block;
}
/*===============================================
Remove number input arrows (spinners) from Qty & Price inputs 
=================================================*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]{
  -moz-appearance: textfield; /* Firefox */
}

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

========================================================*/
:root{
  --blue:#2563eb;
  --red:#dc2626;
  --border:#d1d5db;
  --bg:#f8fafc;
  --ink:#0f172a;
}

*{
  box-sizing:border-box;
  font-family:Inter,system-ui;
}

body {
margin:0;
background:var(--bg);
font-family: 'Poppins', sans-serif;
}


.page{
  max-width:1300px;
  margin:auto;
  padding:16px;
  display:grid;
  grid-template-columns:60% 40%;
grid-template-columns: 1.5fr 1fr;
  gap:16px;
}

/* LEFT COLUMN */
.left{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* BOX */
.box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}

/* INPUT */
.field{position:relative;margin-bottom:14px}
.field input{
  width:100%;
  padding:14px 12px;
  border:1px solid var(--border);
  border-radius:8px;
}
.field label{
  position:absolute;
  left:12px;top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:0 6px;
  font-size:13px;
  color:#64748b;
}
.field input:focus+label,
.field input:not(:placeholder-shown)+label{
  top:-5px;font-size:11px;color:var(--blue)
}
.row2{display:grid;grid-template-columns:65% 30%;gap:10px}

/* BUTTON BOX */
.btn-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.btn{
  padding:16px;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
}
.btn.primary{background:#2563eb;color:#fff}
.btn.info{background:#17a2b8;color:#fff}
.btn.secondary{background:#475569;color:#fff}
.btn.emssuccess{background:#28a745;color:#fff}
.btn.warning{background:#ffc107;color:#fff}
.btn.danger{background:#dc2626;color:#fff}
.btn.toggle.on{background:#2563eb;color:#fff}
.btn.toggle.off{background:#dc2626;color:#fff}
.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border: 2px solid #dc3545;}
.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}

/* PRODUCT DESCRIPTION */
.desc-box{grid-column:1 / span 2}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px}

/* ===============================
   PREVIEW BOX (SCREEN ONLY)
================================ */
.preview-box{
width:38vw;
  max-width:600px;  	
/*  width:100%;*/
  margin:0px auto;
padding:15mm;
  padding:15px;              /* PAGE MARGIN */
  background:#3a3a3a;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  grid-row: span 3;
}	
	
/* preview size (40% look) */
.preview-box .invoice-box{
  transform: scale(1.005);
  transform-origin: top center;
}

.preview-box{
  background:#fff;
  border-radius:12px;
  padding:12px;
}
.a4{
  position:relative;
  aspect-ratio:210/297;
  padding:32px;
  border:1px solid var(--border);
  overflow:hidden;
}

/* STAMPS */
.stamp{
  position:absolute;
  top:70%;
  left:70%;
  transform:translate(-50%,-50%) rotate(-15deg);
  font-size:44px;
  font-weight:800;
  opacity:.15;
  pointer-events:none;
  animation:pop .3s ease;
}
.stamp.paid{color:green}
.stamp.unpaid{color:red}

/* WATERMARK */
.watermark{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:72px;
  font-weight:800;
  opacity:.06;
  transform:rotate(-30deg);
  pointer-events:none;
top:25%;
  left:10%;
}

/* RETRIEVE ANIMATION */
.fade-in{
  animation:fade .5s ease;
}

@keyframes pop{from{transform:scale(.8)}to{transform:scale(1)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1}}

@media print{
  body *{visibility:hidden}
  .a4,.a4 *{visibility:visible}
  .a4{position:absolute;left:0;top:0;width:100%}
}

/* STOP GRID ITEMS FROM STRETCHING */
.left{
  align-items:start;
}

.box{
  align-self:start;
margin-bottom:0;
}