/* =========================================================
   Modern Salary Calculator UI
   Full Replacement for style.css
   ========================================================= */

:root {
  --zo-bg: #f4f7fb;
  --zo-surface: rgba(255, 255, 255, 0.72);
  --zo-surface-solid: #ffffff;
  --zo-surface-soft: #f8fbff;
  --zo-text: #0f172a;
  --zo-text-soft: #475569;
  --zo-text-muted: #64748b;
  --zo-border: rgba(148, 163, 184, 0.22);
  --zo-border-strong: rgba(148, 163, 184, 0.34);
  --zo-primary: #2563eb;
  --zo-primary-2: #1d4ed8;
  --zo-accent: #06b6d4;
  --zo-success: #10b981;
  --zo-danger: #ef4444;
  --zo-warning: #f59e0b;
  --zo-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --zo-shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10);
  --zo-shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.16);
  --zo-radius-sm: 12px;
  --zo-radius-md: 18px;
  --zo-radius-lg: 24px;
  --zo-radius-xl: 32px;
  --zo-input-h: 56px;
  --zo-transition: all 0.28s ease;
}


body {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 26%),
    radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.08), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
  color: var(--zo-text);
  font-family: inherit;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--zo-text);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}

p {
  color: var(--zo-text-soft);
}

a {
  color: var(--zo-primary);
  text-decoration: none;
  transition: var(--zo-transition);
}

a:hover {
  color: var(--zo-primary-2);
}

.zo-breadcrumb-section {
  padding: 20px 0 10px;
}

.zo-calculator-section {
  position: relative;
  padding: 80px 0;
  color: var(--zo-text);
  overflow: hidden;
  isolation: isolate;
}

.zo-calculator-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.10), transparent 18%),
    radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.10), transparent 16%),
    radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.08), transparent 22%);
  z-index: -2;
}

.zo-calculator-section::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(2px);
  z-index: -1;
  box-shadow: var(--zo-shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.zo-title {
  margin-bottom: 20px;
}

.zo-title .h2,
.zo-title h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--zo-text);
}

.zo-title p {
  max-width: 760px;
  font-size: 12px;
  color: var(--zo-text-soft);
  margin-bottom: 0;
}

.zo-form {
  padding-top: 28px;
}

.zo-form,
.zo-table,
.zo-scroll,
.zo-sal {
  position: relative;
  z-index: 1;
}

.zo-form .row,
.zo-calculator-section .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

.zo-field {
  margin-bottom: 24px;
}

.zo-field label,
.zo-radios > label,
.zo-radios .title,
.zo-row .title {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--zo-text);
  letter-spacing: 0.01em;
}

.zo-field input:not([type="radio"]):not([type="checkbox"]),
.zo-field select,
.zo-field textarea,
input.money,
select,
textarea {
  width: 100%;
  min-height: var(--zo-input-h);
  border: 1px solid var(--zo-border);
  background: rgba(255, 255, 255, 0.88);
  color: var(--zo-text);
  border-radius: 18px;
  padding: 14px 18px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: var(--zo-transition);
}

.zo-field input::placeholder,
.zo-field textarea::placeholder,
input.money::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

.zo-field input:not([type="radio"]):not([type="checkbox"]):hover,
.zo-field select:hover,
.zo-field textarea:hover,
input.money:hover,
select:hover,
textarea:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #fff;
}

.zo-field input:not([type="radio"]):not([type="checkbox"]):focus,
.zo-field select:focus,
.zo-field textarea:focus,
input.money:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, 0.52);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.10),
    0 12px 30px rgba(37, 99, 235, 0.08);
}

.money {
  text-align: right;
  direction: ltr;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.zo-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
}

.zo-radio,
.zo-radios label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--zo-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--zo-text);
  cursor: pointer;
  transition: var(--zo-transition);
  box-shadow: var(--zo-shadow-sm);
}

.zo-radio:hover,
.zo-radios label:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.30);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.zo-radio input,
.zo-radios input[type="radio"],
.zo-radios input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--zo-primary);
  cursor: pointer;
}


.zo-sal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--zo-primary) 0%, var(--zo-accent) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow:
    0 14px 34px rgba(37, 99, 235, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: var(--zo-transition);
  cursor: pointer;
}

.zo-sal:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 44px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.22);
  color: #fff;
}


.zo-sal:active {
  transform: translateY(0);
}

