/* =====================================================
   Woo Social Login — style-public.css
   محسَّن: متجاوب + RTL + يرث خطوط الموقع
   ===================================================== */

/* ── حالات خفية ── */
.woo-slg-restrict {
    padding: 10px 16px;
    background-color: #ff9800;
    color: #fff;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.woo-slg-login-error,
.woo-slg-login-success,
.woo-slg-login-otp-success,
.woo-slg-login-loader,
.woo-slg-login-email-error,
.woo-slg-login-email-otp-error {
    display: none;
}

/* ── رسائل الخطأ والنجاح ── */
.woo-slg-login-error,
.woo-slg-login-email-error,
.woo-slg-login-email-otp-error {
    border-radius: 8px;
    background-color: #fff5f5;
    border: 1px solid #fc8181;
    color: #c53030;
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
}
.woo-slg-login-error span,
.woo-slg-login-email-error span {
    display: block;
}
.woo-slg-login-success,
.woo-slg-login-otp-success {
    border-radius: 8px;
    background-color: #f0fff4;
    border: 1px solid #68d391;
    color: #276749;
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 14px;
}
.woo-slg-login-success a,
.woo-slg-login-otp-success a {
    color: #276749 !important;
    font-weight: 600;
}

/* ── الصور ── */
.woo-slg-social-wrap img { outline: 0; }
.woo-slg-social-container a { text-decoration: none !important; }

/* ── الـ wrapper لكل زر ── */
.woo-slg-login-wrapper {
    display: inline-flex;
    margin: 0 4px 8px 4px;
}
.woo-slg-login-wrapper a { outline: 0; }

.woo-slg-clear { clear: both; }
.woo-slg-hide  { display: none; }

/* ── الحاوية الرئيسية ── */
.woo-slg-social-container,
.woo-slg-email-login-container {
    margin: 0 0 20px;
    font-family: inherit;   /* ✅ يرث خط الموقع */
}

.woo-slg-social-container legend,
.woo-slg-email-login-container legend {
    display: block;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    font-family: inherit;
}

/* ── عرض الأزرار: flex ومتجاوب ── */
.woo-slg-social-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* ── الحاوية في صفحة الدخول ── */
.woo-slg-social-container-login {
    margin: 0 auto;
    padding: 12px 0;
    width: 100%;
    max-width: 480px;
    font-family: inherit;
}

/* ── أزرار السوشيل ── */
.woo-slg-social-container .woo-slg-social-btn,
.woo-slg-social-container .woo-slg-social-btn:hover,
.woo-slg-social-container .woo-slg-social-btn:active,
.woo-slg-social-container .woo-slg-social-btn:visited {
    display: inline-flex;
    align-items: center;
    padding: 0 18px 0 0;
    color: #fff !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    min-width: 160px;
    max-width: 100%;
    height: 42px;
    border-radius: 8px;
    border: none;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    position: relative;
    text-decoration: none !important;
    overflow: hidden;
    white-space: nowrap;
}

.woo-slg-social-container .woo-slg-social-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    opacity: 0.93;
}

.woo-slg-social-container .woo-slg-social-btn:active {
    transform: translateY(0);
    opacity: 0.85;
}

/* زر الـ link pages */
.woo-social-link-buttons .woo-slg-social-btn,
.woo-social-link-buttons .woo-slg-social-btn:hover,
.woo-social-link-buttons .woo-slg-social-btn:active {
    min-width: 200px;
}

/* ── أيقونة الزر ── */
.woo-slg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    border-right: 1px solid rgba(255,255,255,0.2);
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0;
    margin-right: 10px;
    border-radius: 8px 0 0 8px;
}

/* RTL: أيقونة على اليمين */
[dir="rtl"] .woo-slg-icon,
.rtl .woo-slg-icon {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    margin-left: 10px;
    margin-right: 0;
    border-radius: 0 8px 8px 0;
}

