/* ═══════════════════════════════════════════════════════
   SongShift AI — 2-Step Order Wizard
   Design system: dark navy + electric cyan/blue
   Matches SpeakShift.ai brand (--cyan #00d4ff, --gradient)
   ═══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Lora:ital,wght@0,600;1,600&display=swap');

/* ── Design tokens (scoped to wizard) ── */
.ss-wizard-wrap {
    --ss-bg:        #07090f;
    --ss-surface:   #0d1121;
    --ss-surface-2: #111827;
    --ss-border:    rgba(0,212,255,.12);
    --ss-border-2:  rgba(255,255,255,.07);
    --ss-cyan:      #00d4ff;
    --ss-blue:      #0077ff;
    --ss-grad:      linear-gradient(135deg, #0077ff 0%, #00d4ff 100%);
    --ss-grad-btn:  linear-gradient(135deg, #0077ff 0%, #00c4f0 100%);
    --ss-text:      #f0f4ff;
    --ss-text-2:    rgba(240,244,255,.65);
    --ss-text-3:    rgba(240,244,255,.35);
    --ss-error:     #ff4d6d;
    --ss-success:   #00e5a0;
    --ss-radius:    14px;
    --ss-radius-sm: 8px;
    --ss-radius-pill: 999px;
    --ss-shadow:    0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.06);
    --ss-glow:      0 0 32px rgba(0,119,255,.25);
    --ss-transition: 220ms cubic-bezier(.4,0,.2,1);

    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: var(--ss-text);
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ═══════════════════════════════════════════
   WIZARD SHELL
═══════════════════════════════════════════ */
.ss-wizard {
    background: var(--ss-surface);
    border-radius: 24px;
    box-shadow: var(--ss-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    position: relative;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.ss-wizard__header {
    background: linear-gradient(160deg, #060c1e 0%, #0a1535 55%, #07162d 100%);
    padding: 44px 40px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ss-border);
}

/* Glowing orb background effects */
.ss-wizard__header::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 360px; height: 220px;
    background: radial-gradient(ellipse, rgba(0,119,255,.22) 0%, transparent 70%);
    pointer-events: none;
}
.ss-wizard__header::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Floating music notes */
.ss-wizard__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ss-float {
    position: absolute;
    font-size: 18px;
    color: rgba(0,212,255,.18);
    animation: ss-float-up 8s ease-in-out infinite;
    user-select: none;
}
.ss-float--1 { left: 8%;  top: 60%; animation-delay: 0s;    animation-duration: 9s; }
.ss-float--2 { left: 20%; top: 30%; animation-delay: 2s;    animation-duration: 7s; }
.ss-float--3 { right: 15%;top: 50%; animation-delay: 4s;    animation-duration: 8s; }
.ss-float--4 { right: 30%;top: 20%; animation-delay: 6s;    animation-duration: 10s; }

@keyframes ss-float-up {
    0%,100% { transform: translateY(0) rotate(0deg);   opacity: .18; }
    50%      { transform: translateY(-24px) rotate(8deg); opacity: .35; }
}

.ss-wizard__icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    display: inline-block;
    animation: ss-bob 3s ease-in-out infinite;
}
@keyframes ss-bob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.ss-wizard__title {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 600;
    font-style: italic;
    color: #fff;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
    letter-spacing: -.3px;
}

.ss-wizard__subtitle {
    font-size: 14px;
    color: var(--ss-text-2);
    margin: 0;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin-inline: auto;
}

/* Header trust strip — 2 versions callout */
.ss-header-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}
.ss-header-trust span {
    font-size: 12px;
    font-weight: 600;
    color: rgba(240,244,255,.55);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
/* Highlight the "2 Song Versions" badge */
.ss-header-trust span:nth-child(3) {
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 99px;
    padding: 3px 11px;
    color: var(--ss-cyan);
    font-weight: 700;
}

/* ═══════════════════════════════════════════
   PROGRESS INDICATOR
═══════════════════════════════════════════ */
.ss-progress {
    padding: 22px 40px 0;
    background: var(--ss-surface);
    position: relative;
}

.ss-progress__track {
    height: 3px;
    background: var(--ss-border-2);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 14px;
}

.ss-progress__fill {
    height: 100%;
    width: 0%;
    background: var(--ss-grad);
    border-radius: 99px;
    transition: width 380ms cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 8px rgba(0,212,255,.5);
}

.ss-progress__steps {
    display: flex;
    gap: 0;
    justify-content: space-between;
}

.ss-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.ss-progress__bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--ss-border-2);
    color: var(--ss-text-3);
    background: var(--ss-surface-2);
    transition: all var(--ss-transition);
}

.ss-progress__lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--ss-text-3);
    text-transform: uppercase;
    letter-spacing: .6px;
    transition: color var(--ss-transition);
    white-space: nowrap;
}

/* Active step */
.ss-progress__step--active .ss-progress__bubble {
    border-color: var(--ss-cyan);
    color: var(--ss-cyan);
    background: rgba(0,212,255,.1);
    box-shadow: 0 0 0 4px rgba(0,212,255,.1);
}
.ss-progress__step--active .ss-progress__lbl {
    color: var(--ss-cyan);
}

/* Done step */
.ss-progress__step--done .ss-progress__bubble {
    border-color: var(--ss-success);
    background: rgba(0,229,160,.1);
    color: var(--ss-success);
}
.ss-progress__step--done .ss-progress__bubble::after {
    content: '✓';
    font-size: 13px;
}
.ss-progress__step--done .ss-progress__bubble { font-size: 0; } /* hide number */
.ss-progress__step--done .ss-progress__lbl { color: var(--ss-success); }

/* ═══════════════════════════════════════════
   FORM BODY
═══════════════════════════════════════════ */
.ss-form {
    position: relative;
    overflow: visible; /* must not be hidden — clips child expand animations */
}

/* ── Fieldset / step ── */
.ss-step {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.ss-step__inner {
    padding: 28px 40px 36px;
}

.ss-step--hidden {
    display: none;
}

/* Step eyebrow + heading */
.ss-step__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ss-cyan);
    margin: 0 0 6px;
    opacity: .7;
}
.ss-step__heading {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 600;
    color: var(--ss-text);
    margin: 0 0 28px;
    line-height: 1.3;
}

/* ─── Slide transition animations ─── */
@keyframes ss-slide-in-right {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes ss-slide-in-left {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ss-slide-out-left {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-40px);opacity: 0; }
}
@keyframes ss-slide-out-right {
    from { transform: translateX(0);   opacity: 1; }
    to   { transform: translateX(40px);opacity: 0; }
}

.ss-step--enter-from-right { animation: ss-slide-in-right 320ms cubic-bezier(.2,0,.2,1) both; }
.ss-step--enter-from-left  { animation: ss-slide-in-left  320ms cubic-bezier(.2,0,.2,1) both; }
.ss-step--exit-left        { animation: ss-slide-out-left  200ms cubic-bezier(.4,0,1,1) both; }
.ss-step--exit-right       { animation: ss-slide-out-right 200ms cubic-bezier(.4,0,1,1) both; }

/* ═══════════════════════════════════════════
   FIELDS
═══════════════════════════════════════════ */
.ss-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.ss-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ss-text-2);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ss-req  { color: var(--ss-cyan); font-size: 14px; line-height: 1; }
.ss-optional {
    font-size: 10px;
    font-weight: 500;
    color: var(--ss-text-3);
    text-transform: none;
    letter-spacing: 0;
}

/* Input with icon */
.ss-input-wrap {
    position: relative;
}
.ss-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    line-height: 1;
}
.ss-input-wrap .ss-input {
    padding-left: 44px;
}

/* Base input / textarea / select */
.ss-input {
    width: 100%;
    padding: 13px 16px;
    background: var(--ss-surface-2);
    border: 1.5px solid var(--ss-border-2);
    border-radius: var(--ss-radius-sm);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: var(--ss-text);
    outline: none;
    transition: border-color var(--ss-transition), box-shadow var(--ss-transition), background var(--ss-transition);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.ss-input::placeholder { color: var(--ss-text-3); }

.ss-input:focus {
    border-color: var(--ss-cyan);
    background: rgba(0,212,255,.04);
    box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}
.ss-input--error,
.ss-input--error:focus {
    border-color: var(--ss-error) !important;
    box-shadow: 0 0 0 3px rgba(255,77,109,.12) !important;
}

.ss-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.65;
    padding-top: 13px;
}

.ss-hint {
    font-size: 12px;
    color: var(--ss-text-3);
    margin-top: 6px;
}

/* Inline field errors */
.ss-field-error {
    font-size: 12px;
    color: var(--ss-error);
    margin-top: 5px;
    font-weight: 500;
    display: none;
}
.ss-field-error:not(:empty) { display: block; }

