/*
Customized layout
*/

@media all and (min-width: 600px) {

    /* Change color for backdrop */
    .fancybox-custom-layout .fancybox-bg {
        background: #ffffff;
    }

    .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
        opacity: 1;
    }

    /* Move caption area to the right side */
    .fancybox-custom-layout .fancybox-caption {
        background: #f7fbff;
        bottom: 0;
        left: auto;
        padding: 30px 20px;
        right: 44px;
        top: 0;
        width: 320px;
        box-shadow: 0 2px 5px 1px rgba(111, 158, 188, .12), 0 5px 15px 6px rgba(74, 142, 254, .06);
    }

    .fancybox-custom-layout .fancybox-caption h3 {
        line-height: 1.3;
        margin-bottom: 24px;
        font-size: 1.25rem;
        color: var(--heading-color);
    }


    .fancybox-caption .fancybox-summary {
        color: color-mix(in srgb, var(--default-color), transparent 25%);
    }

    .fancybox-caption .fancybox-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        min-width: 176px;
        font-size: 1rem;
        font-weight: 400;
        padding: 16px 50px;
        background: var(--accent-color);
        color: var(--contrast-color) !important;
        border-radius: 5px;
        text-decoration: none;
        transition: all 0.3s ease;
        letter-spacing: 1px;
    }

    .fancybox-caption .fancybox-btn:hover {
        text-decoration: none;
        background: color-mix(in srgb, var(--accent-color), #000 15%);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
    }

    .fancybox-custom-layout .fancybox-caption .fancybox-caption__body {
        height: 100%;
    }

    /* Remove gradient from caption*/
    .fancybox-custom-layout .fancybox-caption::before {
        display: none;
    }

    /* Adjust content area position */
    .fancybox-custom-layout .fancybox-stage {
        right: 300px;
    }

    /* Align buttons at the right side  */
    .fancybox-custom-layout .fancybox-toolbar {
        background: #3b3b45;
        bottom: 0;
        left: auto;
        right: 0;
        top: 0;
        width: 44px;
    }

    /* Remove background from all buttons */
    .fancybox-custom-layout .fancybox-button {
        background: transparent;
    }

    /* Navigation arrows */
    .fancybox-custom-layout .fancybox-navigation .fancybox-button div {
        padding: 6px;
        background: #fcfaf9;
        border-radius: 50%;
        transition: opacity .2s;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        opacity: .7;
    }

    .fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]):hover div {
        opacity: 1;
    }

    .fancybox-custom-layout .fancybox-navigation .fancybox-button[disabled] {
        color: #999;
    }

    .fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]) {
        color: #333;
    }

    /* Reposition right arrow */
    .fancybox-custom-layout .fancybox-button--arrow_right {
        right: 308px;
    }

    .fancybox-custom-layout .fancybox-content {
        box-shadow: 0 2px 5px 1px rgba(111, 158, 188, .12), 0 5px 15px 6px rgba(74, 142, 254, .06);
    }
}