/* =========================================================
   PET ADOPTION PORTAL
   Shih Tzu Rescue — RescueGroups Toolkit
   ========================================================= */

/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
    width: 100% !important;
    max-width: 850px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.page-header .page-kicker,
.page-header .page-title,
.page-header .page-intro {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-header .page-kicker {
    display: block !important;
}

.page-header .page-title {
    display: block !important;
}

.page-header .page-intro {
    display: block !important;
    max-width: 700px !important;
}

/* =========================================================
   PORTAL CONTAINER
   ========================================================= */

.rgtkSearchContainer {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto 35px auto !important;
    padding: 28px 30px 38px 30px !important;

    box-sizing: border-box !important;

    background: #eeeeee !important;
    border-radius: 14px !important;

    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
}


/* =========================================================
   SEARCH AREA
   ========================================================= */

#rgtkSearchFormBox_0 {
    width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 18px 20px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    border-radius: 10px !important;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06) !important;
}


/* Search form */

.rgtkSearchForm {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* Search labels */

.rgtkSearchFormTitle,
.rgtkSearchLabel {
    font-family: "Poppins", sans-serif !important;
    font-size: 1.45rem !important;
    color: #555 !important;
}


/* Select menus */

.rgtkSearchFormSelect {
    height: 40px !important;
    padding: 5px 30px 5px 10px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.4rem !important;
    color: #555 !important;

    background: #fff !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
}


/* Free-text search */

.rgtkSearchString {
    height: 40px !important;
    width: 190px !important;

    padding: 6px 12px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.4rem !important;
    color: #555 !important;

    background: #fff !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
}


.rgtkSearchString::placeholder {
    color: #999 !important;
}


/* Search buttons */

.rgtkSearchButtons {
    padding-top: 15px !important;
    text-align: center !important;
}

.rgtkSearchButtons input,
#rgtkSearchSubmit_0,
#rgtkSearchClear_0 {
    height: 40px !important;

    padding: 6px 18px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.35rem !important;

    color: #fff !important;
    background: #333333 !important;

    border: none !important;
    border-radius: 6px !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease !important;
}


.rgtkSearchButtons input:hover,
#rgtkSearchSubmit_0:hover,
#rgtkSearchClear_0:hover {
    background: #c9781d !important;
    transform: translateY(-1px);
}


#rgtkSearchClear_0 {
    margin-left: 6px !important;
}


/* =========================================================
   SEARCH RESULTS SUMMARY / PAGINATION
   ========================================================= */

.rgtkSearchPageLinks {
    position: relative !important;

    min-height: 36px !important;
    margin: 5px 5px 12px 5px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.35rem !important;
    color: #666 !important;
}


.rgtkSearchFoundSummary {
    text-align: center !important;
    font-size: 1.35rem !important;
    color: #777 !important;
}


.rgtkSearchNextPrevLinks {
    font-size: 1.35rem !important;
}


