/* ============================================================
   KS_NEW.CSS - KidSitter Design System
   Compatible with Bootstrap 3.3.2 / jQuery 2.1.3
   ============================================================ */


/* ============================================================
   1. BASE / TYPOGRAPHY
   ============================================================ */

/* Override Bootstrap 3's html { font-size: 10px } so that
   rem-based measurements use the standard 16px base. */
html {
    font-size: 16px;
}

.ks-body {
    font-family: 'Open Sans', sans-serif;
    color: #4f5b67;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ks-heading,
.ks-h1, .ks-h2, .ks-h3, .ks-h4 {
    font-family: 'Montserrat', sans-serif;
}


/* ============================================================
   2. NAVIGATION
   ============================================================ */
.ks-nav {
    background-color: #ffffff;
    border-bottom: 1px solid #dee4e8;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 50;
}

.ks-nav__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.ks-nav__logo img {
    height: 50px;
    width: auto;
}

.ks-nav__links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.875rem;
}

.ks-nav__links > * {
    margin-left: 1.5rem;
}

.ks-nav__links > *:first-child {
    margin-left: 0;
}

.ks-nav__link {
    font-weight: 500;
    color: #4f5b67;
    text-decoration: none;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.ks-nav__link:hover {
    color: #33b5a6;
    text-decoration: none;
}

.ks-nav__link--accent {
    color: #e88a3c;
}

.ks-nav__link--accent:hover {
    color: #d67a2e;
}

.ks-nav__link--active {
    color: #33b5a6;
}

@media (max-width: 767px) {
    .ks-nav__links {
        display: none;
    }
    .ks-nav__logo img {
        height: 40px;
    }
}


/* ============================================================
   3. BUTTONS
   ============================================================ */
.ks-btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.5;
    font-family: inherit;
}

.ks-btn:focus {
    outline: 2px solid #33b5a6;
    outline-offset: 2px;
}

.ks-btn--primary {
    background-color: #33b5a6;
    color: #ffffff;
    border-color: #33b5a6;
}

.ks-btn--primary:hover {
    background-color: #2a9a8d;
    color: #ffffff;
    text-decoration: none;
}

.ks-btn--primary:disabled,
.ks-btn--primary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ks-btn--accent {
    background-color: #e88a3c;
    color: #ffffff;
    border-color: #e88a3c;
}

.ks-btn--accent:hover {
    background-color: #d67a2e;
    color: #ffffff;
    text-decoration: none;
}

.ks-btn--outline {
    background-color: transparent;
    color: #4f5b67;
    border-color: #dee4e8;
}

.ks-btn--outline:hover {
    background-color: #edf1f4;
    text-decoration: none;
}

.ks-btn--ghost {
    background-color: transparent;
    color: #4f5b67;
    border-color: transparent;
}

.ks-btn--ghost:hover {
    background-color: #edf1f4;
    text-decoration: none;
}

.ks-btn--destructive {
    background-color: #ef4444;
    color: #ffffff;
}

.ks-btn--warning {
    background-color: #f59e0b;
    color: #ffffff;
}

.ks-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.ks-btn--lg {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
}

.ks-btn--icon {
    padding: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
}

.ks-btn--full {
    width: 100%;
}

.ks-btn i, .ks-btn svg {
    margin-right: 0.5rem;
}


/* ============================================================
   4. CARDS
   ============================================================ */
.ks-card {
    background-color: #ffffff;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dee4e8;
    -webkit-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    -moz-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
}

.ks-card-elevated {
    background-color: #ffffff;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dee4e8;
    -webkit-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    -moz-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.ks-card-elevated:hover {
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01);
    border-color: rgba(51, 181, 166, 0.3);
}


/* ============================================================
   5. BADGES
   ============================================================ */
.ks-badge {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.125rem 0.625rem;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
}

.ks-badge--default {
    background-color: #33b5a6;
    color: #ffffff;
}

.ks-badge--secondary {
    background-color: #f0f4f6;
    color: #4f5b67;
}

.ks-badge--destructive {
    background-color: #ef4444;
    color: #ffffff;
}

.ks-badge--outline {
    background-color: transparent;
    color: #4f5b67;
    border-color: #dee4e8;
}

.ks-badge--active {
    background-color: #22c55e;
    color: #ffffff;
}

