/**
 * QuikSSO - Modern Front-End Styling
 */

.quiksso-container {
    margin: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Divider */
.quiksso-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
.quiksso-divider::before,
.quiksso-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}
.quiksso-divider span {
    padding: 0 12px;
}

/* Layouts */
.quiksso-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.quiksso-layout-flex .quiksso-buttons-wrapper {
    flex-direction: row;
}
.quiksso-layout-grid .quiksso-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.quiksso-layout-list .quiksso-buttons-wrapper {
    flex-direction: column;
}
.quiksso-layout-list .quiksso-btn {
    width: 100%;
}

/* Base Button */
.quiksso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.quiksso-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Styles */
.quiksso-style-rounded .quiksso-btn { border-radius: 6px; }
.quiksso-style-pill .quiksso-btn { border-radius: 50px; }
.quiksso-style-square .quiksso-btn { border-radius: 0px; }

/* Icon sizes */
.quiksso-btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

/* Provider Color Themes */
.quiksso-btn-google {
    background-color: #ffffff;
    color: #3c4043;
    border-color: #dadce0;
}
.quiksso-btn-google:hover { background-color: #f8f9fa; color: #202124; }

.quiksso-btn-apple {
    background-color: #000000;
    color: #ffffff;
}
.quiksso-btn-apple:hover { background-color: #1a1a1a; color: #ffffff; }

.quiksso-btn-github {
    background-color: #24292e;
    color: #ffffff;
}
.quiksso-btn-github:hover { background-color: #1b1f23; color: #ffffff; }

.quiksso-btn-facebook {
    background-color: #1877f2;
    color: #ffffff;
}
.quiksso-btn-facebook:hover { background-color: #166fe5; color: #ffffff; }

.quiksso-btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
}
.quiksso-btn-instagram:hover { opacity: 0.92; color: #ffffff; }

.quiksso-btn-linkedin {
    background-color: #0a66c2;
    color: #ffffff;
}
.quiksso-btn-linkedin:hover { background-color: #0855a1; color: #ffffff; }

.quiksso-btn-twitter {
    background-color: #000000;
    color: #ffffff;
}
.quiksso-btn-twitter:hover { background-color: #14171a; color: #ffffff; }

.quiksso-btn-otp {
    background-color: #0f172a;
    color: #ffffff;
}
.quiksso-btn-otp:hover { background-color: #1e293b; color: #ffffff; }

/* SVG Icons inline styling fallback */
.quiksso-icon-google { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="%234285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="%23FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="%2334A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>'); }
.quiksso-icon-apple { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 170 170"><path d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.19-2.12-9.97-3.17-14.34-3.17-4.58 0-9.49 1.05-14.75 3.17-5.26 2.13-9.5 3.24-12.74 3.35-5.04.25-9.97-1.79-14.8-6.12-3.23-2.75-7.04-7.39-11.45-13.91-6.79-10.05-12.27-21.2-16.44-33.45-4.17-12.26-6.26-24.08-6.26-35.48 0-14.92 3.86-27.18 11.57-36.79 7.71-9.61 17.37-14.54 28.98-14.79 4.87 0 10.15 1.25 15.86 3.75 5.7 2.5 9.61 3.75 11.73 3.75 1.9 0 5.92-1.29 12.06-3.88 6.14-2.58 11.58-3.79 16.32-3.62 12.06.84 21.7 5.54 28.92 14.1-10.74 6.53-15.96 15.62-15.66 27.27.34 9.17 4.1 16.92 11.28 23.27 7.18 6.35 15.7 9.87 25.56 10.56-2.54 7.5-5.75 14.9-9.63 22.2zM119.22 31.57c0-7.07 2.54-13.88 7.63-20.43 5.08-6.55 11.66-10.56 19.74-12.04.42 1.02.63 2.12.63 3.3 0 7.15-2.67 14.12-8.01 20.9-5.34 6.78-11.96 10.87-19.86 12.27-.08-1.3-.13-2.63-.13-4z"/></svg>'); }
.quiksso-icon-github { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>'); }
.quiksso-icon-facebook { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'); }
.quiksso-icon-instagram { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>'); }
.quiksso-icon-linkedin { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>'); }
.quiksso-icon-twitter { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'); }
.quiksso-icon-otp { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'); }

/* Alerts */
.quiksso-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
}
.quiksso-alert-danger { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.quiksso-alert-success { background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.quiksso-alert-warning { background-color: #fffbeb; color: #92400e; border: 1px solid #fef3c7; }
.quiksso-alert-info { background-color: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }

/* Modal */
.quiksso-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiksso-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}
.quiksso-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    z-index: 10;
}
.quiksso-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    border: none; background: transparent;
    font-size: 24px; cursor: pointer; color: #94a3b8;
}
.quiksso-modal-header h3 {
    margin: 0 0 6px 0;
    font-size: 18px; color: #0f172a;
}
.quiksso-modal-header p {
    margin: 0; font-size: 13px; color: #64748b;
}

/* OTP Form Elements */
.quiksso-form-group {
    margin-bottom: 16px;
}
.quiksso-form-group label {
    display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px;
}
.quiksso-input {
    width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; box-sizing: border-box;
}
.quiksso-code-inputs {
    display: flex; gap: 8px; justify-content: center; margin: 20px 0;
}
.quiksso-digit-input {
    width: 45px; height: 50px; text-align: center; font-size: 22px; font-weight: 700; border: 2px solid #cbd5e1; border-radius: 8px;
}
.quiksso-digit-input:focus {
    border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.quiksso-submit-btn {
    width: 100%; padding: 12px; background-color: #2563eb; color: #ffffff; border: none; border-radius: 6px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.quiksso-submit-btn:hover { background-color: #1d4ed8; }

/* Linked accounts card */
.quiksso-account-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.quiksso-linked-list { list-style: none; padding: 0; margin: 15px 0; }
.quiksso-linked-item {
    display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #f1f5f9;
}
.quiksso-linked-info { display: flex; align-items: center; gap: 12px; }
.quiksso-badge-success { background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.quiksso-badge-muted { background: #f1f5f9; color: #64748b; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.quiksso-btn-unlink { background: #fee2e2; color: #dc2626; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.quiksso-btn-link-account { background: #e0f2fe; color: #0284c7; text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }