.hugeicons-settings {
    max-width: 800px;
    margin: 20px 0;
}

.hugeicons-card {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hugeicons-card h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    color: #1E293B;
}

.hugeicons-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
}

.hugeicons-card p {
    margin: 0 0 16px;
    color: #64748B;
    font-size: 14px;
    line-height: 1.5;
}

.hugeicons-upgrade-notice {
    margin-top: 24px;
    padding: 24px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.hugeicons-upgrade-notice h3 {
    color: #10B981;
    margin-top: 0;
    margin-bottom: 16px;
}

.hugeicons-upgrade-notice ul {
    margin: 16px 0;
    padding-left: 24px;
}

.hugeicons-upgrade-notice li {
    margin-bottom: 8px;
    color: #64748B;
}

.hugeicons-upgrade-notice .button-primary {
    background: #10B981;
    border-color: #10B981;
    color: white;
    padding: 8px 24px;
    height: auto;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hugeicons-upgrade-notice .button-primary:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}

.nav-tab-wrapper {
    margin-bottom: 24px;
}

.nav-tab {
    margin-left: 0;
    margin-right: 4px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px 4px 0 0;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
}

.nav-tab:hover {
    background: white;
    color: #1E293B;
}

.nav-tab-active {
    background: white;
    color: #1E293B;
    border-bottom-color: white;
}

.hugeicons-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.hugeicons-radio-group {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #eee;
}
.hugeicons-radio {
    display: inline-flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
}
.hugeicons-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    [aria-hidden="true"] {
        display: none;
    }
}
.hugeicons-radio span {
    position: relative;
    padding-left: 32px;
    font-size: 14px;
}
.hugeicons-radio span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23000000' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.hugeicons-radio input[type="radio"]:checked + span::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%231E293B' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25C6.06294 1.25 1.25 6.06294 1.25 12ZM16.6757 8.26285C17.0828 8.63604 17.1103 9.26861 16.7372 9.67573L11.2372 15.6757C11.0528 15.8768 10.7944 15.9938 10.5217 15.9998C10.249 16.0057 9.98576 15.9 9.79289 15.7071L7.29289 13.2071C6.90237 12.8166 6.90237 12.1834 7.29289 11.7929C7.68342 11.4024 8.31658 11.4024 8.70711 11.7929L10.4686 13.5544L15.2628 8.32428C15.636 7.91716 16.2686 7.88966 16.6757 8.26285Z' fill='%231E293B' /%3E%3C/svg%3E");
}
.hugeicons-radio input[type="radio"]:focus + span::before {
    outline: 2px solid #1E293B;
    outline-offset: 2px;
    border-radius: 50%;
}
.hugeicons-radio:hover span::before {
    opacity: 0.8;
}
.hugeicons-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.hugeicons-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hugeicons-status.success::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23AFE67F' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25C6.06294 1.25 1.25 6.06294 1.25 12ZM16.6757 8.26285C17.0828 8.63604 17.1103 9.26861 16.7372 9.67573L11.2372 15.6757C11.0528 15.8768 10.7944 15.9938 10.5217 15.9998C10.249 16.0057 9.98576 15.9 9.79289 15.7071L7.29289 13.2071C6.90237 12.8166 6.90237 12.1834 7.29289 11.7929C7.68342 11.4024 8.31658 11.4024 8.70711 11.7929L10.4686 13.5544L15.2628 8.32428C15.636 7.91716 16.2686 7.88966 16.6757 8.26285Z' fill='%23AFE67F' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.hugeicons-status.success .dashicons {
    display: none;
}
.hugeicons-actions {
    display: flex;
    gap: 12px;
}
.button-link.delete {
    color: #cc1818;
}
.hugeicons-form-row {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}
.hugeicons-set-section {
    margin-top: 24px;
}
.hugeicons-set-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}
.hugeicons-set-picker {
    flex: 1;
    position: relative;
    max-width: 400px;
}
/* Modern Select Styling */
.hugeicons-set-picker select {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 16px;
    font-size: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    color: #1E293B;
    transition: all 0.2s ease;
    background-image: none;
}
/* Remove default arrow in IE */
.hugeicons-set-picker select::-ms-expand {
    display: none;
}
/* Custom dropdown arrow */
.hugeicons-set-picker::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748B;
    border-bottom: 2px solid #64748B;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
