/* 我的租屋認證：靜態總覽與給予紀錄 */
.tenantVerificationOverview{
    margin-bottom: 46px;
}

.pageHeader .pageBreadcrumbs{
    margin-top: 0;
}

.tenantVerificationProfile{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(600px, 100%);
    margin: 20px auto 0;
    padding: 20px;
    overflow: hidden;
    background: rgb(255 255 255 / 78%);
    border: 1px solid #e1d9cf;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgb(86 65 41 / 7%);
    text-align: center;
}

.tenantVerificationProfile > :not(.tenantVerificationProfile__watermark){
    position: relative;
    z-index: 1;
}

/* 初始僅顯示卡片內的載入提示，待 API 回傳真實認證資料後再呈現內容。 */
.tenantVerificationProfile[aria-busy="true"] > *{
    display: none;
}

.tenantVerificationProfile__loading{
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    color: #9c9892;
    font-size: 14px;
    font-weight: 600;
}

.tenantVerificationProfile__loading .material-symbols-outlined{
    font-size: 24px;
    animation: tenantVerificationProfileSpin 1s linear infinite;
}

.tenantVerificationProfile[aria-busy="true"] > .tenantVerificationProfile__loading{
    display: flex;
}

@keyframes tenantVerificationProfileSpin{
    to{ transform: rotate(360deg); }
}

.tenantVerificationProfile__avatar{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgb(86 65 41 / 14%);
}

.tenantVerificationProfile__identity{
    min-width: 0;
    margin-top: 13px;
    padding: 0;
}

.tenantVerificationProfile__name{
    margin: 0 0 5px;
    color: #5f5547;
    font-size: 21px;
    font-weight: 700;
}

.tenantVerificationProfile__identity > p:not(.tenantVerificationProfile__name){
    margin: 0;
    color: #9c9892;
    font-size: 14px;
}

.tenantVerificationProfile__identity strong{
    margin-left: 4px;
    color: #aa8d55;
    font-size: 16px;
    letter-spacing: .12em;
}

.tenantVerificationSummary{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e5ded5;
}

.tenantVerificationSummary__item{
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    color: #8e7650;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.tenantVerificationSummary__hexagon{
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 7px;
    color: currentcolor;
    background: currentcolor;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    place-items: center;
}

.tenantVerificationSummary__hexagon::before{
    width: 56px;
    height: 56px;
    background: #fffdfa;
    clip-path: inherit;
    content: '';
}

.tenantVerificationSummary__hexagon .material-symbols-outlined{
    position: absolute;
    z-index: 1;
    font-size: 30px;
}

.tenantVerificationSummary__item > strong{
    margin-top: 1px;
    color: #5f5547;
    font-size: 19px;
    line-height: 1.2;
}

