/* Kept close to your existing design */

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

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',

      'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

    background-color: #ffffff;

    color: #111827;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

  }
 
  .container { max-width: 960px; margin: 0 auto; padding: 30px 20px; }

  .headline { margin-bottom: 14px; }

  .headline h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }

  .headline p { font-size: 13px; color: #6b7280; }
 
  .info-section {

    background-color: #f9fafb;

    border-radius: 12px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 16px;

  }
 
  .upload-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

  }
 
  @media (max-width: 768px) {

    .upload-row { grid-template-columns: 1fr; gap: 16px; }

    .container { padding: 22px 12px; }

  }
 
  /* Upload Box (your classes) */

  .upload-box { position: relative; }

  .file-input { display: none; }
 
  .file-label {

    display: block;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 28px 16px;

    cursor: pointer;

    transition: all 0.2s ease;

  }

  .file-label:hover { border-color: #2e4755; background-color: #f9fafb; }
 
  .upload-box.is-disabled .file-label { opacity: 0.6; cursor: not-allowed; }
 
  .upload-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

  }

  .upload-content svg { width: 16px; height: 16px; }
 
  .upload-text {

    display: flex;

    gap: 6px;

    font-size: 12px;

    line-height: 16px;

    text-align: center;

    flex-wrap: wrap;

    justify-content: center;

  }

  .upload-text-bold { color: #2e4755; font-weight: 600; }

  .upload-text-light { color: #6b7280; font-weight: 400; }
 
  .upload-hint {

    font-size: 12px;

    line-height: 16px;

    color: #6b7280;

    text-align: center;

  }
 
  /* Meta */

  .upload-meta {

    margin-top: 10px;

    display: flex;

    flex-direction: column;

    gap: 8px;

  }
 
  .upload-summary { font-size: 12px; color: #6b7280; text-align: center; }
 
  .upload-message {

    font-size: 12px;

    text-align: center;

    color: #6b7280;

    min-height: 16px;

    white-space: pre-wrap;

  }

  .upload-message.ok { color: #0f766e; }

  .upload-message.err { color: #b91c1c; }
 
  details.upload-details {

    border: 1px solid #e5e7eb;

    background: #ffffff;

    border-radius: 8px;

    overflow: hidden;

  }

  details.upload-details summary {

    cursor: pointer;

    list-style: none;

    padding: 10px 12px;

    font-size: 12px;

    color: #005f96;

    user-select: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

  }

  details.upload-details summary::-webkit-details-marker { display: none; }
 
  .pill {

    border: 1px solid #e5e7eb;

    border-radius: 999px;

    padding: 2px 8px;

    font-size: 11px;

    color: #6b7280;

    background: #f9fafb;

    white-space: nowrap;

  }
 
  .upload-list-wrap {

    border-top: 1px dashed #e5e7eb;

    max-height: 170px;

    overflow: auto;

    padding: 8px 12px;

  }

  .upload-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

  .upload-item {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;

    align-items: start;

    border-bottom: 1px dashed #f3f4f6;

    padding-bottom: 8px;

    font-size: 12px;

    color: #6b7280;

  }

  .upload-item:last-child { border-bottom: none; padding-bottom: 0; }

  .upload-item-name { color: #111827; word-break: break-word; }

  .upload-status {

    font-size: 11px;

    padding: 2px 8px;

    border-radius: 999px;

    border: 1px solid #e5e7eb;

    color: #6b7280;

    white-space: nowrap;

    text-transform: lowercase;

    margin-top: 2px;

    height: fit-content;

  }

  .upload-status.uploading { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }

  .upload-status.uploaded { border-color: #bbf7d0; color: #166534; background: #f0fdf4; }

  .upload-status.failed { border-color: #fecaca; color: #991b1b; background: #fef2f2; }

  .upload-status.queued { background: #ffffff; }
 
  .upload-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

  .clear-btn {

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    color: #111827;

    font-size: 12px;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

  }

  .clear-btn:hover { border-color: #2e4755; background: #f9fafb; }

  .clear-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 

  .small { font-size: 12px; color: #6b7280; }
 
  .btn {

    border-radius: 10px;

    padding: 10px 14px;

    font-size: 13px;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    cursor: pointer;

  }

  .btn:hover { border-color: #2e4755; }

  .btn.primary { background: #2e4755; color: #ffffff; border-color: #2e4755; }

  .btn:disabled, .btn.primary:disabled { opacity: .6; cursor: not-allowed; }
 
  .tc { display: flex; gap: 10px; align-items: flex-start; }

  .tc input { margin-top: 3px; }

  /* Option A: CSS-only mapping

   - Do NOT change your HTML/JS at all.

   - Paste this AFTER your existing <style> in Functionality.html

     (or replace your current styles with this block).

   - It maps your current classes (.wrap/.grid/.card/.drop/.msg etc.)

     to look like the "design.html" upload-box design.

*/
 
:root{

  --text:#111827;

  --muted:#6b7280;

  --bg:#f9fafb;

  --border:#e5e7eb;

  --accent:#2e4755;

  --ok:#166534;

  --bad:#991b1b;

  --info:#1d4ed8;

  --white:#fff;

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

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',

    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;

  background-color: var(--white);

  color: var(--text);

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}
 
/* ===== Container mapping (.wrap -> .container) ===== */

.wrap{

  max-width: 960px !important;

  margin: 0 auto !important;

  padding: 30px 20px !important;

}

@media (max-width: 768px){

  .wrap{ padding: 22px 12px !important; }

}
 
/* Headline */

.wrap > h1{

  font-size: 20px !important;

  font-weight: 600 !important;

  margin: 0 0 6px !important;

}

.wrap > .hint{

  font-size: 13px !important;

  color: var(--muted) !important;

  margin: 0 0 16px !important;

  line-height: 1.4 !important;

}
 
/* ===== Main section mapping (.grid -> .info-section) ===== */

.grid{

  background-color: var(--bg) !important;

  border-radius: 12px !important;

  padding: 24px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;  /* ✅ single column */
  gap: 24px !important;

}

@media (max-width: 800px){

  .grid{

    grid-template-columns: 1fr !important;

    gap: 16px !important;

    padding: 16px !important;

  }

}
 
/* ===== Card mapping (.card) ===== */

.card{

  background: transparent !important;           /* grid holds the bg */

  border: none !important;                      /* remove old heavy card border */

  border-radius: 0 !important;

  padding: 0 !important;

}
 
/* header row */

.cardHeader {
  display: flex !important;
  flex-direction: column !important;   /* 🔥 KEY CHANGE */
  align-items: flex-start !important;  /* left align */
  gap: 2px !important;
  margin-bottom: 10px !important;
}

.title{

  font-size: 15px !important;

  font-weight: 600 !important;

  color: var(--text) !important;

}

.count{

  font-size: 12px !important;

  color: var(--muted) !important;

  white-space: nowrap !important;

}
 
/* ===== Upload control mapping (.drop -> .file-label) ===== */

.drop{

  display:block !important;

  background: var(--white) !important;

  border: 1px solid var(--border) !important;

  border-radius: 8px !important;

  padding: 16px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  text-align: center !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  height: 120px !important;

}

.drop:hover{

  border-color: var(--accent) !important;

  background-color: var(--bg) !important;

}

.drop.disabled{

  opacity: .6 !important;

  cursor: not-allowed !important;

}
 
/* ===== Pills row ===== */

.statusRow{

  margin-top: 10px !important;

  display:flex !important;

  gap:10px !important;

  flex-wrap:wrap !important;

  align-items:center !important;

  justify-content:space-between !important;

}

.pills{

  display:flex !important;

  gap:8px !important;

  flex-wrap:wrap !important;

}

.pill{

  border:1px solid var(--border) !important;

  border-radius:999px !important;

  padding:2px 8px !important;

  font-size:11px !important;

  color:var(--muted) !important;

  background:#f9fafb !important;

  white-space:nowrap !important;

}

.pill.ok{ border-color:#bbf7d0 !important; color:var(--ok) !important; background:#f0fdf4 !important; }

.pill.bad{ border-color:#fecaca !important; color:var(--bad) !important; background:#fef2f2 !important; }

.pill.info{ border-color:#bfdbfe !important; color:var(--info) !important; background:#eff6ff !important; }
 
/* ===== Messages ===== */

.msg{

  margin-top: 8px !important;

  font-size: 12px !important;

  color: var(--muted) !important;

  min-height: 16px !important;

  white-space: pre-wrap !important;

}

.msg.ok{ color:#0f766e !important; }

.msg.bad{ color: var(--bad) !important; }
 
/* ===== Details list (kept similar to design.html) ===== */

details{

  margin-top: 10px !important;

  border: 1px solid var(--border) !important;

  background: var(--white) !important;

  border-radius: 8px !important;

  overflow: hidden !important;

}

summary{

  cursor: pointer !important;

  list-style: none !important;

  padding: 10px 12px !important;

  font-size: 12px !important;

  color: #005f96 !important;

  user-select: none !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:10px !important;

}

summary::-webkit-details-marker{ display:none !important; }
 
.listWrap{

  border-top: 1px dashed var(--border) !important;

  max-height: 170px !important;

  overflow: auto !important;

  padding: 8px 12px !important;

}
 
ul{

  margin: 0 !important;

  padding: 0 !important;

  list-style: none !important;


}

li{

  font-size: 12px !important;

  color: var(--muted) !important;

  padding-bottom: 8px !important;



  word-break: break-word !important;

}

li:last-child{ border-bottom:none !important; padding-bottom:0 !important; }

.fn{ color: var(--text) !important; }


.actions{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }

.small{ font-size:12px !important; color: var(--muted) !important; }
 
.btn{

  border-radius: 10px !important;

  padding: 10px 14px !important;

  font-size: 13px !important;

  border: 1px solid var(--border) !important;

  background: var(--white) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}

.btn:hover{

  border-color: var(--accent) !important;

  background-color: #f9fafb !important;

}

.btn.primary{

  background: var(--accent) !important;

  color: #fff !important;

  border-color: var(--accent) !important;

}

.btn.primary:hover{

  background: #1e3340 !important;

  border-color: #1e3340 !important;

}

.btn:disabled,

.btn.primary:disabled{

  opacity: .6 !important;

  cursor: not-allowed !important;

}
 
/* Keep your checkbox visible in Power Pages (you already added this, keep it) */

.tc{ display:flex !important; gap:10px !important; align-items:flex-start !important; }

.tc input{ margin-top:3px !important; }

.tc label{ font-size:13px !important; color: var(--text) !important; }
 
/* If you want your "success message" card to match the theme slightly */
        .case-created-success-msg {
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            margin: 5px !important;
        }
/* CSS-only icon for .drop (no HTML changes) */.drop{
  position: relative !important;
  padding-top: 44px !important; /* make room for icon */}
.drop::before{
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto 10px auto !important;

  /* inline SVG icon (upload) */
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.5%208.5V9.3C12.5%2010.4201%2012.5%2010.9802%2012.282%2011.408C12.0903%2011.7843%2011.7843%2012.0903%2011.408%2012.282C10.9802%2012.5%2010.4201%2012.5%209.3%2012.5H3.7C2.5799%2012.5%202.01984%2012.5%201.59202%2012.282C1.2157%2012.0903%200.909734%2011.7843%200.717987%2011.408C0.5%2010.9802%200.5%2010.4201%200.5%209.3V8.5M9.83333%203.83333L6.5%200.5M6.5%200.5L3.16667%203.83333M6.5%200.5V8.5%22%20stroke%3D%22%23111827%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

/* Default button look (keeps your existing if present) */
.btn{
  border-radius: 8px !important;
}
/* Enabled/active Primary button color */
.btn.primary:not(:disabled),#finalSubmitBtn:not(:disabled){
  background: #497188 !important;
  color: #fff !important;
  border-color: #497188 !important;
}
/* Hover for enabled */
.btn.primary:not(:disabled):hover,#finalSubmitBtn:not(:disabled):hover{
  filter: brightness(0.95) !important;
}
/* Disabled state (so it’s visibly disabled) */
.btn.primary:disabled,#finalSubmitBtn:disabled{
  background: #e5e7eb !important;
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
 #Cargo_footer {
  display: none !important;
}

 #oc-lcw-container {
  display: none !important;
}
/* ===== Simple Right-Aligned Footer ===== */
.footer {
 
    display: flex;
    align-items: end;
    /* justify-content: center; */
    color: #4e4c4a;
    /* flex-flow: column-reverse; */
    background-color: #fff; 
    padding: 0 16px;
    border: none !important;
    box-shadow: none !important;
    
}
.footerRow {
  display: flex !important;
  justify-content: flex-end !important; /* ✅ push everything right */
  align-items: center !important;
}

.footerRow .actions {
  display: flex !important;
  gap: 10px !important;
}
.actions{
  margin-top: 5px;
}/* ===== FIXED MODAL (CENTERED ALWAYS) ===== */
.modal {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none; /* hidden by default */
  z-index: 9999;

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

  /* 🔥 KEY: perfect centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* show state */
.modal.show {
  display: flex !important;
}

/* ===== MODAL BOX ===== */
.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 420px;
  max-width: 90%;
  padding: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  /* 🔥 ensures it doesn’t stretch weirdly */
  position: relative;
}

/* 🔒 remove scroll when modal open */
body.modal-open {
  overflow: hidden !important;
}
        .button-modal {
            margin: 10PX;
            font-family: EtihadAltis-Medium, arial, sans-serif;
            line-height: 1.25;
            position: relative;
            outline: none;
            cursor: pointer;
            border-radius: 8px;
            font-size: 16px;
            box-shadow: 0 0 4px rgba(33, 33, 33, .25);
            overflow: hidden;
            padding: 10px 16px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .button-modal-remove {
            color: #fff;
            border: 2px solid #fff;
            background: linear-gradient(90deg, #262364, #255cb1);
        }

        .button-modal-cancel {
            color: black;
            border: 2px solid black;
            background: white;
        }
.modal-content {
  max-height: 90vh;      /* prevent overflow */
  overflow: hidden;      /* no inner scroll */
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
  padding: 0px !important;
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-icon {
  font-size: 18px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;  /* ✅ push right */
  gap: 10px;
  margin-top: 20px;
}


body h2 {
  margin-bottom: 0px !important;
}

iframe[src*="webchat"],
iframe[src*="livechat"] {
  display: none !important;
}
.modal-header .close {
    margin-left: 70px;
}




* ===== ETIHAD BUTTON UI ===== */

.etihad-footer {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* GOLD PRIMARY BUTTON */
.etihad-btn-primary {
  width: 200px;
  hieght: 48px;
  background: #c28b2c; /* Etihad gold */
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.etihad-btn-primary:hover {
  background: #a67622;
}

.etihad-btn-primary:disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

/* OUTLINE BACK BUTTON */
.etihad-btn-secondary {
  width: 142px;
  height: 48px;
  background: #fff;
  color: #2E4755;
  /*border: 1.5px solid #c28b2c; */
  border-radius: 25px;
  padding: 7px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.etihad-btn-secondary:hover {
  background: #faf6ef;
}


/*after design change*/
.file-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

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

.file-icon {
  width: 28px;
  height: 28px;
  background: #f3f4f6;
  border-radius: 6px;
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-size: 13px;
  font-weight: 500;
}

.file-size {
  font-size: 11px;
  color: #6b7280;
}

.file-delete {
  cursor: pointer;
  font-size: 14px;
  color: #9ca3af;
}

.file-delete:hover {
  color: #ef4444;
}

.etihad-footer {
  margin-top: 25px;
  display: flex;
  flex-direction: row;        /* ✅ horizontal */
  gap: 12px;
  justify-content: flex-end;  /* ✅ align right */
}

/* Make buttons auto width instead of full width */
.etihad-btn-primary,
.etihad-btn-secondary {
  width: auto;         /* ❌ remove 100% */
  min-width: 160px;    /* optional for nice size */
}



.file-icon {
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.file-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.drop {
  transition: all 0.3s ease;
}
.drop.hidden {
  display: none !important;
}

.file-delete {
  width: 12px;
  height: 16px;
  object-fit: contain;
}
.file-delete img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.cardSubtitle {
  width: 100%;
  text-align: left;
	  /* Body/Body XSmall/Book ★ */
	font-style: normal;
	font-weight: 350;
	font-size: 12px;
	line-height: 16px;
	/* identical to box height, or 133% */

	color: #6B7280;


	/* Inside auto layout */
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
}
.subtitle {
  font-size: 13px;
  color: #111827;
  
  line-height: 1.4;
  font-weight: 500;
  margin-top: 2px;
}

.nextSubtitle{
font-size: 13px;
margin-bottom: 18px;
}


/* Modal wrapper */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Show modal */
.modal.show {
  display: block;
}

/* Dark blurred background */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

/* Centered card */
.modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px !important;
  background: #fff;
  border-radius: 12px;
  padding: 30px 40px;
  width: 360px;
  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Icon circle */
.modal-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  /*background: #1f3b57;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loader image */
.modal-icon img {
  width:70px;
  height: 70px;

}

/* Title */
.modal-card h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}

/* Subtitle */
.modal-card p {
  font-size: 14px;
  color: #777;
}

/* Prevent scroll when open */
body.modal-open {
  overflow: hidden;
}



/* Card */
.card {
  background: #f7f7f7;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.card-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.card-sub {
  font-size: 13px;
  color: #666;
}

.card-content {
  font-size: 14px;
  line-height: 1.6;
}

/* Utility */
.hidden {
  display: none;
}

/* receipts modal*/
/* HEADER LAYOUT */
#receiptsAttachModal .modal-header {
  display: flex;
  justify-content: space-between; /* pushes title left, close right */
  align-items: center;
  padding: 10px 15px;
}

/* TITLE */
#receiptsAttachModal .modal-header h3 {
  margin: 0;
  text-align: left;
  font-size: 18px;
  flex: 1; /* ensures it stays left */
}

/* CLOSE ICON */
#receiptsAttachModal .modal-close {
  font-size: 24px;          /* increase size */
  width: 32px;              /* clickable area */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;        /* pushes it to right */
  border-radius: 50%;
}

/* OPTIONAL: better UX hover */
#receiptsAttachModal .modal-close:hover {
  background: #f2f2f2;
}


#reclaimBtn {
  display: inline-block;
  border: none;
  background: transparent;
  padding-bottom: 2px;

  border-bottom: 1px solid #B08747;
  /*color: #B08747;*/

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

  cursor: pointer;
  transition: opacity 0.2s ease;
}

#reclaimBtn:hover {
  opacity: 0.7;
}
.reclaim-row {
  text-align: left;   /* ✅ always left aligned */
}
/* LOST CONTENT */
.lost-content-card {
  background: #f8eaea;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

.lost-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lost-title {
  font-size: 16px;
  font-weight: 600;
}

.lost-subtitle {
  font-size: 13px;
  color: #666;
}

.add-btn {
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 18px;
  background: white;
  cursor: pointer;
}

.lost-table {
  margin-top: 15px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
}

.lost-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.lost-total {
  font-size: 12px;
  color: #999;
  text-align: right;
}


.label {
  font-size: 12px;
  color: #777;
}

.value {
  font-size: 14px;
  font-weight: 500;
}



/*Declare Lost Content UI*/
.lost-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.lost-input-row input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px; /* 🔥 modern rounded */
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Focus state (VERY IMPORTANT) */
.lost-input-row input:focus {
  outline: none;
  border-color: #d4af37; /* gold accent */
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Placeholder styling */
.lost-input-row input::placeholder {
  color: #9ca3af;
}

/* Add button inline */
.add-inline-btn {
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: #d4af37;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-inline-btn:hover {
  background: #b8962e;
}

.add-inline-btn:active {
  transform: scale(0.98);
}

#postReceiptSections .analysis-grid .value {
  margin-left: 7px;
}

.image-row {
  display: flex;
  gap: 24px;
  margin: 20px 0;
}

.preview-img {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: 16px;
}





/* =========================================
   FIGMA PERFECT PAYMENT PAGE
========================================= */

body {
  margin: 0;
  background: #f7f7f7;
  font-family: "Segoe UI", sans-serif;
  color: #1f2937;
}

.payment-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 48px 40px;
}

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

.payment-header {
  margin-bottom: 36px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
  color: #334b5c;
  cursor: pointer;
  margin-bottom: 42px;
}

.payment-header h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  color: #172033;
}

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

.payment-tabs {
  display: flex;
  align-items: center;
  gap: 36px;
  border-bottom: 1px solid #d7dce1;
  margin-bottom: 34px;
}

.tab {
  position: relative;
  padding-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #7b8190;
  cursor: pointer;
}

.tab.active {
  color: #172033;
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 4px;
  background: #2f4858;
  border-radius: 10px;
}

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

.section-title {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 700;
  color: #172033;
}

/* =========================================
   CLAIM CARDS
========================================= */

.claim-cards {
  display: flex;
  gap: 18px;
  margin-bottom: 34px;
}



.claim-card.selected {
  background: #eef3f5;
}

/* =========================================
   CHECKBOX
========================================= */

.checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;

  border: 2px solid #365061;
  border-radius: 5px;

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

  margin-top: 1px;
  background: #fff;
}

.checkbox.checked {
  background: #365061;
}

.checkbox img {
  width: 12px;
  height: 9px;
  display: block;
}

/* =========================================
   CARD TEXT
========================================= */

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #172033;
  margin-bottom: 8px;
}

.card-sub {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.claim-card > div:last-child {
  margin-left: 16px;
}

/* =========================================
   FORM CARD
========================================= */

.form-card {
  background: #f1f3f5;
  border-radius: 14px;
  padding: 22px 22px 18px;
}

.form-title {
  margin: 0 0 28px;
  font-size: 18px;
  font-weight: 700;
  color: #172033;
}

/* =========================================
   FORM GRID
========================================= */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 34px;
}

.form-grid input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #d4d9de;

  padding: 0 0 12px;

  font-size: 15px;
  font-weight: 400;
  color: #172033;
}

.form-grid input::placeholder {
  color: #707785;
}

.form-grid input:focus {
  outline: none;
  border-bottom: 1px solid #365061;
}

.form-grid .full {
  grid-column: span 2;
}

/* =========================================
   LINKS
========================================= */
/* CONTAINER */
#creditLinkSection {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  margin-top: 26px;
}

/* INDIVIDUAL LINKS */
#creditLinkSection .link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  height: 21px;

  font-size: 14px;
  font-weight: 500;
  line-height: 21px;

  color: #2f4858;
  cursor: pointer;

  white-space: nowrap;
}
/* =========================================
   PAYMENT TYPE
========================================= */

.payment-type {
  display: flex;
  gap: 100px;
  margin-bottom: 34px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;

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

  color: #172033;
  cursor: pointer;
}

.payment-option input {
  display: none;
}



.payment-option input:checked + .radio-ui {
  border-color: #365061;
}

.payment-option input:checked + .radio-ui::after {
  transform: translate(-50%, -50%) scale(1);
}

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

.footer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;

  margin-top: 38px;
}

.btn-outline {
  min-width: 126px;
  height: 54px;

  border-radius: 30px;
  border: 1px solid #cfd6dc;

  background: #fff;

  font-size: 16px;
  font-weight: 500;
  color: #172033;

  cursor: pointer;
}

.btn-primary {
  min-width: 126px;
  height: 54px;

  border: none;
  border-radius: 30px;

  background: #c9922e;
  color: #fff;

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

  cursor: pointer;
}

.btn-primary:hover {
  background: #b78328;
}

/* =========================================
   HIDDEN
========================================= */

.hidden {
  display: none !important;
}


.input-error {
  border-bottom: 1px solid #dc2626 !important;
}

/* =========================================
   CONSENT CARD
========================================= */

.consent-card {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 18px 20px;

  margin-top: 20px;
  max-width: 1180px;
}

/* =========================================
   CONSENT BOX
========================================= */

.consent-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* =========================================
   CHECKBOX
========================================= */

.consent-checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;

  border-radius: 5px;

  background: #365061;

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

  margin-top: 2px;

  cursor: pointer;
}

.consent-checkbox img {
  width: 11px;
  height: 11px;
  object-fit: contain;
}

/* =========================================
   CONSENT TEXT
========================================= */

.consent-text {
  max-width: 1040px;

  font-size: 15px;
  line-height: 30px;
  font-weight: 400;

  color: #111827;

  text-align: left;
}

/* =========================================
   SIGNATURE AREA
========================================= */

.signature-wrapper {
  margin-top: 28px;
}

.signature-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;

  margin-bottom: 10px;
}

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

.signature-pad {
  width: 168px;
  height: 78px;

  border: 1px dashed #6b7280;
  background: #fff;

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

  margin-bottom: 10px;
}

.signature-pad img {
  width: 120px;
  object-fit: contain;
}

/* =========================================
   CLEAR LINK
========================================= */

.clear-link {
  font-size: 14px;
  color: #111827;

  text-decoration: underline;
  cursor: pointer;

  margin-bottom: 10px;
}

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

.signature-wrapper {
  margin-top: 28px;
}

.signature-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;

  margin-bottom: 12px;
}

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

.signature-pad-container {
  width: 170px;
  height: 120px;

  border: 1px dashed #6b7280;
  background: #fff;

  position: relative;
  overflow: hidden;
}

#signatureCanvas {
  width: 100%;
  height: 100%;

  display: block;
  cursor: crosshair;
}

/* =========================================
   ACTIONS
========================================= */

.signature-actions {
  margin-top: 8px;
}

.clear-link {
  font-size: 14px;
  color: #111827;

  text-decoration: underline;
  cursor: pointer;
}

/* =========================================
   NAME FIELD
========================================= */

.signature-name {
  margin-top: 10px;

  border: none;
  background: transparent;

  font-size: 15px;
  color: #111827;
}

.signature-name:focus {
  outline: none;
}

#signatureCanvas {
  touch-action: none;
}


.upload-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* LEFT SIDE */
.upload-left {
  width: 50%;
}

/* RIGHT SIDE */
.upload-right {
  width: 50%;
  /*border: 1px dashed #ccc;*/
  /*border-radius: 8px;*/
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PREVIEW BOX */
.preview-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* IMAGE PREVIEW */
.preview-img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

/* PDF PREVIEW */
.preview-pdf {
  width: 100%;
  height: 150px;
  border: none;
}

/* PLACEHOLDER */
.preview-placeholder {
  color: #999;
  white-space: nowrap;
}
.upload-container {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

/* LEFT PANEL */
.upload-left {
  width: 50%;
}

/* DROP ZONE */
.drop-zone {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
  transition: all 0.2s ease;
}

.drop-zone:hover {
  border-color: #000;
  background: #f3f4f6;
}

/* FILE LIST */
#filelist_bagPhotos {
  margin-top: 12px;
}

/* RIGHT PANEL */
.upload-right {
  width: 50%;
}
.preview-box {
  width: 100%;
  min-height: 140px;

  /*border: 2px dashed #e5e7eb;*/
  border-radius: 12px;
  /*background: #fafafa;*/

  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ FORCE 4 */
  gap: 8px;
  padding: 8px;
}


.preview-item {
  width: 100%;
  aspect-ratio: 1 / 1; /* ✅ perfect square */
  overflow: hidden;
  border-radius: 8px;
  /*background: #fff;*/
}

.preview-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ fills box nicely */
}



/* PDF */
.preview-grid-pdf {
  width: 100%;
  height: 100%;
  border: none;
}
.preview-item:hover {
  transform: scale(1.05);
  transition: 0.2s;
}
.preview-box {
  gap: 12px;
  padding: 12px;
}
/* =========================================
   NEW FIGMA CLAIM RESULT SECTION
========================================= */

.claim-page {
  width: 100%;
  min-height: 100vh;
  padding: 32px 40px;
  background: #f7f7f7;

 
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;

}

.claim-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 42px;
  cursor: pointer;
}

.claim-back-arrow {
  width: 10px;
  height: 10px;
  border-left: 2px solid #24384d;
  border-bottom: 2px solid #24384d;
  transform: rotate(45deg);
}

.claim-back-text {
  font-size: 18px;
  font-weight: 600;
  color: #24384d;
}

.claim-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  width: 100%;
  margin-bottom: 28px;
}
.claim-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #182433;

  margin-bottom: 10px;
}

