/*
 * Werdana Social Auth Styles
 */

/* Admin Settings Styles */
.werdana-auth-settings .werdana-auth-notice { margin-top: 20px; }
.werdana-auth-settings .werdana-auth-code { background: #fff; padding: 3px 6px; border: 1px solid #ddd; border-radius: 3px; font-size: 1.1em; color: #d63638; }
.werdana-auth-settings .werdana-auth-form { margin-top: 30px; }
.werdana-api-section { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; padding: 20px; margin-bottom: 20px; }
.werdana-api-section h2 { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.werdana-api-section h2 img { vertical-align: middle; margin-right: 12px; width: 22px; }

/* Instruction Cards */
.werdana-instructions-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; margin-bottom: 10px; }
.werdana-instruction-card { flex: 1; min-width: 300px; background: #fff; padding: 15px; border: 1px solid #ccd0d4; border-radius: 4px; }
.werdana-instruction-card h4 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 14px; }
.werdana-instruction-card h4 img { width: 16px; margin-right: 5px; vertical-align: text-bottom; }
.werdana-instruction-card ol { margin-left: 1.5em; list-style-type: decimal; }
.werdana-instruction-card li { margin-bottom: 8px; }

/* * Tourmaster SVG Buttons Style (MAX ARMOR) */
body .werdana-social-container {
    clear: both !important;
    padding: 15px 0 !important;
    width: 100% !important;
    border-top: 1px solid #eee !important;
    margin-top: 15px !important;
    text-align: center !important;
}

body .werdana-social-title {
    font-size: 13px !important;
    color: #888 !important;
    margin-bottom: 12px !important;
    font-family: sans-serif !important;
}

body .werdana-social-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
}

body a.werdana-s-btn,
body .tourmaster-login-form a.werdana-s-btn,
body .tourmaster-register-form a.werdana-s-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background-color: #f2f2f2 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    height: 46px !important;
    border: 1px solid #e5e5e5 !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

body a.werdana-s-btn:hover {
    background-color: #e5e5e5 !important;
    text-decoration: none !important;
}

body .werdana-s-icon {
    width: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-right: 1px solid #e5e5e5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .werdana-s-icon svg {
    display: block !important;
    margin: 0 !important;
}

body .werdana-s-text {
    flex-grow: 1 !important;
    text-align: center !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #1f1f1f !important;
    padding-right: 46px !important; 
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 44px !important;
    margin: 0 !important;
}