/*
|--------------------------------------------------------------------------
| SweetMeet Search Card
|--------------------------------------------------------------------------
*/

:root {
    --sm-card-gold: #c8a96a;
    --sm-card-black: #080808;
    --sm-card-grey: #666666;
    --sm-card-light-grey: #f5f5f5;
    --sm-card-border: #e5e5e5;
    --sm-card-white: #ffffff;
    --sm-card-online: #35b86b;

    --sm-card-radius: 4px;
    --sm-card-image-width: 260px;
    --sm-card-image-height: 260px;
    --sm-card-gap: 24px;
    --sm-card-control-height: 2.4rem;
}

/*
|--------------------------------------------------------------------------
| Card wrapper
|--------------------------------------------------------------------------
*/

.sm-search-card {
    display: grid;
    grid-template-columns:
        var(--sm-card-image-width)
        minmax(0, 1fr);
    gap: var(--sm-card-gap);

    width: 100%;
    margin: 0 0 20px;
    padding: 10px;

    border: 1px solid var(--sm-card-border);
    border-radius: var(--sm-card-radius);
    background: var(--sm-card-white);
}

/*
|--------------------------------------------------------------------------
| Card footer
|--------------------------------------------------------------------------
*/

.sm-search-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
}

.sm-search-card__preferences {
    margin: 0;
}

.sm-search-card__actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}



/*
|--------------------------------------------------------------------------
| Intro Width
|--------------------------------------------------------------------------
*/

/* Desktop */
.sm-search-card__intro {
    -webkit-line-clamp: 2;
}

/* Tablet */
@media (max-width: 991px) {
    .sm-search-card__intro {
        -webkit-line-clamp: 3;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .sm-search-card__intro {
        -webkit-line-clamp: 4;
    }
}


/*
|--------------------------------------------------------------------------
| Profile image
|--------------------------------------------------------------------------
*/

.sm-search-card__media {
    align-self: start;
    height: fit-content;
	
	position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;

    border-radius: calc(var(--sm-card-radius) - 1px);
    background: var(--sm-card-light-grey);
    text-decoration: none;
}

.sm-search-card__image {
    display: block;
    width: 100%;
    height: var(--sm-card-image-height);

    object-fit: cover;
    object-position: center;
}

.sm-search-card__image-placeholder {
    position: relative;
    display: block;

    width: 100%;
    height: var(--sm-card-image-height);

    overflow: hidden;
    background: var(--sm-card-light-grey);
}

.sm-search-card__placeholder-head {
    position: absolute;
    top: 17%;
    left: 50%;

    width: 34%;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    background: #d8d8d8;
    transform: translateX(-50%);
}

.sm-search-card__placeholder-body {
    position: absolute;
    left: 50%;
    bottom: -10%;

    width: 82%;
    height: 62%;

    border-radius: 48% 48% 0 0;
    background: #d8d8d8;
    transform: translateX(-50%);
}

/*
|--------------------------------------------------------------------------
| Card body
|--------------------------------------------------------------------------
*/

.sm-search-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 4px 14px 10px 0;
}

.sm-search-card__looking-for {
    margin: 0;
    padding: 0;
	font-size: 0.94rem;
    list-style: none;
}

.sm-search-card__looking-for li {
    position: relative;

    margin: 0 0 6px;
    padding-left: 22px;

    color: var(--sm-card-black);
    line-height: 1.15;
}

.sm-search-card__looking-for li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--sm-card-gold);
    font-weight: 600;
}

.sm-search-card__more {
    margin: 0;

    color: var(--sm-card-grey);
    font-size: 0.80rem;
    font-style: italic;
}

/*
|--------------------------------------------------------------------------
| Header and member identity
|--------------------------------------------------------------------------
*/

.sm-search-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin: 0 0 12px;
}

.sm-search-card__identity {
    min-width: 0;
}

.sm-search-card__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;	
    margin: 0;

    color: var(--sm-card-black);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.sm-search-card__title a {
    color: inherit;
    text-decoration: none;
}