.tenantVerificationSummary__item--payment{ color: #759a68; }
.tenantVerificationSummary__item--communication{ color: #9e7b47; }
.tenantVerificationSummary__item--care{ color: #698b91; }

/* 實名業者認證紀錄 */
/* 個人卡不再以累積分數呈現，改為逐筆標示實際提供正向認證的業者。 */
.tenantVerificationReviewList{
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e5ded5;
}

.tenantVerificationReviewList__item{
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    color: #8e7650;
    background: rgb(255 253 250 / 82%);
    border: 1px solid #ebe2d6;
    border-radius: 10px;
    text-align: left;
}

.tenantVerificationReviewList__years{
    display: grid;
    grid-auto-rows: min-content;
    gap: 1px;
    color: #8b8174;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    place-items: center;
}

.tenantVerificationReviewList__years span{
    display: block;
}

.tenantVerificationReviewList__city{
    color: #9c9892;
    font-size: 14px;
    font-weight: 500;
}

.tenantVerificationReviewList__item p{
    display: grid;
    gap: 2px;
    margin: 0;
}

.tenantVerificationReviewList__item strong{
    color: currentcolor;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.tenantVerificationReviewList__item p span{
    color: #82786b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.tenantVerificationReviewList__item--payment{ color: #759a68; }
.tenantVerificationReviewList__item--communication{ color: #9e7b47; }
.tenantVerificationReviewList__item--care{ color: #698b91; }

.tenantVerificationProfile__certificate{
    position: relative;
    z-index: 1;
    align-self: stretch;
    margin: 17px 0 0;
    color: #aaa39a;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4;
    text-align: left;
}

.tenantVerificationProfile__watermark{
    position: absolute;
    right: -120px;
    bottom: -61px;
    box-sizing: border-box;
    width: 372px;
    height: auto;
    padding: 32px;
    opacity: .1;
    background: #fff;
    border: 6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgb(86 65 41 / 18%);
    pointer-events: none;
    z-index: 0;
}

.tenantVerificationDownload{
    margin: 16px auto 0;
}

.tenantVerificationVisibility{
    width: min(360px, 100%);
    margin: 20px auto 0;
    text-align: center;
}
.tenantVerificationVisibility[hidden]{ display: none; }
.tenantVerificationVisibility h4{
    margin: 0;
    color: #5f5547;
    font-size: 16px;
}
.tenantVerificationVisibility p{
    margin: 5px 0 12px;
    color: #89847d;
    font-size: 13px;
}
.tenantVerificationVisibility__options{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #d9cbb5;
    border-radius: 6px;
}
.tenantVerificationVisibility__options button{
    min-height: 42px;
    color: #755f3b;
    background: #fff;
    border: 0;
    cursor: pointer;
}
.tenantVerificationVisibility__options button + button{ border-left: 1px solid #d9cbb5; }
.tenantVerificationVisibility__options button[aria-pressed="true"]{
    color: #fff;
    background: #a48953;
}
.tenantVerificationVisibility__options button:disabled{ cursor: not-allowed; }

.tenantVerificationRecords{
    padding-top: 30px;
}

.tenantVerificationRecords__heading{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 7px;
}

.tenantVerificationRecords__heading > p{
    margin: 0;
    color: #9c9892;
    font-size: 14px;
}

.tenantVerificationListLimit{
    width: min(820px, 100%);
    box-sizing: border-box;
    margin: 0 auto 12px;
    color: #4e4e4e;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.tenantVerificationRecords__list{
    display: grid;
    width: min(820px, 100%);
    margin: 0 auto;
    gap: 14px;
}

/* 租客端僅呈現租賃足跡，不揭露個別業者給予的認證內容。 */
.tenantVerificationRecords--timeline .tenantVerificationRecords__list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(820px, 100%);
    gap: 12px;
}

.tenantVerificationRecords--timeline .tenantVerificationRecord{
    display: block;
    min-height: 96px;
    padding: 18px;
}

.tenantVerificationRecords--timeline .tenantVerificationRecord__meta{
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 100%;
    text-align: center;
}

.tenantVerificationRecords--timeline .tenantVerificationRecord__meta > .material-symbols-outlined{
    width: 54px;
    height: 54px;
    color: #aa8d55;
    font-size: 28px;
}

.tenantVerificationRecord{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: rgb(255 255 255 / 76%);
    border: 1px solid #e1d9cf;
    border-radius: 10px;
}

.tenantVerificationRecord__meta{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}

.tenantVerificationRecord__meta > .material-symbols-outlined{
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    color: #aa8d55;
    font-size: 23px;
    background: #f6f0e7;
    border-radius: 50%;
    place-items: center;
}

.tenantVerificationRecord h3{
    margin: 0 0 3px;
    color: #5f5547;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.tenantVerificationRecord__meta p{
    margin: 0;
    color: #9c9892;
    font-size: 14px;
    line-height: 1.55;
}

.tenantVerificationBadges{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    gap: 16px;
}

.tenantVerificationBadge{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
    color: #8e7650;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.tenantVerificationBadge__hexagon{
    position: relative;
    display: grid;
    width: 50px;
    height: 50px;
    color: currentcolor;
    background: currentcolor;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    place-items: center;
}

.tenantVerificationBadge__hexagon::before{
    width: 44px;
    height: 44px;
    background: #fffdfa;
    clip-path: inherit;
    content: '';
}

.tenantVerificationBadge__hexagon .material-symbols-outlined{
    position: absolute;
    z-index: 1;
    font-size: 22px;
}

.tenantVerificationBadge--payment{ color: #759a68; }
.tenantVerificationBadge--communication{ color: #9e7b47; }
.tenantVerificationBadge--care{ color: #698b91; }

@media (max-width: 820px){
    .tenantVerificationRecords--timeline .tenantVerificationRecords__list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tenantVerificationInvite{
    width: 100%;
    margin: 46px auto 0;
    padding-top: 30px;
}

.tenantVerificationInvite__intro{
    width: min(820px, 100%);
    margin: 8px auto 20px;
    color: #9c9892;
    font-size: 14px;
    text-align: center;
}

.tenantVerificationInvite__form{
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(120px, .7fr) minmax(120px, .7fr);
    gap: 12px;
    padding: 22px;
    background: rgb(255 255 255 / 76%);
    border: 1px solid #e1d9cf;
    border-radius: 10px;
    width: min(820px, 100%);
    box-sizing: border-box;
    margin: 0 auto;
}

.tenantVerificationInvite__form label{
    position: relative;
    display: grid;
    gap: 7px;
    color: #71685c;
    font-size: 14px;
    font-weight: 700;
}

.tenantVerificationCompanyOptions{
    position: absolute;
    z-index: 3;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fffdfa;
    border: 1px solid #ded5ca;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgb(86 65 41 / 14%);
}

.tenantVerificationCompanyOptions[hidden]{ display: none; }

.tenantVerificationCompanyOption{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 2px 7px;
    padding: 10px 12px;
    color: #5f5547;
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.tenantVerificationCompanyOption + .tenantVerificationCompanyOption{ border-top: 1px solid #eee7de; }

.tenantVerificationCompanyOption:hover,
.tenantVerificationCompanyOption:focus-visible{
    background: #f8f2e8;
    outline: 0;
}

.tenantVerificationCompanyOption strong{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.tenantVerificationCompanyOption span{
    width: 100%;
    color: #a29c94;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.tenantVerificationCompanyOption__registered{
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: #6fb176;
    border-radius: 50%;
}

.tenantVerificationCompanyOptionEmpty{
    margin: 0;
    padding: 14px 12px;
    color: #a29c94;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.tenantVerificationInvite__form input,
.tenantVerificationInvite__form select{
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 12px;
    color: #5f5547;
    font: inherit;
    font-size: 14px;
    background: #fffdfa;
    border: 1px solid #ded5ca;
    border-radius: 6px;
}

/* 搜尋式 select 仍維持與其他表單 select 一致的欄位外觀。 */
.tenantVerificationCompanySelect .tenantVerificationCompanySelect__trigger{
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 12px;
    color: #5f5547;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    background: #fffdfa;
    border: 1px solid #ded5ca;
    border-radius: 6px;
}

.tenantVerificationInvite__form .tenantVerificationCompanyOptions .searchselect-dropdown__input{
    width: calc(100% - 20px);
    min-height: 38px;
    margin: 10px;
    padding: 8px 10px;
}

.tenantVerificationInvite__form .settingPreviewAction{
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 4px;
}

.tenantVerificationInvite__records{
    width: min(820px, 100%);
    margin: 30px auto 0;
}

.tenantVerificationInvite__recordsHeading h4{
    margin-bottom: 14px;
    font-size: 19px;
    letter-spacing: .08em;
}

.tenantVerificationInvite__recordsHeading{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.tenantVerificationInvite__recordsHeading h4{ margin: 0; }
.tenantVerificationInvite__recordsHeading .tenantVerificationListLimit{ width: auto; margin: 0 0 14px; }

.tenantVerificationInvite__recordList{ display: grid; gap: 12px; }

.tenantVerificationInvite__empty{
    margin: 0;
    padding: 20px;
    color: #9c9892;
    font-size: 14px;
    text-align: center;
    background: rgb(255 255 255 / 50%);
    border: 1px dashed #d8d1c7;
    border-radius: 10px;
}

.tenantVerificationRecords--timeline .tenantVerificationInvite__empty{
    grid-column: 1 / -1;
}

.tenantVerificationInvitationRecord{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: rgb(255 255 255 / 76%);
    border: 1px dashed #cdb98e;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.tenantVerificationInvitationRecord:hover,
.tenantVerificationInvitationRecord:focus-visible{
    background: #fffaf2;
    box-shadow: 0 8px 20px rgb(95 85 71 / 8%);
    outline: 0;
}

.tenantVerificationInvitationRecord__company{
    display: flex;
    align-items: center;
    gap: 12px;
}

.tenantVerificationInvitationRecord__company > .material-symbols-outlined{
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    color: #aa8d55;
    font-size: 23px;
    background: #f6f0e7;
    border-radius: 50%;
    place-items: center;
}

.tenantVerificationInvitationRecord h4,
.tenantVerificationInvitationRecord p{ margin: 0; }

.tenantVerificationInvitationRecord h4{
    color: #5f5547;
    font-size: 16px;
    line-height: 1.45;
}

.tenantVerificationInvitationRecord__companyTitle{
    display: flex;
    align-items: center;
    gap: 6px;
}

.tenantVerificationInvitationRecord__registered{
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: #6fb176;
    border-radius: 50%;
    place-items: center;
}

.tenantVerificationInvitationRecord p{
    color: #9c9892;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.tenantVerificationInvitationRecord__details{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.tenantVerificationInvitationRecord__details span{
    padding: 4px 8px;
    color: #8e7650;
    font-size: 14px;
    font-weight: 700;
    background: #fbf5e9;
    border-radius: 999px;
}

.tenantVerificationInvitationRecord__details .tenantVerificationInvitationRecord__rental-meta{
    padding: 0;
    color: #9c9892;
    font-weight: 400;
    background: transparent;
}

.tenantVerificationInvitationRecord__details .tenantVerificationInvitationRecord__date{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    color: #9c9892;
    font-weight: 400;
    background: transparent;
}

.tenantVerificationInvitationRecord__date .material-symbols-outlined{
    font-size: 16px;
}

.tenantVerificationInvitationRecord__details .tenantVerificationInvitationRecord__status{
    color: #858585;
    background: #eeeeee;
}

.tenantVerificationInvitationRecord__details .tenantVerificationInvitationRecord__status--completed{
    color: #5f9a67;
    background: #e8f4ea;
}

.tenantVerificationInvitationRecord__cancel{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    padding: 4px 8px;
    color: #9d675e;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #fffaf8;
    border: 1px solid #e2c7c0;
    border-radius: 999px;
    cursor: pointer;
}

.tenantVerificationInvitationRecord__cancel .material-symbols-outlined{ font-size: 16px; }

.tenantVerificationInvitationRecord__cancel:hover,
.tenantVerificationInvitationRecord__cancel:focus-visible{
    color: #854b47;
    background: #f8e9e5;
    outline: 0;
}

.tenantVerificationInvitationRecord__cancel:disabled{
    cursor: wait;
    opacity: .55;
}

.tenantVerificationInvitationRecord__url{
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #71685c;
    font-size: 14px;
    font-weight: 700;
}

.tenantVerificationInvitationRecord__url > span{
    display: flex;
    min-width: 0;
}

.tenantVerificationInvitationRecord__url input{
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    padding: 8px 10px;
    color: #77716a;
    font: inherit;
    font-size: 14px;
    background: #fffdfa;
    border: 1px solid #ded5ca;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    cursor: text;
}

.tenantVerificationInvitationRecord__url button{
    display: grid;
    width: 42px;
    height: 40px;
    flex: 0 0 auto;
    color: #8e7650;
    background: #f8f2e8;
    border: 1px solid #ded5ca;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    place-items: center;
}

.tenantVerificationInvitationRecord__url button:hover,
.tenantVerificationInvitationRecord__url button:focus-visible{
    color: #5f5547;
    background: #eee4d3;
    outline: 0;
}

.tenantVerificationInvitationRecord__url .material-symbols-outlined{ font-size: 19px; }

@media (max-width: 620px){
    .tenantVerificationOverview{ margin-bottom: 34px; }
    .tenantVerificationProfile{ padding: 18px; }
    .tenantVerificationProfile__avatar{ width: 100px; height: 100px; }
    .tenantVerificationSummary{ gap: 8px; }
    .tenantVerificationSummary__hexagon{ width: 58px; height: 58px; }
    .tenantVerificationSummary__hexagon::before{ width: 51px; height: 51px; }
    .tenantVerificationRecords{ padding-top: 24px; }
    .tenantVerificationRecords__heading{ align-items: center; flex-direction: column; gap: 7px; }
    .tenantVerificationRecords--timeline .tenantVerificationRecords__list{ grid-template-columns: 1fr; }
    .tenantVerificationRecords--timeline .tenantVerificationRecord{ min-height: 0; padding: 16px; }
    .tenantVerificationRecords--timeline .tenantVerificationRecord__meta{ justify-content: center; text-align: center; }
    .tenantVerificationRecord{ display: flex; align-items: center; flex-direction: column; gap: 18px; padding: 18px; }
    .tenantVerificationRecord__meta{ justify-content: center; text-align: center; }
    .tenantVerificationRecord h3{ font-size: 16px; }
    .tenantVerificationInvite{ margin-top: 36px; padding-top: 24px; }
    .tenantVerificationInvite__form{ grid-template-columns: 1fr; padding: 18px; }
    .tenantVerificationInvitationRecord{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .tenantVerificationInvitationRecord__company{ justify-self: stretch; width: 100%; text-align: left; }
    .tenantVerificationInvitationRecord__details{ justify-content: center; }
    .tenantVerificationInvitationRecord__url{ grid-template-columns: 1fr; gap: 7px; width: 100%; text-align: left; }
}