.claim-subtitle {
  font-size: 16px;
  color: #6b7280;
}

.claim-id-text {
  font-size: 18px;
  font-weight: 600;
  color: #243446;
}

.claim-info-label {
  font-size: 14px;
  color: #6b7280;

  margin-bottom: 8px;
}

.claim-info-value {
  font-size: 14px;
  font-weight: 510;
  color: #1f2937;
  width: 200px;
}

.claim-subtitle strong {
  color: #111827;
}

.claim-another-btn {
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid #24384d;
  background: #fff;
  color: #24384d;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.claim-card {
 width: 283px !important;


  background: #fff;
  border-radius: 18px;

  padding: 34px 32px;

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


  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 12px 32px rgba(0,0,0,0.04);

  margin-bottom: 24px;
}

.claim-left {
  flex: 1;
  max-width:450px;
}

.claim-right {
  width: 420px;
  flex-shrink: 0;

  padding-top: 10px;
}

.claim-id-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}



.claim-info-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 42px;
  margin-bottom: 48px;
}

.claim-info-block {
  min-width: 120px;
}


.status-pending {
  color: #118847;
  font-weight: 700;
}

.damage-major {
  color: #e11d48;
  font-weight: 700;
}

.damage-minor {
  color: #d97706;
  font-weight: 700;
}

