:root{
    --care-accent:#3d6e64;
    --care-accent-soft:#e7f0ee;
}

.care-page-header{
    background:var(--care-accent);
    padding:44px 0 36px;
    color:#fff;
}

.care-page-header .container{
    max-width:1000px;
}

.care-badge-inline{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.15);
    padding:6px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:14px;
}

.care-page-header h1{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:32px;
    margin-bottom:8px;
}

.care-page-header p{
    color:rgba(255,255,255,.85);
    font-size:15px;
    max-width:600px;
}

.care-disclaimer{
    background:var(--care-accent-soft);
    color:var(--care-accent);
    font-size:12px;
    line-height:1.6;
    padding:12px 16px;
    border-radius:12px;
    margin:20px 0;
}

.care-main{
    padding:36px 0 70px;
}

.care-main .container{
    max-width:1000px;
}

/* ---- Search / filter bar ---- */

.care-filters{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:28px;
}

.care-filters label{
    display:block;
    font-size:12px;
    color:var(--text-muted);
}

.care-filters input,
.care-filters select{
    display:block;
    width:100%;
    margin-top:5px;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:var(--bg);
}

.care-filters-checkboxes{
    grid-column:1 / -1;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.care-filters-checkboxes label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--text);
}

.care-filters-checkboxes input{
    width:auto;
    margin:0;
}

.care-filters-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.care-list-btn{
    background:var(--care-accent);
    color:#fff;
    padding:11px 24px;
    border-radius:50px;
    font-weight:600;
    font-size:14px;
    transition:.3s ease;
}

.care-list-btn:hover{
    background:#2e5750;
}

.care-search-btn{
    background:var(--care-accent);
    color:#fff;
    padding:11px 22px;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
}

/* ---- Listing grid ---- */

.care-listings-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.care-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s ease;
}

.care-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(43,42,38,.1);
}

.care-card-image{
    position:relative;
    height:170px;
    background:var(--bg);
}

.care-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.care-card-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--care-accent);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
}

.care-card-content{
    padding:16px 18px 20px;
}

.care-card-content .care-location{
    font-size:12px;
    color:var(--text-muted);
}

.care-card-content h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:17px;
    margin:4px 0 8px;
}

.care-card-dates{
    font-size:12px;
    color:var(--care-accent);
    font-weight:600;
    margin-bottom:8px;
}

.care-card-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.care-card-tags span{
    font-size:11px;
    background:var(--care-accent-soft);
    color:var(--care-accent);
    padding:3px 9px;
    border-radius:20px;
}

.care-card-duties{
    font-size:12px;
    color:var(--text-muted);
    line-height:1.6;
}

.care-empty{
    text-align:center;
    color:var(--text-muted);
    padding:60px 0;
}

/* ---- Detail page ---- */

.care-detail-gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:24px;
    border-radius:16px;
    overflow:hidden;
}

.care-detail-gallery img{
    width:100%;
    height:140px;
    object-fit:cover;
}

.care-detail-header{
    margin-bottom:20px;
}

.care-detail-header h1{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:28px;
    margin:6px 0;
}

.care-detail-header .care-location{
    color:var(--text-muted);
    font-size:14px;
}

.care-detail-dates{
    display:inline-block;
    background:var(--care-accent-soft);
    color:var(--care-accent);
    font-weight:600;
    font-size:14px;
    padding:8px 16px;
    border-radius:12px;
    margin-top:10px;
}

.care-detail-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:32px;
    align-items:start;
}

.care-block{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 24px;
    margin-bottom:20px;
}

.care-block h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:17px;
    margin-bottom:12px;
}

.care-block p{
    color:var(--text);
    font-size:14px;
    line-height:1.7;
}

.care-block ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.care-block li{
    font-size:14px;
    color:var(--text);
}

.care-sidebar-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    margin-bottom:16px;
    position:sticky;
    top:100px;
}

.care-host-name{
    font-weight:700;
    font-size:15px;
    margin-bottom:6px;
}

.care-host-badges{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
    font-size:13px;
    color:var(--text-muted);
}

.care-apply-btn{
    display:block;
    width:100%;
    text-align:center;
    background:var(--care-accent);
    color:#fff;
    padding:14px;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
}

.care-apply-btn:hover{
    background:#2e5750;
}

