/**
 * Main CSS for AVH Sticker Sizes
 *
 * @package AVHStickerSizes
 * @version 1.9.2
 *
 * Copyright 2025 Auto Vinyl Hub (https://autovinylhub.com)
 */

/* ==========================================================================
   1.0 Search Form Styles
   ========================================================================== */

:root {
    --highlight-color: #1C62A8;
}

.search_bar {
    background: #fff;
    border: #b7b7b7 solid 1px;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    max-width: 860px;
    height: 54px;
    margin: 0 auto 2.5em auto;
}

.search_bar input[type="text"],
.search_bar input[type="search"] {
    border: none;
    box-shadow: none;
    font-weight: 600;
    width: 100%;
    /* Increased right padding to make room for submit and clear buttons */
    padding: 0.5em 110px 0.5em 1em;
    margin: 0;
    overflow: hidden;
    background: transparent;
    height: 100%;
    border-radius: 5px 0 0 5px;
    font-size: 21px;
    text-align: left !important;
}

.search_bar input[type="text"]:focus,
.search_bar input[type="search"]:focus {
    outline: none;
}

.search_bar ::placeholder {
    font-weight: 400;
    color: #aaa;
    text-align: left !important;
}

.search_bar button[type=submit] {
    background: linear-gradient(hsl(208, 73%, 45%), hsl(208, 73%, 41%));
    color: rgba(255, 255, 255, 0); /* Hide text */
    border: 1px solid var(--highlight-color);
    /* Removed percentage width to prevent growing on wide screens */
    min-width: 56px;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 0 5px 5px 0;
    margin: 0;
    user-select: none;
    transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.search_bar button[type=submit]:after {
    content: '';
    position: absolute;
    top: 22%;
    right: 0;
    bottom: 22%;
    left: 0;
    background: url("https://media.lib.byu.edu/assets/images/searchbar/1.0/search-icon.svg") no-repeat center center;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.search_bar button[type=submit]:hover,
.search_bar button[type=submit]:focus {
    background: linear-gradient(hsl(208, 73%, 50%), hsl(208, 73%, 45%));
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    outline: none;
}

.search_bar .clear-search {
    position: absolute;
    top: 50%;
    /* Position to the left of the submit button (min-width: 56px) with a gap */
    right: 66px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    z-index: 2;
    display: none; /* Hidden by default */
    user-select: none;
}

.search_bar .clear-search:hover {
    color: #333;
}

/* Show the button when the form has a value (class added by JS) */
.search_bar.has-value .clear-search {
    display: block;
}


/* ==========================================================================
   2.0 Search Results Styles
   ========================================================================== */

.avh-results-container {
    margin-top: 2em;
}

.avh-result-item {
    position: relative; /* Needed for positioning the copy button */
    background: #fdfdfd;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 1.5em 2em;
    margin-bottom: 2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.avh-result-item h3 {
    margin-top: 0;
    margin-bottom: 0.25em;
    padding-right: 70px; /* Add space to prevent overlap with copy button */
    font-size: 1.8em;
    font-weight: 600;
}

.avh-trim-levels {
    margin-top: 0;
    color: #555;
    font-style: italic;
}

.avh-results-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.avh-results-table th,
.avh-results-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.avh-results-table thead th {
    background-color: #f7f7f7;
    font-weight: bold;
    font-size: 1.1em;
}

.avh-results-table tbody td:nth-child(2) {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    background: #fcfcfc;
}

.avh-notes {
    margin-top: 1.5em;
    padding: 1em;
    background: #f9f9f9;
    border-left: 3px solid #0073aa;
}

.avh-notes strong {
    display: block;
    margin-bottom: 0.5em;
}

.avh-no-results {
    text-align: center;
    padding: 2em;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

/* ==========================================================================
   3.0 Action Link Styles
   ========================================================================== */

.avh-result-actions {
    position: absolute;
    top: 1.5em;
    right: 2em;
    display: flex;
    gap: 0.5em;
}

.avh-edit-link-inline,
.avh-copy-button {
    font-size: 1em;
    color: #0073aa;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.avh-edit-link-inline {
    text-decoration: none;
}

.avh-result-actions .dashicons {
    font-size: 1.2em;
    line-height: 1;
}

.avh-copy-button:hover,
.avh-edit-link-inline:hover {
    color: #005a87;
}


/* ==========================================================================
   4.0 Trim Filter Styles
   ========================================================================== */

.avh-trim-filters {
    margin-bottom: 1em;
}