/* =====================================================
   Advanced Image Resizer — Enterprise UI
   ===================================================== */

/* --- Keyframes --- */

@keyframes border-pulse {
    0%, 100% { border-color: var(--color-primary); }
    50%      { border-color: var(--color-secondary); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

@keyframes progress-shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

/* --- Page wrapper --- */

.advanced-resizer-page {
    background: var(--color-bg);
}

/* --- Hero (legacy classes kept for backward compat) --- */

.tool-kicker,
.eyebrow {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field-help,
.tab-header p,
#operationSummary,
#filenamePreview {
    color: var(--color-text-medium);
}

/* --- Workspace grid --- */

.workspace-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.55fr);
    gap: 1rem;
    align-items: start;
}

/* --- Panels --- */

.upload-panel,
.settings-panel,
.result-panel,
.info-panel,
.related-tools {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
}

.upload-panel,
.settings-panel {
    overflow: hidden;
}

.panel-block,
.tab-body,
.action-bar,
.result-details,
.related-tools,
.info-panel {
    padding: 1rem;
}

.panel-block + .panel-block {
    border-top: 1px solid var(--color-border);
}

.panel-heading,
.tab-header,
.action-bar,
.result-actions,
.progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel-heading h2,
.tab-header h2,
.info-panel h2,
.related-tools h2,
.result-details h2 {
    margin: 0.15rem 0 0;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* --- Drop zone (enhanced) --- */

.drop-zone,
.preview-frame,
.crop-frame {
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.drop-zone {
    min-height: 190px;
    display: grid;
    place-items: center;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
}

.drop-zone:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.drop-zone.is-dragging {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
    animation: border-pulse 1.2s ease-in-out infinite;
}

.drop-zone.has-file {
    border-color: #10b981;
    border-style: solid;
    background: color-mix(in srgb, #10b981 6%, var(--color-bg));
}

.drop-zone p {
    margin: 0.5rem 0 0.25rem;
    color: var(--color-text);
}

.drop-zone span,
.selected-file span,
.selection-stats span,
.result-stats span {
    color: var(--color-text-medium);
    font-size: 0.84rem;
}

/* Upload icon — SVG container */
.upload-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: grid;
    place-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.drop-zone:hover .upload-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.upload-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
}

/* File-selected checkmark icon */
.file-check-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #34d399);
    display: grid;
    place-items: center;
}

.file-check-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #ffffff;
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
}

.selected-file p {
    margin: 0;
    max-width: 15rem;
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #10b981;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* --- Preview --- */

.preview-frame {
    min-height: 220px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0.75rem;
}

.preview-frame img,
.result-preview img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

/* --- Batch file list --- */

.batch-file-list,
.batch-output-list {
    max-height: 180px;
    overflow: auto;
    display: grid;
    gap: 0.4rem;
}

.batch-file-list div,
.batch-output-list div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    color: var(--color-text);
    font-size: 0.85rem;
}

/* --- Selection stats --- */

.selection-stats,
.result-stats,
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.selection-stats strong,
.result-stats strong {
    display: block;
    color: var(--color-text);
}

/* --- Mode bar & tab nav (enhanced) --- */

.mode-bar {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem;
    overflow-x: auto;
}

.tab-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0.75rem 0;
    overflow-x: auto;
}

/* --- Buttons — shared base --- */

.mode-button,
.tab-btn,
.ghost-button,
.preset-button,
.crop-preset-btn,
.primary-action,
.secondary-action {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Mode button — pill style */
.mode-button {
    border-radius: 999px;
    padding: 0.65rem 1.3rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mode-button:hover:not(.active) {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    transform: translateY(-1px);
}

.mode-button.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

/* Tab button — underline indicator style */
.tab-btn {
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 0.7rem 1.1rem 0.8rem;
    font-size: 0.9rem;
    position: relative;
    background: transparent;
}

.tab-btn::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background 0.2s ease;
}

.tab-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    color: var(--color-primary);
}

.tab-btn.active {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    border: none;
    font-weight: 800;
}

.tab-btn.active::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Preset & crop-preset hover */
.preset-button,
.crop-preset-btn {
    border-radius: 10px;
    font-size: 0.85rem;
}

.preset-button:hover,
.crop-preset-btn:hover:not(.active) {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    transform: translateY(-1px);
}

.crop-preset-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* Ghost button */
.ghost-button {
    border-radius: 10px;
    font-size: 0.85rem;
}

.ghost-button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    color: var(--color-primary);
    transform: translateY(-1px);
}

/* --- Primary action button (enterprise gradient) --- */

.primary-action {
    position: relative;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.85rem 1.8rem;
    background-image: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3), 0 2px 8px rgba(80, 227, 194, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.primary-action::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(80, 227, 194, 0.3), rgba(37, 99, 235, 0.3));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.25s ease;
}

.primary-action:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.4), 0 6px 16px rgba(80, 227, 194, 0.25);
}

.primary-action:hover:not(:disabled)::before {
    opacity: 1;
}

.primary-action:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.primary-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Processing spinner on icon */
#processIcon {
    display: none;
}

#processIcon.is-spinning {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spinner 0.65s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* --- Tab body --- */

