/* =========================================================
   FIREBRANDED SUBSCRIBE PANEL
   Version 1
   ========================================================= */


/* Trigger */

.fb-subscribe-launch {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 28px;
    padding: 0;

    appearance: none;
    border: 0;
    background: transparent;

    color: #e4c17a;
    cursor: pointer;

    font: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;

    transition: color .18s ease;
}

.fb-subscribe-launch:hover {
    color: #ffffff;
}

.fb-subscribe-launch-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: 1px solid #4a4a4a;
    border-radius: 50%;

    color: #e4c17a;

    transition:
        border-color .18s ease,
        transform .18s ease,
        color .18s ease;
}

.fb-subscribe-launch:hover .fb-subscribe-launch-arrow {
    border-color: #e4c17a;
    color: #fff;
    transform: translateX(3px);
}


/* Overlay */

.fb-subscribe-overlay {
    position: fixed;
    inset: 0;

    z-index: 9998;

    background: rgba(0, 0, 0, .70);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .32s ease,
        visibility .32s ease;
}

.fb-subscribe-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* Panel */

.fb-subscribe-panel {
    position: fixed;

    top: 0;
    right: 0;

    z-index: 9999;

    width: min(460px, 92vw);

    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #591b20 0%,
            #4b161a 48%,
            #3f1216 100%
        );

    border-left: 1px solid #3d3d3d;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.45);

    transform: translateX(105%);

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1);

    overflow: hidden;
}

.fb-subscribe-panel.is-open {
    transform: translateX(0);
}


/* Header */

.fb-subscribe-header {

    flex: 0 0 auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 34px 30px 27px;

    border-bottom:
        1px solid rgba(228,193,122,.25);
}


.fb-subscribe-eyebrow {

    display: block;

    margin-bottom: 7px;

    color: #e4c17a;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.fb-subscribe-title {

    margin: 0;

    color: #fff;

    font-size: 29px;
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -.025em;
}


.fb-subscribe-description {

    margin: 9px 0 0;

    color:
        rgba(255,255,255,.72);

    font-size: 13px;
    line-height: 1.5;
}


/* Close button */

.fb-subscribe-close {

    appearance: none;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.24);

    border-radius: 50%;

    background:
        rgba(0,0,0,.12);

    color: #fff;

    cursor: pointer;

    font-size: 25px;
    font-weight: 300;

    line-height: 1;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.fb-subscribe-close:hover {

    background:
        rgba(0,0,0,.22);

    border-color:
        #e4c17a;

    color:
        #e4c17a;

    transform:
        rotate(5deg);
}


/* Body */

.fb-subscribe-body {

    flex: 1 1 auto;

    padding: 30px;

    overflow-y: auto;

    overscroll-behavior: contain;
}


/* Labels */

.fb-subscribe-form-label {

    display: block;

    margin-bottom: 10px;

    color:
        #e4c17a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


/* Dropdown */

.fb-provider-wrap {

    position: relative;

    margin-bottom: 14px;
}


.fb-provider-select {

    width: 100%;

    height: 54px;

    appearance: none;
    -webkit-appearance: none;

    padding:
        0 46px 0 16px;

    border:
        1px solid #555;

    border-radius: 7px;

    outline: none;

    background:
        rgba(15,15,15,.30);

    color: #fff;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 650;

    transition:
        border-color .18s ease,
        background-color .18s ease;
}


.fb-provider-select:hover {

    border-color:
        #8c7450;
}


.fb-provider-select:focus {

    border-color:
        #e4c17a;

    background:
        rgba(15,15,15,.42);
}


.fb-provider-select option {

    background:
        #3f1216;

    color:
        #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.fb-provider-arrow {

    position: absolute;

    top: 50%;
    right: 17px;

    width: 9px;
    height: 9px;

    border-right:
        2px solid #e4c17a;

    border-bottom:
        2px solid #e4c17a;

    transform:
        translateY(-70%) rotate(45deg);

    pointer-events: none;
}


/* Subscribe button */

.fb-provider-submit {

    appearance: none;

    width: 100%;

    min-height: 52px;

    padding:
        12px 18px;

    border:
        1px solid #e4c17a;

    border-radius: 7px;

    background:
        #e4c17a;

    color:
        #341014;

    cursor: pointer;

    font: inherit;

    font-size: 14px;

    font-weight: 800;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.fb-provider-submit:hover:not(:disabled) {

    background:
        transparent;

    color:
        #fff;
}


.fb-provider-submit:disabled {

    border-color:
        #555;

    background:
        #555;

    color:
        rgba(255,255,255,.42);

    cursor:
        not-allowed;
}


/* Notes/status */

.fb-provider-note {

    margin:
        16px 2px 0;

    color:
        rgba(255,255,255,.55);

    font-size:
        11px;

    line-height:
        1.55;
}


.fb-provider-status {

    min-height:
        18px;

    margin:
        12px 2px 0;

    color:
        #e4c17a;

    font-size:
        12px;

    font-weight:
        700;
}


/* Body lock */

body.fb-subscribe-active {

    overflow:
        hidden;
}


/* Mobile */

@media (max-width: 600px) {

    .fb-subscribe-panel {

        width:
            calc(100vw - 22px);
    }


    .fb-subscribe-header {

        padding:
            27px 22px 22px;
    }


    .fb-subscribe-title {

        font-size:
            26px;
    }


    .fb-subscribe-body {

        padding:
            26px 22px 32px;
    }


    .fb-provider-select {

        height:
            56px;

        font-size:
            16px;
    }


    .fb-provider-submit {

        min-height:
            54px;

        font-size:
            15px;
    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .fb-subscribe-panel,
    .fb-subscribe-overlay,
    .fb-subscribe-launch-arrow,
    .fb-subscribe-close {

        transition:
            none;
    }

}