/**
 * Social Login Pro — Frontend Styles
 *
 * Author:  David Lorenz | Weblorenz
 * Website: https://weblorenz.com/
 *
 * Base styles use CSS custom properties throughout.
 * DynamicStyles.php overrides these vars at runtime from admin Design Settings.
 * Do not hard-code colours here — always use a var() so the design panel works.
 */

/* ============================================================
   CSS Custom Properties — base defaults
   (DynamicStyles.php outputs a :root{} block at priority 99
    that overrides these with the admin's saved design choices)
   ============================================================ */
:root {
    /* Popup / modal */
    --slp-popup-bg:           #ffffff;
    --slp-popup-radius:       12px;
    --slp-popup-shadow:       0 8px 30px rgba(0,0,0,0.22);
    --slp-popup-width:        480px;
    --slp-overlay-bg:         rgba(0,0,0,0.50);

    /* Header */
    --slp-header-bg:          #f8f9fa;
    --slp-header-title-color: #1d2327;
    --slp-header-font-size:   20px;

    /* Text */
    --slp-text-color:         #3c4043;
    --slp-link-color:         #2271b1;
    --slp-error-color:        #cc1818;
    --slp-success-color:      #00a32a;

    /* Buttons */
    --slp-btn-bg:             #ffffff;
    --slp-btn-border:         #dadce0;
    --slp-btn-text:           #3c4043;
    --slp-btn-radius:         4px;
    --slp-btn-height:         44px;
    --slp-btn-font-size:      14px;
    --slp-btn-gap:            10px;
    --slp-btn-shadow:         0 1px 3px rgba(0,0,0,0.12);
    --slp-btn-shadow-hover:   0 2px 6px rgba(0,0,0,0.20);
    --slp-btn-hover-bg:       #135e96;

    /* Social buttons */
    --slp-icon-size:          18px;
    --slp-social-align:       stretch;

    /* Typography */
    --slp-font-family:        inherit;
    --slp-font-scale:         1;

    /* Divider */
    --slp-divider-color:      #dadce0;
    --slp-divider-text:       #5f6368;
}

/* ============================================================
   Button Container
   ============================================================ */
.slp-buttons-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            8px;
    margin:         16px 0;
    width:          100%;
}

/* ============================================================
   Divider ("or")
   ============================================================ */
.slp-divider {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      8px 0;
    color:       var(--slp-divider-text);
    font-size:   13px;
}

.slp-divider::before,
.slp-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--slp-divider-color);
}

/* ============================================================
   Base Button
   ============================================================ */
.slp-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--slp-btn-gap);
    height:          var(--slp-btn-height);
    padding:         0 16px;
    background:      var(--slp-btn-bg);
    border:          1px solid var(--slp-btn-border);
    border-radius:   var(--slp-btn-radius);
    color:           var(--slp-btn-text);
    font-size:       var(--slp-btn-font-size);
    font-weight:     500;
    text-decoration: none;
    cursor:          pointer;
    transition:      box-shadow 0.15s ease, background 0.15s ease;
    box-shadow:      var(--slp-btn-shadow);
    white-space:     nowrap;
    box-sizing:      border-box;
}

.slp-button:hover,
.slp-button:focus {
    box-shadow:      var(--slp-btn-shadow-hover);
    background:      #f8f9fa;
    color:           var(--slp-btn-text);
    text-decoration: none;
    outline:         2px solid transparent;
    outline-offset:  2px;
}

.slp-button:focus-visible {
    outline: 2px solid #1a73e8;
}

.slp-button__icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.slp-button__icon svg {
    display: block;
}

.slp-button__label {
    flex:        1;
    text-align:  center;
}

/* ============================================================
   Full-Width Modifier
   ============================================================ */
.slp-button--full {
    width:           100%;
    justify-content: flex-start;
    padding:         0 12px;
}

.slp-button--full .slp-button__label {
    text-align: center;
    flex:        1;
}

/* ============================================================
   Icon-Only Modifier
   ============================================================ */
.slp-button--icon-only {
    width:   var(--slp-btn-height);
    padding: 0;
}