.view-details-btn {
  width: 220px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid #24384d;
  background: #fff;
  color: #24384d;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}



.receipt-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #17324d;
  white-space: nowrap;
  cursor: pointer;
}
.claim-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 24px;
  padding-left: 0;
}

.claim-checkbox-row input {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media (max-width: 1024px) {

  .claim-card {
    flex-direction: column;
  }

  .claim-right {
    width: 100%;
  }

  .receipt-options {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {

  .claim-page {
    padding: 24px 16px;
  }

  .claim-header {
    flex-direction: column;
    gap: 20px;
  }

  .claim-info-row {
    flex-direction: column;
    gap: 24px;
  }

  .receipt-options {
    flex-direction: column !important;
    align-items: flex-start;
  }

  .claim-another-btn,
  .view-details-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {

  .claim-page {
    padding: 24px;
  }

  .claim-header {
    flex-direction: column;
    gap: 20px;
  }

  .claim-title {
    font-size: 30px;
  }

  .claim-info-row {
    flex-direction: column;
    gap: 24px;
  }

  .receipt-options {
    flex-direction: column;
    gap: 18px;
  }

  .claim-another-btn,
  .view-details-btn {
    width: 100%;
  }
}
.listWrap ul {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.listWrap li {
  border-bottom: 1px dashed #f3f4f6 !important;
}


/* =========================================
   CLAIM PAGE
========================================= */

.claims-page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 40px 60px;
  background: #f6f6f4;
  min-height: 100vh;
}

/* BACK */

.claims-back {
  font-size: 16px;
  color: #17324d;
  margin-bottom: 28px;
  cursor: pointer;
}

/* HEADER */

.claims-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.claims-header h1 {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 400;
  color: #17324d;
  margin-bottom: 16px;
}

.trip-info {
  font-size: 22px;
  color: #6b7280;
}

.tag-label {
  margin-left: 12px;
}

.claim-another-btn {
  border: 1px solid #17324d;
  background: transparent;
  border-radius: 999px;
  padding: 18px 34px;
  font-size: 24px;
  color: #17324d;
  cursor: pointer;
}

/* CHECKBOX */

.no-more-wrapper {
  margin-bottom: 18px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: #17324d;
}

/* CLAIM CARD */



/* TOP ROW */

.claim-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* CLAIM PILL */

.claim-id-pill {
  border: 2px solid #17324d;
  border-radius: 22px;
  padding: 22px 34px;
  font-size: 28px;
  color: #17324d;
  min-width: 340px;
}

/* RECEIPT SECTION */

.receipt-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.receipt-title {
    margin-bottom: 20px; 					
	width: 256px;
	height: 19px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	color: #374151;
}


/* INFO ROW */



.claim-label {
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 10px;
}

.claim-value {
  font-size: 28px;
  color: #17324d;
  line-height: 1.4;
}

.claim-status {
  font-size: 30px;
  font-weight: 600;
}

.claim-status.pending {
  color: #008236;
}

.claim-damage {
  font-size: 30px;
  font-weight: 600;
  text-transform: lowercase;
}

.claim-damage.major {
  color: #ff2f55;
}

.claim-damage.minor {
  color: #d28a00;
}

/* FOOTER */

.claim-footer {
  margin-top: 52px;
}

.view-details-btn {
  border: 1.5px solid #17324d;
  background: transparent;
  border-radius: 999px;
  padding: 18px 44px;
  font-size: 14px;
  color: #17324d;
  cursor: pointer;
}

/* RESPONSIVE */

@media (max-width: 1200px) {

  .claim-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .claim-info-row {
    flex-wrap: wrap;
    gap: 40px;
  }

  .receipt-options {
    flex-wrap: wrap;
  }
}

/* 🔥 FINAL OVERRIDE - CLAIM CARD (LOCK DESIGN) */
#damageResultSection .claim-card {
  width: 100% !important;
  max-width: 1100px !important;   /* 🔥 key fix */
  margin: 0 auto 24px !important;

  background: #fff !important;
  border-radius: 18px !important;

  padding: 34px 32px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  gap: 10px !important;

  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 12px 32px rgba(0,0,0,0.04) !important;

  border: none !important; /* 🔥 removes old design */
}
.claims-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.claim-header {
  max-width: 1100px;
  margin: 0 auto 32px;
}
.claim-title {
  font-size: 32px !important;   /* was 28px */
}

.claim-subtitle {
  font-size: 15px !important;
}
.claim-right {
  width: 360px !important;
}
@media (min-width: 1400px) {
  #damageResultSection .claim-card {
    max-width: 1000px;
  }
}
.claim-another-btn {
  font-size: 16px;
  padding: 0 20px;
}
/* 🔥 PERFECT FIGMA RADIO STYLE */

.receipt-options {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-top: 25px;

}

.receipt-option {
  display: flex;
  align-items: center;

  gap: 12px;              /* slightly bigger */
  cursor: pointer;

  font-size: 15px;
  font-weight: 500;
  color: #1f2937;

  line-height: 1.2;       /* 🔥 fixes vertical alignment */
}


/* hide default radio */
.receipt-option input {
  display: none;
}

/* custom circle */
.radio-ui {
  width: 16px;            /* 🔥 bigger */
  height: 16px;

  border: 2.5px solid #365061;  /* 🔥 thicker border */
  border-radius: 50%;

  position: relative;
}


.radio-ui::after {
  content: "";

  width: 6px;            /* 🔥 bigger for balance */
  height: 6px;

  border-radius: 50%;
  background: #365061;

  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s;
}


/* checked state */
.receipt-option input:checked + .radio-ui {
  border-color: #365061;
}

.receipt-option input:checked + .radio-ui::after {
  transform: translate(-50%, -50%) scale(1);
}

/* text */
.option-text {
  line-height: 1;
  font-size: 14px;
}
/* ✅ STATUS BADGE */
.status-pending {
  color: #0B7030;
 
  border-radius: 999px;

  font-size: 14px;
  font-weight: 510;
 
}

/* ✅ DAMAGE BADGE - MAJOR */
.damage-major,.damage-minor {
  color: #E51111;

  border-radius: 999px;
  font-size: 14px;
  font-weight: 510;

}
/* container */
.claim-checkbox-row {
  margin-top: 24px;
}

/* label acts as row */
.checkbox-label {
  display: inline-flex;   /* 🔥 instead of flex */
  align-items: center;
  gap: 12px;
  cursor: pointer;
}


/* custom box */
.check-ui {
  width: 24px!important;
  height: 24px!important;

  border: 2.2px solid #17324d !important;  /* 🔥 darker + stronger */
  border-radius: 4px;

  display: inline-flex;         /* 🔥 instead of block */
  align-items: center;
  justify-content: center;

  background: #fff;
  flex-shrink: 0;
}

/* checkmark */
.check-ui::after {
  content: "";

  width: 6px;
  height: 11px;

  border-right: 2px solid white;
  border-bottom: 2px solid white;

  transform: rotate(45deg) scale(0);   /* 🔥 no translate */
  transform-origin: center;

  transition: 0.15s ease;
}


/* checked state */
.checkbox-label input:checked + .check-ui {
  background: #17324d;
  border-color: #17324d;
}

.checkbox-label input:checked + .check-ui::after {
  transform: rotate(45deg) scale(1);
}

.claim-checkbox-row {
  margin-top: 32px;         /* 🔥 increase spacing */
  padding-left: 6px;        /* 🔥 align visually with content */
}


/* text */
.checkbox-text {
  font-size: 15px;
  font-weight: 500;
  color: #17324d;
    white-space: nowrap;
    margin-left: 65px;
  line-height: 20px;  /* 🔥 matches checkbox height */
}

.checkbox-label {
  display: flex;
  align-items: center;

  gap: 12px;
  cursor: pointer;

  line-height: 1;   /* 🔥 critical for alignment */
}
#damageResultSection .claim-checkbox-row {
  max-width: 1100px;
  
  margin-right: auto;
  margin-left: 60px;
}
#filelist_receiptPhotos, #filelist_bagPhotos, #filelist_brandPhotos{
    background: #E8EFF2;
	
}
#filelist_receiptPhotos{
margin-top: 20px;
}
/* ===== MODAL BACKDROP ===== */
.no-more-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);

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

  z-index: 2000;
}