/* Character counter */
#ss-char-count { color: var(--ss-cyan); font-weight: 600; transition: color .2s; }
#ss-char-count.ss-char--warn { color: var(--ss-error); }

/* ═══════════════════════════════════════════
   GENRE PILL GRID
═══════════════════════════════════════════ */
.ss-genre-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 480px) {
    .ss-genre-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 479px) {
    .ss-genre-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.ss-gpill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px 13px;
    background: var(--ss-surface-2);
    border: 1.5px solid var(--ss-border-2);
    border-radius: var(--ss-radius-sm);
    cursor: pointer;
    transition: border-color var(--ss-transition), background var(--ss-transition),
                transform var(--ss-transition), box-shadow var(--ss-transition);
    font-family: 'Space Grotesk', sans-serif;
    color: var(--ss-text-2);
    min-height: 72px;
    justify-content: center;
}
.ss-gpill:hover {
    border-color: rgba(0,212,255,.35);
    background: rgba(0,212,255,.05);
    transform: translateY(-2px);
}
.ss-gpill__em   { font-size: 24px; line-height: 1; display: block; }
.ss-gpill__name { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; text-align: center; line-height: 1.3; }

/* Selected state */
.ss-gpill--active {
    border-color: var(--ss-cyan) !important;
    background: rgba(0,212,255,.09) !important;
    color: var(--ss-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.12), 0 4px 16px rgba(0,212,255,.15);
    transform: translateY(-2px) !important;
}

/* ── Custom genre "Other" expand field ── */
#ss-custom-genre-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 260ms cubic-bezier(.4,0,.2,1),
                opacity    200ms ease,
                margin-top 260ms ease;
    margin-top: 0 !important;
    /* override the inline display:none — we control visibility via max-height */
    display: block !important;
}
#ss-custom-genre-wrap.ss-custom-open {
    max-height: 120px;
    opacity: 1;
    margin-top: 14px !important;
}

/* ═══════════════════════════════════════════
   RECAP CHIP (step 2 summary of step 1)
═══════════════════════════════════════════ */
.ss-recap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.15);
    border-radius: var(--ss-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
}
.ss-recap__pill {
    background: rgba(0,212,255,.12);
    color: var(--ss-cyan);
    border-radius: var(--ss-radius-pill);
    padding: 3px 12px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
}
.ss-recap__for {
    color: var(--ss-text-2);
}
.ss-recap__for strong {
    color: var(--ss-text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   ACCOUNT CREATION SECTION
═══════════════════════════════════════════ */
.ss-account-section {
    margin-bottom: 22px;
    padding: 16px 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--ss-border-2);
    border-radius: var(--ss-radius-sm);
}

.ss-checkbox-label {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.ss-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ss-checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--ss-border-2);
    background: var(--ss-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--ss-transition), background var(--ss-transition);
}
.ss-checkbox-box svg { opacity: 0; transition: opacity .15s; }

.ss-checkbox-input:checked + .ss-checkbox-box {
    background: var(--ss-blue);
    border-color: var(--ss-blue);
}
.ss-checkbox-input:checked + .ss-checkbox-box svg { opacity: 1; }

.ss-checkbox-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-text-2);
}

.ss-account-pw {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-border-2);
}

/* ═══════════════════════════════════════════
   GLOBAL ERROR BOX
═══════════════════════════════════════════ */
.ss-error-box {
    background: rgba(255,77,109,.08);
    border: 1px solid rgba(255,77,109,.3);
    border-left: 3px solid var(--ss-error);
    color: #ffb3c1;
    padding: 11px 14px;
    border-radius: var(--ss-radius-sm);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 18px;
}

/* ═══════════════════════════════════════════
   NAVIGATION BUTTONS
═══════════════════════════════════════════ */
.ss-step__nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.ss-step__nav--two {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Base button */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--ss-radius-pill);
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform var(--ss-transition), box-shadow var(--ss-transition),
                opacity var(--ss-transition), background var(--ss-transition);
    outline: none;
    position: relative;
    overflow: hidden;
}

/* Next button */
.ss-btn--next {
    background: var(--ss-grad-btn);
    color: #fff;
    font-size: 15px;
    padding: 13px 32px;
    box-shadow: 0 4px 18px rgba(0,119,255,.35);
    min-width: 140px;
}
.ss-btn--next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,119,255,.45);
}
.ss-btn--next:active { transform: translateY(0); }

