/**
 * Theme Name: Astra Child
 * Author: Brainstorm Force
 * Author URI: http://wpastra.com/about/
 * Description: Astra Child theme custom styling for The GrandPawLace.
 * Version: 1.0.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: astra-child
 * Template: astra
 */

/*BRAND TOKENS / GLOBAL VARIABLES*/
:root {
    --gpl-color-gold: #E0B152;
    --gpl-color-gold-dark: #e4b44f;
    --gpl-color-navy: #16213a;
    --gpl-color-navy-dark: #172136;
    --gpl-color-text: #4f5a6d;
    --gpl-color-muted: #5f6878;
    --gpl-color-white: #ffffff;
    --gpl-color-arrow: #2b2d33;

    --gpl-shadow-card: 0 18px 45px rgba(22, 33, 58, 0.08);
    --gpl-radius-card: 22px;
    --gpl-radius-button: 10px;

    --gpl-transition-fast: .25s ease;
    --gpl-transition-normal: .35s ease;
    --gpl-transition-content: .45s ease;

    --gpl-icon-paw: url('/wp-content/uploads/2026/04/pets-icon.webp');
    --gpl-icon-sparkle: url('/wp-content/uploads/2026/04/sparkle.webp');
}


/*TYPOGRAPHY / FONT SIZE SYSTEM*/
body { font-size: 1rem; }

h1 { font-size: 3.75rem; }
h2 { font-size: 3rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.Custom-Font p,
.gpl-most-popular-label {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: var(--gpl-color-gold);
    transform: rotate(-2deg);
}

@media (max-width: 1199px) {
    body { font-size: 0.9375rem; }
    h1 { font-size: 3.25rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.375rem; }
    h5 { font-size: 1.125rem; }
}

@media (max-width: 768px) {
    body { font-size: 0.875rem; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3,
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
}


/*GENERAL BUTTONS / ICON BUTTON EFFECTS*/
button.book_button {
    width: 156px !important;
    font-weight: 600;
    border: 1px solid var(--gpl-color-gold);
}

button.book_button:hover {
    background: var(--gpl-color-white);
    color: var(--gpl-color-gold);
}

.forminator-button-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forminator-button-submit::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: middle;
    background: var(--gpl-icon-paw) center / contain no-repeat;
    transition: transform var(--gpl-transition-fast);
}

.forminator-button-submit:hover::after,
.gpl-pricing-card:hover .gpl-book-button:hover::after {
    transform: scale(1.2) rotate(-16deg);
}

.paw {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    transform-origin: center;
    transition: transform .2s ease;
}

.fl-button:hover .paw {
    transform: scale(1.2) rotate(-16deg) translateX(8px);
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

.fl-button-group:hover .hover {
    padding-left: 8px;
    rotate: -16deg;
    transform: scale(1.2);
    transition: all .2s ease;
}


/*HEADER / ASTRA MENU ADJUSTMENT*/
.ast-desktop:not(:has(.ast-header-sticked)) .ast-primary-header-bar .main-header-menu > .menu-item {
    line-height: 40px;
}


/*DECORATIVE TITLE / BOARDING HOVER ANIMATION*/
.boarding-wrap { position: relative; }

.title-trick {
    position: absolute;
    top: 20px;
    right: 30px;
    rotate: -5deg;
}

.boarding-wrap .title-trick {
    opacity: 0;
    transform: translateY(40px);
}

.boarding-wrap:hover .title-trick {
    animation: bounceUpSmooth .7s forwards;
}

@keyframes bounceUpSmooth {
    0%   { opacity: 0; transform: translateY(40px); }
    50%  { opacity: 1; transform: translateY(-12px); }
    70%  { opacity: 1; transform: translateY(6px); }
    85%  { opacity: 1; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}


/*PRICING CAROUSEL / STRUCTURE*/
.gpl-pricing-carousel-wrap {
    position: relative;
    width: 100%;
    padding-top: 20px;
    overflow: visible;
}

.gpl-pricing-track {
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding-top: 8px;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    user-select: none;
}

.gpl-pricing-track::-webkit-scrollbar { display: none; }


/*PRICING CAROUSEL / CARD TOP, PRICE & IMAGE*/
.gpl-pricing-card {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 56px) / 3);
    flex-direction: column;
    min-height: 690px;
    padding: 46px 40px 42px;
    overflow: visible;
    background: var(--gpl-color-white);
    border: 1px solid var(--gpl-color-gold-dark);
    border-radius: var(--gpl-radius-card);
    transition: border-color var(--gpl-transition-normal), box-shadow var(--gpl-transition-normal), transform var(--gpl-transition-normal);
}

.gpl-pricing-card:hover {
    border-color: var(--gpl-color-gold-dark);
    box-shadow: var(--gpl-shadow-card);
}

.gpl-card-top {
    position: relative;
    z-index: 3;
    min-height: 158px;
}

.gpl-pricing-card h3 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--gpl-color-navy);
}

