/* =============================================
   Advance Seeds — Global Layout CSS (DEFERRED)
   Loaded async (preload -> swap to stylesheet), same pattern as the other
   non-critical vendor CSS in app.blade.php. Everything here is either
   below-the-fold (footer, facades), purely decorative (hover/shadow/animation),
   or targets elements that only exist after some other async process runs
   (Google Translate's own widget, AJAX skeleton-loading rows) — so it never
   affects the structural box model of what's visible at first paint. See
   app.css for the critical half and the rationale for where the line was
   drawn between the two files.
   ============================================= */

/* --- Main decorative overlays (position:absolute — don't affect document
   flow/sibling layout either way, so deferring them is a pure win: nothing
   here can cause a layout shift) --- */
main .layout-bg {
    position: absolute;
    bottom: 0;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    right: 1dvw;
    height: 20dvh;
}
main::before {
    content: '';
    position: absolute;
    z-index: 1;
    opacity: 0.2;
    background-attachment: fixed;
    aspect-ratio: 1/1;
    background-position-x: calc(100vw - 20vw - calc((6vh + 52px) * 1));
    background-position-y: 90%;
    background-repeat: no-repeat;
    height: 100%;
    width: 99vw;
}

/* --- Footer (below the fold on initial paint for essentially every page) --- */
footer {
    position: relative;
    background-color: var(--avs-color-03);
    color: white;
    font-family: "SukhumvitSet", serif;
    font-size: 14px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/images/backgrounds/avs30yr.jpg');
}
footer a {
    color: white;
    cursor: pointer;
    text-decoration: none;
}
footer iframe {
    border-radius: 8px;
}
footer section:first-child {
    min-height: 40vh;
}
footer section:first-child .container {
    padding-bottom: 24px;
}
footer .social-links a {
    font-size: 16px;
    display: inline-block;
    background-color: rgba(255,255,255,.2);
    color: #fff;
    line-height: 1;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    transition: 0.3s all ease-in-out;
}
footer .social-links a[data-media="fb"]:hover  { background-color: #4267B2; }
footer .social-links a[data-media="x"]:hover   { background-color: #000000; }
footer .social-links a[data-media="line"]:hover { background-color: #06c755; }
footer .social-links a[data-media="yt"]:hover  { background-color: #FF0000; }
footer .social-links a[data-media="gmap"]:hover { background-color: #31a4b6; }
footer .social-links a[data-media="tel"]:hover { background-color: #9900ff; }
footer section:last-child {
    font-size: 16px;
}
footer section:last-child > .container {
    min-height: 74px;
    border-top: 1px solid #ffffff26;
}
footer section:last-child > .container > .row {
    min-height: 74px;
}
footer h4, footer h5 {
    font-family: "Kanit", sans-serif !important;
    color: white !important;
}
footer ul.ul-menu {
    list-style-type: none;
    margin: 0;
    padding: 6px 0 0 24px;
}
footer ul.ul-menu li {
    padding-bottom: 6px;
}
footer ul.ul-menu li a {
    letter-spacing: 1px;
    transition: 0.3s ease-in-out all;
    font-size: 16px;
}
footer ul.ul-menu li a:hover {
    color: var(--avs-color-03) !important;
}
footer ul.ul-menu li a .fa-pushed:before {
    content: "•";
}
footer::before {
    content: "";
    background: rgba(0,0,0,.8);
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* --- Scrollbar --- */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #F5F5F5;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    background-color: var(--avs-color-02);
}

/* --- Copy URL button (interaction-triggered, not part of initial layout) --- */
button#btn-copy_url { transition: all 0.3s ease-in-out; }
button#btn-copy_url span { display: none; }
button#btn-copy_url.correct-animate span {
    display: inline-block;
    animation: correct_animation 0.6s;
}
@keyframes correct_animation {
    0%   { transform: scale(0.5) rotate(-5deg); }
    25%  { transform: rotate(5deg); }
    50%  { transform: rotate(-5deg); }
    75%  { transform: rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* --- Skeleton loading (only ever shown while an AJAX list is loading, i.e. always
   after the page's own CSS has long since arrived) --- */
tr.sk-loading h1, tr.sk-loading h2, tr.sk-loading h3,
tr.sk-loading h4, tr.sk-loading h5, tr.sk-loading h6,
tr.sk-loading span, tr.sk-loading a {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: SKloading 10s infinite;
    display: inline-block;
    border-radius: 4px;
    width: 100%;
    height: 16px;
}
@keyframes SKloading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Pagination (below the content list it paginates) --- */
.pagination .navJs {
    box-shadow: none !important;
    background-color: transparent;
}
.pagination .navJs ul { flex-wrap: wrap; justify-content: end; }
.pagination .navJs li { border-radius: 8px !important; margin: 4px; }
.pagination .navJs a {
    border-radius: inherit !important;
    color: #333;
    border: 1px solid lightgrey;
}
.pagination .navJs .active {
    color: white !important;
    background-color: var(--avs-color-01) !important;
}

/* --- Share (below the article/product content it shares) --- */
.div-share { flex-wrap: wrap; }
.div-share iframe { margin-left: 8px; }
.div-share a {
    height: 32px !important;
    width: 32px !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1/1;
}
.div-share .line-it-button {
    height: 32px !important;
    width: 32px !important;
    margin-top: 1px !important;
    margin-left: 8px !important;
}
.div-share .btn-share {
    font-size: 12px;
    line-height: 12px;
    height: 32px;
    padding: 0;
    border-radius: 20px !important;
    color: #fff;
    background-color: #4CAF50;
    width: 86px;
}

/* --- Misc --- */
.tag-not-found {
    position: absolute;
    color: #6a6a6a;
    font-style: italic;
    letter-spacing: 1px;
    text-align: center;
    font-size: 12px;
    display: block;
    z-index: 1;
    user-select: none;
    border-radius: 12px;
    background-color: #ededed;
    padding: 2px 14px;
}
.fb_iframe_widget > span,
.fb_iframe_widget > span > iframe {
    width: 100% !important;
}

/* --- Google Maps footer facade: click-to-load placeholder, real iframe swapped in by app.js --- */
.map-facade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(0, 128, 0, 0.35);
    border-radius: 8px;
    background:
        linear-gradient(rgba(0, 128, 0, 0.06), rgba(0, 128, 0, 0.06)),
        repeating-linear-gradient(45deg, #f4f6f4, #f4f6f4 12px, #eef1ee 12px, #eef1ee 24px);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.map-facade:hover,
.map-facade:focus-visible {
    border-color: var(--avs-color-02, #008000);
    outline: none;
}
.map-facade__icon {
    font-size: 2.5rem;
    color: var(--avs-color-02, #008000);
}
.map-facade__label {
    font-size: .95rem;
    color: #333;
}
.map-facade iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Facebook page-timeline widget footer facade: same click/auto-load pattern as the map above.
   The FB SDK + XFBML parsing is heavy and was previously loaded unconditionally on every page,
   so most visitors (who never reach the footer) paid its cost for nothing --- */
.fb-facade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 340px;
    min-height: 500px;
    border: 1px dashed rgba(24, 119, 242, 0.35);
    border-radius: 8px;
    background:
        linear-gradient(rgba(24, 119, 242, 0.06), rgba(24, 119, 242, 0.06)),
        repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 12px, #eef2f8 12px, #eef2f8 24px);
    transition: background-color .2s ease, border-color .2s ease;
    padding: 16px;
    text-align: center;
}
/* Trigger (button) and the direct link are two separate, non-nested tap targets — each padded
   to ~44px so PageSpeed's "tap targets too small/close" audit doesn't flag them (a role="button"
   div with a real <a> nested inside it, like this used to be, fails that audit because the two
   overlap with zero effective spacing) */
.fb-facade__trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    padding: 16px 20px;
    min-height: 44px;
    font-family: inherit;
}
.fb-facade__trigger:hover,
.fb-facade__trigger:focus-visible {
    background-color: rgba(24, 119, 242, 0.1);
    outline: 2px solid #1877f2;
    outline-offset: 2px;
}
.fb-facade__icon {
    font-size: 2.5rem;
    color: #1877f2;
}
.fb-facade__label {
    font-size: .95rem;
    color: #333;
}
.fb-facade__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    font-size: .85rem;
    color: #1877f2;
}
.fb-facade .fb-page {
    width: 100%;
}

/* --- Google Translate: suppress injected top banner & style widget. Google's own script
   loads and inserts this widget's DOM asynchronously anyway, so there's nothing for this CSS
   to apply to until well after the page's own critical CSS has already arrived. --- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
#google_translate_element .goog-te-gadget { font-size: 0; }
#google_translate_element .goog-te-gadget > span { display: none; }
#google_translate_element .select2-container { min-width: 130px; display: block;}
#google_translate_element .select2-selection--single {
    height: 28px;
    border-color: #ccc;
    background: #fff;
    border-radius: 4px;
}
#google_translate_element .select2-selection__rendered {
    color: var(--avs-color-02);
    line-height: 26px;
    font-size: 13px;
}
#google_translate_element .select2-selection__arrow b {
    border-color: var(--avs-color-02) transparent transparent;
}
#google_translate_element .select2-selection__arrow { top: 2px; }
.title-line { font-size: 16px; }