/**
 * VACBP Shared Component Primitives
 *
 * Cross-cutting building blocks consumed by every plugin surface: the blue
 * vehicle-card header, reserve pills, stats grids, primary/secondary buttons,
 * section titles, and the "Your Account" card layout used across all the
 * MyAccount dashboards.
 *
 * Loaded through the `vacbp-components` style handle (depends on `vacbp-vars`)
 * which is enqueued anywhere plugin assets render — same callsites as vars.css.
 *
 * @package VACBP
 * @since   1.0.0
 */

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-please-login-notice {
    background-color: white;
}

/* ==========================================================================
   Blue header section
   ========================================================================== */

.vacbp-header-blue {
    padding: 32px 40px 20px 40px;
    border-radius: 0;
    border-top-right-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.vacbp-header-blue {
    background: var(--vacbp-color-sidebar-accent);
}

div.vacbp-header-blue h1.vacbp-vehicle-title {
    font-weight: 500;
    color: var(--vacbp-color-primary-text);
    font-family: inherit;
    font-size: var(--vacbp-font-size-4xl);

    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0em;
}

.vacbp-vehicle-subtitle {
    color: rgb(255, 255, 255);
    font-family: inherit;
    font-size: var(--vacbp-font-size-lg);
    font-weight: 400;
}

.vacbp-vehicle-location {
    color: var(--vacbp-color-primary-text);
    font-family: inherit;
    font-size: var(--vacbp-font-size-lg);
    font-weight: 400;
}

.vacbp-reserve-pill {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--vacbp-radius-sm);
    font-size: var(--vacbp-font-size-sm);
    font-weight: 700;
    font-family: inherit;
}

.vacbp-reserve-pill.no-reserve {
    background-color: var(--vacbp-color-no-reserve-badge);
    color: var(--vacbp-color-primary-text);
}

.vacbp-reserve-pill.has-reserve {
    background-color: var(--vacbp-color-reserve-badge);
    color: var(--vacbp-color-primary-text);
}

/* ==========================================================================
   Blue header section
   ========================================================================== */

/* -- Ending line -- */
.vacbp-ending-line {
    /* margin: 0 0 14px; */
    color: var(--vacbp-color-heading);
    font-family: inherit;
    font-weight: 400;
    line-height: 1.2;
    font-size: var(--vacbp-font-size-base);
}

.vacbp-ending-line.is-ended {
    color: var(--vacbp-color-danger);
    font-weight: 700;
}

/* -- 2×2 stats grid -- */
.vacbp-stats-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vacbp-stat-box {

    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px;
    padding: 12px 24px 12px 24px;
    gap: 8px;

    background: var(--vacbp-color-bg);
    text-align: center;
}

