/* =========================
   Frame Finder - Tick Eyewear
========================= */

.tick-frame-finder{
    max-width:1000px;
    margin:40px auto;
    padding:40px 24px;

    direction:rtl;
    text-align:center;

    background:#ffffff;

    border:1px solid #f2dada;
    border-radius:24px;

    box-shadow:0 6px 24px rgba(0,0,0,.06);
}

.tick-frame-finder h1{
    color:var(--brand-color);
    margin-bottom:12px;
    font-size:34px;
}

.tick-frame-finder__intro{
    color:var(--muted-text);
    line-height:2;
    margin-bottom:30px;
}

.tick-face-options{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-bottom:30px;
}

.tick-face-options button{

    border:1px solid #f2dada;

    background:#ffffff;
    color:var(--brand-color);

    padding:16px 10px;

    border-radius:16px;

    cursor:pointer;

    transition:.25s ease;

    font-size:16px;
    font-weight:600;
}

.tick-face-options button:hover,
.tick-face-options button.active{

    background:var(--brand-color);
    color:#ffffff;

    border-color:var(--brand-color);

    transform:translateY(-2px);
}

/* Result Box */

.tick-frame-result{

    background:var(--brand-light);

    border:1px solid #f2dada;

    border-radius:20px;

    padding:28px;

    min-height:150px;
}

.tick-frame-result h2{

    color:var(--brand-color);

    margin-bottom:12px;
}

.tick-frame-result p{

    color:var(--text-color);

    line-height:2;
}

.tick-frame-result a{

    display:inline-block;

    margin-top:15px;

    background:#b9924b;

    color:#ffffff;

    padding:10px 22px;

    border-radius:999px;

    text-decoration:none;

    transition:.25s ease;
}

.tick-frame-result a:hover{

    background:var(--brand-color);

    color:#ffffff;
}

/* Mobile */

@media(max-width:768px){

    .tick-face-options{
        grid-template-columns:1fr;
    }

    .tick-frame-finder{
        margin:20px 14px;
        padding:28px 16px;
    }

    .tick-frame-finder h1{
        font-size:28px;
    }
}