.gpl-weight {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.35;
    color: var(--gpl-color-muted);
}

.gpl-price {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.gpl-price span {
    font-size: 48px;
    font-weight: 500;
    line-height: .95;
    color: var(--gpl-color-gold-dark);
}

.gpl-price small {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--gpl-color-text);
}

.gpl-dog-image {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin: auto 0;
    text-align: center;
    transition: opacity .9s ease, filter .5s ease, transform .5s ease;
}

.gpl-dog-image img {
    width: 100%;
    max-width: 260px;
    max-height: 300px;
    height: auto;
    object-fit: contain;
    transition: opacity .9s ease, filter .5s ease, transform .5s ease;
}


/*PRICING CAROUSEL / MOST POPULAR BADGE*/
.gpl-most-popular-label {
    position: relative;
    z-index: 8;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 1;
}

.gpl-most-popular-ribbon {
    position: absolute;
    top: -5px;
    right: 34px;
    z-index: 9;
    width: 42px;
    height: auto;
    pointer-events: none;
}


/*PRICING CAROUSEL / CONTENT LIST*/
.gpl-content {
    position: relative;
    z-index: 4;
    max-height: 0;
    margin: 14px 0 32px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity var(--gpl-transition-content), visibility var(--gpl-transition-content), transform var(--gpl-transition-content);
}

.gpl-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gpl-content li {
    position: relative;
    margin-bottom: 19px;
    padding-left: 32px;
    font-size: 20px;
    line-height: 1.45;
    color: var(--gpl-color-text);
    opacity: 0;
    transform: translateY(12px);
}

.gpl-content li:last-child { margin-bottom: 0; }

.gpl-content li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--gpl-icon-sparkle) center / contain no-repeat;
}

@keyframes gplBulletFade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}


/*PRICING CAROUSEL / BOOK BUTTON*/
.gpl-book-button {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    color: var(--gpl-color-gold-dark);
    border-radius: var(--gpl-radius-button);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: all .3s ease;
}

.gpl-book-button img { display: none; }

.gpl-book-button::after {
    content: "";
    display: inline-block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    background-color: var(--gpl-color-gold);
    mask: var(--gpl-icon-paw) center / contain no-repeat;
    -webkit-mask: var(--gpl-icon-paw) center / contain no-repeat;
    transition: background-color var(--gpl-transition-fast), transform var(--gpl-transition-fast);
}

.gpl-pricing-card:hover .gpl-book-button {
    width: 100%;
    margin-top: auto;
    padding: 14px 22px;
    background: var(--gpl-color-gold-dark);
    color: var(--gpl-color-navy);
    font-weight: 700;
}

.gpl-pricing-card:hover .gpl-book-button::after { background-color: var(--gpl-color-navy); }

.gpl-pricing-card:hover .gpl-book-button:hover {
    background: var(--gpl-color-navy);
    color: var(--gpl-color-white);
}

.gpl-pricing-card:hover .gpl-book-button:hover::after { background-color: var(--gpl-color-white); }