.hugeicons-set-picker select:hover {
    border-color: #1E293B;
}
.hugeicons-set-picker select:focus {
    outline: none;
    border-color: #1E293B;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.1);
}
/* Refresh button styling */
#refresh-sets {
    white-space: nowrap;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: white;
    color: #1E293B;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}
#refresh-sets:hover {
    background: #F8FAFC;
    border-color: #1E293B;
}
#refresh-sets .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
/* Container for the entire set selection area */
.hugeicons-set-selection {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}
.hugeicons-set-selection-controls {
    display: flex;
    flex: 1;
    gap: 8px;
}
/* Save button styling */
#save-set {
    padding: 10px 24px;
    background: #1E293B;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
#save-set:hover {
    background: #334155;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 41, 59, 0.1);
}
.hugeicons-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
}
.hugeicons-info-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}
.hugeicons-info-table td:first-child {
    font-weight: 500;
    width: 200px;
}
.hidden {
    display: none;
}

.hugeicons-set-actions {
    margin-top: 15px;
    text-align: right;
}

.hugeicons-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.hugeicons-form-actions .button-primary {
    min-width: 120px;
}

.pending-changes-message {
    color: #3c434a;
    font-style: italic;
}

.pending-changes-message.hidden {
    display: none;
}

.free-message {
    padding: 10px 0;
}

.free-message p {
    margin-bottom: 10px;
    margin-top: 0px;
}

.free-message .hugeicons-form-actions {
    margin: 0;
    padding: 0;
    border-top: none;
}

#save-settings {
    position: relative;
    min-width: 160px;
}

.free-message .hugeicons-set-actions {
    margin-top: 15px;
}

.free-message .button-primary {
    margin-top: 10px;
}

.hugeicons-status.success {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}

/* Action buttons styling */
.hugeicons-actions .button-link {
    padding: 6px 12px;
    border: 1px solid #1E293B;
    border-radius: 6px;
    color: #1E293B;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: transparent;
    cursor: pointer;
}

.hugeicons-actions .button-link:hover {
    background: #1E293B;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 41, 59, 0.1);
}

/* Special styling for delete button */
.hugeicons-actions .button-link.delete {
    border-color: #cc1818;
    color: #cc1818;
    padding: 6px;
}

.hugeicons-actions .button-link.delete:hover {
    background: #cc1818;
    color: white;
}

/* Add focus state for accessibility */
.hugeicons-actions .button-link:focus {
    outline: 2px solid #1E293B;
    outline-offset: 2px;
}

.hugeicons-actions .button-link.delete:focus {
    outline-color: #cc1818;
}

.hugeicons-set-description {
    margin: 32px 0 16px;
    color: #64748B;
    font-size: 14px;
    line-height: 1.5;
}

/* Standardize button sizes */
.hugeicons-actions .button-link,
#refresh-sets,
#save-set,
.button-primary {
    min-width: 120px;
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

/* Adjust refresh button icon alignment */
#refresh-sets .dashicons {
    margin-right: 4px;
}

/* Adjust delete button size */
.hugeicons-actions .button-link.delete {
    min-width: 40px;
    padding: 0;
}

/* WordPress notice styling */
#hugeicons-notices {
    margin: 20px 0;
}

#hugeicons-notices.hidden {
    display: none;
}

#hugeicons-notices .notice {
    margin: 0;
    display: flex;
    align-items: center;
}

#hugeicons-notices .notice p {
    margin: 0.5em 0;
    padding: 2px;
    font-size: 14px;
}

/* Button loading state styles */
#save-settings {
    position: relative;
    min-width: 100px;
}

#save-settings .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    display: none;
}

#save-settings.is-loading .button-text {
    visibility: hidden;
}

#save-settings.is-loading .spinner {
    display: inline-block;
    visibility: visible;
}

/* Add these styles for the save settings button */
#save-settings.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.button.loading {
    position: relative;
    cursor: wait;
}

.button.loading .spinner {
    visibility: visible;
    margin-left: 4px;
}

.button:disabled {
    opacity: 0.7;
    cursor: wait;
}