.zo-sal {
  margin-top: 0px;
  padding: 26px 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(6, 182, 212, 0.92) 100%);
  color: #fff;
  box-shadow: var(--zo-shadow-lg);
  border: 1px solid rgba(255,255,255,0.18);
}

.zo-sal .title {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 600;
}

.zo-sal .value {
  display: block;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #fff;
}

.zo-scroll {
  overflow-x: auto;
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: none;
  box-shadow: var(--zo-shadow-md);
  border: 1px solid rgba(255,255,255,0.42);
  padding: 4px;
}

.zo-table {
  margin-top: 10px;
  width: 100%;
}

.zo-row {

display:flex;
align-items:center;
justify-content:space-between;

gap:10px;

min-width:auto;

padding:6px 0;
margin-bottom:0;

border-radius:0;
background:transparent;
border:none;

transition:color .2s ease;

}

/* hover */

.zo-row:hover{
transform:none;
box-shadow:none;
}

/* title */

.zo-row .title,
.zo-row span{

color:#6b7280;
font-size:13px;
font-weight:500;

}

/* values */

.zo-row .value,
.zo-row .amount,
.zo-row strong{

color:#2563eb;

font-weight:600;

font-size:13px;

font-variant-numeric: tabular-nums;

text-align:left;

}


.p-30 {
  padding: 30px !important;
}

.shadow {
  box-shadow: var(--zo-shadow-md) !important;
}

.card,
.zo-card,
.zo-form,
.zo-widget,
.zo-panel {
  background: var(--zo-surface);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: var(--zo-shadow-md);
  backdrop-filter: none;
  border-radius: 28px;
  padding: 28px;
}

hr {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  opacity: 1;
  margin: 20px 0;
}

table {
  width: 100%;
}

table th,
table td {
  padding: 6px 10px;
  vertical-align: middle;
}

ul,
ol {
  padding-right: 18px;
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--zo-text);
}

@media (max-width: 991.98px) {
  .zo-calculator-section {
    padding: 56px 0;
  }

  .zo-calculator-section::after {
    inset: 12px;
    border-radius: 24px;
  }

  .zo-form,
  .card,
  .zo-card,
  .zo-widget,
  .zo-panel {
    padding: 22px;
  }

  .zo-row {
    min-width: 0;
    padding: 6px;
  }
}

@media (max-width: 767.98px) {
  .zo-title .h2,
  .zo-title h2 {
    font-size: 20px;
  }

  .zo-radios {
    gap: 10px;
  }

  .zo-radio,
  .zo-radios label {
    width: 100%;
    border-radius: 18px;
  }

  .zo-row {
    flex-direction: column;
    gap: 8px;
  }

  .zo-row .value,
  .zo-row .amount,
  .zo-row strong {
    text-align:left;
    font-weight:600;
    color:#2563eb;
    font-size:13px;
    font-variant-numeric: tabular-nums;
  }

  .zo-sal {
    width: 100%;
  }

  .zo-sal {
    padding: 22px 18px;
  }
}