.sm-search-card__title a:hover,
.sm-search-card__title a:focus {
    color: var(--sm-card-gold);
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Age and location
|--------------------------------------------------------------------------
*/

.sm-search-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin: 5px 0 0;

    color: var(--sm-card-grey);
    font-size: 0.96rem;
	font-weight: 600;
    line-height: 1.4;
}

.sm-search-card__age,
.sm-search-card__meta-separator,
.sm-search-card__location {
    display: inline;
    margin: 0;
    padding: 0;
}

.sm-search-card__age::before,
.sm-search-card__age::after,
.sm-search-card__location::before,
.sm-search-card__location::after {
    content: none;
}

.sm-search-card__meta-separator {
    color: var(--sm-card-grey);
}

.sm-search-card__location {
    color: var(--sm-card-grey);
}

/*
|--------------------------------------------------------------------------
| Member indicators
|--------------------------------------------------------------------------
*/

.sm-search-card__indicators {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.sm-search-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 30px;
    padding: 6px 12px;

    border: 1px solid var(--sm-card-gold);
    border-radius: 999px;
    background: transparent;
    color: var(--sm-card-gold);

    line-height: 1;
    white-space: nowrap;
}

.sm-search-card__badge-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--sm-card-gold);
    font-size: 0.82rem;
    line-height: 1;
}

.sm-search-card__badge-text {
    color: var(--sm-card-gold);

    font-family: inherit;
    font-size: 1.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
	padding-left
}

.sm-search-card__online {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--sm-card-grey);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1;
}

.sm-search-card__online-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--sm-card-online);
}

.sm-search-card--premium {
    border-color: var(--sm-card-gold);
}

.sm-search-card--premium .sm-search-card__media {
    border: 1px solid var(--sm-card-gold);
}

.sm-search-card--premium .sm-search-card__membership {
    color: var(--sm-card-gold);
}

/*
|--------------------------------------------------------------------------
| Introduction
|--------------------------------------------------------------------------
*/

.sm-search-card__intro {
    max-width: 800px;
    margin: 0 0 12px;

    color: #181818;
    font-size: 0.95rem;
    font-style: normal;
    line-height: 1.55;
}

/*
|--------------------------------------------------------------------------
| Profile preferences
|--------------------------------------------------------------------------
*/

.sm-search-card__preferences {
    display: grid;
    gap: 16px;

    margin: 0 0 6px;
}

.sm-search-card__preference {
    min-width: 0;
}

.sm-search-card__preference-title {
    position: relative;
    display: inline-block;

    margin: 0 0 5px;
    padding: 0;

    color: var(--sm-card-gold);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
}

.sm-search-card__preference--travel
    .sm-search-card__preference-title::before {
    content: "✈";
    display: inline-block;

    margin-right: 7px;

    color: var(--sm-card-gold);
    font-size: 0.85em;
    line-height: 1;
}

.sm-search-card__preference-value {
    max-width: 800px;
    margin: 0;

    color: var(--sm-card-black);
    font-size: 0.92rem;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.sm-search-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-top: auto;
}