.vacbp-stat-box-label {
    display: block;
    font-size: var(--vacbp-font-size-base);
    color: var(--vacbp-color-text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: 0;
}

.vacbp-stat-box-value {
    display: block;
    font-size: var(--vacbp-font-size-2xl);
    color: var(--vacbp-color-heading);
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-btn, .vacbp-ya-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    gap: 8px;

    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--vacbp-radius-md);
    cursor: pointer;
    /* font-family: inherit; */
    transition: all 0.2s;
    box-sizing: border-box;
    height: 48px;

    font-size: var(--vacbp-font-size-lg);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-primary {
    /* display: block; */
    width: 150px;
    background-color: black;
    color: var(--vacbp-color-primary-text);
    text-align: center;
    text-decoration: none;
    /* font-family: inherit; */
    transition: background var(--vacbp-transition);
    margin-top: auto;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-filled {
    /* display: block; */
    background-color: black;
    color: white;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn:hover {
    opacity: 0.85;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-submit-a-vehicle {
    width: auto;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-secondary,
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-btn-view {
    background: var(--vacbp-color-bg-subtle);
    color: var(--vacbp-color-heading);
    border: 1px solid var(--vacbp-color-border-strong);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-full  { 
    width: 100%; 
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-secondary:hover:not(:disabled) {
    background: var(--vacbp-color-border);
    border-color: var(--vacbp-color-text-faint);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-secondary:hover {
    background: var(--vacbp-color-bg-subtle);
    border-color: var(--vacbp-color-border-strong);
}

.vacbp-btn-secondary-action:hover {

    background-color: var(--vacbp-color-heading) !important;
    color: var(--vacbp-color-primary-text) !important;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-secondary-action {
    padding: 10px 16px;
    gap: 8px;
    justify-content: center;
    background: var(--vacbp-color-bg-subtle);
    border: 2px solid var(--vacbp-color-heading);
    color: var(--vacbp-color-heading);
    border-radius: 8px;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-btn-secondary-action .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-secondary-actions .vacbp-btn {
    font-weight: 500;
    font-size: var(--vacbp-font-size-lg);
}

/* ==========================================================================
   Titles
   ========================================================================== */

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-section-title {
    font-size: var(--vacbp-font-size-2xl);
    /* padding-bottom: var(--vacbp-space-4); */
    /* border-bottom: 1px solid var(--vacbp-color-border); */
    font-weight: 500;
    color: var(--vacbp-color-heading);
    font-family: inherit;
    /* display: flex; */
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Cards list */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Individual card */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card {
	display: flex;
	gap: 0;
	background: var(--vacbp-color-bg-subtle);
	border: 1px solid var(--vacbp-color-heading);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--vacbp-shadow-sm);
	transition: var(--vacbp-transition);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card:hover {
	/* box-shadow: var(--vacbp-shadow-hover); */
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card--history {
	opacity: .75;
}

/* Thumbnail */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb {
	display: flex;
    flex-direction: column;
	width: 250px;
	padding: 16px 16px 16px 16px;
    gap: 8px;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb img {
	width: 234px;
    min-width: 234px;
	height: 180px;
	object-fit: cover;
	border-radius: 4px;
}

/* Info panel */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-info {
	padding: 16px 24px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Title row */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vacbp-space-3);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-title {
	margin-top: 11px;
	margin-bottom: 0;
	font-weight: 600;
    font-size: 22px;
	color: var(--vacbp-color-heading);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-title a {
	color: var(--vacbp-color-heading);
	text-decoration: none;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-title a:hover {
	color: var(--vacbp-color-primary);
}


:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template{
    display: flex;
    gap: 54px;
    justify-content: space-between;
    /* max-width: 510px; */
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-info-container-my-account-card-template, .vacbp-ya-actions) .vacbp-ya-stat-label {
    font-weight: 400;
    font-size: var(--vacbp-font-size-base);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-info-container-my-account-card-template, .vacbp-ya-actions) :is(.vacbp-ya-stat, .vacbp-ya-meta-item) {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template :is(.vacbp-ya-stat-value, .vacbp-ya-status-badge),
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-ya-stat-value, .vacbp-ya-meta-value) {
    font-weight: 600;
    font-size: var(--vacbp-font-size-lg);
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template.car-corral-offer-card{
    column-gap: 3em;
    row-gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: max-content;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .woocommerce .woocommerce-MyAccount-content .vacbp-ya-section-title {
	display: flex;
	align-items: center;

	margin-bottom: 24px;
	color: var(--vacbp-color-heading);
	font-weight: 500;
    font-size: var(--vacbp-font-size-2xl);
}

/* Action buttons */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	margin-top: auto;
}

:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-btn-edit{
    width: auto;
}

/* Stats grid */
:is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-stats-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
    /* min-width: 272px; */
}

/* Reserve badge */
.vacbp-ya-reserve-badge {
	display: inline-block;
	font-size: var(--vacbp-font-size-sm);
	font-weight: 500;
}

/* Status badge */
.vacbp-ya-status-badge {
	display: inline-block;
	font-size: var(--vacbp-font-size-sm);
	font-weight: 500;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1276px) {
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template{    
        /* gap: 24px;
        flex-direction: column; */
    }
}

@media (max-width: 1024px) {
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb img{
        width: 175px;
        min-width: 175px;
        height: 100%;
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb {
        padding-right: 0px;
        padding-bottom: 0px;
    }
}

@media (max-width: 900px) {
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-header-blue) {
        border-radius: 0;
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) :is(.vacbp-sf-image-panel) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}


@media (max-width: 768px) {

    .vacbp-btn { padding: 13px 22px; }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template{
        /* flex-wrap: wrap; */
    }
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template.car-corral-offer-card{
        /* flex-wrap: wrap; */
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-your-auctions-wrapper{
        padding-top: 20px;
    }
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-your-auctions-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-sidebar-card {
        border-radius: 0;
    }
}

@media (max-width: 640px) {

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card {
        
    }
}

@media (max-width: 500px) {

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb,
    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb img{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-ya-card-thumb {
        padding-right: 16px;
    }

    :is(.vacbp-general-wrapper, .vacbp-body-wrapper) .vacbp-info-container-my-account-card-template{
        flex-wrap: wrap;
        gap: 12px;
    }
}