/*
|--------------------------------------------------------------------------
| MAIN BUILDER
|--------------------------------------------------------------------------
*/

.goinvite-builder {

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 35px 25px;

    box-sizing: border-box;


    display: grid;

    grid-template-columns:
        minmax(300px, 410px)
        minmax(0, 1fr);

    gap: 60px;

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| LEFT FORM
|--------------------------------------------------------------------------
*/

.goinvite-controls {

    width: 100%;

    min-width: 0;

    padding: 28px;

    box-sizing: border-box;


    background: #ffffff;

    border: 1px solid #E7E7E7;

    border-radius: 16px;


    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .07);
}


/*
|--------------------------------------------------------------------------
| PRODUCT NAME AND PRICE
|--------------------------------------------------------------------------
*/

.goinvite-product-summary {

    margin: 0 0 24px;

    padding: 0 0 20px;

    border-bottom: 1px solid #E7E7E7;
}


.goinvite-product-summary-label {

    margin: 0 0 7px;

    color: #777777;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;
}


.goinvite-product-name {

    margin: 0;

    color: #1d1d1f;

    font-size: 22px;

    font-weight: 650;

    line-height: 1.28;
}


.goinvite-product-price {

    margin-top: 9px;

    color: #111111;

    font-size: 18px;

    font-weight: 700;
}


.goinvite-product-price del {

    margin-right: 6px;

    color: #777777;

    font-weight: 400;
}


/*
|--------------------------------------------------------------------------
| HEADING
|--------------------------------------------------------------------------
*/

.goinvite-heading {

    margin-bottom: 25px;
}


.goinvite-heading h2 {

    margin: 0 0 7px;

    padding: 0;


    font-size: 25px;

    font-weight: 600;

    line-height: 1.3;
}