.sm-search-card__button {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-height: var(--sm-card-control-height);
    margin: 0;
    padding: 0.45rem 1rem;

    border: 1px solid var(--sm-card-gold);
    border-radius: 3px;
    background: transparent;
    color: var(--sm-card-black);

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.sm-search-card__button:hover,
.sm-search-card__button:focus {
    border-color: var(--sm-card-gold);
    background: var(--sm-card-gold);
    color: var(--sm-card-white);
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Tablet and large mobile
|--------------------------------------------------------------------------
|
| Keep the search card horizontal from 561px to 991.98px.
|
*/

@media (min-width: 561px) and (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md {
        width: calc(100% - 32px);
        max-width: none !important;
        margin-right: auto;
        margin-left: auto;
    }

    :root {
        --sm-card-image-width: 260px;
        --sm-card-image-height: 260px;
        --sm-card-gap: 18px;
    }

    .sm-search-card {
        grid-template-columns:
            var(--sm-card-image-width)
            minmax(0, 1fr);

        padding: 10px;
    }

    .sm-search-card__body {
        padding-right: 10px;
    }

    .sm-search-card__header {
        gap: 14px;
    }

    .sm-search-card__preference-title {
        font-size: 1rem;
    }

    .sm-search-card__footer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
        align-items: end;
    }

    .sm-search-card__actions {
        justify-content: flex-end;
    }

    .sm-search-card__button {
        width: auto;
        white-space: nowrap;
    }
}

/*
|--------------------------------------------------------------------------
| Narrow tablet and large phones
|--------------------------------------------------------------------------
|
| Retain the horizontal card while reducing the image and spacing.
|
*/

@media (min-width: 561px) and (max-width: 720px) {
    .container,
    .container-sm,
    .container-md {
        width: calc(100% - 20px);
    }

    :root {
        --sm-card-image-width: 205px;
        --sm-card-image-height: 205px;
        --sm-card-gap: 12px;
    }

    .sm-search-card {
        padding: 10px;
    }

    .sm-search-card__body {
        padding-right: 6px;
    }

    .sm-search-card__header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .sm-search-card__title {
        font-size: 1.2rem;
    }

    .sm-search-card__meta {
        font-size: 0.86rem;
    }

    .sm-search-card__intro {
        margin-bottom: 14px;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .sm-search-card__preference-title {
        font-size: 0.95rem;
    }

    .sm-search-card__looking-for li {
        line-height: 1.35;
    }

    .sm-search-card__badge {
        min-height: 26px;
        padding: 4px 8px;
    }

    .sm-search-card__footer {
        gap: 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Bootstrap mobile result-column override
|--------------------------------------------------------------------------
|
| PremiumPress applies col-6 below 576px. Force each search result to use
| the full row so two profile cards never appear side by side.
|
*/

@media (max-width: 575.98px) {
    #ajax-search-output > .row > .listview,
    #ajax-search-output .col-6.listview {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
|
| Make the final switch to a stacked card at 560px.
|
*/

@media (max-width: 560px) {
    .sm-search-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;

        margin-bottom: 16px;
        padding: 8px;
    }

    .sm-search-card__media {
        width: 100%;
        height: auto;
        align-self: start;
    }

    .sm-search-card__image,
    .sm-search-card__image-placeholder {
        width: 100%;
        height: 340px;
        min-height: 0;
        object-fit: cover;
    }

    .sm-search-card__body {
        padding: 16px 8px 8px;
    }

    .sm-search-card__header {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .sm-search-card__title {
        font-size: 1.22rem;
    }

    .sm-search-card__meta {
        font-size: 0.88rem;
    }

    .sm-search-card__badge {
        min-height: 26px;
        padding: 4px 8px;
    }

    .sm-search-card__intro {
        margin-bottom: 6px;
    }

    .sm-search-card__preferences {
        gap: 15px;
    }

    .sm-search-card__preference-title {
        font-size: 1rem;
		margin-bottom: 4px;
    }

    .sm-search-card__footer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
        align-items: end;
    }

	.sm-search-card__looking-for {
		margin-top: 0;
	}	
	
    .sm-search-card__actions {
        justify-content: flex-end;
    }

    .sm-search-card__button {
        width: auto;
        white-space: nowrap;
    }
	
	.sm-search-card__looking-for li {
		margin-bottom: 2px;
	}

	.sm-search-card__more {
		margin-top: 2px;
	}	

}

/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
|
| Stack the header/footer and make the button full width on narrow phones.
|
*/

@media (max-width: 480px) {
    .sm-search-card__header {
        flex-direction: column;
    }

    .sm-search-card__membership {
        align-self: flex-start;
    }

    .sm-search-card__footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sm-search-card__actions {
        justify-content: stretch;
    }

    .sm-search-card__button {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Wide desktop container
|--------------------------------------------------------------------------
*/

@media (min-width: 1300px) {
    .container {
        max-width: 1200px !important;
    }
}