@charset "UTF-8";

.so_advanced_search {
	background-color: #229ac8;
    border-radius: 5px;
}
.so_advanced_search .heading-title h2 {
	padding: 0;
    margin: 0 0 20px;
    font-size: 20px;
    text-align: center;
    color: #fff;
}
.so_advanced_search .sas_wrap .sas_inner {
	padding: 20px;
}
.so_advanced_search .sas_inner-box-search .search-boxes select {
	border: 1px solid #ddd;
	height: 40px;
	/*line-height: 40px;*/
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: middle;
}
.so_advanced_search .sas_inner-box-search .search-boxes select {
	background: url('../images/bg-selectbox.png') no-repeat right center #fff;
	padding-right: 26px;
}
.so_advanced_search .sas_inner-box-search .search-boxes {
	margin: 0 0 15px 0;
}
#column-left .so_advanced_search .search-boxes,
#column-right .so_advanced_search .search-boxes {
    width: 100%;
}
#column-left .so_advanced_search .search-button,
#column-right .so_advanced_search .search-button {
    width: 100%;
    text-align: center;
}
#column-left .so_advanced_search .sas_inner-box-search .search-button,
#column-right .so_advanced_search .sas_inner-box-search .search-button {
	width: 100%;
	text-align: center;
}
.so_advanced_search .sas_inner-box-search .search-button button {
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	color: #fff;
	background-color: #222;
	width: 70%;
	border: 0;
	padding: 0;
	font-size: 18px;
}
.so_advanced_search .sas_inner-box-search .search-button button:hover {
	background-color: #f26522;
}/* ===== Wolf vehicle->oil advisor (c1f) — appended to so-monota custom.css =====
   Ported from ENEOS C-1f. Accent rebranded red->Wolf blue via CSS vars below.
   Tweak --wa* to match the exact Wolf brand blue after visual review. */

.c1f-container,
#c1f-result {
  --wa:        #0a3a8b;   /* Wolf accent (deep blue) */
  --wa-dark:   #062a66;   /* hover / pressed */
  --wa-soft:   #eef3fb;   /* tinted backgrounds */
  --wa-border: #cdddf5;   /* tinted borders */
}

