:root{
    --portal-orange: #d28326;      /* sampled from screenshot */
    --portal-text: #1f1f1f;
    --portal-muted: #6f6f6f;
    --portal-card: #efefef;        /* light gray card background */
}

body{
    color: var(--portal-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: #ffffff;
}

/* Header */
.topbar{
    background: #fff;
}
.brand-logo{
    height: 34px;
    width: auto;
}

/* Main spacing similar to screenshot */
.portal{
    max-width: 1200px;
}
.portal-hero{
    padding-top: 40px;
    padding-left: 10px;
}
.portal-title{
    font-size: 48px;
    font-weight: 500;
    margin: 0 0 22px 0;
}
.portal-intro{
    max-width: 980px;
    line-height: 1.6;
    color: #2b2b2b;
}

/* Section heading */
.portal-h2{
    font-size: 40px;
    font-weight: 500;
    margin: 0;
}

/* Help items */
.help-item{
    padding-right: 10px;
}
.help-title{
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.help-text{
    color: #2d2d2d;
    line-height: 1.5;
    margin: 0 0 14px 0;
    max-width: 260px;
}

.help-link{
    text-decoration: none;
    color: var(--portal-orange);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 600;
}
.help-link:hover{
    text-decoration: underline;
}

/* Login card */
.login-card{
    background: var(--portal-card);
    padding: 36px 34px;
    border: 0;
}
.login-kicker{
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #7a7a7a;
    margin-bottom: 18px;
}
.login-title{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* Make inputs feel closer to screenshot */
.form-control-lg{
    border-radius: 2px;
    padding: 14px 14px;
    font-size: 15px;
}

/* Login button */
.btn-login{
    background: var(--portal-orange);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn-login:hover{
    background: var(--portal-orange);
    filter: brightness(0.95) !important;
    color: #fff;
}

/* Contact area */
.portal-contact{
    padding-left: 10px;
}
.contact-box{
    max-width: 520px;
}
.contact-title{
    font-size: 22px;
}
.contact-lines{
    color: #2b2b2b;
    line-height: 1.6;
}

:root{
    --orange: #d28326;
    --text: #1f1f1f;
    --muted: #6f6f6f;
    --line: #e9eef4;
    --thead: #f6f6f6;
}

body{
    color: var(--text);
    background: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Header */
.topbar{
    background: #fff;
}

.brand-logo{
    height: 36px;
    width: auto;
}

.topbar-divider{
    height: 2px;
    background: #1f1f1f;
    opacity: 0.25; /* thin dark line like screenshot */
}

/* Login button */
.btn-orange{
    background: var(--portal-orange);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn-orange:hover{
    background: var(--portal-orange);
    filter: brightness(0.95) !important;
    color: #fff;
}


.btn-outline-orange{
    border: 1px solid var(--orange);
    color: var(--orange);
    /*background: #fff;*/
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 12px;
    border-radius: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-outline-orange:hover{
    background: rgba(210, 131, 38, 0.08);
    color: var(--orange);
}

/* Layout spacing similar to design */
.claims-container{
    max-width: 1150px;
    padding-top: 70px;
}

.page-title{
    font-size: 48px;
    font-weight: 500;
    margin: 0 0 48px 0;
}

.toolbar{
    margin-top: 10px;
    margin-bottom: 18px;
}

/* Search */
.search-wrap{
    position: relative;
    width: 340px;
    max-width: 100%;
}

.search-icon{
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #7a7a7a;
    font-size: 14px;
}

.search-input{
    padding-left: 36px;
    border-radius: 2px;
    height: 40px;
    font-size: 14px;
}

/* Table shell */
.claims-table{
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
}

.table thead th{
    background: var(--thead);
    color: #7a7a7a;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line) !important;
}

.th-sort i{
    font-size: 12px;
    margin-left: 6px;
    opacity: 0.65;
}

.table tbody td{
    padding: 18px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
}

.table tbody tr:last-child td{
    border-bottom: 0;
}

/* Orange name links */
.link-orange{
    color: var(--orange);
    text-decoration: none;
    font-weight: 500;
}
.link-orange:hover{
    text-decoration: underline;
}

:root{
    --orange: #d28326;
    --text: #1f1f1f;
    --muted: #6f6f6f;
    --line: #e9eef4;
    --thead: #f6f6f6;
}

body{
    color: var(--text);
    background: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Header */
.topbar{ background:#fff; }
.brand-logo{ height:36px; width:auto; }
.topbar-divider{ height:2px; background:#1f1f1f; opacity:0.25; }

/* Buttons */
.btn-orange{
    background: var(--orange);
    border: 1px solid var(--orange);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 12px;
    border-radius: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-outline-orange{
    border: 1px solid var(--orange);
    color: var(--orange);
    /*background: #fff;*/
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 12px;
    border-radius: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn-outline-orange:hover{
    background: rgba(210, 131, 38, 0.08);
    color: var(--orange);
}

/* Shared layout */
.claims-container{
    max-width: 1150px;
    padding-top: 40px;
}
.page-title{
    font-size: 48px;
    font-weight: 500;
    margin: 0 0 48px 0;
}
.page-title--sm{
    margin-bottom: 10px;
}

/* Breadcrumb */
.portal-breadcrumb{
    font-size: 12px;
    color: #8a8a8a;
}
.portal-breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    color: #c7c7c7;
}
.portal-breadcrumb a{
    color: var(--orange);
}

/* Links */
.link-orange{
    color: var(--orange);
    text-decoration: none;
    font-weight: 500;
}
.link-orange:hover{ text-decoration: underline; }

/* Table shell */
.claims-table{
    border: 1px solid var(--line);
    overflow: hidden;
}
.table thead th{
    background: var(--thead);
    color: #7a7a7a;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line) !important;
}
.th-sort i{
    font-size: 12px;
    margin-left: 6px;
    opacity: 0.65;
}
.table tbody td{
    padding: 18px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
}
.table tbody tr:last-child td{ border-bottom: 0; }

/* Contact */
.portal-contact{ padding-left: 0; }
.contact-box{ max-width: 520px; }
.contact-title{ font-size: 20px; }
.contact-lines{ color: #2b2b2b; line-height: 1.6; }

/* ----------------------------- */
/* Claim Details additions       */
/* ----------------------------- */

.section-title{
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

/* Key/value list */
.kv{
    margin: 0;
}
.kv-row{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    padding: 7px 0;
}
.kv-row dt{
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    color: #1f1f1f;
}
.kv-row dd{
    margin: 0;
    font-size: 13px;
    color: #2b2b2b;
}
.kv-row--stack{
    grid-template-columns: 1fr;
    gap: 6px;
}

/* Submitter/Homeowner mini blocks */
.person-card{
    padding-top: 6px;
}
.person-title{
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.person-name{
    font-size: 13px;
    margin-bottom: 2px;
}
.person-meta{
    font-size: 13px;
}

/* Dropzone */
.dropzone{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    padding: 28px;
    background: #fafafa;
}
.dropzone-inner{
    text-align: center;
}
.dropzone-text{
    font-size: 12px;
    color: #2b2b2b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.dropzone-subtext{
    margin-top: 10px;
    font-size: 11px;
    color: #8a8a8a;
}

/* Comments */
.comment-box{
    border-radius: 2px;
    min-height: 90px;
}

.comment-thread{
    border-top: 1px solid transparent;
}

.comment-item{
    padding: 10px 0;
}
.comment-head{
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.comment-author{
    font-weight: 700;
    font-size: 13px;
}
.comment-author--staff{
    color: #1a8f2d; /* green tone like screenshot */
}
.comment-date{
    font-size: 12px;
    color: #8a8a8a;
}
.comment-body{
    margin-top: 6px;
    font-size: 13px;
    color: #2b2b2b;
    max-width: 860px;
}


:root{
    --text:#222;
    --muted:#777;
    --line:#e9e9e9;
    --soft:#f6f6f6;
    --accent:#d9842b;     /* orange button */
    --accent-2:#c8741f;
}

/* section-only styles */
  .breadcrumb a{ color:var(--accent); text-decoration:none; }
.claims-section .page-title{ font-size:44px; font-weight:500; margin:0 0 10px; }
.claims-section .page-sub{ color:var(--muted); margin:0 0 28px; font-size:15px; }

.claims-section .panel{
    background:var(--soft);
    border:1px solid var(--line);
    padding:26px 26px 22px;
}

.claims-section .panel-title{
    font-size:26px;
    font-weight:700;
    margin:0 0 18px;
}

.claims-section .form-control,
.claims-section .form-select{
    border:1px solid var(--line);
    border-radius:2px;
    padding:10px 11px;
    font-size:14px;
}

.shipping-related-damage .form-control,
.shipping-related-damage .form-select{
    border:1px solid var(--line);
    border-radius:2px;
    padding:10px 11px;
    font-size:14px;
}

.claims-section .form-control:focus,
.claims-section .form-select:focus{
    border-color:#d7d7d7;
    box-shadow:0 0 0 3px rgba(217,132,43,.12);
}

.claims-section .btn-portal{
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:2px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    padding:10px 16px;
    font-size:12px;
}

.claims-section .btn-portal:hover{ background:var(--accent-2); }


/* Find a Claim page additions */
.find-intro{
    font-size: 16px;
    color: #2b2b2b;
    line-height: 1.7;
    max-width: 980px;
}

.find-card{
    background: var(--soft);      /* from your styles */
    border: 1px solid var(--line);
    min-height: 360px;
}

.find-card-title{
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.dropzone .dz-files { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.dz-file {
    border: 1px solid #eee;
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

.dz-file-left { display: flex; gap: 10px; align-items: flex-start; }
.dz-file-icon { font-size: 18px; margin-top: 2px; }
.dz-file-name { font-weight: 600; }
.dz-file-sub { font-size: 12px; color: #777; margin-top: 4px; }

.dz-file-actions { position: absolute; right: 10px; top: 10px; }
.dz-remove { border: 0; background: transparent; font-size: 18px; cursor: pointer; }

.dz-progress { height: 6px; background: #ddd; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.dz-progress-bar { height: 10px; background: #2f6bff; width: 0%; transition: width .1s linear; }

.dz-file.is-error { border-color: #ffcccc; background: #fff3f3; }
.dz-error { margin-top: 8px; color: #b00020; font-size: 13px; }

.dropzone.is-dragover { outline: 2px dashed #d9842b; outline-offset: 6px; }


.dz-file{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap:16px;
    background:#efefef;
    border-radius:8px;
    padding:18px 22px;
    margin:12px 0;
    position:relative;
}

.dz-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
}

.dz-icon svg{
    width:30px;
    height:30px;
}

.dz-meta{
    flex:1;
    min-width:0;
}

.dz-name{
    font-size:22px;
    font-weight:600;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dz-size{
    margin-top:6px;
    color:#888;
    font-size:14px;
}

.dz-remove{
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
}

.dz-remove svg{
    width:28px;
    height:28px;
}

.dz-progress{
    position:absolute;
    left:18px;
    right:18px;
    bottom:10px;
    height:6px;
    background:#ddd;
    border-radius:999px;
    overflow:hidden;
}

.dz-bar{
    height:100%;
    width:0%;
    background: #4bdde8;
}

.dz-error{
    margin-top:8px;
    color:#b00020;
    font-size:13px;
    display:none;
}

.shipping-damage-message{
    max-width: 700px;
    margin: 40px auto;
    padding: 22px 28px;
    border: 1px solid #e4a15a;
    background: #fff6ed;
    border-radius: 10px;
    color: #6a3c09;
    font-size: 15px;
    line-height: 1.6;
}

.shipping-damage-message a{
    color: #d28326; /* portal orange */
    font-weight: 600;
    text-decoration: none;
}

.shipping-damage-message a:hover{
    text-decoration: underline;
}