.care-favorite-btn{
    display:block;
    width:100%;
    text-align:center;
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    padding:12px;
    border-radius:50px;
    font-weight:600;
    margin-top:10px;
    transition:.3s ease;
}

.care-favorite-btn.active{
    border-color:#c9564a;
    color:#c9564a;
}

.care-approx-map{
    background:var(--bg);
    border:1px dashed var(--border);
    border-radius:12px;
    padding:24px;
    text-align:center;
    color:var(--text-muted);
    font-size:13px;
}

/* ---- Create-listing form ---- */

.care-form-section{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    margin-bottom:20px;
}

.care-form-section h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:17px;
    margin-bottom:16px;
}

.care-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.care-form-grid label,
.care-form-section > label{
    display:block;
    font-size:13px;
    color:var(--text-muted);
}

.care-form-grid input,
.care-form-grid select,
.care-form-section input,
.care-form-section select,
.care-form-section textarea{
    display:block;
    width:100%;
    margin-top:5px;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:var(--bg);
}

.care-form-section textarea{
    min-height:100px;
    resize:vertical;
}

.care-checkbox-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.care-checkbox-grid label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--text);
}

.care-checkbox-grid input{
    width:auto;
}

.care-submit-btn{
    display:block;
    width:100%;
    background:var(--care-accent);
    color:#fff;
    padding:15px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    transition:.3s ease;
}

.care-submit-btn:hover{
    background:#2e5750;
}

.care-login-gate{
    text-align:center;
    padding:60px 20px;
    color:var(--text-muted);
}

.care-login-gate button{
    margin-top:14px;
    background:var(--care-accent);
    color:#fff;
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
}

@media (max-width:880px){
    .care-filters{
        grid-template-columns:1fr 1fr;
    }

    .care-listings-grid{
        grid-template-columns:1fr 1fr;
    }

    .care-detail-grid{
        grid-template-columns:1fr;
    }

    .care-detail-gallery{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:600px){
    .care-filters{
        grid-template-columns:1fr;
    }

    .care-listings-grid{
        grid-template-columns:1fr;
    }

    .care-form-grid{
        grid-template-columns:1fr;
    }

    .care-checkbox-grid{
        grid-template-columns:1fr;
    }

    .care-detail-gallery{
        grid-template-columns:1fr 1fr;
    }
}

/* ---- Messages ---- */

.care-messages-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:20px;
    align-items:start;
}

.care-conversations-list{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    max-height:600px;
    overflow-y:auto;
}

.care-conversation-item{
    display:block;
    width:100%;
    text-align:left;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    color:var(--text);
    transition:.2s ease;
}

.care-conversation-item:hover,
.care-conversation-item.active{
    background:var(--care-accent-soft);
}

.care-conversation-item strong{
    display:block;
    font-size:13px;
    margin-bottom:2px;
}

.care-conversation-item span{
    font-size:11px;
    color:var(--text-muted);
}

.care-thread{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    height:600px;
}

.care-thread-messages{
    flex:1;
    overflow-y:auto;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.care-message-bubble{
    max-width:70%;
    padding:10px 14px;
    border-radius:14px;
    font-size:13px;
    line-height:1.5;
    background:var(--bg);
}

.care-message-bubble.mine{
    align-self:flex-end;
    background:var(--care-accent);
    color:#fff;
}

.care-message-bubble time{
    display:block;
    font-size:10px;
    opacity:.7;
    margin-top:4px;
}

.care-thread-empty{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    font-size:13px;
}

.care-thread-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
}

.care-thread-header h4{
    font-size:14px;
}

.care-thread-form{
    display:flex;
    gap:10px;
    padding:14px;
    border-top:1px solid var(--border);
}

.care-thread-form input{
    flex:1;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:50px;
    font-size:13px;
    font-family:inherit;
    background:var(--bg);
    color:var(--text);
}

.care-thread-form button{
    background:var(--care-accent);
    color:#fff;
    padding:11px 22px;
    border-radius:50px;
    font-weight:600;
    font-size:13px;
}

.care-thread-video-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    padding:9px 16px;
    border-radius:50px;
    font-size:12px;
    font-weight:600;
    cursor:not-allowed;
}

@media (max-width:880px){
    .care-messages-layout{
        grid-template-columns:1fr;
    }
}