.c1f-container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.c1f-category-bar { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; margin-bottom: 12px; }
.c1f-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 16px; }
.c1f-category-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.c1f-cat-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border: 1px solid #eee; border-radius: 6px; cursor: pointer; transition: all 0.15s; text-decoration: none; color: #555; background: #fff; border-top: 3px solid transparent; }
.c1f-cat-card:hover { background: #fafafa; border-color: #ccc; text-decoration: none; }
.c1f-cat-card.active { border-top-color: var(--wa); background: var(--wa-soft); border-color: var(--wa-border); pointer-events: none; cursor: default; }
.c1f-cat-card.active .c1f-label { color: #222; font-weight: 700; }
.c1f-cat-card .c1f-label { font-size: 13px; text-align: center; line-height: 1.3; }
.c1f-cat-card .c1f-icon { width: 48px; height: 48px; color: #aaa; }
.c1f-cat-card .c1f-icon svg { width: 100%; height: 100%; }
.c1f-cat-card.active .c1f-icon { color: var(--wa); }

/* ---- cascade (brand / model / type) — custom searchable dropdowns ---- */
.c1f-mmt-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.c1f-mmt-field { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 14px 18px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: border 0.15s; }
.c1f-mmt-field:hover { border-color: var(--wa); }
.c1f-mmt-field.is-open { border-color: var(--wa); border-radius: 8px 8px 0 0; z-index: 1000; }
.c1f-mmt-field[data-disabled="1"] { opacity: .5; pointer-events: none; }
.c1f-field-content { flex: 1; min-width: 0; overflow: hidden; }
.c1f-field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 6px; }
.c1f-field-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #222; }
.c1f-placeholder { color: #999; font-weight: 400; font-style: italic; }
.c1f-chevron { color: var(--wa); font-size: 22px; font-weight: 700; line-height: 1; flex-shrink: 0; transition: transform 0.2s; }
.c1f-mmt-field.is-open .c1f-chevron { transform: rotate(180deg); }
.c1f-hidden-select { display: none !important; }

.c1f-popup { display: none; position: absolute; top: 100%; left: -1px; right: -1px; background: #fff; border: 1px solid var(--wa); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1001; max-height: 400px; flex-direction: column; }
.c1f-mmt-field.is-open .c1f-popup { display: flex; }
.c1f-popup-search { width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid #eee; font-size: 14px; outline: none; flex-shrink: 0; font-family: inherit; box-sizing: border-box; }
.c1f-popup-options { overflow-y: auto; flex: 1; }
.c1f-popup-option { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.c1f-popup-option:hover { background: var(--wa-soft); }
.c1f-popup-option.is-selected { background: var(--wa-soft); border-left: 3px solid var(--wa); padding-left: 13px; }
.c1f-opt-img { width: 36px; height: 28px; object-fit: contain; flex-shrink: 0; }
.c1f-opt-text { flex: 1; min-width: 0; }
.c1f-opt-name { font-size: 14px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c1f-opt-meta { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- card / vehicle hero ---- */
.c1f-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.c1f-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 18px; }
.c1f-vehicle-hero { display: grid; grid-template-columns: 220px 1fr 80px; gap: 24px; align-items: center; }
.c1f-photo { width: 220px; height: 150px; background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.c1f-photo img { max-width: 95%; max-height: 95%; object-fit: contain; }
.c1f-info { padding-top: 4px; }
.c1f-make-name { font-size: 13px; color: #999; margin-bottom: 6px; font-weight: 500; }
.c1f-model { font-size: 17px; font-weight: 600; color: #555; margin-bottom: 8px; }
.c1f-engine { font-size: 28px; font-weight: 700; color: #222; margin-bottom: 4px; line-height: 1.15; }
.c1f-years { font-size: 14px; color: #888; }
.c1f-logo { width: 80px; height: 80px; background: #f9f9f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 8px; }
.c1f-logo img { max-width: 100%; max-height: 100%; }

/* ---- component tabs (Wolf PNG icons) ---- */
.c1f-component-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; margin-bottom: 20px; }
.c1f-component-tab { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; cursor: pointer; min-width: 110px; max-width: 180px; border-radius: 6px; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.c1f-component-tab:hover { background: var(--wa-soft); }
.c1f-component-tab.active { border-bottom-color: var(--wa); background: var(--wa-soft); }
.c1f-component-tab.active .c1f-comp-name { color: #222; font-weight: 700; }
.c1f-comp-icon { width: 38px; height: 38px; opacity: .8; transition: opacity .15s ease; display: flex; align-items: center; justify-content: center; }
.c1f-component-tab.active .c1f-comp-icon, .c1f-component-tab:hover .c1f-comp-icon { opacity: 1; }
.c1f-comp-icon img, .c1f-comp-icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.c1f-comp-name { font-size: 12px; color: #888; text-align: center; line-height: 1.35; }

/* ---- component detail ---- */
.c1f-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.c1f-comp-detail-name { font-size: 20px; font-weight: 700; color: #222; }
.c1f-comp-code { background: var(--wa-soft); color: var(--wa); padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; font-family: monospace; }
.c1f-cap-list { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.c1f-cap-chip { font-size: 13px; background: #f5f7fa; border: 1px solid #e7ecf3; color: #333; padding: 6px 12px; border-radius: 16px; }
.c1f-cap-chip b { color: var(--wa); }

/* ---- recommendation group (per use: Normal / Severe / Flexible) ---- */
.c1f-use-block { border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.c1f-use-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.c1f-use-label { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--wa); padding: 4px 10px; border-radius: 4px; }
.c1f-intervals { display: flex; gap: 8px; flex-wrap: wrap; }
.c1f-interval { font-size: 13px; color: #555; background: #f5f5f5; padding: 4px 10px; border-radius: 12px; }
.c1f-use-block .c1f-info { color: #8a6d00; background: #fff8e1; border: 1px solid #ffe7a0; border-radius: 6px; padding: 12px 14px; font-size: 14px; }

/* ---- product cards ---- */
.c1f-products { display: flex; flex-direction: column; gap: 12px; }
.c1f-product { background: #fff; border: 1px solid #eee; border-left: 4px solid var(--wa); border-radius: 6px; padding: 16px; display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; }
.c1f-product:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.c1f-prod-photo { width: 80px; height: 80px; background: #fafafa; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.c1f-prod-photo img { max-width: 90%; max-height: 90%; object-fit: contain; }
.c1f-prod-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.c1f-prod-name a { color: #222; text-decoration: none; }
.c1f-prod-name a:hover { color: var(--wa); }
.c1f-prod-sku { font-size: 12px; color: #999; }
.c1f-prod-price { font-size: 16px; font-weight: 700; color: var(--wa); margin-right: 14px; }
.c1f-ext { color: #888; margin-left: 4px; font-size: 14px; }
.c1f-prod-actions { display: flex; align-items: center; }
.c1f-btn-product { padding: 10px 20px; border-radius: 4px; font-size: 13px; font-weight: 700; text-decoration: none; background: var(--wa); color: #fff; white-space: nowrap; }
.c1f-btn-product:hover { background: var(--wa-dark); color: #fff; }
.c1f-no-products { color: #888; font-style: italic; padding: 20px; text-align: center; }

/* ---- empty state ---- */
.c1f-empty { text-align: center; padding: 60px 24px; }
.c1f-empty-title { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 12px; }
.c1f-empty-text { font-size: 15px; color: #666; line-height: 1.5; max-width: 520px; margin: 0 auto; }
.c1f-empty-text b { color: var(--wa); font-weight: 700; }

@media (max-width: 768px) {
  .c1f-category-cards { grid-template-columns: repeat(2, 1fr); }
  .c1f-mmt-bar { grid-template-columns: 1fr; }
  .c1f-vehicle-hero { grid-template-columns: 1fr; text-align: center; }
  .c1f-logo { margin: 0 auto; }
  .c1f-product { grid-template-columns: 1fr; text-align: center; }
}
/* ===== END Wolf c1f ===== */

/* Component tab: show the component code (e.g. RDU 210/215-LSD) so same-named
   components (three "Differential, rear") are distinguishable. */
.c1f-component-tab .c1f-comp-tab-code { font-size: 10.5px; color: #8a97a3; margin-top: 2px; text-align: center; line-height: 1.2; max-width: 110px; word-break: break-word; }
.c1f-component-tab.active .c1f-comp-tab-code { color: #1da5db; }

/* ===== ENEOS-parity polish (2026-06-11) ===== */
/* Tech specs under the vehicle hero (dotted leader rows, ported from ENEOS) */
.c1f-tech-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.c1f-spec { display: flex; align-items: baseline; font-size: 14px; }
.c1f-spec .c1f-label { color: #888; flex-shrink: 0; }
.c1f-spec .c1f-dots { flex: 1; border-bottom: 1px dotted #d0d0d0; margin: 0 8px; transform: translateY(-3px); }
.c1f-spec .c1f-value { color: #222; font-weight: 600; }
@media (max-width: 767px) { .c1f-tech-specs { grid-template-columns: 1fr; } }

/* Component tab: inline code accent (Differential, rear RDU 230-LSD) */
.c1f-component-tab .c1f-comp-name b { color: #1da5db; font-weight: 700; }

/* Category bar — official wolflubes oil-finder look: borderless sketch icons,
   small uppercase labels, blue active state. */
.c1f-category-cards { grid-template-columns: repeat(8, 1fr); gap: 6px; }
.c1f-cat-card { border: none; background: transparent; border-top: none; padding: 10px 6px; gap: 8px; }
.c1f-cat-card:hover { background: transparent; border-color: transparent; }
.c1f-cat-card:hover .c1f-label { color: #1da5db; }
.c1f-cat-card.active { background: transparent; border-color: transparent; border-top-color: transparent; }
.c1f-cat-card .c1f-icon { width: 86px; height: 64px; display: flex; align-items: center; justify-content: center; }
.c1f-cat-card .c1f-icon img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity .15s; }
.c1f-cat-card:hover .c1f-icon img, .c1f-cat-card.active .c1f-icon img { opacity: 1; }
.c1f-cat-card .c1f-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9aa7b2; line-height: 1.35; }
.c1f-cat-card.active .c1f-label { color: #1da5db; font-weight: 700; }
@media (max-width: 991px) { .c1f-category-cards { grid-template-columns: repeat(4, 1fr); } }

/* ===== Official wolflubes oil-finder header parity (2026-06-11) =====
   Exact values from basic.*.chunk.css of ua.wolflubes.com: primary #043559 (hover),
   secondary #1da5db (active), text-light #afb0b0, label 14px/700/ls1px uppercase,
   img 75px scale(1.05) hover, 3px underline at bottom:-1px, row border-bottom 1px primary. */
.c1f-title.c1f-title-finder { text-align: center; color: #1da5db; font-size: 16px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 22px; }
.c1f-category-cards { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 16px; gap: 0 16px; border-bottom: 1px solid #043559; }
.c1f-cat-card { position: relative; border: none; background: transparent; padding: 6px 6px 12px; gap: 10px; }
.c1f-cat-card .c1f-icon { width: 75px; height: 75px; }
.c1f-cat-card .c1f-icon img { filter: none; opacity: 1; transition: transform .3s ease-in-out; }
.c1f-cat-card:hover .c1f-icon img, .c1f-cat-card.active .c1f-icon img { transform: scale(1.05); opacity: 1; }
.c1f-cat-card .c1f-label { color: #afb0b0; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.35; }
.c1f-cat-card:hover .c1f-label { color: #043559; }
.c1f-cat-card:hover::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #043559; }
.c1f-cat-card.active .c1f-label { color: #1da5db; }
.c1f-cat-card.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #1da5db; }
@media (max-width: 991px) { .c1f-category-cards { grid-template-columns: repeat(4, 1fr); } .c1f-cat-card .c1f-label { font-size: 11px; letter-spacing: .5px; } }

/* ===== FINAL header parity v3 — exact official look (overrides everything above) ===== */
.c1f-title.c1f-title-finder { text-align: center !important; color: #1da5db !important; font-size: 15px !important; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin: 2px 0 26px; }
/* full-bleed row: the 1px navy line + the 3px strips sit ON the card frame bottom */
.c1f-category-bar { padding: 20px 20px 0 !important; overflow: hidden; }
.c1f-category-cards { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 12px; gap: 0 12px; margin: 0 -20px; padding: 0 14px; border-bottom: 1px solid #e5e5e5; }
.c1f-cat-card { position: relative; border: none !important; background: transparent !important; padding: 4px 4px 16px; gap: 12px; }
.c1f-cat-card .c1f-icon { width: 80px; height: 80px; }
.c1f-cat-card .c1f-icon img { filter: none !important; opacity: 1 !important; transition: transform .3s ease-in-out; }
.c1f-cat-card:hover .c1f-icon img { transform: scale(1.08); }
.c1f-cat-card .c1f-label { color: #afb0b0 !important; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.35; }
.c1f-cat-card:hover .c1f-label { color: #043559 !important; }
.c1f-cat-card:hover::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #043559; }
.c1f-cat-card.active .c1f-label { color: #1da5db !important; }
.c1f-cat-card.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #1da5db; }
@media (max-width: 991px) { .c1f-category-cards { grid-template-columns: repeat(4, 1fr); } .c1f-cat-card .c1f-label { font-size: 11px; letter-spacing: .5px; } }


/* ===== Vehicle card v5 — ENEOS layout in Wolf colors ===== */
.c1f-vehicle-hero { align-items: start; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; }
.c1f-info { padding-top: 10px; background: none; border: none; }
.c1f-model { font-size: 17px; font-weight: 600; color: #555; margin-bottom: 8px; }
.c1f-engine { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 4px; line-height: 1.1; }
.c1f-years { font-size: 14px; color: #888; }
.c1f-cap-int { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.c1f-cap-item { font-size: 14px; }
.c1f-cap-label { color: #888; }
.c1f-cap-value { color: #222; font-weight: 700; margin-left: 8px; font-size: 16px; }
.c1f-engine-code .c1f-value { background: #e6f4fb; color: #1da5db; padding: 2px 8px; border-radius: 3px; font-family: monospace; font-size: 13px; }
.c1f-comp-code { background: #e6f4fb; color: #1da5db; }


/* v6: component-tab code on its own line under the name */
.c1f-component-tab .c1f-comp-name b { display: block; margin-top: 2px; }


/* v7: component icons — bigger, full-opacity, branded */
.c1f-component-tab .c1f-comp-icon { width: 44px; height: 44px; opacity: 1; }
.c1f-component-tab { padding: 12px 14px; }


/* v8: pro icon set (currentColor) — navy default, Wolf blue on active/hover */
.c1f-comp-icon { color: #28475e; }
.c1f-component-tab:hover .c1f-comp-icon { color: #043559; }
.c1f-component-tab.active .c1f-comp-icon { color: #1da5db; }
.c1f-comp-icon svg { width: 100%; height: 100%; }