/*==================================================
    COORDINATE.CSS
    My Lolita Wardrobe
==================================================*/


/*==============================
    RANDOM COORDINATE PANEL
==============================*/

#coordStatus{

    color:var(--ink-soft);

    font-size:.9rem;

    margin-bottom:5px;

}

#coordCost{

    color:var(--wine);

    font-weight:bold;

    margin-top:15px;

}



/*==============================
    COORD SLOTS
==============================*/

.coordGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

    gap:25px;

    margin-top:20px;

}

.coordSlot{

    background:var(--card);

    border:1px solid var(--gold-line);

    border-radius:20px;

    padding:20px 18px 26px;

    text-align:center;

    transition:.3s;

    position:relative;

}

/* rounded bunting-flag hem along the bottom of each coordinate slot */
.coordSlot::after{

    content:"";

    position:absolute;

    left:14px;

    right:14px;

    bottom:-9px;

    height:16px;

    background-color:var(--rose-soft);

    -webkit-mask-image:var(--bunting);

    mask-image:var(--bunting);

    -webkit-mask-size:24px 16px;

    mask-size:24px 16px;

    -webkit-mask-repeat:repeat-x;

    mask-repeat:repeat-x;

    opacity:.85;

    pointer-events:none;

}

.coordSlot:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 20px rgba(194,24,91,.2);

}

.coordSlot img{

    width:100%;

    height:220px;

    object-fit:contain;

    border-radius:10px;

    margin:10px 0;

}

.coordSlot h3{

    font-family:'Cormorant Garamond',serif;

    font-size:1.4rem;

    color:var(--wine);

}

.slotLabel{

    display:inline-block;

    background:var(--ivory-deep);

    color:var(--wine);

    border:1px solid var(--gold-line);

    border-radius:20px;

    padding:4px 14px;

    font-size:.75rem;

    font-weight:bold;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.coordEmptySlot{

    padding:60px 10px;

    color:var(--rose-soft);

    font-style:italic;

}

.coordConnector{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    color:var(--gold);

}



/*==============================
    COORDINATE BUILDER
==============================*/

.coordBuilder{

    margin-top:10px;

}

.builderControls{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));

    gap:16px 24px;

    margin-bottom:20px;

}

.builderRow{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.builderRow label{

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    font-size:.95rem;

    color:var(--wine);

}

.builderRow select{

    padding:8px 10px;

    border:1px solid var(--gold-line);

    border-radius:10px;

    background:var(--card);

    color:var(--ink);

    font-family:'Lora',serif;

    font-size:.9rem;

}

.builderRow select:disabled{

    opacity:.5;

}

#builderCost{

    text-align:center;

    color:var(--wine);

    font-weight:bold;

    margin-top:20px;

}



/*==============================
    RESPONSIVE
==============================*/

@media (max-width:500px){

.coordGrid{

    grid-template-columns:1fr;

}

.builderControls{

    grid-template-columns:1fr;

}

}