/* =========================================
   AGI ULTRA PRO v16 AI 🚀
   ULTIMATE LEGAL SAAS STYLE
========================================= */

/* =========================================
   GOOGLE FONT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@500;700&display=swap');

/* =========================================
   GLOBAL RESET
========================================= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:"Inter",sans-serif;

background:
linear-gradient(
135deg,
#eef2f7,
#dbeafe
);

color:#111827;

line-height:1.6;

transition:.3s ease;

overflow-x:hidden;

padding:20px;

min-height:100vh;

}

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

.dark-mode{

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

color:white;

}

.dark-mode .form-section,
.dark-mode .preview-section,
.dark-mode .history-box,
.dark-mode .analytics-box,
.dark-mode .legal-ai-box{

background:#111827;
color:white;

}

.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode canvas{

background:#1f2937;
color:white;
border-color:#374151;

}

.dark-mode .tagline,
.dark-mode .doc-id,
.dark-mode .subtitle{

color:#d1d5db;

}

.dark-mode .watermark{

color:rgba(255,255,255,0.05);

}

.dark-mode .history-item{

background:#1f2937;
border-left:5px solid #3b82f6;

}

/* =========================================
   HEADER
========================================= */

header{

text-align:center;

margin-bottom:30px;

animation:fadeIn .7s ease;

}

header h1{

font-size:42px;

font-weight:800;

margin-bottom:10px;

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

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.tagline{

font-size:16px;

color:#4b5563;

font-weight:500;

}

/* =========================================
   PREMIUM BADGE
========================================= */

.premium-active{

display:inline-block;

padding:12px 22px;

border-radius:40px;

font-size:14px;

font-weight:700;

background:
linear-gradient(
135deg,
#059669,
#10b981
);

color:white;

box-shadow:
0 8px 25px rgba(16,185,129,.25);

margin-top:10px;

}

/* =========================================
   MAIN CONTAINER
========================================= */

.container{

max-width:1600px;

margin:auto;

display:flex;

flex-wrap:wrap;

gap:35px;

align-items:flex-start;

justify-content:center;

}

/* =========================================
   FORM SECTION
========================================= */

.form-section{

background:white;

width:370px;

padding:30px;

border-radius:24px;

box-shadow:
0 15px 45px rgba(0,0,0,.08);

position:sticky;

top:20px;

transition:.3s ease;

backdrop-filter:blur(12px);

}

.form-section:hover{

transform:translateY(-3px);

}

.form-section h2{

font-size:26px;

font-weight:800;

margin-bottom:20px;

}

/* =========================================
   LABELS
========================================= */

.form-section label{

display:block;

margin-top:15px;
margin-bottom:7px;

font-size:14px;
font-weight:700;

}

/* =========================================
   INPUTS
========================================= */

.form-section input,
.form-section select,
.form-section textarea{

width:100%;

padding:14px;

border:1px solid #d1d5db;

border-radius:16px;

font-size:14px;

background:#f9fafb;

transition:.25s ease;

font-family:inherit;

}

.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus{

outline:none;

border-color:#2563eb;

background:white;

box-shadow:
0 0 0 5px rgba(37,99,235,.12);

}

.form-section textarea{

min-height:100px;

resize:vertical;

}

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

#signaturePad{

margin-top:10px;

border:2px dashed #cbd5e1;

border-radius:16px;

background:white;

}

/* =========================================
   BUTTONS
========================================= */

.button-group{

margin-top:22px;

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

button{

padding:14px;

border:none;

border-radius:16px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.25s ease;

font-family:inherit;

background:#111827;

color:white;

box-shadow:
0 6px 16px rgba(0,0,0,.08);

}

button:hover{

transform:
translateY(-2px)
scale(1.02);

opacity:.95;

}

button:active{

transform:scale(.98);

}

.btn-green{
background:#059669;
}

.btn-blue{
background:#2563eb;
}

.btn-orange{
background:#ea580c;
}

.btn-purple{
background:#7c3aed;
}

/* =========================================
   QR BOX
========================================= */

#qrBox{

margin-top:25px;

text-align:center;

padding:15px;

border-radius:18px;

background:#f8fafc;

}

/* =========================================
   HISTORY BOX
========================================= */

.history-box,
.analytics-box{

margin-top:25px;

background:#fff;

padding:20px;

border-radius:20px;

box-shadow:
0 8px 24px rgba(0,0,0,.06);

}

.history-box h3,
.analytics-box h3{

margin-bottom:16px;

font-size:20px;

font-weight:800;

}

.history-item{

background:#f3f4f6;

padding:14px;

border-radius:14px;

margin-bottom:12px;

border-left:5px solid #2563eb;

font-size:13px;

overflow-wrap:break-word;

transition:.25s;

}

.history-item:hover{

transform:translateX(3px);

}

/* =========================================
   PREVIEW SECTION
========================================= */

