/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

/* Scoped styles for the Simple user registration and login plugin settings page */
.krevil-user-registration-login-settings-page .nav-tab-wrapper {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.krevil-user-registration-login-settings-page .nav-tab {
    display: inline-block;
    padding: 10px 15px;
    margin-right: 5px;
    text-decoration: none;
    color: #0073aa;
    border: 1px solid transparent;
    border-bottom: none;
    background: #f1f1f1;
    cursor: pointer;
}

.krevil-user-registration-login-settings-page .nav-tab-active {
    background: #fff;
    border: 1px solid #ddd;
    border-bottom: 1px solid #fff;
    color: #23282d;
}

.krevil-user-registration-login-settings-page .tab-content {
    display: none;
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
}

.krevil-user-registration-login-settings-page .tab-content.active {
    display: block;
}

/* this is for plugin setting page */
.surl-wrap {
    max-width: 991px;
    padding: 24px 20px 50px;
}

.surl-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    width:100%;
}

.surl-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.surl-subtitle {
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 13px;
}

.surl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

@media (max-width: 820px) {
    .surl-grid { grid-template-columns: 1fr; }
}

.surl-field { display: flex; flex-direction: column; }

.surl-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.surl-input,
.surl-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.surl-input:focus,
.surl-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.surl-help {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* Switch */
.surl-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: pointer;
}

.surl-switch input {
    display: none;
}

.surl-switch-slider {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: background .2s ease;
}

.surl-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}

.surl-switch input:checked + .surl-switch-slider {
    background: #22c55e;
}

.surl-switch input:checked + .surl-switch-slider::after {
    transform: translateX(18px);
}

.surl-switch-text {
    font-size: 14px;
    color: #111827;
}

.surl-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}

.surl-btn {
    appearance: none;
    border: 0;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 6px 14px rgba(37,99,235,.25);
}

.surl-btn:hover { background: #1d4ed8; }
.surl-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(37,99,235,.25); }


/* Table */
.surl-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.surl-table th, .surl-table td {
    padding: 8px 7px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;

}
.surl-table thead th {
    background: #f8fafc;
    text-align: left;
    font-weight: 700;
}
.surl-table tbody tr:nth-child(even) td { background: #fcfdff; }

.surl-col-actions { width: 220px; }
.surl-inline-form { display:inline; }

.surl-input.small, .surl-select.small { width: 143px; }
.surl-input.tiny { width: 80px; }

/* Badges */
.surl-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    margin-right: 6px;
    font-weight: 600;
}
.surl-badge.ok { background: #e8f9ef; color: #157a36; border-color: #b9efd0; }
.surl-badge.muted { background: #f3f4f6; color: #4b5563; }

/* Delete link style */
.button-link-delete {
    color: #b91c1c;
    border: 1px solid #fca5a5 !important;
    background: #fff5f5 !important;
}
.button-link-delete:hover {
    background: #fee2e2 !important;
    color: #991b1b;
}
.surl-checkbox{
    display:flex;
    gap:10px;
    align-items: center;
}
.surl-textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    resize: vertical;
}
.surl-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.surl-textarea.small { width: 180px; }
.surl-select.small{ width:83px;}
/* Hover tooltip for header help icon */
.surl-help-icon{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    color: #64748b;           /* slate-500 */
    cursor: help;
}
.surl-help-icon:hover,
.surl-help-icon:focus{
    color: #111827;           /* gray-900 */
    outline: none;
}

/* Info "i" chip + tooltip (no Dashicons needed) */
.surl-help-icon{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;     /* slate-300 */
    background: #f8fafc;           /* slate-50 */
    color: #334155;                 /* slate-700 */
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    cursor: help;
}
.surl-help-icon:hover,
.surl-help-icon:focus { outline: none; background: #eef2ff; color: #1e293b; }

/* Bubble */
.surl-help-icon::after{
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 135%;
    transform: translateX(-50%) translateY(0);
    width: 320px;
    max-width: 60vw;
    padding: 8px 10px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 10;
}

/* Arrow */
.surl-help-icon::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 10;
}

/* Show on hover/focus */
.surl-help-icon:hover::after,
.surl-help-icon:focus::after{ opacity: 1; transform: translateX(-50%) translateY(-4px); }
.surl-help-icon:hover::before,
.surl-help-icon:focus::before{ opacity: 1; }
.krevil_slug input.small{
    width:183px;
}