.contact-layout{
    display:grid;
    grid-template-columns:
        minmax(380px, 0.9fr)
        1.6fr;
    gap:var(--space-xl);
    margin-top:var(--space-lg);
    align-items:start;
}

.contact-social p{
    font-size: var(--text-large);
}

.contact-social{
    margin-top:var(--space-3xl);
    letter-spacing:var(--tracking-wide);
}

.contact-social h3{
    text-align:center;
    color:var(--color-text);
    margin-bottom:var(--space-lg);
}

/*==================================================
=                Contact Beat Card
==================================================*/
.beat-card{
    width: 100%;
    height: auto;
    position: sticky;
    top: var(--space-3xl);
    align-self: start;
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-slow) var(--ease-smooth),
        border-color var(--motion-normal) var(--ease-smooth);
    z-index: 1;
    padding:var(--space-xl);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:500px;
    margin-top: calc(var(--space-3xl) + 7px);
    animation:heroFade 2.8s var(--ease-smooth);
}

.beat-card:hover{
    box-shadow: 0px 5px 20px var(--color-shadow-red);
}

.beat-card h2{
    margin-bottom:10px;
    color:var(--color-text-secondary);
    text-shadow: 8px 5px 3px var(--color-background);
}

.beat-cover{
    width:180px;
    height:180px;
    object-fit:contain;
    margin-bottom:-18px;
    filter:
        drop-shadow(
            var(--glow-red-strong)
        )
        drop-shadow(
            var(--glow-red)
        );
}

#contact-beat-title{
    margin-top: -10px;
    font-size:var(--text-h3);
}

#contact-type{
    color:var(--color-text-secondary);
    margin-bottom:var(--space-lg);
}

.beat-details{
    display:flex;
    justify-content:center;
    gap:var(--space-xl);
    width:100%;
    margin-bottom:var(--space-lg);
}

.beat-details span{
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-md);
    background:var(--glass-bg);
}

#contact-price{
    letter-spacing:var(--tracking-wide);
    text-shadow:
        2px 0px 10px
        var(--color-primary-hover);
    color:var(--color-primary-light);
    font-size:var(--text-h2);
    margin-top:auto;
}

/*==================================================
=                Contact Form Card
==================================================*/
.contact-form{
    padding:var(--space-xl);
    margin-bottom: var(--space-lg);
    animation:heroFade 1.4s var(--ease-smooth);
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-slow) var(--ease-smooth),
        border-color var(--motion-normal) var(--ease-smooth);
}

.contact-form:hover{
    box-shadow: 0px 5px 20px var(--color-shadow-red);
}

.contact-form h2{
    color:var(--color-text-secondary);
    margin-bottom:var(--space-lg);
    text-shadow: 8px 5px 3px var(--color-background);
}

.contact-form label{
    margin-top:var(--space-md);
    margin-bottom:var(--space-sm);
    color:var(--color-text-secondary);
    font-size:var(--text-small);
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:var(--space-md) var(--space-md);
    border-radius:var(--radius-md);
    background:var(--glass-bg-strong);
    border:1px solid var(--color-border);
    color:var(--color-text);
    font-size:var(--text-body);
    resize:none;
    transition:
        border-color var(--motion-normal) var(--ease-smooth),
        box-shadow var(--motion-normal) var(--ease-smooth),
        background-color var(--motion-normal) var(--ease-smooth);
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--color-primary-hover);
    box-shadow:
        0 0 18px
        var(--color-primary-soft);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:rgba(255,255,255,.35);
}

#customer-message{
    min-height:220px;
}

/*==================================================
=                Buttons Contact Page
==================================================*/
.contact-form button:hover{
    transform:scale(1.03);
    box-shadow:
        0 0 22px
        var(--color-primary-hover);
    background-color: #32000055;
}

.contact-form button:active{
    transform:scale(.95);
}

.contact-form button{
    margin-top:var(--space-xl);
    width:240px;
    height:50px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--color-surface);
    color:var(--color-text);
    font-size:var(--text-body);
    cursor:pointer;
    transition:
        transform var(--motion-normal) var(--ease-smooth);
}

#customer-message::-webkit-scrollbar{
    width:8px;
}

#customer-message::-webkit-scrollbar-thumb{
    background:var(--color-surface-dark);
    border-radius:var(--radius-lg);
    transition:
        all var(--motion-normal) var(--ease-smooth),
        transform var(--motion-normal);
}

#customer-message::-webkit-scrollbar-thumb:hover{
    cursor: pointer;  
    background:var(--color-primary-soft);
    box-shadow:0 0 8px var(--color-shadow-red);
}

#customer-message:hover::-webkit-scrollbar-thumb{
    background:var(--color-primary-soft);
}