.ks-badge--expired {
    background-color: #ef4444;
    color: #ffffff;
}

.ks-badge--filled {
    background-color: #f0f4f6;
    color: #4f5b67;
}

.ks-badge--draft {
    background-color: transparent;
    color: #4f5b67;
    border-color: #dee4e8;
}

.ks-badge--cancelled {
    background-color: transparent;
    color: #4f5b67;
    border-color: #dee4e8;
}

.ks-badge--awaiting-approval {
    background-color: #f59e0b;
    color: #ffffff;
}

.ks-badge--paused {
    background-color: #f0f4f6;
    color: #4f5b67;
}

.ks-badge--published {
    background-color: transparent;
    color: #4f5b67;
    border-color: #dee4e8;
}


/* ============================================================
   6. FORM ELEMENTS
   ============================================================ */
.ks-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4f5b67;
    display: block;
    margin-bottom: 0.5rem;
}

.ks-label .required {
    color: #ef4444;
}

.ks-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4f5b67;
    background-color: #ffffff;
    border: 1px solid #dee4e8;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
    -o-transition: border-color 0.2s, box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.ks-input:focus {
    border-color: #33b5a6;
    outline: none;
    -webkit-box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
    box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
}

.ks-input::-webkit-input-placeholder { color: #808d99; }
.ks-input:-moz-placeholder { color: #808d99; }
.ks-input::-moz-placeholder { color: #808d99; }
.ks-input:-ms-input-placeholder { color: #808d99; }

.ks-input--lg {
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
    height: 3rem;
}

.ks-input--icon {
    padding-left: 2.5rem;
}

.ks-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4f5b67;
    background-color: #ffffff;
    border: 1px solid #dee4e8;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    resize: none;
    min-height: 80px;
    font-family: inherit;
}

.ks-textarea:focus {
    border-color: #33b5a6;
    outline: none;
    -webkit-box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
    -moz-box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
    box-shadow: 0 0 0 2px rgba(51, 181, 166, 0.2);
}

.ks-input-group {
    position: relative;
}

.ks-input-group__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #808d99;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.ks-help-text {
    font-size: 0.75rem;
    color: #808d99;
    margin-top: 0.25rem;
}


/* ============================================================
   7. SKILL / CARE TYPE TAGS
   ============================================================ */
.ks-tag {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.25rem 0.625rem;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.ks-tag--primary {
    background-color: rgba(51, 181, 166, 0.1);
    color: #33b5a6;
    border: 1px solid rgba(51, 181, 166, 0.2);
}

.ks-tag--primary:hover {
    background-color: #33b5a6;
    color: #ffffff;
}

.ks-tag--accent {
    background-color: rgba(232, 138, 60, 0.1);
    color: #e88a3c;
}

/* Care type specific badge colors */
.ks-tag--babysitter    { background-color: #fce7f3; color: #db2777; }
.ks-tag--nanny         { background-color: rgba(51, 181, 166, 0.1); color: #33b5a6; }
.ks-tag--tutor         { background-color: #dbeafe; color: #2563eb; }
.ks-tag--au-pair       { background-color: #f3e8ff; color: #9333ea; }
.ks-tag--childminder   { background-color: #fef3c7; color: #d97706; }
.ks-tag--maternity     { background-color: #ffe4e6; color: #e11d48; }
.ks-tag--helper        { background-color: #d1fae5; color: #059669; }
.ks-tag--housekeeper   { background-color: #cffafe; color: #0891b2; }
.ks-tag--elder-care    { background-color: #e0e7ff; color: #4f46e5; }


/* ============================================================
   8. STAR RATING
   ============================================================ */
.ks-stars {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.ks-stars .ks-star {
    margin-right: 0.125rem;
}

.ks-star {
    width: 0.75rem;
    height: 0.75rem;
}

.ks-star--filled {
    color: #33b5a6;
}

.ks-star--empty {
    color: #edf1f4;
}

.ks-star--lg {
    width: 1rem;
    height: 1rem;
}


/* ============================================================
   9. SITTER CARD (Search / Applicants)
   ============================================================ */
.ks-sitter-card {
    position: relative;
    background-color: #ffffff;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dee4e8;
    -webkit-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    -moz-box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    box-shadow: 0 4px 12px rgba(79, 91, 103, 0.1);
    padding: 1rem 1.25rem;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
}

.ks-sitter-card:hover {
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.005);
    -ms-transform: scale(1.005);
    transform: scale(1.005);
    border-color: rgba(51, 181, 166, 0.3);
}

.ks-sitter-card__inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.ks-sitter-card__inner > * {
    margin-left: 1rem;
}

.ks-sitter-card__inner > *:first-child {
    margin-left: 0;
}

.ks-sitter-card__photo {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ks-sitter-card__photo img {
    width: 88px;
    height: 106px;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    -o-object-fit: cover;
    object-fit: cover;
    border: 2px solid #dee4e8;
    -webkit-transition: border-color 0.3s;
    -o-transition: border-color 0.3s;
    transition: border-color 0.3s;
}

.ks-sitter-card:hover .ks-sitter-card__photo img {
    border-color: rgba(51, 181, 166, 0.5);
}

.ks-sitter-card__fav-btn {
    position: absolute;
    bottom: 0.375rem;
    right: 0.375rem;
    z-index: 10;
    padding: 0.375rem;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-transform 0.2s;
    -o-transition: -o-transform 0.2s;
    transition: transform 0.2s;
}

.ks-sitter-card__fav-btn:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.ks-sitter-card__content {
    margin-left: 0.75rem;
}

/* Row 1: Name + Stars + Rate */
.ks-sitter-card__row1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ks-sitter-card__name-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 0.5rem;
}

.ks-sitter-card__name-wrap .ks-sitter-card__name {
    margin-right: 0.375rem;
}

.ks-sitter-card__name-wrap .ks-sitter-card__verified {
    margin-right: 0;
}

.ks-sitter-card__stars-rate {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ks-sitter-card__stars-rate .ks-stars {
    margin-right: 0.25rem;
}

.ks-sitter-card__stars-rate .ks-sitter-card__rate {
    margin-left: 0.75rem;
}

/* Tags row */
.ks-sitter-card__tags {
    margin-top: 0.375rem;
}

.ks-sitter-card__tags .ks-tag {
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
}

.ks-sitter-card__tags .ks-tag i {
    margin-right: 0.25rem;
    font-size: 0.625rem;
}

/* Meta row */
.ks-sitter-card__meta {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #8B9197;
}

.ks-sitter-card__meta span {
    margin-right: 0.75rem;
}

.ks-sitter-card__meta i {
    margin-right: 0.25rem;
}

/* Mobile section (outside inner) */
.ks-sitter-card__mobile-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(222, 228, 232, 0.5);
}

.ks-sitter-card__mobile-section .ks-sitter-card__info-grid {
    margin-bottom: 0.75rem;
}

.ks-sitter-card__mobile-section .ks-sitter-card__reference {
    margin-bottom: 0.75rem;
}

.ks-sitter-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e88a3c;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}

.ks-sitter-card__name:hover {
    color: #33b5a6;
    text-decoration: none;
}

.ks-sitter-card__verified {
    width: 1.25rem;
    height: 1.25rem;
    color: #33b5a6;
}

.ks-sitter-card__occupation {
    font-size: 1rem;
    color: #8B9197;
}

.ks-sitter-card__rate {
    font-size: 1.125rem;
    font-weight: 700;
    color: #33b5a6;
}

.ks-sitter-card__rate-unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: #8B9197;
}

/* Info grid - use floats instead of CSS Grid for BS3 compatibility */
.ks-sitter-card__info-grid {
    margin: 0.75rem 0;
    font-size: 0.75rem;
    overflow: hidden; /* clearfix */
}

.ks-sitter-card__info-item {
    float: left;
    width: 50%;
    padding-right: 1rem;
    margin-bottom: 0.375rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #8B9197;
}

.ks-sitter-card__info-item i {
    width: 0.875rem;
    margin-right: 0.375rem;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ks-sitter-card__info-item--full {
    width: 100%;
}

.ks-sitter-card__reference {
    position: relative;
    background: #edf1f4;
    background: -webkit-linear-gradient(315deg, #edf1f4 0%, rgba(237, 241, 244, 0.3) 100%);
    background: -o-linear-gradient(315deg, #edf1f4 0%, rgba(237, 241, 244, 0.3) 100%);
    background: linear-gradient(135deg, #edf1f4 0%, rgba(237, 241, 244, 0.3) 100%);
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(222, 228, 232, 0.5);
}

.ks-sitter-card__reference-text {
    font-size: 0.875rem;
    color: #8B9197;
    font-style: italic;
    padding-left: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ks-sitter-card__reference-author {
    font-size: 0.75rem;
    color: rgba(139, 145, 151, 0.7);
    margin-top: 0.375rem;
    padding-left: 1rem;
}

.ks-sitter-card__sidebar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 16rem;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ks-sitter-card__sidebar > * {
    margin-top: 0.75rem;
}

.ks-sitter-card__sidebar > *:first-child {
    margin-top: 0;
}

@media (min-width: 768px) {
    .ks-sitter-card__photo img {
        width: 8rem;
        height: 8rem;
    }
}

@media (max-width: 767px) {
    .ks-sitter-card {
        padding: 0.875rem;
    }
    
    /* Keep flexbox for photo + info side by side */
    .ks-sitter-card__inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    
    .ks-sitter-card__inner > * {
        margin-left: 0;
    }
    
    /* Photo smaller on mobile */
    .ks-sitter-card__photo {
        margin-right: 0.5rem;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
    
    .ks-sitter-card__photo img {
        width: 72px;
        height: 88px;
    }
    
    /* Fav button repositioned */
    .ks-sitter-card__fav-btn {
        bottom: auto;
        top: 0.25rem;
        left: 0.25rem;
        right: auto;
        padding: 0.25rem;
    }
    
    /* Content area */
    .ks-sitter-card__content {
        margin-left: 0;
        min-width: 0;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    /* Row 1 wraps on mobile */
    .ks-sitter-card__row1 {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    /* Name smaller */
    .ks-sitter-card__name {
        font-size: 1.125rem;
    }
    
    /* Verified icon smaller */
    .ks-sitter-card__verified {
        width: 1rem;
        height: 1rem;
        font-size: 0.875rem;
    }
    
    /* Stars + rate on same line */
    .ks-sitter-card__stars-rate {
        width: 100%;
        margin-top: 0.125rem;
    }
    
    .ks-sitter-card__stars-rate .ks-sitter-card__rate {
        margin-left: auto;
    }
    
    /* Rate smaller */
    .ks-sitter-card__rate {
        font-size: 1rem;
    }
    
    /* Occupation smaller */
    .ks-sitter-card__occupation {
        font-size: 0.875rem;
        margin-top: 0.125rem;
    }
    
    /* Tags smaller */
    .ks-sitter-card__tags {
        margin-top: 0.25rem;
    }
    
    .ks-tag {
        font-size: 0.625rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Meta info smaller */
    .ks-sitter-card__meta {
        font-size: 0.6875rem;
        margin-top: 0.25rem;
    }
    
    /* Stars smaller */
    .ks-stars {
        font-size: 0.625rem;
    }
    
    .ks-star {
        font-size: 0.625rem;
    }
    
    /* Hide sidebar on mobile - use the mobile-specific section */
    .ks-sitter-card__sidebar {
        display: none !important;
    }
    
    /* Mobile section styles */
    .ks-sitter-card__mobile-section {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }
    
    /* Info grid - 2 columns */
    .ks-sitter-card__info-grid {
        margin: 0;
        font-size: 0.75rem;
        overflow: hidden;
    }
    
    .ks-sitter-card__info-item {
        width: 50%;
        padding-right: 0.5rem;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
    }
    
    .ks-sitter-card__info-item i {
        width: 0.875rem;
        margin-right: 0.375rem;
        color: #8B9197;
    }
    
    /* Reference box */
    .ks-sitter-card__reference {
        padding: 0.75rem;
    }
    
    .ks-sitter-card__reference-text {
        font-size: 0.8125rem;
        padding-left: 1rem;
    }
    
    .ks-sitter-card__reference-author {
        font-size: 0.75rem;
        padding-left: 1rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .ks-sitter-card__photo img {
        width: 60px;
        height: 72px;
    }
    
    .ks-sitter-card__name {
        font-size: 1rem;
    }
    
    /* Keep 2-column grid on small screens */
    .ks-sitter-card__info-item {
        width: 50%;
        font-size: 0.6875rem;
    }
    
    .ks-sitter-card__info-item--full {
        width: 100%;
    }
}


/* ============================================================
   10. DROPDOWN MENU
   ============================================================ */
.ks-dropdown {
    position: relative;
    display: inline-block;
}

.ks-dropdown__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 10rem;
    background: #ffffff;
    border: 1px solid #dee4e8;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    z-index: 50;
    padding: 0.25rem 0;
}

.ks-dropdown.open .ks-dropdown__menu {
    display: block;
}

.ks-dropdown__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #4f5b67;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.ks-dropdown__item i {
    margin-right: 0.5rem;
}

.ks-dropdown__item:hover {
    background-color: #edf1f4;
    text-decoration: none;
}


/* ============================================================
   11. ALERT / INFO BOX
   ============================================================ */
.ks-alert {
    padding: 1rem;
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    border-radius: 0.75rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.ks-alert > * {
    margin-left: 0.75rem;
}

.ks-alert > *:first-child {
    margin-left: 0;
}

.ks-alert--info {
    background-color: #edf1f4;
}

.ks-alert--accent {
    background-color: rgba(232, 138, 60, 0.1);
    border: 1px solid rgba(232, 138, 60, 0.3);
}

.ks-alert__icon {
    width: 2rem;
    height: 2rem;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    background-color: rgba(51, 181, 166, 0.1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ks-alert__icon i {
    color: #33b5a6;
}

.ks-alert__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4f5b67;
}

.ks-alert__text {
    font-size: 0.75rem;
    color: #808d99;
    margin-top: 0.125rem;
}


/* ============================================================
   12. BREADCRUMBS
   ============================================================ */
.ks-breadcrumbs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.ks-breadcrumbs > * {
    margin-left: 0.5rem;
}

.ks-breadcrumbs > *:first-child {
    margin-left: 0;
}

.ks-breadcrumbs a {
    color: #808d99;
    text-decoration: none;
}

.ks-breadcrumbs a:hover {
    color: #33b5a6;
}

.ks-breadcrumbs__separator {
    color: #808d99;
}

.ks-breadcrumbs__current {
    color: #4f5b67;
    font-weight: 500;
}


/* ============================================================
   13. UTILITY CLASSES
   ============================================================ */
.ks-text-center { text-align: center; }
.ks-text-left { text-align: left; }
.ks-text-right { text-align: right; }
.ks-text-muted { color: #808d99; }
.ks-text-primary { color: #33b5a6; }
.ks-text-accent { color: #e88a3c; }
.ks-text-foreground { color: #4f5b67; }
.ks-text-destructive { color: #ef4444; }
.ks-text-sm { font-size: 0.875rem; }
.ks-text-xs { font-size: 0.75rem; }
.ks-text-lg { font-size: 1.125rem; }
.ks-text-xl { font-size: 1.25rem; }
.ks-text-2xl { font-size: 1.5rem; }
.ks-font-bold { font-weight: 700; }
.ks-font-semibold { font-weight: 600; }
.ks-font-medium { font-weight: 500; }
.ks-bg-secondary { background-color: #f0f4f6; }
.ks-bg-muted { background-color: #edf1f4; }
.ks-bg-background { background-color: #ffffff; }
.ks-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.ks-container {
    max-width: 72rem;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.ks-container--narrow {
    max-width: 42rem;
}

.ks-container--medium {
    max-width: 56rem;
}

/* Clearfix helper */
.ks-clearfix:before,
.ks-clearfix:after {
    content: " ";
    display: table;
}
.ks-clearfix:after {
    clear: both;
}

/* Fade in animation */
@-webkit-keyframes ks-fade-in {
    from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes ks-fade-in {
    from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

.ks-fade-in {
    -webkit-animation: ks-fade-in 0.3s ease-out;
    -o-animation: ks-fade-in 0.3s ease-out;
    animation: ks-fade-in 0.3s ease-out;
}

/* Scrollbar hide */
.ks-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ks-scrollbar-hide::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   14. RESPONSIVE UTILITIES
   Use Bootstrap 3 hidden-xs / visible-* where possible,
   but keep these for custom KS components.
   ============================================================ */
@media (max-width: 767px) {
    .ks-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .ks-hidden-desktop { display: none !important; }
}