.preview-section{

background:white;

width:210mm;

min-height:297mm;

padding:25mm 20mm;

border-radius:22px;

position:relative;

overflow:hidden;

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

}

/* =========================================
   DOCUMENT PREVIEW
========================================= */

.document-preview{

position:relative;

z-index:2;

font-size:15px;

}

.document-preview p{

margin-bottom:16px;

text-align:justify;

}

/* =========================================
   MEEZAN LOGO
========================================= */

.meezan-logo{

text-align:center;

font-size:15px;

font-weight:800;

letter-spacing:2px;

margin-bottom:25px;

color:#2563eb;

}

/* =========================================
   TITLE
========================================= */

.title{

text-align:center;

font-size:44px;

letter-spacing:5px;

margin-bottom:12px;

font-family:
"Cormorant Garamond",
serif;

font-weight:700;

}

.subtitle{

text-align:center;

font-size:14px;

letter-spacing:2px;

margin-bottom:45px;

color:#4b5563;

}

/* =========================================
   LISTS
========================================= */

.document-preview ol{

padding-left:28px;

margin-top:14px;

}

.document-preview li{

margin-bottom:15px;

}

/* =========================================
   STAMP
========================================= */

.stamp{

position:absolute;

top:30px;
right:30px;

width:95px;
height:95px;

border:4px solid #dc2626;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

font-size:22px;
font-weight:800;

color:#dc2626;

transform:rotate(-15deg);

z-index:3;

background:white;

}

/* =========================================
   NOTARY SEAL
========================================= */

.notary-seal{

position:absolute;

bottom:120px;
right:40px;

padding:12px 18px;

border:2px dashed #111827;

border-radius:14px;

font-size:12px;

font-weight:800;

transform:rotate(-8deg);

opacity:.75;

}

/* =========================================
   SIGNATURE SECTION
========================================= */

.signature-section{

display:flex;

justify-content:space-between;

gap:40px;

margin-top:80px;

flex-wrap:wrap;

}

.signature-block{

width:220px;

text-align:center;

}

.signature-line{

border-top:2px solid #000;

margin-top:45px;

padding-top:8px;

font-size:13px;

font-weight:700;

}

/* =========================================
   DOCUMENT ID
========================================= */

.doc-id{

margin-top:40px;

text-align:center;

font-size:12px;

color:#6b7280;

font-weight:600;

}

/* =========================================
   WATERMARK
========================================= */

.watermark{

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-50%)
rotate(-30deg);

font-size:95px;

font-weight:800;

color:rgba(0,0,0,.04);

white-space:nowrap;

pointer-events:none;

user-select:none;

z-index:1;

}

/* =========================================
   RTL SUPPORT
========================================= */

[dir="rtl"]{

text-align:right;

font-family:
"Noto Nastaliq Urdu",
"Arial",
serif;

}

/* =========================================
   AI GLOW EFFECT
========================================= */

.ai-glow{

animation:aiGlow 2s infinite alternate;

}

@keyframes aiGlow{

from{

box-shadow:
0 0 0 rgba(37,99,235,.1);

}

to{

box-shadow:
0 0 28px rgba(37,99,235,.35);

}

}

/* =========================================
   FADE ANIMATION
========================================= */

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* =========================================
   LEGAL AI CHATBOX
========================================= */

.legal-ai-box{

position:fixed;

bottom:20px;
right:20px;

width:320px;

background:white;

padding:20px;

border-radius:22px;

box-shadow:
0 15px 40px rgba(0,0,0,.15);

z-index:9999;

}

/* =========================================
   ANALYTICS
========================================= */

.analytics-box p{

margin-bottom:10px;

font-size:14px;

font-weight:600;

}

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

@media(max-width:1100px){

.container{

flex-direction:column;

align-items:center;

}

.form-section{

width:100%;

position:relative;

top:auto;

}

.preview-section{

width:100%;

min-height:auto;

padding:20px;

}

.button-group{

grid-template-columns:1fr;

}

.title{

font-size:32px;

}

.subtitle{

font-size:12px;

}

.document-preview{

font-size:14px;

}

.stamp{

width:75px;
height:75px;

font-size:16px;

}

.signature-section{

gap:20px;

}

.signature-block{

width:45%;

}

}

/* =========================================
   PRINT SETTINGS
========================================= */

@page{

size:A4;

margin:15mm;

}

@media print{

body{

background:#fff;

padding:0;
margin:0;

}

header,
.form-section,
.history-box,
.analytics-box,
.button-group,
#qrBox,
.legal-ai-box{

display:none !important;

}

.preview-section{

width:180mm;

min-height:auto;

margin:0 auto;

padding:0;

box-shadow:none;

border-radius:0;

}

.watermark{

opacity:.08;

}

button{

display:none !important;

}

}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:10px;

}

::-webkit-scrollbar-track{

background:#dbeafe;

}