.rgtkSearchNextPrevLinks a {
    color: #de8c29 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}


.rgtkSearchNextPrevLinks a:hover {
    color: #c9781d !important;
    text-decoration: underline !important;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.rgtkHR {
    border: 0 !important;
    border-top: 1px solid #d8d8d8 !important;
    height: 1px !important;

    margin: 15px 0 !important;

    background: transparent !important;
}


/* =========================================================
   RESULTS TABLE
   ========================================================= */

/*
   RescueGroups supplies a table-based layout.
   We keep the table functionality intact but give it
   generous spacing so the cards feel like a modern gallery.
*/

.rgtkSearchResultsTable {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    border-collapse: separate !important;
    border-spacing: 10px 18px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


.rgtkSearchResultsTable tbody {
    width: 100% !important;
}


.rgtkSearchResultsCell {
    width: auto !important;

    padding: 12px 10px 20px 10px !important;

    text-align: center !important;
    vertical-align: top !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DOG PHOTO
   ========================================================= */

/*
   RescueGroups places inline width/height values on the
   photo. These !important rules intentionally override
   those dimensions for the visual presentation.
*/

.rgtkSearchPetPicture {
    width: 100% !important;
    max-width: 180px !important;

    height: 230px !important;

    margin: 0 auto 14px auto !important;

    display: block !important;

    box-sizing: border-box !important;
}


.rgtkSearchPetPic {
    width: 180px !important;
    max-width: 100% !important;

    height: 230px !important;

    margin: 0 auto !important;

    display: block !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    background-color: #fff !important;

    border: 1px solid #d5d5d5 !important;
    border-radius: 12px !important;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.11) !important;

    box-sizing: border-box !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Gentle hover effect */

.rgtkSearchResultsCell:hover .rgtkSearchPetPic {
    transform: translateY(-3px);

    box-shadow:
        0 7px 17px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
   DOG NAME
   ========================================================= */

.rgtkSearchPetInfoAnimalName,
.rgtkSearchPetName a {
    margin: 5px auto 0 auto !important;
    padding: 0 4px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.65rem !important;
    line-height: 1.35 !important;

    font-weight: 600 !important;

    color: #555 !important;

    text-align: center !important;
}


/* Make clickable names feel clickable */

.rgtkSearchPetInfoAnimalName[onclick],
.rgtkSearchPetName[onclick] {
    cursor: pointer !important;
}


/* =========================================================
   BREED
   ========================================================= */

.rgtkSearchPetInfoAnimalBreed {
    margin: 4px auto 0 auto !important;
    padding: 0 5px !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 1.3rem !important;
    line-height: 1.4 !important;

    color: #777 !important;

    text-align: center !important;

    cursor: pointer !important;
}


/* =========================================================
   HOVER STATE
   ========================================================= */

.rgtkSearchResultsCell {
    transition: background-color 0.2s ease !important;
}


/*
   Very subtle hover background.
   Keeps the gray portal feeling while making each
   dog feel like an individual interactive item.
*/

.rgtkSearchResultsCell.rgtkHover {
    background: rgba(255, 255, 255, 0.42) !important;
    border-radius: 12px !important;
}


/* =========================================================
   BOTTOM PAGINATION
   ========================================================= */

.rgtkSearchPageLinksBottom {
    margin-top: 18px !important;
    padding-top: 10px !important;

    border-top: 1px solid #d8d8d8 !important;
}


/* =========================================================
   TABLE ROW DIVIDERS
   ========================================================= */

/*
   RescueGroups inserts HR rows between groups of dogs.
   Keep them subtle so they don't visually cut through
   the gallery.
*/

.rgtkSearchResultsTable tr > td[colspan] {
    padding: 0 !important;
}


.rgtkSearchResultsTable tr > td[colspan] .rgtkHR {
    margin: 3px 0 !important;
    opacity: 0.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1000px) {

    .rgtkSearchContainer {
        padding: 25px 20px 32px 20px !important;
    }

    .rgtkSearchResultsTable {
        border-spacing: 8px 16px !important;
    }

    .rgtkSearchPetPicture {
        max-width: 160px !important;
        height: 215px !important;
    }

    .rgtkSearchPetPic {
        width: 160px !important;
        height: 215px !important;
    }

    .rgtkSearchPetInfoAnimalName,
    .rgtkSearchPetName {
        font-size: 1.55rem !important;
    }

    .rgtkSearchPetInfoAnimalBreed {
        font-size: 1.25rem !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .rgtkSearchContainer {
        width: calc(100% - 20px) !important;
        margin: 0 auto 25px auto !important;

        padding: 18px 12px 25px 12px !important;

        border-radius: 10px !important;
    }


    /* Search becomes a comfortable vertical control area */

    #rgtkSearchFormBox_0 {
        padding: 15px 10px !important;
    }


    .rgtkSearchForm {
        line-height: 1.8 !important;
    }


    .rgtkSearchFormTitle,
    .rgtkSearchLabel {
        font-size: 1.4rem !important;
    }


    .rgtkSearchFormSelect {
        height: 40px !important;
        font-size: 1.35rem !important;
        margin-bottom: 7px !important;
    }


    .rgtkSearchString {
        width: 100% !important;
        max-width: 300px !important;
        margin: 8px auto 3px auto !important;
    }


    .rgtkSearchButtons {
        padding-top: 10px !important;
    }


    .rgtkSearchButtons input,
    #rgtkSearchSubmit_0,
    #rgtkSearchClear_0 {
        font-size: 1.3rem !important;
    }


    /* -----------------------------------------------------
       Stack RescueGroups results
       ----------------------------------------------------- */

    .rgtkSearchResultsTable,
    .rgtkSearchResultsTable tbody,
    .rgtkSearchResultsTable tr,
    .rgtkSearchResultsCell {
        display: block !important;

        width: 100% !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }


    .rgtkSearchResultsTable {
        border-spacing: 0 !important;
    }


    .rgtkSearchResultsCell {
        margin: 0 0 25px 0 !important;
        padding: 15px 10px 28px 10px !important;

        border-bottom: 1px solid #d8d8d8 !important;

        background: transparent !important;
    }


    /* Larger mobile photo */

    .rgtkSearchPetPicture {
        width: 100% !important;
        max-width: 320px !important;

        height: 320px !important;

        margin: 0 auto 15px auto !important;
    }


    .rgtkSearchPetPic {
        width: 100% !important;
        max-width: 320px !important;

        height: 320px !important;

        border-radius: 12px !important;
    }


    .rgtkSearchPetInfoAnimalName,
    .rgtkSearchPetName {
        font-size: 1.8rem !important;
        line-height: 1.35 !important;
    }


    .rgtkSearchPetInfoAnimalBreed {
        font-size: 1.4rem !important;
        line-height: 1.45 !important;
    }


    /* Don't show the artificial row dividers as separate blocks */

    .rgtkSearchResultsTable tr > td[colspan] {
        display: none !important;
    }


    /* Pagination */

    .rgtkSearchPageLinks {
        min-height: 0 !important;
        margin: 8px 0 15px 0 !important;
    }


    .rgtkSearchFoundSummary {
        margin: 8px 0 !important;
        font-size: 1.3rem !important;
    }


    .rgtkSearchNextPrevLinks {
        font-size: 1.35rem !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 380px) {

    .rgtkSearchContainer {
        width: calc(100% - 10px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .rgtkSearchPetPicture,
    .rgtkSearchPetPic {
        max-width: 290px !important;
        height: 290px !important;
    }


    .rgtkSearchPetInfoAnimalName,
    .rgtkSearchPetName {
        font-size: 1.7rem !important;
    }
}