/* ============================================================
   Provider-Specific Colours (background on hover)
   ============================================================ */

/* Google — keep white, per brand guidelines */
.slp-button--google:hover {
    background: #f8f9fa;
}

/* Facebook — blue */
.slp-button--facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}
.slp-button--facebook:hover,
.slp-button--facebook:focus {
    background: #166fe5;
    color: #ffffff;
}

/* GitHub — dark */
.slp-button--github {
    background: #24292e;
    border-color: #24292e;
    color: #ffffff;
}
.slp-button--github:hover,
.slp-button--github:focus {
    background: #2f363d;
    color: #ffffff;
}

/* LinkedIn — blue */
.slp-button--linkedin {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #ffffff;
}
.slp-button--linkedin:hover,
.slp-button--linkedin:focus {
    background: #0958a5;
    color: #ffffff;
}

/* X / Twitter — black */
.slp-button--twitter {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}
.slp-button--twitter:hover,
.slp-button--twitter:focus {
    background: #1a1a1a;
    color: #ffffff;
}

/* Apple — black */
.slp-button--apple {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}
.slp-button--apple:hover,
.slp-button--apple:focus {
    background: #1a1a1a;
    color: #ffffff;
}

/* ============================================================
   WooCommerce Checkout Prompt
   ============================================================ */
.slp-woo-login-prompt {
    padding:       16px !important;
    border-radius: 4px;
    margin-bottom: 16px;
}

.slp-woo-prompt-text {
    display:     block;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ============================================================
   Admin — Provider Cards
   ============================================================ */
.slp-admin-wrap .slp-provider-card {
    background:    #fff;
    border:        1px solid #c3c4c7;
    border-radius: 4px;
    padding:       16px 20px;
    margin-bottom: 16px;
}

.slp-admin-wrap .slp-provider-title {
    margin:        0 0 12px;
    font-size:     15px;
    border-bottom: 1px solid #c3c4c7;
    padding-bottom: 8px;
}

/* ============================================================
   User Profile Page
   ============================================================ */
.slp-status-linked {
    display:         inline-block;
    background:      #d1e7dd;
    color:           #0f5132;
    border-radius:   12px;
    padding:         2px 10px;
    font-size:       12px;
    font-weight:     500;
    vertical-align:  middle;
    margin-right:    8px;
}

/* ============================================================
   Debug Box (admin-only)
   ============================================================ */
.slp-debug-box {
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 4px;
    padding:       12px;
    margin:        8px 0;
    font-family:   monospace;
    font-size:     12px;
}

/* ============================================================
   WordPress Login Page Adjustments
   ============================================================ */
#login .slp-buttons-wrap {
    width: 320px;
}

/* ============================================================
   Responsive — Buttons
   ============================================================ */
@media (max-width: 480px) {
    .slp-button {
        font-size: 13px;
        padding:   0 12px;
    }
}

/* ============================================================
   Popup Trigger Button  [social_login_popup] shortcode output
   ============================================================ */
.slp-popup-trigger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          var(--slp-btn-height);
    padding:         0 24px;
    background:      var(--slp-btn-bg);
    border:          1px solid var(--slp-btn-border);
    border-radius:   var(--slp-btn-radius);
    color:           var(--slp-btn-text);
    font-size:       var(--slp-btn-font-size);
    font-family:     var(--slp-font-family);
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s ease, box-shadow 0.15s ease;
    box-shadow:      var(--slp-btn-shadow);
    white-space:     nowrap;
    box-sizing:      border-box;
    text-decoration: none;
}
.slp-popup-trigger:hover,
.slp-popup-trigger:focus {
    background: var(--slp-btn-hover-bg);
    color:      #fff;
    box-shadow: var(--slp-btn-shadow-hover);
    outline:    none;
}
.slp-popup-trigger:focus-visible {
    outline:        2px solid var(--slp-link-color);
    outline-offset: 2px;
}

/* ============================================================
   Modal Overlay
   ============================================================ */