.goinvite-heading p {

    margin: 0;

    padding: 0;


    color: #777777;


    font-size: 14px;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| FIELDS
|--------------------------------------------------------------------------
*/

.goinvite-field {

    width: 100%;

    margin-bottom: 18px;
}


.goinvite-field label {

    display: block;


    width: 100%;


    margin: 0 0 7px;


    color: #222222;


    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;
}


.goinvite-required {

    color: #c62828;
}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.goinvite-input {

    display: block;


    width: 100%;

    max-width: 100%;


    min-width: 0;

    min-height: 48px;


    margin: 0;


    padding: 12px 14px;


    box-sizing: border-box;


    border:
        1px solid #E7E7E7 !important;


    border-radius:
        8px;


    background:
        #ffffff;


    color:
        #222222;


    font-family:
        inherit;


    font-size:
        16px;


    line-height:
        1.4;


    outline:
        none;


    box-shadow:
        none;
}


textarea.goinvite-input {

    min-height: 90px;

    resize: vertical;
}


.goinvite-input::placeholder {

    color: #999999;

    opacity: 1;
}


.goinvite-input:focus {

    border-color:
        #E7E7E7 !important;


    box-shadow:
        0 0 0 2px
        rgba(231, 231, 231, .65)
        ;
}


/*
|--------------------------------------------------------------------------
| PHOTO REMOVE
|--------------------------------------------------------------------------
*/

.goinvite-remove-photo {

    margin-top: 8px;


    padding: 7px 10px;


    border: 0;


    background:
        transparent;


    color:
        #b71c1c;


    cursor: pointer;


    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.goinvite-actions {

    margin-top: 25px;
}


/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.goinvite-button {

    display: flex;


    width: 100% !important;


    min-height: 50px;


    margin:
        10px 0 0 !important;


    padding:
        14px 20px !important;


    box-sizing:
        border-box;


    align-items:
        center;


    justify-content:
        center;


    border:
        0 !important;


    border-radius:
        8px !important;


    cursor:
        pointer;


    font-family:
        inherit;


    font-size:
        15px;


    font-weight:
        600;


    line-height:
        1.3;


    text-align:
        center;


    text-decoration:
        none !important;


    transition:
        opacity .2s ease,
        transform .15s ease;
}


.goinvite-button:hover {

    opacity: .9;
}


.goinvite-button:active {

    transform:
        scale(.99);
}


.goinvite-button:disabled {

    opacity: .55;

    cursor:
        not-allowed;
}


/*
|--------------------------------------------------------------------------
| PREVIEW BUTTON
|--------------------------------------------------------------------------
*/

.goinvite-preview-button {

    background:
        #eeeeee !important;


    color:
        #222222 !important;
}


/*
|--------------------------------------------------------------------------
| CART BUTTON
|--------------------------------------------------------------------------
*/

.goinvite-cart-button {

    background:
        #111111 !important;


    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/

.goinvite-message {

    min-height: 20px;


    margin-top: 14px;


    font-size: 14px;

    line-height: 1.5;
}


.goinvite-message.is-error {

    color: #c62828;
}


/*
|--------------------------------------------------------------------------
| RIGHT PREVIEW
|--------------------------------------------------------------------------
*/

.goinvite-preview-column {

    width: 100%;

    min-width: 0;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: flex-start;
}


/*
|--------------------------------------------------------------------------
| MOBILE PREVIEW LABEL
|--------------------------------------------------------------------------
*/

.goinvite-preview-intro {

    margin-bottom: 15px;


    text-align: center;
}


.goinvite-preview-intro strong {

    display: block;


    margin-bottom: 3px;


    color: #222;


    font-size: 17px;
}


.goinvite-preview-intro span {

    display: block;


    color: #777;


    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| IPHONE 17 PREVIEW FRAME
|--------------------------------------------------------------------------
|
| The product preview remains an exact 9:16 invitation canvas, but it now
| sits inside a modern iPhone 17-style titanium frame with Dynamic Island,
| slim bezels, side controls, and a home indicator.
|
|--------------------------------------------------------------------------
*/

.goinvite-phone.goinvite-iphone-17 {

    width: min(100%, 390px);

    max-width: 390px;

    padding: 12px 8px 18px;

    overflow: visible;

    background:
        linear-gradient(135deg, #314372 0%, #17264f 20%, #101c40 55%, #314372 100%);

    border: 2px solid #1A2B5B;

    border-radius: 58px;

    box-shadow:
        0 26px 55px rgba(18, 31, 72, .26),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 0 0 4px rgba(7, 15, 42, .44);
}


.goinvite-phone.goinvite-iphone-17::before {

    left: -5px;

    top: 116px;

    width: 3px;

    height: 84px;

    border-radius: 4px 0 0 4px;

    background: #1A2B5B;

    box-shadow: 0 99px 0 #1A2B5B;
}


.goinvite-phone.goinvite-iphone-17::after {

    right: -5px;

    top: 152px;

    width: 3px;

    height: 66px;

    border-radius: 0 4px 4px 0;

    background: #1A2B5B;
}


.goinvite-phone-island {

    position: absolute;

    z-index: 12;

    top: 21px;

    left: 50%;

    width: 118px;

    height: 30px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #000000;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .07),
        0 1px 2px rgba(0, 0, 0, .65);
}


.goinvite-phone.goinvite-iphone-17 .goinvite-phone-screen {

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    min-height: 0;

    border: 3px solid #030303;

    border-radius: 45px;

    background: #000000;

    aspect-ratio: 9 / 19.5;

    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
}


.goinvite-phone.goinvite-iphone-17 .goinvite-phone-home {

    z-index: 12;

    bottom: 7px;

    width: 112px;

    height: 4px;

    background: rgba(255, 255, 255, .82);
}


/*
|--------------------------------------------------------------------------
| PHONE MOCKUP
|--------------------------------------------------------------------------
|
| No phone image is required.
|
| CSS creates the phone.
|
|--------------------------------------------------------------------------
*/

.goinvite-phone {

    position: relative;


    width: 100%;

    max-width: 405px;


    margin: 0 auto;


    padding:
        35px 12px 42px;


    box-sizing:
        border-box;


    background:
        #141414;


    border:
        3px solid #333333;


    border-radius:
        48px;


    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, .20);
}


/*
|--------------------------------------------------------------------------
| PHONE SIDE DETAILS
|--------------------------------------------------------------------------
*/

.goinvite-phone::before {

    content: "";


    position: absolute;


    left: -6px;

    top: 135px;


    width: 4px;

    height: 75px;


    border-radius:
        4px 0 0 4px;


    background:
        #333333;
}


.goinvite-phone::after {

    content: "";


    position: absolute;


    right: -6px;

    top: 160px;


    width: 4px;

    height: 95px;


    border-radius:
        0 4px 4px 0;


    background:
        #333333;
}


/*
|--------------------------------------------------------------------------
| PHONE SPEAKER / NOTCH
|--------------------------------------------------------------------------
*/

.goinvite-phone-speaker {

    position: absolute;


    z-index: 10;


    left: 50%;

    top: 13px;


    width: 85px;

    height: 8px;


    transform:
        translateX(-50%);


    border-radius:
        999px;


    background:
        #050505;
}


/*
|--------------------------------------------------------------------------
| PHONE SCREEN
|--------------------------------------------------------------------------
*/

.goinvite-phone-screen {

    position: relative;


    width: 100%;


    overflow: hidden;


    background:
        #ffffff;


    border-radius:
        29px;


    aspect-ratio:
        9 / 16;
}


/*
|--------------------------------------------------------------------------
| HOME BAR
|--------------------------------------------------------------------------
*/

.goinvite-phone-home {

    position: absolute;


    left: 50%;

    bottom: 17px;


    width: 105px;

    height: 5px;


    transform:
        translateX(-50%);


    border-radius:
        999px;


    background:
        #555555;
}


/*
|--------------------------------------------------------------------------
| CANVAS WRAPPER
|--------------------------------------------------------------------------
*/

.goinvite-canvas-wrap {

    position: relative;


    width: 100%;


    max-width: 100%;


    overflow: hidden;


    aspect-ratio:
        9 / 16;


    line-height:
        0;


    /* Let a finger drag vertically over the invitation preview to scroll
       the product page. Fabric remains display-only for this builder. */
    touch-action: pan-y;

    flex: 0 0 auto;

    /* The watermark is a display-only layer. It is never part of Fabric's
       canvas export, so the paid final invitation remains clean. */
    container-type: inline-size;
}


.goinvite-editor-watermark {

    position: absolute;

    z-index: 20;

    inset: 0;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-content: space-around;

    justify-items: center;

    overflow: hidden;

    pointer-events: none;
}


.goinvite-editor-watermark span {

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

    font-family: Arial, sans-serif;

    font-size: 24px;

    font-size: 6.5cqw;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    transform: rotate(-35deg);

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| FABRIC WRAPPER
|--------------------------------------------------------------------------
*/

.goinvite-canvas-wrap
.canvas-container {

    position:
        relative !important;


    display:
        block !important;


    margin:
        0 !important;


    padding:
        0 !important;


    overflow:
        hidden !important;


    line-height:
        0 !important;

    touch-action: pan-y !important;
}


/*
|--------------------------------------------------------------------------
| FABRIC CANVAS
|--------------------------------------------------------------------------
*/

.goinvite-canvas-wrap
canvas {

    display:
        block !important;


    margin:
        0 !important;


    padding:
        0 !important;


    border:
        0 !important;
}


.goinvite-canvas-wrap
.lower-canvas,

.goinvite-canvas-wrap
.upper-canvas {

    position:
        absolute !important;


    left:
        0 !important;


    top:
        0 !important;


    margin:
        0 !important;


    padding:
        0 !important;

    touch-action: pan-y !important;
}


/*
|--------------------------------------------------------------------------
| QR HIDDEN AREA
|--------------------------------------------------------------------------
*/

.goinvite-qr-stage {

    position: fixed;


    left: -10000px;

    top: -10000px;


    width: 512px;

    height: 512px;


    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| WATERMARK PREVIEW MODAL
|--------------------------------------------------------------------------
*/

body.goinvite-modal-open {

    overflow: hidden;
}


.goinvite-modal[hidden] {

    display:
        none !important;
}


.goinvite-modal {

    position:
        fixed;


    z-index:
        999999;


    inset:
        0;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    padding:
        20px;


    box-sizing:
        border-box;
}


.goinvite-modal-backdrop {

    position:
        absolute;


    inset:
        0;


    background:
        rgba(0, 0, 0, .80);
}


.goinvite-modal-content {

    position:
        relative;


    z-index:
        2;


    width:
        100%;


    max-width:
        500px;


    max-height:
        92vh;


    padding:
        22px;


    box-sizing:
        border-box;


    overflow:
        auto;


    background:
        #ffffff;


    border-radius:
        15px;


    text-align:
        center;
}


.goinvite-modal-content
.goinvite-whatsapp-button {

    width:
        100%;


    margin-top:
        16px !important;
}


.goinvite-modal-content h3 {

    margin:
        0 0 6px;
}


.goinvite-modal-content p {

    margin:
        0 0 16px;


    color:
        #666666;


    font-size:
        14px;


    line-height:
        1.5;
}


.goinvite-modal-content img {

    display:
        block;


    width:
        100%;


    height:
        auto;


    margin:
        0 auto;
}


/*
|--------------------------------------------------------------------------
| CLOSE
|--------------------------------------------------------------------------
*/

.goinvite-modal-close {

    position:
        absolute;


    right:
        8px;


    top:
        6px;


    width:
        42px;


    height:
        42px;


    padding:
        0;


    border:
        0;


    background:
        transparent;


    color:
        #222222;


    cursor:
        pointer;


    font-size:
        30px;


    line-height:
        42px;
}


/*
|--------------------------------------------------------------------------
| CART / CHECKOUT PREVIEW
|--------------------------------------------------------------------------
*/

.goinvite-cart-preview {

    width:
        100%;


    max-width:
        220px;


    margin-top:
        8px;
}


.goinvite-cart-preview img {

    display:
        block;


    width:
        100%;


    height:
        auto;


    border-radius:
        8px;
}


.goinvite-cart-thumbnail {

    display:
        block;


    width:
        100%;


    max-width:
        120px;


    height:
        auto;


    border-radius:
        6px;
}


.goinvite-cart-preview small {

    display:
        block;


    margin-top:
        7px;


    color:
        #777777;


    font-size:
        12px;


    line-height:
        1.4;
}


/*
|--------------------------------------------------------------------------
| PURCHASE SUMMARY / ORDER DETAILS
|--------------------------------------------------------------------------
*/

.goinvite-order-box {

    margin:
        30px 0;


    padding:
        24px;


    box-sizing:
        border-box;


    background:
        #f7f7f7;


    border:
        1px solid
        rgba(0, 0, 0, .06);


    border-radius:
        12px;
}


.goinvite-order-box h3 {

    margin:
        0 0 8px;
}


.goinvite-order-box p {

    margin:
        0 0 15px;
}


/*
|--------------------------------------------------------------------------
| ORDER BUTTONS
|--------------------------------------------------------------------------
*/

.goinvite-order-actions {

    display:
        flex;


    flex-wrap:
        wrap;


    gap:
        10px;
}


.goinvite-order-actions .button {

    margin:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| UNIQUE URL
|--------------------------------------------------------------------------
*/

.goinvite-invite-url {

    margin-top:
        15px !important;


    overflow-wrap:
        anywhere;


    color:
        #777777;


    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| WHATSAPP
|--------------------------------------------------------------------------
*/

.goinvite-whatsapp-button {

    background:
        #111111 !important;


    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| PUBLIC PAID PAGE
|--------------------------------------------------------------------------
*/

.goinvite-public-page {

    margin:
        0;


    background:
        #f5f5f5;
}


.goinvite-public {

    width:
        100%;


    padding:
        35px 16px 60px;


    box-sizing:
        border-box;
}


.goinvite-paid-invite {

    width:
        100%;


    max-width:
        720px;


    margin:
        0 auto;
}


/*
|--------------------------------------------------------------------------
| PUBLIC HEADING
|--------------------------------------------------------------------------
*/

.goinvite-public-heading {

    margin-bottom:
        24px;


    text-align:
        center;
}


.goinvite-kicker {

    margin:
        0 0 6px;


    color:
        #777777;


    font-size:
        14px;


    letter-spacing:
        .12em;


    text-transform:
        uppercase;
}


.goinvite-public-heading h1 {

    margin:
        0;


    font-size:
        clamp(
            30px,
            6vw,
            48px
        );


    line-height:
        1.2;
}


.goinvite-public-heading h1 span {

    display:
        inline-block;


    margin:
        0 7px;


    font-weight:
        400;
}


/*
|--------------------------------------------------------------------------
| PAID CANVAS
|--------------------------------------------------------------------------
*/

.goinvite-paid-canvas-shell {

    width:
        100%;


    max-width:
        620px;


    margin:
        0 auto;


    padding:
        10px;


    box-sizing:
        border-box;


    background:
        #eeeeee;


    border-radius:
        12px;
}


/*
|--------------------------------------------------------------------------
| VIDEO / WEBSITE INVITATIONS
|--------------------------------------------------------------------------
*/

.goinvite-media-stage {

    position:
        relative;


    width:
        100%;


    overflow:
        hidden;


    aspect-ratio:
        9 / 16;


    background:
        #ffffff;


    container-type:
        inline-size;
}


.goinvite-video-stage video {

    display:
        block;


    width:
        100%;


    height:
        100%;


    object-fit:
        cover;
}


.goinvite-media-text {

    position:
        absolute;


    z-index:
        2;


    line-height:
        1.2;


    pointer-events:
        none;
}


.goinvite-html-stage {

    overflow:
        auto;


    line-height:
        normal;
}


.goinvite-html-stage img,
.goinvite-html-stage video {

    max-width:
        100%;
}


/*
|--------------------------------------------------------------------------
| PUBLIC ACTIONS
|--------------------------------------------------------------------------
*/

.goinvite-public-actions {

    width:
        100%;


    max-width:
        620px;


    margin:
        20px auto 0;


    display:
        grid;


    grid-template-columns:
        1fr;


    gap:
        10px;
}


.goinvite-public-links {

    width:
        100%;


    max-width:
        620px;


    margin:
        10px auto 0;


    display:
        grid;


    gap:
        10px;
}


.goinvite-map-button {

    background:
        #ffffff !important;


    color:
        #222222 !important;


    border:
        1px solid
        rgba( 0, 0, 0, .14 ) !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
) {

    .goinvite-builder {

        grid-template-columns:
            minmax(280px, 360px)
            minmax(0, 1fr);


        gap:
            35px;


        padding:
            25px 18px;
    }


    .goinvite-phone {

        max-width:
            350px;
    }
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {

    .goinvite-builder {

        display:
            flex;


        flex-direction:
            column;


        width:
            100%;


        max-width:
            100%;


        padding:
            12px;


        gap:
            28px;
    }


    /*
     * Phone first.
     */

    .goinvite-preview-column {

        order:
            1;
    }


    /*
     * Form second.
     */

    .goinvite-controls {

        order:
            2;


        padding:
            20px;


        border-radius:
            12px;
    }


    .goinvite-phone {

        max-width:
            330px;


        padding:
            30px 10px 38px;


        border-radius:
            42px;
    }


    .goinvite-phone-screen {

        border-radius:
            25px;
    }


    .goinvite-heading h2 {

        font-size:
            21px;
    }


    .goinvite-public {

        padding:
            22px 8px 40px;
    }


    .goinvite-public-actions {

        grid-template-columns:
            1fr;
    }


    .goinvite-order-actions {

        display:
            grid;


        grid-template-columns:
            1fr;
    }
}


/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 390px
) {

    .goinvite-phone {

        max-width:
            295px;
    }


    .goinvite-controls {

        padding:
            16px;
    }
}