.no-more-modal.hidden {
  display: none;
}

/* ===== MODAL CARD ===== */
.modal-card {
  width: 404px;                 /* 🔥 exact width from design */
  background: #ffffff;

  border-radius: 16px;

  padding: 28px 28px 24px;      /* 🔥 balanced top/bottom */

  box-shadow:
    0px 10px 30px rgba(0, 0, 0, 0.08),
    0px 2px 4px rgba(0, 0, 0, 0.06);
}

/* ===== TITLE ===== */
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #182433;

  margin-bottom: 30px;   /* 🔥 tight gap like Figma */
}

/* ===== TEXT ===== */
.modal-subtext {
  font-size: 14px;
  color: #6b7280;

  line-height: 1.5;

  margin-bottom: 24px;  /* 🔥 space before buttons */
}

/* ===== BUTTON ROW ===== */
.modal-footer {
  display: flex;
	
margin-right: 50px;
  gap: 12px;   /* 🔥 Figma spacing */
}

/* ===== BUTTON BASE ===== */
.modal-footer button {
  height: 44px;           /* 🔥 exact button height */
  padding: 0 18px;

  border-radius: 999px;

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

  cursor: pointer;
  transition: 0.2s ease;
}

/* ===== CANCEL BUTTON ===== */
.btn-outline {
  border: 1.5px solid #24384d;     /* 🔥 darker stroke */
  background: #ffffff;
  color: #24384d;
}

