@font-face {
    font-family: arbic;
    src: url('SimplifiedArabicRegular') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'arbic', 'Inter', sans-serif;
    font-size: 13px;
}

body {
    background-color: #f0f2f5;
    display: flex;
    min-height: 100vh;
    padding: 20px;
}

/* ===================== TICKET ===================== */
.ticket {
    background: #fff;
    width: 800px;
    padding: 40px 140px; /* Reduced top padding to shift content up */
    margin: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    color: #000;
    overflow: hidden;
}

/* Background logo pattern — inset to match padding so it only covers content */
.ticket::before {
    content: "";
    position: absolute;
    top: 280px; /* Compensating for the -200px content shift */
    left: 140px;
    right: 140px;
    bottom: 40px;
    background-image: url('logo.png');
    background-repeat: repeat;
    background-size: calc(100% / 8) calc(100% / 14);
    background-position: top left;
    opacity: 0.3;
    filter: brightness(0.6);
    pointer-events: none;
    margin-top: 20px;
}

/* ===================== HEADER ===================== */
.header-barcode {
    width: 100%;
    margin-bottom: 35px !important;
    display: flex;
    justify-content: center;
}
.header-barcode img {
    height: 88px; /* Corrected size (+20% from previous) */
    width: 300px; /* Corrected size (+20% from previous) */
    object-fit: stretch;
}

.header-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -95px; /* Slight nudge upwards */
    margin-bottom: 15px;
}

.gov-logo-box {
    text-align: left;
    width: 48%;
}

.tahseel-logo-box {
    text-align: right;
    width: 48%;
}

.titles-flex-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 15px;
    width: 100%;
}

.header-text-side {
    width: 33%;
    font-weight: bold;
    font-size: 11px;
    margin-top: -80px; /* Shifted up significantly as requested */
}

.header-text-left {
    text-align: center; /* Centered in block */
    margin-left: 20px;
}

.header-text-right {
    text-align: center; /* Centered in block */
    margin-right: 20px;
}

.titles-section {
    width: 33%;
    text-align: center;
    padding-top: 5px;
    margin-top: -15px; /* Shifted up as requested */
}
.tax-invoice-title-arb {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
}
.tax-invoice-title-eng {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 2px;
}
.trn-text {
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 5px;
}
.title-separator {
    width: 51%; /* Increased by 3% from 48% */
    margin: 10px auto;
    border-bottom: 1.5px dashed #000;
}

/* ===================== DATA TABLE ===================== */
.data-table {
    width: calc(100% - 60px); /* Account for 30px margins on each side */
    margin: 0 30px;
    border-collapse: collapse;
}

.data-table td {
    padding: 2px 0; /* Tightened as requested */
    vertical-align: middle;
}

.time-date-row {
    border: none; /* Removed borders as requested */
}
.time-date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    transform: translateY(-12px); /* Shifted up as requested */
}

.col-eng {
    text-align: left;
    width: 25%;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    font-family: 'Inter', sans-serif;
}
.col-val {
    text-align: center;
    width: 50%;
    font-weight: bold;
    font-size: 11px;
    word-break: break-all;
    white-space: nowrap;
}
.col-arb {
    text-align: right;
    width: 25%;
    direction: rtl;
    font-size: 11px;
    color: #000;
    font-weight: 600;
}

/* ===================== FOOTER ===================== */
.footer-section {
    margin-top: 115px;
    border-top: none;
}

.footer-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: normal; /* Removed bold as requested */
    margin: 0 20px 15px 20px; /* Aligned with legal points */
}

.footer-row {
    display: flex;
    justify-content: space-between;
    margin: 0 20px; /* Reduced to 20px as requested */
}

.footer-col {
    width: 48%;
}
.footer-col-arb {
    text-align: right;
    direction: rtl;
}

.legal-points {
    list-style-type: none;
    padding-left: 0;
}

.legal-points li {
    margin-bottom: 25px; /* Increased gap as requested */
    position: relative;
    padding-left: 10px;
    padding-right: 14px;
}
.legal-points li::before {
    content: "*";
    position: absolute;
    left: 0;
    font-weight: bold;
}
.footer-col-arb .legal-points li::before {
    right: 0;
    left: auto;
}

/* ===================== FORM ===================== */
.form-style-1 {
    margin: 10px auto;
    max-width: 400px;
    padding: 20px 12px 10px 20px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label {
    margin: 0 0 3px 0;
    padding: 0px;
    display: block;
    font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select {
    box-sizing: border-box;
    border: 1px solid #BEBEBE;
    padding: 7px;
    margin: 0px;
    transition: all 0.30s ease-in-out;
    outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus {
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.form-style-1 .field-divided { width: 49%; }
.form-style-1 .field-long { width: 100%; }
.form-style-1 .field-select { width: 100%; }
.form-style-1 .field-textarea { height: 100px; }
.form-style-1 input[type=submit],
.form-style-1 input[type=button] {
    background: #4B99AD;
    padding: 8px 15px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover,
.form-style-1 input[type=button]:hover {
    background: #4691A4;
    box-shadow: none;
}
.form-style-1 .required { color: red; }

/* ===================== BUTTONS & MISC ===================== */
.frm {
    flex: 1;
    margin-left: 40px;
    max-height: 90vh;
    overflow-y: auto;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 0px;
    position: absolute;
}

button {
    cursor: pointer;
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
}
button:hover { background: #0056b3; }

.hidden { display: none !important; }

/* ===================== PRINT ===================== */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: white;
        padding: 0;
        display: block;
    }

    .frm,
    .button-group {
        display: none !important;
    }

    .ticket {
        width: 100% !important;
        margin: 0 !important;
        padding: 18mm 36mm; /* Increased side padding for print */
        box-shadow: none;
        background: white !important;
        overflow: hidden;
    }

    .header-barcode {
        margin-top: -15mm !important; /* Slamming barcode to the very top */
        margin-bottom: 5mm;
    }

    .ticket::before {
        top: 48mm; /* Adjusted for shift as you requested */
        left: 35mm;
        right: 35mm;
        bottom: 12mm;
    }

    @page {
        size: A4;
        margin: 0;
    }
}

.time-date-container span {
    font-weight: bold !important;
}

.legal-table td {
    padding: 8px 20px;
    vertical-align: top;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    border: none;
    position: relative;
}

.footer-col-eng {
    width: 50%;
    text-align: left;
    direction: ltr;
    padding-right: 15px;
}

.footer-col-eng:before {
    content: "*";         
    position: absolute;
    left: 3px;     
    top: 8px;
    font-size: 15px;
    color: #000;
}

.footer-col-arb {
    width: 50%;
    text-align: right;
    direction: rtl;
    padding-left: 15px;
}

.footer-col-arb:before {
    content: "*";
    position: absolute;
    right: 3px;
    top: 8px;
    font-size: 15px;
    color: #000;
}