/* ── ألوان الأزرار ── */
.woo-slg-social-btn.woo-slg-social-login-facebook  { background: #1877f2; }
.woo-slg-social-btn.woo-slg-social-login-twitter   { background: #14171a; }
.woo-slg-social-btn.woo-slg-social-login-googleplus{ background: #4285f4; }
.woo-slg-social-btn.woo-slg-social-login-linkedin  { background: #0a66c2; }
.woo-slg-social-btn.woo-slg-social-login-yahoo     { background: #6001d2; }
.woo-slg-social-btn.woo-slg-social-login-foursquare{ background: #f94877; }
.woo-slg-social-btn.woo-slg-social-login-windowslive{ background: #0078d4; }
.woo-slg-social-btn.woo-slg-social-login-vk        { background: #4a76a8; }
.woo-slg-social-btn.woo-slg-social-login-amazon    { background: #232f3e; }
.woo-slg-social-btn.woo-slg-social-login-paypal    { background: #003087; }
.woo-slg-social-btn.woo-slg-social-login-line      { background: #06c755; }
.woo-slg-social-btn.woo-slg-social-login-github    { background: #24292e; }
.woo-slg-social-btn.woo-slg-social-login-wordpresscom{ background: #3858e9; }
.woo-slg-social-btn.woo-slg-social-login-apple     { background: #1c1c1e; }

/* أيقونات الصور */
.woo-slg-fb-icon          { background-image: url("../images/facebook-icon.png"); }
.woo-slg-apple-icon       { background-image: url("../images/apple-icon.png"); }
.woo-slg-tw-icon          { background-image: url("../images/twitter-icon.png"); }
.woo-slg-github-icon      { background-image: url("../images/github-icon.png"); }
.woo-slg-wordpresscom-icon{ background-image: url("../images/wordpresscom-icon.png"); }
.woo-slg-gp-icon          { background-image: url("../images/googleplus-icon.png"); }
.woo-slg-li-icon          { background-image: url("../images/linkedin-icon.png"); }
.woo-slg-yh-icon          { background-image: url("../images/yahoo-icon.png"); }
.woo-slg-fs-icon          { background-image: url("../images/foursquare-icon.png"); }
.woo-slg-wl-icon          { background-image: url("../images/windowslive-icon.png"); }
.woo-slg-vk-icon          { background-image: url("../images/vk-icon.png"); }
.woo-slg-amz-icon         { background-image: url("../images/amazon-icon.png"); }
.woo-slg-paypal-icon      { background-image: url("../images/paypal-icon.png"); }
.woo-slg-line-icon        { background-image: url("../images/line-icon.png"); }

/* ── Provider Button (النمط البديل) ── */
.woo-slg-provider {
    height: 42px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    min-width: 140px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.woo-slg-provider:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.woo-slg-provider .woo-slg-provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 42px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.12);
}
.woo-slg-provider .woo-slg-provider-icon img {
    max-height: 22px;
    display: block;
    box-shadow: none;
}
.woo-slg-provider .woo-slg-provider-name {
    text-transform: capitalize;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
}
/* ألوان Provider */
.woo-slg-provider.facebook    { background: #1877f2; }
.woo-slg-provider.twitter     { background: #14171a; }
.woo-slg-provider.googleplus  { background: #4285f4; }
.woo-slg-provider.yahoo       { background: #6001d2; }
.woo-slg-provider.amazon      { background: #ff9900; }
.woo-slg-provider.paypal      { background: #003087; }
.woo-slg-provider.vk          { background: #4a76a8; }
.woo-slg-provider.windowslive { background: #0078d4; }
.woo-slg-provider.foursquare  { background: #f94877; }
.woo-slg-provider.linkedin    { background: #0a66c2; }
.woo-slg-provider.apple       { background: #1c1c1e; }
.woo-slg-provider.line        { background: #06c755; }
.woo-slg-provider.github      { background: #24292e; }
.woo-slg-provider.wordpresscom{ background: #3858e9; }

/* ── الفاصل بين القسمين ── */
.woo-slg-horizontal-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #9ca3af;
    font-size: 13px;
    font-family: inherit;
}
.woo-slg-horizontal-divider::before,
.woo-slg-horizontal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.woo-slg-horizontal-divider span {
    padding: 0;
    background: transparent;
    white-space: nowrap;
}

/* ── تسجيل الدخول بالإيميل ── */
.woo-slg-email-login-container {
    margin: auto;
    padding: 0 0 16px;
    width: 100%;
    max-width: 480px;
    font-family: inherit;
}
.woo-slg-email-login-wrap,
.woo-slg-email-login-container legend {
    text-align: center;
}
.woo-slg-email-login-container legend {
    margin-top: 20px;
}
.woo-slg-email-input {
    margin-bottom: 10px;
}
.woo-slg-email-login-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid currentColor;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/* ── OTP Section ── */
.woo-slg-email-otp-section {
    display: block;
    text-align: center;
    margin: 12px 0;
}
.woo-slg-email-otp-section .woo-slg-otp-input {
    margin-bottom: 10px;
}
input.woo-slg-email-login-btn-otp {
    display: inline-block;
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

/* ── صفحة تسجيل الدخول ── */
.woo-slg-social-container-login span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    color: #6b7280;
    text-align: center;
    font-family: inherit;
}

/* ── عند التسجيل/الدخول: وسط الأزرار ── */
.login-action-login .woo-slg-social-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* ── Checkout ── */
.woo-slg-social-container-checkout {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 20px;
}

/* ── الحسابات المرتبطة ── */
.woo-social-login-linked-profiles thead tr,
.woo-social-login-linked-profiles tfoot tr {
    background-color: #f9fafb;
}
.woo-social-login-linked-profiles thead tr th:first-child,
.woo-social-login-linked-profiles tfoot tr th:first-child {
    padding: 10px 0 10px 12px;
}
.woo-social-login-linked-profiles tr td img {
    vertical-align: middle;
    border-radius: 50%;
}
.woo-slg-linked-provider-image {
    margin-right: 8px;
}
.woo-social-login-linked-profiles {
    min-width: 480px;
}
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── قسم ربط الحسابات ── */
.woo-slg-profile-link-container { display: none; }
.woo-social-login-profile.woo-slg-social-wrap { text-align: left !important; }

/* ── Google+ (legacy) ── */
.woo-slg-social-googleplus {
    position: relative;
    top: -35px;
    height: 0;
}
.woo-slg-social-googleplus > div {
    opacity: 0;
    height: 0;
    width: 100%;
    left: -7px;
}
.woo-slg-social-btn .woo-slg-social-googleplus iframe,
.woo-slg-social-btn .woo-slg-social-googleplus > div {
    width: 250px !important;
}
.woo-slg-social-btn .woo-slg-social-googleplus > div {
    left: -18px;
}
.woo-slg-social-googleplus .S9gUrf-YoZ4jf > div {
    width: 100%;
    position: absolute;
}

/* ── Checkout ومواقع خاصة ── */
.woo-slg-social-container.woo-slg-widget-content { border: none !important; }
.woo-slg-widget-content .woo-slg-login-wrapper    { margin-bottom: 6px; }

/* ── BBPress ── */
.bbp-login-form fieldset .woo-slg-social-container legend,
.bbp-login-form fieldset .woo-slg-email-login-container legend {
    display: block !important;
}
form.bbp-login-form .woo-slg-social-container-login { width: auto; }

/* ── PeepSo ── */
.ps-form .woo-slg-social-container legend,
.peepso .woo-slg-social-container legend,
.ps-form .woo-slg-email-login-container legend,
.peepso .woo-slg-email-login-container legend {
    font-size: 13px;
    margin: 4px 0 16px;
}

/* =====================================================
   RESPONSIVE — متجاوب مع جميع الأجهزة
   ===================================================== */

/* ── تابلت كبير ── */
@media only screen and (max-width: 1024px) {
    .woo-slg-social-container-login,
    .woo-slg-email-login-container {
        max-width: 100%;
    }
}

/* ── تابلت / موبايل كبير ── */
@media only screen and (max-width: 768px) {
    .woo-slg-social-container .woo-slg-social-btn,
    .woo-slg-social-container .woo-slg-social-btn:hover,
    .woo-slg-social-container .woo-slg-social-btn:active,
    .woo-slg-social-container .woo-slg-social-btn:visited {
        min-width: 140px;
        font-size: 12px;
    }
    .woo-slg-provider {
        min-width: 120px;
    }
    .woo-social-login-linked-profiles {
        min-width: 100%;
    }
}

/* ── موبايل ── */
@media only screen and (max-width: 480px) {
    /* الأزرار تملأ العرض كاملاً */
    .woo-slg-social-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .woo-slg-login-wrapper {
        width: 100%;
        margin: 0 0 8px 0;
    }
    .woo-slg-social-container .woo-slg-social-btn,
    .woo-slg-social-container .woo-slg-social-btn:hover,
    .woo-slg-social-container .woo-slg-social-btn:active,
    .woo-slg-social-container .woo-slg-social-btn:visited {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        justify-content: flex-start;
        font-size: 14px;
        height: 46px;
    }
    .woo-slg-icon {
        width: 46px;
        height: 46px;
    }
    .woo-slg-provider {
        width: 100%;
        min-width: unset;
    }
    .woo-social-link-buttons .woo-slg-social-btn,
    .woo-social-link-buttons .woo-slg-social-btn:hover,
    .woo-social-link-buttons .woo-slg-social-btn:active {
        max-width: 100%;
        min-width: unset;
        width: 100%;
    }
    .woo-social-login-linked-profiles tr td img {
        max-width: 80px;
    }
    .woo-slg-social-container-checkout {
        padding: 12px;
    }
}

/* ── موبايل صغير جداً ── */
@media only screen and (max-width: 360px) {
    .woo-slg-social-container .woo-slg-social-btn,
    .woo-slg-social-container .woo-slg-social-btn:hover,
    .woo-slg-social-container .woo-slg-social-btn:active,
    .woo-slg-social-container .woo-slg-social-btn:visited {
        font-size: 13px;
        height: 44px;
    }
}

/* =====================================================
   RTL — دعم اللغة العربية
   ===================================================== */
[dir="rtl"] .woo-slg-social-wrap,
.rtl .woo-slg-social-wrap {
    direction: rtl;
}
[dir="rtl"] .woo-slg-social-container .woo-slg-social-btn,
.rtl .woo-slg-social-container .woo-slg-social-btn {
    text-align: right;
    padding: 0 0 0 18px;
}
[dir="rtl"] .woo-slg-provider .woo-slg-provider-name,
.rtl .woo-slg-provider .woo-slg-provider-name {
    padding: 0 12px 0 0;
}
[dir="rtl"] .woo-slg-linked-provider-image,
.rtl .woo-slg-linked-provider-image {
    margin-right: 0;
    margin-left: 8px;
}
[dir="rtl"] .woo-slg-login-wrapper,
.rtl .woo-slg-login-wrapper {
    margin: 0 0 8px 8px;
}