.slp-modal-overlay {
    /* Positioning */
    position:        fixed;
    inset:           0;          /* top/right/bottom/left: 0 */
    z-index:         99999;

    /* Centred flex container */
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    box-sizing:      border-box;

    /* Design-controlled background (colour + opacity via CSS var) */
    background:      var(--slp-overlay-bg);

    /* Animation */
    opacity:         0;
    transition:      opacity 0.2s ease;
    pointer-events:  none;
}

/* State: open */
.slp-modal-overlay.is-open {
    opacity:        1;
    pointer-events: auto;
}

/* Hidden attribute resets (keep hidden until JS removes it) */
.slp-modal-overlay[hidden] {
    display: none;
}

/* ============================================================
   Modal Box
   ============================================================ */
.slp-modal {
    position:      relative;
    width:         100%;
    max-width:     var(--slp-popup-width);
    background:    var(--slp-popup-bg);
    border-radius: var(--slp-popup-radius);
    box-shadow:    var(--slp-popup-shadow);
    font-family:   var(--slp-font-family);
    font-size:     calc(14px * var(--slp-font-scale));
    color:         var(--slp-text-color);
    overflow:      hidden;

    /* Entrance animation */
    transform:     translateY(12px) scale(0.98);
    transition:    transform 0.22s ease, opacity 0.22s ease;
    opacity:       0;
}

.slp-modal-overlay.is-open .slp-modal {
    transform: translateY(0) scale(1);
    opacity:   1;
}

/* ── Header ── */
.slp-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 20px;
    background:      var(--slp-header-bg);
    border-bottom:   1px solid rgba(0,0,0,0.07);
}

.slp-modal__title {
    margin:      0;
    font-size:   var(--slp-header-font-size);
    font-weight: 700;
    color:       var(--slp-header-title-color);
    line-height: 1.2;
}

.slp-modal__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    padding:         0;
    background:      transparent;
    border:          1px solid transparent;
    border-radius:   50%;
    color:           var(--slp-text-color);
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background 0.15s ease, border-color 0.15s ease;
}
.slp-modal__close:hover,
.slp-modal__close:focus {
    background:   rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
    outline:      none;
}
.slp-modal__close:focus-visible {
    outline:        2px solid var(--slp-link-color);
    outline-offset: 2px;
}

/* ── Body ── */
.slp-modal__body {
    padding: 20px;
}

.slp-modal__subtitle {
    margin:      0 0 16px;
    font-size:   calc(13px * var(--slp-font-scale));
    color:       var(--slp-text-color);
    opacity:     0.75;
    line-height: 1.5;
}

/* Buttons inside modal inherit from .slp-buttons-wrap */
.slp-modal__buttons .slp-buttons-wrap {
    margin: 0;
}

/* ── Messages (error / success) ── */
.slp-modal__messages {
    margin-top: 14px;
}

