/**
 * Ultimate Watermark — Settings page
 *
 * Built on top of the design tokens declared in admin.css.
 *
 * @package UltimateWatermark
 * @since   2.0.9
 */

.ultimate-watermark-settings {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-5);
    width: 100%;
}

/* =========================================================================
   Tabs
   ========================================================================= */

.settings-tabs-wrap {
    background: var(--uw-surface);
    border: 1px solid var(--uw-border);
    border-radius: var(--uw-radius-lg);
    box-shadow: var(--uw-shadow-sm);
    overflow: hidden;
}

.settings-tabs-wrap .form-tabs {
    display: flex;
    background: var(--uw-surface-soft);
    border-bottom: 1px solid var(--uw-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-tabs-wrap .form-tabs::-webkit-scrollbar { display: none; }

.settings-tabs-wrap .form-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    font-size: var(--uw-font-body-size);
    font-weight: 500;
    color: var(--uw-text-subtle);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.settings-tabs-wrap .form-tab:hover {
    color: var(--uw-text);
    background: var(--uw-surface);
    text-decoration: none;
}

.settings-tabs-wrap .form-tab.active {
    color: var(--uw-primary);
    border-bottom-color: var(--uw-primary);
    background: var(--uw-surface);
}

.settings-tabs-wrap .form-tab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* =========================================================================
   Layout / sections
   ========================================================================= */

.settings-layout {
    background: var(--uw-surface);
    border: 1px solid var(--uw-border);
    border-radius: var(--uw-radius-lg);
    box-shadow: var(--uw-shadow-sm);
    overflow: hidden;
}

.settings-content {
    padding: var(--uw-space-6);
}

.settings-sections {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-6);
}

.settings-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.settings-section + .settings-section {
    padding-top: var(--uw-space-6);
    border-top: 1px solid var(--uw-border-soft);
}

.settings-section h3,
.settings-section h2 {
    font-size: var(--uw-font-h3-size);
    font-weight: 600;
    color: var(--uw-text);
    margin: 0 0 var(--uw-space-2) 0;
    letter-spacing: -0.005em;
}

.settings-section > .description,
.settings-section .section-description {
    color: var(--uw-text-subtle);
    font-size: var(--uw-font-small-size);
    margin: 0 0 var(--uw-space-4) 0;
    line-height: var(--uw-line-snug);
}

/* Form columns within a settings section */
.settings-section .form-columns,
.ultimate-watermark-settings .form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uw-space-4) var(--uw-space-5);
}

@media (max-width: 768px) {
    .settings-section .form-columns,
    .ultimate-watermark-settings .form-columns {
        grid-template-columns: 1fr;
    }
}

.settings-section .form-column,
.ultimate-watermark-settings .form-column {
    display: flex;
    flex-direction: column;
    gap: var(--uw-space-4);
    min-width: 0;
}

.settings-section .form-row,
.ultimate-watermark-settings .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    min-width: 0;
}

.settings-section .form-row label,
.ultimate-watermark-settings .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--uw-text);
    margin: 0;
}

.settings-section .form-row p.description,
.settings-section .form-row .description,
.ultimate-watermark-settings .form-row .description {
    margin: 4px 0 0 0;
    color: var(--uw-text-subtle);
    font-size: var(--uw-font-small-size);
    line-height: var(--uw-line-snug);
}

/* Inline checkbox row */
.settings-section .form-row > label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

/* Range slider with value chip */
.range-input {
    display: flex;
    align-items: center;
    gap: var(--uw-space-3);
}

.range-input input[type="range"] {
    flex: 1;
    margin: 0;
}

.range-input .range-value {
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    background: var(--uw-primary-soft);
    color: var(--uw-primary);
    border-radius: var(--uw-radius-sm);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   Form actions bar
   ========================================================================= */

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uw-space-3);
    padding: var(--uw-space-4) var(--uw-space-5);
    background: var(--uw-surface);
    border: 1px solid var(--uw-border);
    border-radius: var(--uw-radius-lg);
    box-shadow: var(--uw-shadow-sm);
    flex-wrap: wrap;
}

.actions-left,
.actions-right {
    display: flex;
    align-items: center;
    gap: var(--uw-space-3);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .form-actions { flex-direction: column; align-items: stretch; }
    .actions-left,
    .actions-right { justify-content: stretch; width: 100%; }
    .actions-left .btn,
    .actions-right .btn { flex: 1; justify-content: center; }
}