/**
 * creator.css
 *
 * Invite creator card, generated-link row, copy/add-calendar actions, and creator-specific responsive positioning. Calendar modal internals live separately in calendar.css.
 *
 * Sections:
 * 1. Creator card/grid
 * 2. Copy and calendar actions
 * 3. Generated-link preview
 * 4. Responsive stacking
 *
 * Troubleshooting:
 * - Desktop uses four field columns; ≤900px deliberately becomes one column.
 * - Button order comes from index.php; CSS only controls row/column placement.
 */

/* 1. Desktop creator card and four-field grid. */
.creator{
    margin-top:20px;
    padding:12px 16px;
}

@media (min-width:1000px){
    .creator{
        border-radius:10px;
    }
}

.creator-form{
    display:grid;
    grid-template-columns:1fr 1fr .78fr .68fr;
    gap:9px;
    align-items:end;
}

/* 2. Right-aligned action row and copy-success animation. */
.creator-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:9px;
}

#createCopyButton{
    position:relative;
    overflow:hidden;
    min-width:144px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg, #43cfb4 0%, #35c2a5 60%, #2fb49a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 22px rgba(27,122,104,.22);
    white-space:nowrap;
    transform:translateZ(0);
    transition:transform .14s ease, box-shadow .18s ease, background-color .18s ease;
}

.calendar-button{
    min-width:148px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(53,194,165,.32);
    background:rgba(53,194,165,.09);
    color:var(--accent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.calendar-button span{
    font-size:17px;
    line-height:1;
}

.calendar-button:hover{
    border-color:rgba(53,194,165,.58);
    background:rgba(53,194,165,.16);
    color:#73ead2;
}

#createCopyButton.is-success{
    color:#f5fffd;
}

#createCopyButton::after{
    content:"";
    position:absolute;
    inset:-20% auto -20% -35%;
    width:32%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
    opacity:0;
    transform:skewX(-18deg) translateX(0);
    pointer-events:none;
}

#createCopyButton:hover{
    background:linear-gradient(180deg, #4ad8bc 0%, #39c9ab 60%, #31b79d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 12px 24px rgba(27,122,104,.26);
}

#createCopyButton:active{
    transform:translateY(1px);
}

#createCopyButton.is-flashing::after{
    animation:copy-flash .56s ease;
}

@keyframes copy-flash{
    0%{
        opacity:0;
        transform:skewX(-18deg) translateX(0);
    }
    20%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:skewX(-18deg) translateX(420%);
    }
}

/* 3. Generated URL starts beneath Country and may truncate on narrow widths. */
.link-note{
    grid-column:1 / 3;
    display:none;
    min-width:0;
    margin-top:2px;
    text-align:left;
    color:var(--muted);
    font-size:13px;
}

.link-note.is-visible{
    display:flex;
    align-items:center;
    gap:6px;
}

.link-note span{
    flex:0 0 auto;
    color:var(--muted);
    font-weight:750;
    white-space:nowrap;
}

.link-note a{
    display:block;
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    color:#00c29e;
    font-size:13px;
    font-weight:750;
    letter-spacing:.01em;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:rgba(53,194,165,.45);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .18s ease, text-decoration-color .18s ease;
}

.link-note a:hover{
    color:#00866e;
    text-decoration-color:rgba(53,194,165,.9);
}

/* 4. Tablet: stack fields and release fixed grid-column placement. */
@media (max-width:900px){
    /* Mobile/tablet: collapse the four-field creator grid into one column. */
    .creator-form{
        grid-template-columns:1fr;
    }

    .creator-actions{
            grid-column:auto;
            justify-content:flex-end;
        }

    .link-note{
            grid-column:auto;
        }
}

/* Mobile: keep both actions side-by-side with equal width. */
@media (max-width:620px){
    /* Mobile: creator becomes a full-width stacked card. */
    .creator{
        padding:15px;
    }

    .creator .section-heading h2{
        font-size:16px;
    }

    .creator-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
        }

    .creator-actions button{
            width:100%;
            min-width:0;
            padding:0 10px;
            font-size:12px;
        }

    .home-page .creator{
            order:3;
            margin-top:0;
        }
}