/* Back button */
.ss-btn--back {
    background: transparent;
    color: var(--ss-text-2);
    font-size: 14px;
    padding: 13px 20px;
    border: 1.5px solid var(--ss-border-2);
}
.ss-btn--back:hover {
    border-color: rgba(255,255,255,.2);
    color: var(--ss-text);
    background: rgba(255,255,255,.04);
}

/* Submit button */
.ss-btn--submit {
    background: var(--ss-grad-btn);
    color: #fff;
    font-size: 15px;
    padding: 15px 32px;
    box-shadow: 0 4px 24px rgba(0,119,255,.4);
    flex: 1;
    max-width: 340px;
}
.ss-btn--submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,119,255,.5);
}
.ss-btn--submit:active:not(:disabled) { transform: translateY(0); }
.ss-btn--submit:disabled { opacity: .65; cursor: not-allowed; }

/* Shimmer on submit hover */
.ss-btn--submit::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: left .5s ease;
    pointer-events: none;
}
.ss-btn--submit:hover::before { left: 140%; }

/* Spinner */
.ss-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ss-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════ */
.ss-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--ss-text-3);
    font-weight: 500;
}
.ss-trust span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 560px) {
    .ss-wizard-wrap { padding: 0 12px 32px; }

    .ss-wizard__header    { padding: 32px 24px 28px; }
    .ss-wizard__title     { font-size: 20px; }
    .ss-progress          { padding: 16px 24px 0; }
    .ss-step__inner       { padding: 22px 20px 28px; }

    .ss-btn--submit {
        font-size: 14px;
        padding: 14px 20px;
    }
    .ss-step__nav--two    { flex-direction: column-reverse; gap: 10px; }
    .ss-btn--back         { width: 100%; justify-content: center; }
    .ss-btn--submit       { max-width: 100%; width: 100%; }

    .ss-trust { gap: 5px 12px; }
}

@media (max-width: 400px) {
    .ss-wizard__icon { font-size: 36px; }
    .ss-wizard__title { font-size: 18px; }
    .ss-gpill__em { font-size: 20px; }
    .ss-header-trust { gap: 5px 10px; }
    .ss-header-trust span { font-size: 11px; }
}

/* ═══════════════════════════════════════════
   THEME INTEGRATION HELPERS
   Keeps the wizard looking correct inside the
   SongShift dark theme's .simple-page context.
═══════════════════════════════════════════ */
.songshift-wrapper .ss-wizard-wrap,
.page-order .ss-wizard-wrap {
    margin-top: 0;
    padding-top: 0;
}

/* Override theme's .songshift-* overrides that
   targeted the old form HTML — these ensure the
   new wizard classes are unaffected by them. */
.ss-wizard-wrap .ss-input,
.ss-wizard-wrap .ss-textarea {
    background: var(--ss-surface-2) !important;
    border-color: var(--ss-border-2) !important;
    color: var(--ss-text) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
.ss-wizard-wrap .ss-input:focus,
.ss-wizard-wrap .ss-textarea:focus {
    border-color: var(--ss-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.12) !important;
    background: rgba(0,212,255,.04) !important;
}
.ss-wizard-wrap .ss-label {
    color: var(--ss-text-2) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
.ss-wizard-wrap .ss-btn--submit {
    background: var(--ss-grad-btn) !important;
    border-radius: var(--ss-radius-pill) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}


/* ── SongShift order form select dropdowns (genre, language, etc.) ── */
.ss-select { width: 100%; }

/* Dark-theme select element — text must be white on the dark bg */
.songshift-form select,
.songshift-order-form select,
select.songshift-select,
.ss-wizard-wrap select,
.ss-wizard-wrap .ss-input[type="select"],
.ss-wizard-wrap .ss-select {
    color: #ffffff !important;
    background-color: #101827 !important;
    border: 2px solid rgba(0, 212, 255, 0.35) !important;
}

/* Browser-rendered option list: force light background so text is readable */
.ss-select option,
.songshift-form select option,
.songshift-order-form select option {
    color: #ffffff !important;
    background: #101827 !important;
}

/* Highlight selected option in the dropdown list */
.ss-select option:checked,
.ss-select option:hover,
.ss-select option:focus,
.songshift-form select option:checked,
.songshift-order-form select option:checked {
    color: #000000 !important;
    background: #8fb0d4 !important;
}
.ss-custom-language-wrap[hidden] { display:none !important; }
.ss-textarea--sm { min-height:88px; }