/*PRICING CAROUSEL / DESKTOP HOVER STATES*/
@media (min-width: 769px) {
    .gpl-pricing-card:hover .gpl-dog-image,
    .gpl-pricing-card:hover .gpl-dog-image img {
        opacity: 0;
        filter: blur(8px);
        transform: scale(1.16) translateY(24px);
    }

    .gpl-pricing-card:hover .gpl-dog-image {
        min-height: 0;
        height: 0;
        margin: 0;
        pointer-events: none;
    }

    .gpl-pricing-card:hover .gpl-content {
        max-height: 460px;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .gpl-pricing-card:hover .gpl-content li { animation: gplBulletFade .45s ease forwards; }

    .gpl-pricing-card:hover .gpl-content li:nth-child(1)  { animation-delay: .05s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(2)  { animation-delay: .10s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(3)  { animation-delay: .15s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(4)  { animation-delay: .20s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(5)  { animation-delay: .25s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(6)  { animation-delay: .30s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(7)  { animation-delay: .35s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(8)  { animation-delay: .40s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(9)  { animation-delay: .45s; }
    .gpl-pricing-card:hover .gpl-content li:nth-child(10) { animation-delay: .50s; }
}


/*PRICING CAROUSEL / ARROW BUTTONS*/
.gpl-carousel-arrow {
    position: absolute;
    bottom: -58px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--gpl-color-arrow);
    color: var(--gpl-color-white);
    border: 0;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 300;
    line-height: 34px;
    cursor: pointer;
    transition: background var(--gpl-transition-fast), color var(--gpl-transition-fast), opacity var(--gpl-transition-fast), transform var(--gpl-transition-fast);
}

.gpl-carousel-arrow:hover {
    background: var(--gpl-color-gold-dark);
    color: var(--gpl-color-navy);
    transform: translateY(-1px);
}

button.gpl-carousel-arrow.gpl-prev {
    right: 52px;
    background: var(--gpl-color-white);
    color: var(--gpl-color-gold);
}

button.gpl-carousel-arrow.gpl-next {
    right: 8px;
    background: var(--gpl-color-navy-dark);
    color: var(--gpl-color-white);
}


/*PAGE LOADER OVERLAY*/
body:not(.gpl-loading-active) #gpl-page-loader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#gpl-page-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

#gpl-page-loader .gpl-page-loader__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#gpl-page-loader .gpl-page-loader__dog {
    display: block;
    width: 140px;
    max-width: 140px;
    height: auto;
    object-fit: contain;
}

#gpl-page-loader .gpl-page-loader__inner::after {
    content: "Loading";
    display: block;
    margin-top: 8px;
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gpl-color-navy);
    text-align: center;
    animation: gplLoadingPulse 1.1s ease-in-out infinite;
}

#gpl-page-loader.gpl-slide-up {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
}

@keyframes gplLoadingPulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}


/*RESPONSIVE / TABLET */
@media (max-width: 1024px) {
    .gpl-pricing-card {
        flex-basis: calc((100% - 28px) / 2);
        min-height: 660px;
        padding: 42px 34px 38px;
    }

    .gpl-pricing-card h3 { font-size: 28px; }
    .gpl-price span { font-size: 44px; }
    .gpl-dog-image img { max-width: 240px; }
}


/*RESPONSIVE / MOBILE*/
@media (max-width: 768px) {
    .gpl-pricing-carousel-wrap { padding-bottom: 70px; }

    .gpl-pricing-card {
        flex-basis: 100%;
        min-height: auto;
        padding: 40px 28px 34px;
    }

    .gpl-card-top { min-height: auto; }
    .gpl-pricing-card h3 { font-size: 28px; }
    .gpl-weight { font-size: 18px; }
    .gpl-price span { font-size: 44px; }
    .gpl-price small { font-size: 15px; }

    .gpl-dog-image {
        min-height: auto;
        height: auto;
        margin: 30px 0;
    }

    .gpl-dog-image,
    .gpl-dog-image img {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .gpl-dog-image img {
        max-width: 220px;
        max-height: none;
    }

    .gpl-content {
        max-height: none;
        margin: 0 0 30px;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .gpl-content li {
        margin-bottom: 16px;
        font-size: 18px;
        opacity: 1;
        transform: none;
    }

    .gpl-book-button {
        width: 100%;
        margin-top: auto;
        padding: 14px 22px;
        background: var(--gpl-color-gold-dark);
        color: var(--gpl-color-navy);
        font-weight: 700;
    }

    .gpl-book-button:hover {
        background: var(--gpl-color-navy);
        color: var(--gpl-color-white);
    }

    .gpl-carousel-arrow {
        top: auto;
        bottom: 0;
    }

    #gpl-page-loader .gpl-page-loader__dog {
        width: 120px;
        max-width: 120px;
    }

    #gpl-page-loader .gpl-page-loader__inner::after {
        margin-top: 6px;
        font-size: 14px;
    }
}


/* RESPONSIVE / SMALL MOBILE*/
@media (max-width: 480px) {
    .gpl-pricing-track { gap: 20px; }

    .gpl-pricing-card { padding: 34px 24px 30px; }
    .gpl-pricing-card h3 { font-size: 26px; }
    .gpl-price span { font-size: 40px; }

    .gpl-content li {
        padding-left: 30px;
        font-size: 17px;
    }

    .gpl-content li::before {
        top: 6px;
        width: 16px;
        height: 16px;
    }
}