.tab-body {
    min-height: 520px;
}

/* --- Controls --- */

.control-group,
.tab-content {
    display: grid;
    gap: 1rem;
}

.tab-header {
    align-items: flex-start;
}

/* --- Apply-switch — toggle pill style --- */

.apply-switch {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    padding: 0.55rem 0.7rem;
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.apply-switch input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.apply-switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: calc(1.35rem - 5px);
    height: calc(1.35rem - 5px);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease;
}

.apply-switch input[type="checkbox"]:checked {
    background: #10b981;
}

.apply-switch input[type="checkbox"]:checked::after {
    transform: translateX(calc(2.5rem - 1.35rem));
}

.apply-switch:has(input:checked) {
    border-color: rgba(16, 185, 129, 0.35);
    background: color-mix(in srgb, #10b981 6%, var(--color-bg));
}

/* --- Check-card --- */

.check-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    padding: 0.7rem;
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.check-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}

.check-card:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}

.check-card input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
}

/* --- Segmented grid radio labels (enhanced selected state) --- */

.segmented-grid label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    padding: 0.7rem;
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.segmented-grid label:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}

.segmented-grid label:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
    color: var(--color-primary);
    font-weight: 800;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* --- Grid layouts --- */

.segmented-grid,
.preset-grid,
.dimension-grid,
.option-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.segmented-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.segmented-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented-grid input {
    accent-color: var(--color-primary);
}

.preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preset-grid.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dimension-grid label,
.option-row label:not(.check-card),
.control-group > label {
    display: grid;
    gap: 0.4rem;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.dimension-grid input,
.dimension-grid select,
.option-row select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0.65rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dimension-grid input:focus,
.dimension-grid select:focus,
.option-row select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.wide {
    grid-column: 1 / -1;
}

/* --- Custom range sliders --- */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: 2px solid var(--color-surface);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: 2px solid var(--color-surface);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
}

/* --- Crop frame --- */

.crop-frame {
    height: 330px;
    position: relative;
    overflow: hidden;
}

#cropperImage {
    display: none;
    max-width: 100%;
}

#cropperPlaceholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-text-medium);
    text-align: center;
}

/* --- Batch progress --- */

.batch-progress {
    padding: 0 1rem 1rem;
}

.progress-track {
    height: 0.55rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

#progressBar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    background-size: 200% 100%;
    animation: progress-shimmer 1.8s ease-in-out infinite;
    transition: width 0.25s ease;
}

/* --- Action bar (enhanced) --- */

.action-bar {
    border-top: 1px solid var(--color-border);
}

#filenamePreview {
    font-size: 0.85rem;
}

#filenamePreview span {
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    color: var(--color-primary);
}

#operationSummary {
    font-size: 0.85rem;
    line-height: 1.55;
}

/* --- Results section (enhanced) --- */

.result-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 1rem;
    margin-top: 1rem;
    overflow: hidden;
    animation: fade-in-up 0.4s ease-out;
}

.result-panel.batch {
    display: block;
}

.result-preview {
    display: grid;
    place-items: center;
    min-height: 320px;
    background: var(--color-bg);
}

.result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 999px;
    color: #10b981;
    background: color-mix(in srgb, #10b981 8%, var(--color-surface));
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.result-badge::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #10b981;
    animation: pulse-dot 2s ease-in-out infinite;
}

.result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
    gap: 0;
}

.result-stats > div {
    padding: 0.6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.result-stats > div:nth-last-child(-n+2) {
    border-bottom: none;
}

.result-stats > div:nth-child(odd) {
    padding-right: 0.75rem;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.result-stats > div:nth-child(even) {
    padding-left: 0.75rem;
}

.result-actions {
    gap: 0.5rem;
}

/* --- Secondary action button --- */

.secondary-action {
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
}

.secondary-action:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.danger {
    border-color: #ef4444;
    color: #ef4444;
}

.danger:hover {
    background: color-mix(in srgb, #ef4444 6%, var(--color-bg));
}

/* --- Content grid & info panels --- */

.content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.info-panel {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--color-primary), var(--color-secondary)) 1;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.info-panel h2 {
    font-size: 1.1rem;
}

.info-panel p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text-medium);
}

.info-panel:hover {
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.12);
    transform: translateY(-2px);
}

/* --- Related tools --- */

.related-tools {
    margin-top: 1.5rem;
}

.related-tools h2 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
}

.related-tools div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.related-tools .pill-button {
    font-size: 0.875rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

/* --- Utility --- */

.hidden {
    display: none !important;
}

/* --- Mobile responsiveness --- */

@media (max-width: 920px) {
    .tool-hero,
    .workspace-shell,
    .result-panel,
    .content-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hero-metrics {
        justify-content: flex-start;
    }

    .tab-body {
        min-height: auto;
    }

    .mode-bar,
    .tab-nav {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mode-bar::-webkit-scrollbar,
    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    .segmented-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .segmented-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preset-grid,
    .preset-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dimension-grid,
    .option-row,
    .selection-stats {
        grid-template-columns: 1fr;
    }

    .result-stats {
        grid-template-columns: 1fr;
    }

    .result-stats > div {
        border-right: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}