/* ===========
   Top Section
   =========== */

div.top-section
{
    padding-top:20px;
    background-color: var(--yappy-welcome-gray);
}

div.top-section .col-md-6 h2
{
    margin-top: 1rem;
}

div.top-message
{
    background-color: rgba(91,11,153,.25);
    color: #5b0b99;
}

/* Product Image */

.image-previous
{
    width: 16px;
    height: 24px;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.image-next
{
    width: 16px;
    height: 24px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.product-image-container
{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    min-height: 300px; /* reserve space so arrows center correctly before image load */
}

/* Description, price etc */

.pick-a-colour
{
    font-family: "gilroybold", "Century Gothic", "Futura", serif;
    font-size: 0.9rem;
    color: var(--yappy-purple);
    margin-bottom: 0.65rem;
    display: inline-block;
}

.top-section .read-reviews-link
{
    font-size: 0.8rem;
}

.top-section .read-reviews-link a
{
    text-decoration: none;
}

div.top-message .message
{
    font-family: "gilroybold", "Century Gothic", "Futura", serif;
}

.offer-price
{
    color: var(--yappy-red);
    font-family: "gilroybold", "Century Gothic", "Futura", serif;
}

.previous-price
{
    text-decoration: line-through;
    color: var(--yappy-text-gray);
}

.price, .product-price {
    font-family: "gilroymedium", "Century Gothic", "Futura"
}

.price {
    color: #646363;
    font-size: 1.25rem;
    line-height:1.25rem
}

.product-price {
    font-size:0
}

.product-price .currency, .product-price .pounds {
    font-size:1.25rem
}

.product-price .pence, .product-price .seperator {
    font-size: .75rem;
    vertical-align:22%
}

/* Animal Selector */

.animal-selector.dropdown
{
    display: inline;
    font-family: "gilroymedium", "Century Gothic", "Futura", serif;
}

.animal-selector.dropdown .btn.dropdown-toggle
{
    background-color: var(--white);
    text-transform: uppercase;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 2rem;
    box-shadow: none;
}

.animal-selector.dropdown .btn.dropdown-toggle::after
{
    display: none;
}

.animal-selector.dropdown .yappicon
{
    height: 36px;
    width: 36px;
}

.animal-selector.dropdown .dropdown-menu
{
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .125);
}

.animal-selector.dropdown .dropdown-item
{
    padding: .5rem 1.5rem .5rem .75rem;
    color: var(--yappy-purple);
    font-size: .85rem;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.animal-selector.dropdown .dropdown-item:hover
{
    background-color: var(--yappy-light-gray);
}

.animal-selector.dropdown .dropdown-item img.yappicon
{
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.animal-selector.dropdown .dropdown-item img.add-dog
{
    padding: 3px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.animal-selector.dropdown .dropdown-item.add-dog-item
{
    border-bottom: none;
    border-radius: 0 0 .25rem .25rem;
}

.menu-arrow img
{
    width: .75rem;
    height: .75rem;
    transition: transform .2s ease-in-out;
}

.menu-arrow-holder[aria-expanded=true] .menu-arrow img
{
    transform: rotate(-180deg);
}

.menu-arrow-large img
{
    height: 1rem;
    width: 1rem;
}

/* Other Bits */

.star-on
{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'><polygon fill='%2330d5c8' points='13 0 9.47916667 8.80208333 0 9.4453125 7.27864583 15.5390625 4.9765625 24.7135417 13 19.6692708 21.0234375 24.7135417 18.7213542 15.5390625 26 9.4453125 16.5208333 8.80208333'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-bottom:1px;
}

.star-off
{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'><polygon fill='%23b9f0ec' points='13 0 9.47916667 8.80208333 0 9.4453125 7.27864583 15.5390625 4.9765625 24.7135417 13 19.6692708 21.0234375 24.7135417 18.7213542 15.5390625 26 9.4453125 16.5208333 8.80208333'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-bottom:1px;
}

.limited-time-offer
{
    color: var(--yappy-red);
    text-transform: uppercase;
    font-family: "gilroybold", "Century Gothic", "Futura", serif;
    font-size: 0.8rem;
}

/* Color Selector Radio Buttons */

.product-option-colour span
{
    cursor:pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 2rem;
    border: 1px solid #dfdfdf;
    box-shadow: inset 0 0 0 3px #fff;
    background-size: cover;
    background-position: center;
    transition: border-color 0.3s ease;
}

.product-option-colour input[type="radio"]:checked + span
{
    border-color: var(--yappy-purple);
    border-width: 2px;
}

/* Tighten spacing between size and colour sections */
.product-option-size + .product-option-colour,
.product-option-colour ul.list-inline,
.product-option-size ul.list-inline
{
    margin-bottom: 0;
}

.product-option-colour .list-inline-item,
.product-option-size .list-inline-item
{
    padding-bottom: 0;
}

/* Size Options - pill style radio buttons */

.product-option-size ul
{
    margin: 0;
    padding: 0;
}

.product-option-size .size-option
{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.product-option-size .size-option input[type="radio"]
{
    position: absolute;
    opacity: 0;
}

.product-option-size .size-option span
{
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 2rem;
    border: 2px solid #e6e6e6;
    color: var(--yappy-purple);
    background-color: #ffffff;
    font-family: "gilroymedium", "Century Gothic", "Futura", serif;
    font-size: 0.8rem;
    transition: all .15s ease-in-out;
    box-shadow: 0 0 0 0 rgba(91,11,153,0);
}

.product-option-size .size-option input[type="radio"]:checked + span
{
    border-color: var(--yappy-purple);
    background-color: rgba(91,11,153,.08);
    box-shadow: 0 0 0 2px #ffffff inset;
}

.product-option-size .size-option:hover span
{
    border-color: var(--yappy-purple);
}

/* Shipping Info */

.ship-info
{
    font-size: 0.8rem;
    color: var(--yappy-purple);
}

/* ==============
   Middle Section
   ============== */

.middle-section
{
    font-size:0.9rem;
}

.middle-section h3
{
    font-size:1rem;
    font-family: "gilroybold", "Century Gothic", "Futura", serif;
}

.middle-section ul
{
    list-style:none;
    padding-left:0;
}

.middle-section ul li
{
    background-image: url(/artwork/furniture/tick-purple.svg);
    background-repeat: no-repeat;
    padding-left: 20px;
    background-size: 14px;
    background-position-x: left;
    background-position-y: center;
    margin-left:0;
}

.middle-section
{
    padding: 20px;
}

.social img
{
    width:24px;
    height:24px;
}
.social a {
    margin-right:7px;
    text-decoration:none;
}

/* ===============
   Reviews Section
   =============== */

.big-star .star-on
{
    width: 28px;
    height: 28px;
}

.big-star .star-off
{
    width: 28px;
    height: 28px;
}

.review-score
{
    font-size: 1.7rem;
    color: var(--yappy-purple);
    font-weight: bold;
    line-height:28px;
    vertical-align: middle;
    margin-left: 6px;
}

.based-on
{
    font-size: 0.9rem;
    color: var(--yappy-text-gray);
}

.score-container {
    width: 250px;
    height: 16px;
    background-color: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 1rem;
    display: inline-block;
    vertical-align: middle;
}

.score-bar {
    display: block;
    height: 100%;
    background-color: #30d5c8;
    border-radius: 8px 0 0 8px;
}

.score-label
{
    color: var(--yappy-purple);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.rating-row {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.rating-label {
    display: inline-block;
    color: var(--yappy-purple);
    width: 2em;
    text-align: right;
}

.powered-by
{
    font-size: 0.8rem;
    color: var(--yappy-text-gray);
    text-align: left;
    margin-top: 1rem;
    vertical-align: middle;
}

.powered-by img
{
    margin-left: 4px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

.yappicon {
    width: 35px;
    height:35px
}

.reviews .reviewer-details .by {
    color: #5b0b99;
    font-size: .85rem;
    line-height:1rem
}

.reviews .reviewer-details .time-ago {
    color: var(--yappy-text-gray);
    font-size:.85rem
}

.reviews .reviewer-stars
{
    margin-bottom:0.5rem;
}

.reviews .reviewer-text
{
    font-size: 0.9rem;
    color: var(--yappy-purple);
    margin-bottom: 0.5rem;
}