.slp-message {
    padding:       10px 14px;
    border-radius: 6px;
    font-size:     calc(13px * var(--slp-font-scale));
    font-weight:   500;
    line-height:   1.5;
    margin-top:    8px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.slp-message--success {
    background: color-mix(in srgb, var(--slp-success-color) 12%, #fff);
    color:      var(--slp-success-color);
    border:     1px solid color-mix(in srgb, var(--slp-success-color) 30%, #fff);
}

.slp-message--error {
    background: color-mix(in srgb, var(--slp-error-color) 10%, #fff);
    color:      var(--slp-error-color);
    border:     1px solid color-mix(in srgb, var(--slp-error-color) 25%, #fff);
}

/* ============================================================
   Popup Trigger — Loading State
   ============================================================ */
.slp-button--loading,
.slp-popup-trigger--loading {
    opacity:        0.7;
    pointer-events: none;
    cursor:         wait;
}

/* ============================================================
   Responsive — Modal
   ============================================================ */
@media (max-width: 600px) {
    .slp-modal {
        max-width: var(--slp-popup-width-mobile, 360px);
        width:     100%;
    }
    .slp-modal__header { padding: 14px 16px; }
    .slp-modal__body   { padding: 16px; }
}

/* ============================================================
   Accessibility — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .slp-modal-overlay,
    .slp-modal { transition: none; }
}

/* ============================================================
   Login / Register Form Tabs
   ============================================================ */
.slp-form__tabs {
    display:       flex;
    border-bottom: 1px solid var(--slp-divider-color);
    margin-bottom: 18px;
}

.slp-form__tab {
    flex:           1;
    padding:        11px 8px;
    background:     transparent;
    border:         none;
    border-bottom:  2px solid transparent;
    margin-bottom:  -1px;
    color:          var(--slp-text-color);
    font-size:      14px;
    font-weight:    500;
    font-family:    var(--slp-font-family);
    cursor:         pointer;
    transition:     color 0.15s ease, border-color 0.15s ease;
    text-align:     center;
}

.slp-form__tab:hover {
    color: var(--slp-link-color);
}

.slp-form__tab.is-active {
    color:        var(--slp-link-color);
    border-color: var(--slp-link-color);
}

/* ============================================================
   Form Panels (Login / Register)
   ============================================================ */
.slp-form__panel {
    display: none;
}

.slp-form__panel.is-active {
    display: block;
}

/* ============================================================
   Form Fields
   ============================================================ */
.slp-field {
    margin-bottom: 14px;
}

.slp-label {
    display:       block;
    margin-bottom: 5px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--slp-text-color);
}

.slp-input {
    display:      block;
    width:        100%;
    height:       40px;
    padding:      0 10px;
    border:       1px solid var(--slp-divider-color);
    border-radius: var(--slp-btn-radius);
    background:   #ffffff;
    color:        var(--slp-text-color);
    font-size:    14px;
    font-family:  var(--slp-font-family);
    box-sizing:   border-box;
    transition:   border-color 0.15s ease, box-shadow 0.15s ease;
    outline:      none;
}

.slp-input:focus {
    border-color: var(--slp-link-color);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, 0.15);
}

/* Remember me + Forgot password row */
.slp-field--row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    margin-bottom:   16px;
}

.slp-remember {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    cursor:      pointer;
    color:       var(--slp-text-color);
}

.slp-lost-pw {
    font-size:       13px;
    color:           var(--slp-link-color);
    text-decoration: none;
}

.slp-lost-pw:hover {
    text-decoration: underline;
}

/* ============================================================
   Primary Submit Button  (.slp-btn)
   ============================================================ */
.slp-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          42px;
    padding:         0 20px;
    border:          none;
    border-radius:   var(--slp-btn-radius);
    font-size:       14px;
    font-weight:     600;
    font-family:     var(--slp-font-family);
    cursor:          pointer;
    transition:      background 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    box-sizing:      border-box;
    white-space:     nowrap;
}

.slp-btn--primary {
    background: var(--slp-link-color, #2271b1);
    color:      #ffffff;
}

.slp-btn--primary:hover,
.slp-btn--primary:focus {
    background: #135e96;
    color:      #ffffff;
    outline:    none;
}

.slp-btn--primary:focus-visible {
    outline:        2px solid #1a73e8;
    outline-offset: 2px;
}

.slp-btn--block {
    width:         100%;
    margin-top:    6px;
    margin-bottom: 4px;
}

/* ============================================================
   Small note text inside form
   ============================================================ */
.slp-form__note {
    margin:    0 0 12px;
    font-size: 12px;
    color:     var(--slp-text-color);
    opacity:   0.7;
}

/* ============================================================
   Inline Form Wrapper  ([social_login_form] shortcode)
   ============================================================ */
.slp-inline-form {
    max-width:  480px;
    margin:     0 auto;
    box-sizing: border-box;
}

/* ============================================================
   RTL support
   ============================================================ */
[dir="rtl"] .slp-field--row {
    flex-direction: row-reverse;
}

[dir="rtl"] .slp-lost-pw {
    margin-right: auto;
    margin-left:  0;
}

/* ============================================================
   Responsive — Form
   ============================================================ */
@media (max-width: 480px) {
    .slp-form__tab { font-size: 13px; padding: 10px 6px; }
    .slp-input     { font-size: 16px; /* prevent iOS zoom */ }
    .slp-btn       { font-size: 15px; height: 46px; }
}