@media (max-width: 575.98px) {
  .zo-calculator-section {
    padding: 40px 0;
  }

  .zo-field {
    margin-bottom: 18px;
  }

  .zo-field input:not([type="radio"]):not([type="checkbox"]),
  .zo-field select,
  .zo-field textarea,
  input.money,
  select,
  textarea {
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .card,
  .zo-card,
  .zo-form,
  .zo-widget,
  .zo-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .zo-scroll {
    padding: 8px;
    border-radius: 18px;
  }

  .zo-row {
    padding: 8px 10px;
    border-radius: 10px;
  }

}

/* calculator navigation */

.zo-calculator-nav ul{
    list-style:none;
    margin:30px auto;
    padding:8px;
    max-width:1100px;
    background:#eef1f4;
    border-radius:40px;
    display:flex;
    align-items:center;
    gap:6px;
}

.zo-calculator-nav li{
    flex:1;
}

.zo-calculator-nav a{
    display:block;
    text-align:center;
    padding:12px 16px;
    border-radius:30px;
    text-decoration:none;
    color:#333;
    font-size:12px;
    font-weight:500;
    background:transparent;
}


.zo-calculator-nav a.active{
    background:#22abc3;
    color:#fff;
}


/* hover */

.zo-calculator-nav a:hover{
    background:#22abc357;
    color:#222;
}

/* ---------- mobile ---------- */

@media (max-width:768px){

    .zo-calculator-nav ul{
        flex-direction:column;
        border-radius:20px;
        padding:20px;
        background:#f3f4f6;
    }

    .zo-calculator-nav li{
        width:100%;
    }

    .zo-calculator-nav a{
        padding:14px;
        border-radius:30px;
    }

}


.zo-dropdown{
position:relative;
width:auto;
z-index:9999;
padding: 18px 0px;
}

.zo-select{
width:100%;
padding:14px 20px;
border:none;
border-radius:12px;

background:linear-gradient(135deg,#2f6fed 0%, #36c1d6 100%);

color:#fff;
font-size:14px;
font-weight:500;

cursor:pointer;

display:flex;
justify-content:space-between;
align-items:center;

box-shadow:
0 6px 14px rgba(47,111,237,0.25),
inset 0 1px 0 rgba(255,255,255,0.2);

transition:all .25s ease;
}

.zo-select:hover{
transform:translateY(-2px);

box-shadow:
0 10px 20px rgba(47,111,237,0.35),
inset 0 1px 0 rgba(255,255,255,0.25);

background:linear-gradient(135deg,#3a78f5 0%, #3ed0e6 100%);
}

.zo-select:active{
transform:translateY(0);
box-shadow:
0 4px 10px rgba(0,0,0,0.2);
}


.zo-arrow{
transition:0.3s;
}

.zo-dropdown.active .zo-arrow{
transform:rotate(180deg);
}

.zo-menu{
position:absolute;
top:55px;
right:0;
width:100%;
background:rgb(255, 255, 255);
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
list-style:none;
padding:8px 0;
display:none;
}

.zo-dropdown.active .zo-menu{
display:block;
}

.zo-menu li{
padding:10px 15px;
cursor:pointer;
}

.zo-menu li:hover{
background:#f3f4f6;
}



.zo-field-floating {
  position: relative;
  margin-bottom: 24px;
}

.zo-field-floating input:not([type="radio"]):not([type="checkbox"]),
.zo-field-floating textarea {
  width: 100%;
  height: var(--zo-input-h);
  padding: 22px 16px 10px;
  border: 1.5px solid var(--Border-Soft);
  border-radius: 16px;
  background: #fff;
  color: var(--zo-text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    transform .2s ease;
}

.zo-field-floating input::placeholder,
.zo-field-floating textarea::placeholder {
  color: transparent;
}

.zo-field-floating label {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.45);
  padding: 0 6px;
  color: var(--Text-Soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transition:
    top .22s ease,
    transform .22s ease,
    color .22s ease,
    font-size .22s ease;
}

.zo-field-floating input:focus,
.zo-field-floating textarea:focus {
  border-color: var(--Primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.zo-field-floating input:focus + label,
.zo-field-floating input:not(:placeholder-shown) + label,
.zo-field-floating textarea:focus + label,
.zo-field-floating textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  color: var(--zo-text);
  font-size: 12px;
}

.zo-field-floating input[readonly] {
  background: #f8fafc;
}
.zo-field-floating select {
  width: 100%;
  height: var(--zo-input-h);
  padding: 22px 16px 10px;
  border: 1.5px solid var(--Border-Soft);
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: all .25s ease;
}

.zo-field-floating select:focus {
  border-color: var(--Primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.zo-field-floating select:focus + label,
.zo-field-floating select:valid + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--zo-text);
}





.zo-sal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: linear-gradient(13deg,#22abc3,#1f5ce0cb);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.zo-sal:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.25);
    background: linear-gradient(135deg,#1f5be0,#22abc3);
}

.zo-sal:active {
    transform: scale(0.96);
}
.zo-sal::after{
    content:"";
    position:absolute;
    width:120%;
    height:120%;
    background:rgba(255,255,255,0.2);
    top:-120%;
    left:-120%;
    transform:rotate(25deg);
    transition:all .6s ease;
}

.zo-sal:hover::after{
    top:120%;
    left:120%;
}





/* container */
.zo-radios{
    display:flex;
    gap:16px;
    align-items:center;
}

.zo-radio{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    padding:0 !important;
}

.zo-radio input{
    display:none;
}

.zo-radio label{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:none;
    background:none;
    box-shadow:none;
    font-size:14px;
    font-weight:400;
    cursor:pointer;
}

.zo-radio label::before{
    content:"";
    width:12px;
    height:12px;
    border-radius:50%;
    border:1.5px solid #999;
}

.zo-radio input:checked + label::before{
    background:#2f6df6;
    border-color:#2f6df6;
}

.zo-radio label:hover{
    background:none;
    border:none;
}

/* ===== Glass Salary Table ===== */

.zo-salary-table{
width:100%;
border-collapse:separate;
border-spacing:0;
direction:rtl;

background:rgba(255,255,255,0.55);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border-radius:14px;
overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,0.07);
border:1px solid rgba(255,255,255,0.6);
}

/* header */
.zo-salary-table tr:first-child td{

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

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

padding:12px;

color:#1f2937;

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

}

/* cells */

.zo-salary-table td{
padding:4px 10px;
font-size:13px;
border-bottom:1px dashed rgba(0,0,0,0.06);
}


/* rows */

.zo-salary-table tr:hover{
background:rgba(255,255,255,0.4);
}

/* data row */

.zo-row{

display:flex;
justify-content:space-between;
align-items:center;

gap:8px;

}

/* labels */

.zo-row span{

color:#6b7280;

}

/* numbers */

.zo-row strong{

font-weight:600;
color:#2563eb;

}

/* final result row */

.zo-salary-table tr:last-child td{

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

background:rgba(37,99,235,0.08);

border-bottom:none;

}

/* light page background */

.zo-calculator-section{

padding:40px 20px;
border-radius:24px;

background:
radial-gradient(circle at 10% 20%, rgba(59,130,246,0.18), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(6,182,212,0.18), transparent 40%),
linear-gradient(180deg,#f3f8ff,#eef4ff);

}

/* compact rows inside salary table */

.zo-salary-table .zo-row{

display:flex;
align-items:center;
justify-content:space-between;

gap:10px;

padding:4px 0;

line-height:1.4;

}

/* label */

.zo-salary-table .zo-row span{

font-size:12.5px;
color:#6b7280;
white-space:nowrap;

}

/* value */

.zo-salary-table .zo-row strong{

font-size:13px;
font-weight:600;
color:#2563eb;

}

/* remove extra margins from old styles */

.zo-salary-table .zo-row *{
margin:0;
}


/* salary table */

.zo-salary-table{
width:100%;
border-collapse:separate;
border-spacing:0;
direction:rtl;

background:#ffffff;

border-radius:16px;
overflow:hidden;

box-shadow:0 10px 40px rgba(0,0,0,0.06);
}

/* header */

.zo-salary-table thead{
background:linear-gradient(135deg,#2f6df6,#2ec6c9);
color:#202020;
}

.zo-salary-table th{

padding:16px;
font-size:14px;
font-weight:700;
text-align:center;

}

/* cells */

.zo-salary-table{

width:100%;

border-collapse:separate;

border-spacing:0 6px;

direction:rtl;

font-size:14px;

}

/* header */

.zo-salary-table tr:first-child td{

font-weight:700;

font-size:15px;

color:#1e3a8a;

padding:12px 10px;

border-bottom:2px solid rgba(59,130,246,0.2);

}

/* rows */

.zo-salary-table tr{

transition:all .25s ease;

}

.zo-salary-table tr:hover{

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

border-radius:10px;

}

/* cell */

.zo-salary-table td{

padding:10px 12px;

vertical-align:middle;

}

/* total row */

.total-row{

background:#f3f7ff;

}

.total-row strong{

color:#1d4ed8;
font-size:14px;

}

/* final result */

.final-row td{

justify-content:center;

font-size:18px;

font-weight:800;

color:#111827;

background:linear-gradient(135deg,#eef4ff,#e6fbff);

padding:22px;

}

.final-row strong{

color:#2563eb;

font-size:22px;

margin-right:8px;

}
.zo-scroll{

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

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

border-radius:22px;

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

box-shadow:
0 10px 40px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);

padding:25px;

}
.zo-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:10px;

}

/* label */

.zo-row span{

color:#6b7280;

font-size:13px;

}

/* number */

.zo-row strong{

color:#2563eb;

font-weight:700;

font-size:13px;

font-variant-numeric:tabular-nums;

}
.zo-salary-table tr:last-child{

background:linear-gradient(135deg,#eff6ff,#e0f2fe);

border-radius:14px;

}

.zo-salary-table tr:last-child td{

font-size:16px;

font-weight:800;

color:#1e3a8a;

padding:16px 12px;

}

@media(max-width:768px){

.zo-row{

flex-direction:column;

align-items:flex-start;

gap:4px;

}

.zo-row strong{

font-size:14px;

}

.zo-salary-table td{

padding:12px 6px;

}

}

.zo-calculator-section{

padding:40px 20px;
border-radius:24px;

background:
linear-gradient(#22abc3, #e6faff);

background-size:cover;
background-position:center;
background-repeat:no-repeat;

}
.img-3d-wrapper{

perspective:1200px;
display:inline-block;

}

.img-3d-wrapper img{

transition:transform .2s ease;

transform-style:preserve-3d;

will-change:transform;

border-radius:14px;

}


/*           */

.tex-prag{
  color: #424242c0;
  font-family: cursive;
  padding: 0px 0px;
}



/* image 3D */

.zo-image-3d{
position:relative;
display:block;
overflow:hidden;
border-radius:14px;

transform-style:preserve-3d;
perspective:1000px;

transition:transform .4s ease, box-shadow .4s ease;
}

.zo-image-3d img{
width:100%;
height:auto;
display:block;

border-radius:14px;

transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.zo-image-3d:hover{
transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);

box-shadow:
0 20px 40px rgba(0,0,0,.18),
0 8px 16px rgba(0,0,0,.12);
}

.zo-image-3d:hover img{
transform:scale(1.04);
}



.zo-hero-image{
height:180px;         
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.zo-hero-image img{
width:auto;
max-height:100%;
object-fit:contain;
}



.zo-title{
  font-family:cursive;
}




/* تقویم */
.zo-date-wrapper{
position:relative;
width:260px;
}

#dateInput{
cursor:pointer;
}

.zo-calendar{
position:absolute;
top:45px;
right:0;
width:300px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.12);
display:none;
z-index:999;
direction:rtl;
}

.zo-cal-header{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-weight:600;
}

.zo-cal-weekdays,
.zo-cal-days{
display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;
}

.zo-cal-days span{
padding:7px;
margin:3px;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

.zo-cal-days span:hover{
background:#f1f5f9;
}

.zo-cal-days .selected{
background:#0ea5e9;
color:#fff;
}


/* container fields */
.zo-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* each field */
.zo-info .zo-field {
    flex: 1 1 calc(20% - 15px);
    min-width: 180px;
}

/* button full width under inputs */
.zo-button {
    margin-top: 20px;
}

/* mobile */
@media (max-width: 768px) {
    .zo-info {
        flex-direction: column;
    }

    .zo-info .zo-field {
        flex: 1 1 100%;
    }
}




/* حالت دسکتاپ معمولی */
.zo-salary-table {
    width: 100%;
    border-collapse: collapse;
}

.zo-salary-table th,
.zo-salary-table td {
    text-align: center;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* حالت موبایل */
@media (max-width: 768px) {
    .zo-scroll {
        overflow-x: hidden; /* حذف اسکرول افقی */
    }

    .zo-salary-table thead {
        display: none; /* حذف عنوان ستون‌ها در موبایل */
    }

    .zo-salary-table,
    .zo-salary-table tbody,
    .zo-salary-table tr,
    .zo-salary-table td {
        display: block;
        width: 100%;
    }

    .zo-salary-table tr {
        background: #fff;
        margin-bottom: 12px;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .zo-salary-table td {
        text-align: right;
        border: none;
        padding: 6px 0;
        border-bottom: 1px dashed #ddd;
        position: relative;
    }

    .zo-salary-table td:last-child {
        border-bottom: none;
    }

    .zo-salary-table td span {
        display: inline-block;
        font-size: 13px;
        color: #666;
        margin-left: 5px;
    }

    .zo-salary-table td strong {
        float: left;
        color: #000;
        font-weight: 600;
    }

    /* ردیف جمع و مبلغ نهایی */
    .zo-salary-table .total-row td,
    .zo-salary-table .final-row td {
        border: none;
        font-weight: bold;
        background: #f5f9ff;
        text-align: center;
        font-size: 14px;
    }

    .zo-salary-table .final-row strong {
        color: #007bff;
        font-size: 15px;
    }
}



/*  کانتینر آبلود فایل لوگو*/
.zo-field.zo-upload{
  position: relative;
}

.zo-field.zo-upload input[type="file"]{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.zo-field.zo-upload label{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--zo-input-h); 

  padding: 0 48px 0 16px;

  border: 1.5px solid var(--Border-Soft);
  border-radius: 16px;

  background: #fff;
  color: var(--zo-text);

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

  cursor: pointer;
  box-sizing: border-box;

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

.zo-field.zo-upload label::before{
  content: "⭱";
  position: absolute;
  right: 16px;
  font-size: 18px;
  color: #1e88e5;
}

.zo-field.zo-upload label:hover{
  border-color: #1e88e5;
  background: #f6faff;
  box-shadow: 0 3px 10px rgba(30,136,229,.12);
}