/* ===== CONFIRM BUTTON ===== */
.btn-primary {
  border: none;
  background: #c9922e;             /* ✅ Etihad gold */
  color: white;
}

/* ===== HOVER ===== */
.btn-outline:hover {
  background: #f9fafb;
}

.btn-primary:hover {
  background: #b78328;
}
#receiptsAttachModal {
  display: none !important;
}

/* container alignment */
.submit-container {
  display: flex;
  justify-content: flex-end;   /* 🔥 RIGHT ALIGN */
  margin-top: 32px;
}

/* hidden state */
.submit-container.hidden {
  display: none;
}

/* button */
#submit-btn {
  height: 52px;
  padding: 0 26px;

  border-radius: 999px;
  border: none;

  background: #c9922e;
  color: #ffffff;

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

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* hover (Figma feel) */
#submit-btn:hover {
  background: #b78328;
}
#drop_receiptPhotos{

margin-top: 30px;

}


/* =========================================
   DAMAGE DETAILS MODAL
========================================= */

.damage-details-card {
  width: 760px !important;
  max-width: 92%;
  padding: 28px 32px;
  text-align: left;
}

.damage-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.damage-modal-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.damage-close-btn {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
}

.damage-close-btn:hover {
  color: #111827;
}

.damage-modal-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.damage-detail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.damage-label {
 display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.damage-label img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.damage-value {
  font-size: 16px !important;
  line-height: 1.7;
  color: #374151;
  margin-left: 20px !important;
}

.damage-value ul {
  margin-left: 20px !important;
  margin-top: 8px !important;
}

.damage-value li {
  margin-bottom: 6px !important;
}


/* =========================================
   COMPENSATION UI
========================================= */

.compensation-wrapper {
  margin-top: 32px;
}

.compensation-card {
  background: #f3f4f6;
  border-radius: 14px;
  padding: 28px 32px;
}

.summary-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 26px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-label {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.summary-value {
  font-size: 22px;
  font-weight: 500;
  color: #374151;
}

.summary-divider-with-text {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 20px 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: #d1d5db;
}

.divider-text {
  font-size: 16px;
  color: #6b7280;
}

.compensation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 36px;
}

.comp-btn-outline {
  min-width: 190px;
  height: 48px;

  border-radius: 999px;
  border: 1px solid #64748b;

  background: #dce3e8;
  color: #374151;

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

  cursor: pointer;
}

.comp-btn-primary {
  min-width: 190px;
  height: 48px;

  border: none;
  border-radius: 999px;

  background: #b78a3d;
  color: white;

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

  cursor: pointer;
}

.comp-btn-primary:hover {
  opacity: 0.95;
}

.banner-left {
    display: flex;
    align-items: center;
}



        /* ===== ETIHAD FOOTER ===== */

        /* Responsive */
        @media (max-width: 768px) {
            .etihad-footer-container {
                flex-direction: column;
                text-align: center;
            }

            .etihad-footer-links {
                justify-content: center;
            }
        }

        /* CSS Variables */
        :root {
            --color-primary: #2e4755;
            --color-primary-dark: #263a46;
            --color-secondary: #b08747;
            --color-text-primary: #111827;
            --color-text-secondary: #374151;
            --color-text-muted: #6b7280;
            --color-text-light: #e5e7eb;
            --color-border: #e5e7eb;
            --color-white: #ffffff;
            --color-background: #f9fafb;
            --color-success: #10b981;
            --color-error: #ef4444;
            --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 24px;
            --spacing-2xl: 32px;
            --spacing-3xl: 48px;
        }

        /* Navigation Panel */
        .navigation-panel {
            width: 64px;
            background: var(--color-primary-dark);
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            z-index: 100;
            transition: width 0.3s ease-in-out 0.15s; /* Delay width change */
        }

            .navigation-panel.expanded {
                width: 200px;
                transition: width 0.3s ease-in-out; /* No delay when expanding */
            }

        .nav-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-xl);
            padding: var(--spacing-xl);
        }

        .logo-container {
            width: 40px;
            height: 40px;
            background: var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wing-logo {
            width: 24px;
            height: 24px;
            background: var(--color-white);
            border-radius: 50%;
        }

        .nav-divider {
            width: 22px;
            height: 1px;
            background: #4b5563;
        }

        .nav-toggle-btn {
            position: absolute;
            right: -14px;
            top: 69px;
            width: 28px;
            height: 28px;
            background: var(--color-primary-dark);
            border: 1px solid var(--color-primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transform: rotate(-90deg);
            transition: transform 0.3s;
        }

            .nav-toggle-btn:hover {
                background: var(--color-primary);
            }

        .navigation-panel.expanded .nav-toggle-btn {
            transform: rotate(90deg);
        }

        .chevron-icon {
            width: 16px;
            height: 16px;
        }
        .primary-navigation {
            background: #0000;
            border: 0;
            font-size: 100%;
            font: inherit;
            margin: 0;
            outline: none;
            padding: 0;
            text-align: inherit;
            text-decoration: none;
            vertical-align: initial;
        }

        ul.navigation-item-group {
            list-style:none;
        }

        li.nav-items {
            padding-left: 5px;
            padding-right: 16px;
        }
        .menu-text {
            padding-left: 16px;
            padding-right: 16px;
            color: white;
            opacity: 0;
            transition: opacity 0.15s ease-in-out; /* Fast opacity change */
            visibility: visible;
            font-weight: 350;
            font-size: 16px;
        }

        .navigation-panel.expanded .menu-text {
            opacity: 1;
            transition: opacity 0.15s ease-in-out 0.15s; /* Delay opacity fade-in */
        }
        /* Content Wrapper */
        .content-wrapper {
            flex: 1;
            margin-left: 64px;
            display: flex;
            flex-direction: column;
        }
/* Full page center */
.success-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

/* Figma card */
.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;

    width: 100%;
    max-width: 1104px;
    min-height: 248px;

    padding: 24px;

    background: #FFFFFF;
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.08);
    border-radius: 16px;

    box-sizing: border-box;
}

/* Optional typography */
.success-card h1 {
    margin: 0;
}

.success-card p {
    margin: 0;
}
#successReferenceNumber {
    font-weight: 700; /* or bold */
}

#progressbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    z-index: 10001;

    background: rgba(255,255,255,0.4);
}
#notificationInvalidReceipt {
    max-width: 1104px;
    margin: 24px auto;
    width: 100%;
}


#confirmPaymentMissingFields{


}

.preview-label {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #344054;
}
.sample-preview-item {
    aspect-ratio: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.sample-preview-item .preview-grid-img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    background: #fff;
}

.preview-label {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #344054;
}