/* ==========================================
   BUTTONS — GRAND LINE THEME
========================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:14px 34px;

    border-radius:4px;

    font-family:"Cinzel", serif;

    font-weight:700;

    font-size:.88rem;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:var(--transition);

    user-select:none;

    position:relative;

    overflow:hidden;

}

/* =============================
   PRIMARY — crimson red CTA
============================= */

.btn-primary{

    background:linear-gradient(
        160deg,
        var(--crimson-light),
        var(--crimson)
    );

    color:var(--white);

    border:1px solid rgba(201,64,64,.4);

    box-shadow:
        0 4px 20px rgba(139,32,32,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

}

.btn-primary::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        160deg,
        rgba(255,255,255,.08),
        transparent
    );

    opacity:0;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 8px 30px rgba(139,32,32,.60),
        inset 0 1px 0 rgba(255,255,255,.12);

}

.btn-primary:hover::before{

    opacity:1;

}

/* =============================
   SECONDARY — outlined gold
============================= */

.btn-secondary{

    background:transparent;

    color:var(--gold-light);

    border:1px solid rgba(201,144,42,.45);

}

.btn-secondary::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        160deg,
        rgba(201,144,42,.08),
        transparent
    );

    opacity:0;

    transition:var(--transition);

}

.btn-secondary:hover{

    border-color:var(--gold);

    color:var(--gold);

    transform:translateY(-3px);

    box-shadow:0 6px 22px rgba(201,144,42,.18);

}

.btn-secondary:hover::before{

    opacity:1;

}

/* =============================
   OUTLINE GOLD
============================= */

.btn-outline{

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

    color:var(--gold);

    background:transparent;

}

.btn-outline:hover{

    background:var(--gold);

    color:var(--parchment-text);

}

/* =============================
   FULL WIDTH
============================= */

.btn-block{

    width:100%;

}