/* Agent Page Specific Styles */
/* Refactored for 3-Column Layout */

.app-container{
    padding: 0;
}
/* --- Container & Grid --- */

.agent-profile-section {
    display: grid;
    grid-template-columns: 300px minmax(300px, 1fr) 380px;
    gap: 3rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    align-items: start;
}

/* --- Left Column: Photo & Socials --- */
.profile-col-left {
    display: flex;
    flex-direction: column;
}

.agent-photo-box {
    width: 100%;
    height: 360px; 
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.agent-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: top; */
}

.agent-socials-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.social-link-row a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.social-link-row a:hover {
    color: var(--color-primary);
}

.social-link-row i {
    width: 35px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.social-link-row span {
    text-decoration: underline;
}

.specialty-text {
    font-size: 0.95rem;
    color: var(--color-text-dark);
    line-height: 1.5;
    margin-bottom: 0rem;
}

/* --- Middle Column: Info & Bio --- */
.profile-col-middle {
    padding-top: 1rem;
}

.agent-name-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.agent-role {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
}

.agent-brokerage {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.agent-license {
    font-size: 0.9rem;
    color: #888;
}

.agent-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    color: #333;
}

.contact-row i {
    color: #3e2b26; /* Dark brown/black from image icons */
    font-size: 1.1rem;
}

.contact-row a {
    color: #3e2b26;
    text-decoration: underline;
}

.subsection-header {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.bio-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1rem;
}

/* --- Right Column: Sticky Form --- */
.profile-col-right {
    position: relative;
    /* Ensure it doesn't overlap listings if they come up */
    z-index: 10; 
}

.sticky-contact-box {
    position: sticky;
    top: 100px;
    background: transparent; /* Or transparent if inputs are on background */
    /* Wait, image assumes inputs are just on layout? Nope, "Contact An Agent" is a header. */
    /* Form itself seems to not have a distinct white box background in the provided image? 
       Actually inputs are white pills on grey background. */
}

.form-header {
    font-size: 1.5rem;
    color: #3e2b26; /* Dark */
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.modern-form {
    display: flex;
    flex-direction: column;
}

/* Note: Main input styles are now at the bottom of file to ensure cascade wins */


.btn-submit-dark {
    background-color: #3e2b26; /* Dark brown/black */
    color: white;
    padding: 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    margin-top: 0.5rem;
    transition: background 0.3s;
}

.btn-submit-dark:hover {
    background-color: #2a1d1a;
}

.legal-disclaimer {
    font-size: 0.7rem;
    color: #777;
    margin-top: 1rem;
    line-height: 1.5;
    text-align: justify;
}



/* --- Header Specifics (Copied from property-detail.css) --- */
.detail-header {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.detail-header.scrolled {
    background: var(--color-white);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.back-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
}

.back-link:hover {
    color: var(--color-primary);
    transform: translateX(-4px);
}

.back-link span {
    text-decoration: underline;
}

.logo-img {
    width: 75px;
    height: auto;
}

.circle-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-text-dark);
    transition: all 0.2s ease;
    cursor: pointer;
}

.circle-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* Adjust page content to account for fixed header */
/* Ensure main content isn't hidden behind fixed header */
/* But wait, in agent page structure, we have .agent-page-wrapper. 
   We should add padding-top to it or body. */
body {
    padding-top: 0; /* Let header overlay for transparent effect if desired? */
    /* property-detail.css has main { padding-top: 90px; } */
}

/* We want transparent header initially, so top content should be under it. 
   But agent page starts with profile section which has white background usually. 
   If we want "Sync Design", property detail has a hero section (gallery) under the header.
   Agent page has white background. 
   So we probably WANT padding-top so content starts below header, 
   UNLESS user wants header to overlap a hero image (which we don't have yet).
   Let's add padding-top to wrapper to emulate property-detail layout behavior.
*/
.agent-page-wrapper {
    padding-top: 90px;
}
.detail-header {
    background: var(--color-white); /* Force white bg initially if no hero image under it */
    /* Wait, user asked for "same designed header", property-detail starts transparent over image.
       If we don't have an image, transparent header over white bg is fine, but text might clash?
       Back link is dark, logo is image. 
       Let's keep it transparent but add bg via JS scroll or just set to white if always on white.
       Actually, let's keep it consistent: property-detail has transparent, but usually over hero.
       Agent page top is white. 
       Let's stick to the property-detail CSS exactly first (transparent), 
       but if it looks broken, I'll adjust. 
       For now, adding a background to .agent-page-wrapper to differentiate? 
       No, keep it simple.
    */
    background: rgba(255,255,255,0.95); /* Slight white for readability on agent page */
}

/* --- Floating Labels Fix --- */
.floating-group {
    position: relative;
}

.input-modern {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 30px !important;
    background: white !important;
    font-size: 0.95rem;
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: all 0.2s;
    /* Ensure stacking context */
    position: relative;
    z-index: 1;
}

.input-modern:focus {
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.floating-label {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.95rem;
    pointer-events: none;
    transition: all 0.2s ease;
    background: white; 
    padding: 0 5px;
    z-index: 10; /* Always on top of input */
}

.input-modern:focus ~ .floating-label,
.input-modern:not(:placeholder-shown) ~ .floating-label {
    top: 0; 
    left: 1.2rem;
    font-size: 0.75rem;
    color: var(--color-primary);
    transform: translateY(-50%);
    z-index: 10;
    /* Hack: Gradient match top (body gray) and bottom (input white) to hide border line */
    background: linear-gradient(180deg, var(--color-bg-body) 55%, white 50%);
    padding: 0 4px;
}

/* Textarea tweaks */
textarea.input-modern {
    border-radius: 20px;
    padding-top: 1rem;
}
textarea.input-modern ~ .floating-label {
    top: 1.5rem;
}
textarea.input-modern:focus ~ .floating-label,
textarea.input-modern:not(:placeholder-shown) ~ .floating-label {
    top: 0;
}

/* --- My Office Card --- */
.office-card {
    display: flex;
    flex-direction: column; /* Stack vertically */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    width: 100%;  /* Fill container */
    margin-top: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.office-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.office-img-col {
    width: 100%; /* Full width */
    height: 170px; /* Fixed height for image area */
    flex-shrink: 0;
}

.office-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.office-info-col {
    padding: 1.2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.office-logo-mini {
    height: auto;
    width: 75px;
    display: block;
}

.office-info-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0rem;
}

.office-loc {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0rem;
}

.office-contact-list p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.office-contact-list p i {
    color: var(--color-text-dark);
    margin-top: 4px;
    width: 16px; /* Align icons */
}

.office-contact-list p:last-child a {
    color: var(--color-text-dark);
    text-decoration: underline;
}
.office-contact-list p:last-child:hover {
    color: var(--color-primary);
}


.office-action-col {
    width: 100%;
    padding: 1rem;
    background-color: #3e2b26;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.office-action-col:hover {
    background-color: #2a1d1a;
}

.office-action-col span {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 600;
    white-space: nowrap;
}



/* --- Responsive --- */

/* Tablet & Smaller Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
    .agent-profile-section {
        grid-template-columns: 300px 1fr; /* Left col fixed, Middle fluid */
        column-gap: 2rem;
        row-gap: 3rem;
    }

    /* Move Contact Form to bottom, centered */
    .profile-col-right {
        grid-column: 1 / -1; 
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .sticky-contact-box {
        position: static;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: white;
        padding: 2rem;
        border-radius: 16px;
        border: 1px solid #eee;
    }
    

}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .header-actions{
        margin-left: 0;
        margin-right: 1rem;
    }
    .back-link{
        margin-left: 1rem;
    }

    .back-link span{
        display: none;
    }
    .circle-btn{
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .agent-page-wrapper {
        padding-top: 70px; /* Match header height */
    }

    .agent-profile-section {
        display: flex; /* Fallback */
        display: grid;
        grid-template-columns: 1fr;
        gap: 0; /* Gap handled by margins of children */
        padding-bottom: 2rem;
    }

    /* 
       REORDERING STRATEGY: 
       We need "Photo" (in Left Col) -> "Info/Bio" (Middle Col) -> "Rest of Left Col"
       
       Solution: Use `display: contents` on the columns so their children become direct grid items of .agent-profile-section.
       Then use `order` to place them.
    */

    /* COL 1: Left (Photo, Socials, Specialties, Office) */
    .profile-col-left {
        display: contents;
    }

    /* Photo Box - Order 1 */
    .agent-photo-box {
        order: 1;
        width: 100%;
        max-width: 340px;
        height: 340px;
        margin: 0 auto 2rem auto;
        grid-column: 1 / -1;
    }

    /* Helper wrapper for the rest of left col items? 
       Actually, `display: contents` unwraps ALL children. 
       So .mt-3 divs in left col become grid items. 
       We need to target them.
    */
    
    /* Socials (was 2nd child of left col) */
    .profile-col-left > .mt-3:nth-of-type(1) { /* Socials container */
        order: 3;
        margin-top: 2rem !important;
        text-align: center;
        width: 100%;
    }

    /* Specialties (was 3rd child) */
    .agent-specialties {
        order: 4;
        text-align: center;
        margin-top: 2rem;
        width: 100%;
    }

    /* My Office (was 4th child) */
    .profile-col-left > .mt-3:nth-of-type(2) { /* Office container, strictly checking DOM structure might be safer? */
        /* Actually, let's look at HTML structure:
           div.agent-photo-box
           div.mt-3 (Socials)
           div.agent-specialties (Specialties)
           div.mt-3 (Office)
        */
        order: 5;
        margin-top: 2rem !important;
        width: 100%;
    }
    
    /* Re-target specifically if nth-of-type is ambiguous (it counts all divs)
       Socials is the first .mt-3 after photo? No, photo is div.
       1. div.agent-photo-box
       2. div.mt-3
       3. div.agent-specialties
       4. div.mt-3
       
       So .profile-col-left > div:nth-child(2) is Socials
       .profile-col-left > div:nth-child(4) is Office
    */
    .profile-col-left > div:nth-child(2) { order: 3; text-align: center;}
    .profile-col-left > div:nth-child(3) { order: 4; text-align: center;} /* Specialties */
    .profile-col-left > div:nth-child(4) { order: 5; } /* Office */


    /* COL 2: Middle (Info, Bio) - Order 2 */
    .profile-col-middle {
        display: block; /* Keep this wrapper intact? No, user wants Info/Bio BETWEEN Photo and others. */
        /* But Info and Bio are together in Middle Col. So we can keep Middle Col intact and order it 2. */
        order: 2;
        width: 100%;
        text-align: center;
        padding-top: 0;
        grid-column: 1 / -1;
    }

    .agent-name-large {
        font-size: 2rem;
    }
    
    .agent-contact-rows {
        align-items: center;
    }
    
    .contact-row {
        justify-content: center;
    }

    /* COL 3: Right (Contact Form) - Order 6 (Last) */
    .profile-col-right {
        order: 6;
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 3rem;
    }
    
    .sticky-contact-box {
        padding: 1.5rem;
        border: none;
        box-shadow: none;
        background: transparent;
    }
    /* Re-style contact form to look good at bottom */
    .sticky-contact-box {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border: 1px solid #eee;
    }


    
    /* Socials Styling Fix for Mobile */
    .agent-socials-vertical {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.2rem;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .agent-photo-box {
        height: 300px;
    }
    
    .agent-name-large {
        font-size: 1.8rem;
    }
    
    .sticky-contact-box {
        padding: 1.2rem;
    }
}

/* Success Message Overlay */
.success-message-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white; /* Cover form */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: inherit; /* Match container radius */
    z-index: 10;
    padding: 2rem;
    border-radius: 16px;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Checkmark Animation */
.success-checkmark-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #4CAF50; /* Success Green */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.success-checkmark {
    color: white;
    font-size: 2.1rem;
}

.success-title {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.success-desc {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.btn-success-action {
    background: #3C2328;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-success-action:hover {
    background: #5a353c;
}