/* ---------- Profile Details Polish ---------- */

/* ============================================================
   Profile Details Polish — STYLES
   Keep page/component styles in logical sections below.
   ============================================================ */

/* =========================================
   APEMART.LK — PROFESSIONAL PROFILE DETAILS
   Visual-only refinement. Existing IDs are preserved.
========================================= */

.profile-card .profile-info{
    max-width:780px;
    margin:0 auto;
}

.profile-details-grid{
    width:100%;
    max-width:760px;
    margin:18px auto 0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
    text-align:left;
}

.profile-detail-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid #edf0f3;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#fafbfc);
    box-shadow:0 3px 10px rgba(15,23,42,.035);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.profile-detail-item:hover{
    transform:translateY(-1px);
    border-color:#ffd9bf;
    box-shadow:0 7px 18px rgba(15,23,42,.07);
}

.profile-detail-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#fff1e7;
    color:#f36b21;
    font-size:14px;
}

.profile-detail-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.profile-detail-label{
    color:#8a929d;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.profile-detail-value{
    display:block;
    min-width:0;
    color:#303641;
    font-size:14px;
    line-height:1.35;
    font-weight:650;
    overflow-wrap:anywhere;
}

@media(max-width:768px){
    .profile-details-grid{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:15px;
    }

    .profile-detail-item{
        padding:11px 12px;
    }

    .profile-detail-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .profile-detail-value{font-size:13px}
}

/* Dark mode */
body.dark-mode .profile-detail-item,
html[data-theme="dark"] .profile-detail-item{
    background:#202938;
    border-color:#303b4d;
}

body.dark-mode .profile-detail-icon,
html[data-theme="dark"] .profile-detail-icon{
    background:rgba(255,107,0,.13);
    color:#ff9a61;
}

body.dark-mode .profile-detail-label,
html[data-theme="dark"] .profile-detail-label{color:#9ca7b5}

body.dark-mode .profile-detail-value,
html[data-theme="dark"] .profile-detail-value{color:#f1f4f8}