/**
 * SBTT OAuth Notification & Loading Styles
 *
 * Notification styles match the existing sb-notification-ctn pattern from the React customizer.
 * These are duplicated here because the customizer CSS only loads with the React app,
 * but OAuth redirect can happen on any plugin page.
 *
 * @package tiktok-feeds
 */

/*
    SB Notification (copied from sb-common.css)
*/
.sb-notification-ctn {
    position: fixed;
    bottom: -100px;
    left: 200px;
    z-index: 999999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 3px solid #fff;
    line-height: 1em;
    padding: 10px 20px;
    padding-left: 0px;
    border-radius: 4px;
    box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828),
                0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161),
                0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075),
                0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839),
                0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body.folded .sb-notification-ctn {
    left: 75px;
}

.sb-notification-ctn[data-active="hidden"] {
    -webkit-animation: sb-notification-hide .5s forwards linear;
    animation: sb-notification-hide .5s forwards linear;
}

.sb-notification-ctn[data-active="shown"] {
    -webkit-animation: sb-notification-show .5s forwards linear;
    animation: sb-notification-show .5s forwards linear;
}

@-webkit-keyframes sb-notification-show {
    0% { bottom: -100px; }
    50% { bottom: 70px; }
    70% { bottom: 60px; }
    85% { bottom: 65px; }
    100% { bottom: 50px; }
}

@keyframes sb-notification-show {
    0% { bottom: -100px; }
    50% { bottom: 70px; }
    70% { bottom: 60px; }
    85% { bottom: 65px; }
    100% { bottom: 50px; }
}

@-webkit-keyframes sb-notification-hide {
    0% { bottom: 50px; }
    55% { bottom: 65px; }
    70% { bottom: 60px; }
    85% { bottom: 70px; }
    100% { bottom: -100px; }
}

@keyframes sb-notification-hide {
    0% { bottom: 50px; }
    55% { bottom: 65px; }
    70% { bottom: 60px; }
    85% { bottom: 70px; }
    100% { bottom: -100px; }
}

/* Type-based border colors */
.sb-notification-ctn[data-type="success"] {
    border-color: #59AB46;
}

.sb-notification-ctn[data-type="error"] {
    border-color: #D72C2C;
}

.sb-notification-ctn[data-type="message"] {
    border-color: #141B38;
}

/* Notification icon */
.sb-notification-icon {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 11px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 50%;
}

.sb-notification-icon svg {
    width: 100%;
    height: 100%;
    float: left;
    fill: #fff;
}

.sb-notification-icon svg,
.sb-notification-icon svg path {
    fill: #fff;
}

.sb-notification-ctn[data-type="success"] .sb-notification-icon {
    background: #59AB46;
}

.sb-notification-ctn[data-type="error"] .sb-notification-icon {
    background: #D72C2C;
}

.sb-notification-ctn[data-type="message"] .sb-notification-icon {
    background: #141B38;
}

/* Notification text */
.sb-notification-ctn span {
    font-size: 14px;
    color: #141B38;
    font-weight: 600;
}

/*
    OAuth Loading Overlay
*/
.sbtt-oauth-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbtt-oauth-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #E8E8EB;
    border-top-color: #0068A0;
    border-radius: 50%;
    animation: sbtt-spin 0.8s linear infinite;
}

@keyframes sbtt-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive - adjust notification position on smaller screens */
@media screen and (max-width: 782px) {
    .sb-notification-ctn {
        left: 20px;
        right: 20px;
        max-width: calc(100% - 40px);
    }
}