/*
Theme Name: Lucky Pup Optical
Theme URI: https://luckypupoptical.com
Description: Custom theme for Lucky Puppy Optical - Santa Barbara Pediatric Eye Doctors
Author: Streben
Author URI: https://streben.io
Version: 2.2.0
Text Domain: luckypup
*/

/* ==========================================================================
   WordPress-Specific Overrides

   All main styling comes from the original Roya CMS CSS files:
   - bootstrap.min.css
   - common-global.css
   - dependencies.css
   - default.css
   - site.css
   - color_scheme_1.css
   - overrides.css

   This file only contains WP-specific fixes and Fluent Forms styling.
   ========================================================================== */

/* Fix WordPress admin bar overlap */
body.admin-bar #ry-header,
body.admin-bar #ry-pg-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar #ry-header,
    body.admin-bar #ry-pg-header {
        top: 46px;
    }
}

/* WordPress block editor content compatibility */
.ry-text .wp-block-image {
    margin-bottom: 20px;
}
.ry-text .wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Fluent Forms styling to match site theme */
.fluentform .ff-el-input--label label {
    font-family: 'Quicksand', 'Montserrat', sans-serif;
}
.fluentform .ff-btn-submit {
    background-color: #e74c3c !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-family: 'Quicksand', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.fluentform .ff-btn-submit:hover {
    background-color: #c0392b !important;
}

/* Ensure WordPress content renders properly within Roya structure */
.ry-left .entry-content,
.ry-left .ry-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* WordPress gallery fix */
.ry-text .gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
.ry-text .gallery-item {
    padding: 5px;
}

/* Hidden utility - used by Roya for section labels */
.hidden {
    display: none !important;
}

/* ==========================================================================
   Fix: Force first banner slide to show (Roya JS hides all via inline style)
   ========================================================================== */
/* Banner slides: JS randomly picks one to show; default to first visible as fallback */
#ry-pg-banner .ry-bnr-wrp {
    display: none;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    float: none !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1;
    min-height: 700px !important;
    height: 700px !important;
}
#ry-pg-banner .ry-bnr-wrp img,
#ry-pg-banner .ry-bnr-wrp img.img-responsive {
    min-height: 700px !important;
    height: 700px !important;
    object-fit: cover !important;
    width: 100% !important;
}
#ry-pg-banner .ry-bnr-wrp:first-of-type {
    display: block;
}
@media (max-width: 991px) {
    #ry-pg-banner .ry-bnr-wrp,
    #ry-pg-banner .ry-bnr-wrp img,
    #ry-pg-banner .ry-bnr-wrp img.img-responsive {
        min-height: 300px !important;
        height: 300px !important;
    }
}
#ry-pg-banner {
    position: relative;
    overflow: hidden;
    min-height: 700px !important;
    height: 700px !important;
}
#ry-pg-banner .ry-pg-title {
    position: absolute !important;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    float: none !important;
    width: 100% !important;
    height: auto !important;
}
#ry-pg-banner .ry-pg-title,
#ry-pg-banner .ry-pg-title * {
    float: none !important;
}
#ry-pg-banner .ry-pg-title h1 {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 65px;
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
/* SVG wave - hide originals inside bnr-wrp, use wp-banner-wave instead */
#ry-pg-banner .ry-bnr-wrp .svg-container {
    display: none !important;
}
/* fullwidth-raw pages (ortho-k, myopia, etc.) have colored content below banner —
   hide white wave or it floats visibly against the colored sections */
.page-template-template-fullwidth-raw #ry-pg-banner .wp-banner-wave {
    display: none !important;
}
#ry-pg-banner .wp-banner-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 5;
    line-height: 0;
}
#ry-pg-banner .wp-banner-wave svg {
    display: block;
    width: 100%;
}

/* WordPress-only banner title overlay (bypasses Roya CSS that collapses .ry-pg-title) */
.wp-banner-title-overlay {
    position: absolute !important;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    pointer-events: none;
}
.wp-banner-title-overlay h1 {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 65px;
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    margin: 0;
    padding: 40px;
}

/* ==========================================================================
   Issue 2: Header transparent and overlaid on inner pages
   ========================================================================== */
#ry-header,
#ry-pg-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
}

/* ==========================================================================
   Fix: Dropdown menus - the original default.css line 536 already has:
   .ry-menu .ry-nav li.dropdown:hover ul { display: block; }
   The JS adds .hover class for animation. We just ensure both work together.
   No additional CSS needed - the original handles it.
   ========================================================================== */

/* ==========================================================================
   Issue 7: Sidebar CTA card styling
   ========================================================================== */
.ry-sb-cta {
    margin-bottom: 15px;
}
.ry-sb-cta a {
    display: block;
    text-decoration: none;
}
.ry-sb-cta img {
    width: 100%;
    display: block;
}
.ry-sb-cta-title {
    background: #e3e8fe;
    color: #208389;
    text-align: center;
    padding: 12px 10px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==========================================================================
   Issue 8: Search button teal color
   ========================================================================== */
.ry-sb-search .btn,
.ry-sb-search .search-btn {
    background-color: #208389 !important;
    border-color: #208389 !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
}

/* ==========================================================================
   Issue 10: Hide back-to-top button
   ========================================================================== */
.back-to-top {
    display: none !important;
}

/* ==========================================================================
   Issue 11: Testimonials carousel arrows - solid dark circle style (live site)
   ========================================================================== */
.reviews-v2 .swiper-button-next,
.reviews-v2 .swiper-button-prev {
    border: none !important;
    background: #6b6b4e !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    opacity: 1 !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important;
}

/* Homepage group-one background (teal kids image from page-specific CSS on live site) */
.home .ry-group-one-bg {
    background-image: url('https://s3.amazonaws.com/static.organiclead.com/Site-72fb0951-37a4-47b1-92e2-c35de606404c/HomepageAssets/welcome_img_bg.jpg');
    background-size: cover;
    background-position: center center;
}

/* Ensure WP content images are responsive */
.ry-text img,
.ry-left img {
    max-width: 100%;
    height: auto;
}

/* Mobile menu active state */
.mobile_menu.active {
    display: block !important;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
}
.mobile_menu.active ul {
    list-style: none;
    padding: 0;
}
.mobile_menu.active ul li a {
    color: #fff;
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile_menu.active ul li .dropdown-menu {
    position: static !important;
    float: none;
    background: rgba(255,255,255,0.05);
    border: none;
    box-shadow: none;
    display: none;
}
.mobile_menu.active ul li.open > .dropdown-menu {
    display: block !important;
}

/* Nopadding utility class */
.nopadding {
    padding: 0 !important;
}

/* ==========================================================================
   Inner page banner
   Roya JS converts .ry-el-bg img to CSS background-image on the wrapper,
   then hides the img. The wrapper needs to be absolutely positioned to fill
   the banner, and the banner needs a set height.
   ========================================================================== */
#ry-pg-banner {
    position: relative;
    overflow: hidden;
    min-height: 700px !important;
    height: 700px !important;
    width: 100%;
    clear: both;
}
@media (max-width: 1024px) {
    #ry-pg-banner {
        height: 500px !important;
    }
}
@media (max-width: 991px) {
    #ry-pg-banner {
        height: 300px !important;
        min-height: 300px !important;
    }
}
@media (max-width: 500px) {
    #ry-pg-banner {
        height: 300px !important;
        min-height: 300px !important;
    }
}
#ry-pg-banner .ry-bnr-wrp.ry-el-bg {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    float: none !important;
    z-index: 1;
}
/* Banner slides hidden by default; JS rotates randomly */
/* Page title overlay - positioned over the banner image */
#ry-pg-banner .ry-pg-title {
    position: absolute !important;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
}
/* SVG wave at bottom of banner */
#ry-pg-banner .svg-container {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 5;
    line-height: 0;
}
#ry-pg-banner .svg-container svg {
    display: block;
}
/* Eliminate any gap between banner and content below */
#ry-pg-banner {
    margin-bottom: -1px;
}
#ry-pg-banner h1 {
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 65px;
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    text-align: center;
    margin: 0;
    padding: 40px;
    font-family: 'Quicksand', sans-serif;
}

/* ==========================================================================
   Fix #5: Google social icon - red background like live site
   ========================================================================== */
.ry-social li:first-child a,
.ry-social li a[href*="google"] {
    background-color: #db4437 !important;
    color: #fff !important;
}
.ry-social li a[href*="instagram"] {
    background-color: #e1306c !important;
    color: #fff !important;
}
.ry-social li a[href*="yelp"] {
    background-color: #d32323 !important;
    color: #fff !important;
}

/* ==========================================================================
   Fix #7: Hide post date/meta on single posts (live site doesn't show it)
   ========================================================================== */
.single .post-meta-line,
.single .entry-meta,
.single .post-date-category {
    display: none !important;
}

/* ==========================================================================
   Fix #8: Override text-align justify on inner pages
   ========================================================================== */
.ry-left .ry-text,
.ry-left .ry-text p,
.ry-left p,
#ry-pg-body .ry-text,
#ry-pg-body .ry-text p {
    text-align: left !important;
}

/* ==========================================================================
   Fix: Ensure inner page content sections render with proper backgrounds
   ========================================================================== */
.ry-section {
    position: relative;
}
.ry-section .ry-container {
    position: relative;
    z-index: 2;
}

/* Fix: Ensure content imported from Roya shows text on colored backgrounds */
.ry-group-one-bg,
[class*="module-"] {
    position: relative;
}
.ry-group-one-bg .ry-text,
[class*="module-"] .ry-text {
    position: relative;
    z-index: 2;
}

/* Fix: WordPress sidebar widgets styling */
.sidebar-widget {
    margin-bottom: 25px;
}
.sidebar-widget .widget-title {
    color: #208389;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
}
.sidebar-widget ul {
    list-style: none;
    padding: 0;
}
.sidebar-widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.sidebar-widget ul li a {
    color: #333;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
}
.sidebar-widget ul li a:hover {
    color: #208389;
}

/* ==========================================================================
   Issue 5: Blog listing (Roya-style) list items
   ========================================================================== */
.ry-list-wrp {
    padding: 0;
}
.ry-list-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
    align-items: flex-start !important;
}
.ry-list-item:last-child {
    border-bottom: none;
}
.ry-list-photo img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.ry-list-title {
    margin-top: 0;
}
.ry-list-title a,
.ry-list-link {
    color: #208389;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}
.ry-list-title a:hover {
    color: #166367;
}
.ry-list-excerpt p {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}
.ry-list-more.ry-btn-primary {
    background-color: #208389 !important;
    border-color: #208389 !important;
    color: #fff !important;
    padding: 10px 28px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    height: auto !important;
    line-height: normal !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
}
.ry-list-more.ry-btn-primary:hover {
    background-color: #166367 !important;
}
.ry-btn-container {
    text-align: left;
}

/* ==========================================================================
   Issue 13: Contact page form styling
   ========================================================================== */
.ry-form {
    padding: 15px 0;
}

/* ==========================================================================
   Dropdown menus: Original default.css handles all styling and animation.
   jQuery in footer.php adds .hover class. No overrides needed here.
   ========================================================================== */

/* ==========================================================================
   Fix: Accessibility widget (UserWay) position - bottom right
   ========================================================================== */
.uwy .uai,
.uwy {
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}
/* Override UserWay inline positioning */
body .uwy .uai {
    position: fixed !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    top: auto !important;
}

/* ==========================================================================
   Fix: Inner page banner H1 title - ensure proper rendering
   ========================================================================== */
#ry-pg-banner .ry-pg-title h1,
.ry-pg-title h1 {
    font-size: 42px;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 2px;
    margin: 0;
    padding: 40px;
}
@media (min-width: 992px) {
    #ry-pg-banner .ry-pg-title h1,
    .ry-pg-title h1 {
        font-size: 65px;
    }
}

/* ==========================================================================
   Fix: Text-align left (not justify) on inner pages
   ========================================================================== */
.ry-text, .ry-text p, #ry-pg-body p, .ry-left p, .entry-content p {
    text-align: left !important;
}
/* Allow centered text on reviews page */
#review-main-section p[style*="text-align: center"],
#review-main-section h1[style*="text-align: center"],
#review-main-section div p,
.page-reviews #ry-pg-body #review-main-section p,
.page-reviews .ry-text p[style*="text-align: center"],
.page-reviews .ry-left p[style*="text-align: center"],
.page-leave-us-a-review .ry-text p[style*="text-align: center"],
.page-leave-us-a-review .ry-left p[style*="text-align: center"],
#review-main-section > .col-xs-12 > div > p,
.page-reviews #review-main-section p {
    text-align: center !important;
}
/* Also center h1 on reviews pages */
#review-main-section h1,
.page-reviews #review-main-section h1,
#review-thank-you h1,
#review-publish-extra h1 {
    text-align: center !important;
}

/* ==========================================================================
   Fix: Hide .ry-pg-title entirely - the .wp-banner-title-overlay h1 is the
   single visible title. This prevents duplicate title text in the banner.
   ========================================================================== */
#ry-pg-banner .ry-pg-title {
    display: none !important;
}

/* ==========================================================================
   Contact form field styling to match live site
   ========================================================================== */
.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content input[type="tel"],
.fluentform .ff-el-input--content input[type="number"],
.fluentform .ff-el-input--content textarea,
.ry-form input[type="text"],
.ry-form input[type="email"],
.ry-form input[type="tel"],
.ry-form textarea {
    border-radius: 30px !important;
    height: 60px !important;
    padding: 6px 12px 6px 30px !important;
    font-size: 18px !important;
    border: 1px solid #d9d9d9 !important;
}

.fluentform .ff-el-input--content textarea,
.ry-form textarea {
    border-radius: 30px !important;
    height: auto !important;
    min-height: 120px !important;
}

/* ==========================================================================
   Footer social icon colors - red/coral to match live site
   ========================================================================== */
#ry-footer .ry-social a,
#ry-pg-footer .ry-social a {
    background-color: #b84a4b !important;
    color: #fff !important;
}

/* ==========================================================================
   Contact page sidebar - match live site structure
   ========================================================================== */
.ry-contact-table {
    margin-bottom: 10px;
}
.ry-contact-table .ry-table {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ry-contact-table .ry-row {
    display: flex;
    padding: 8px 0;
}
.ry-contact-table .ry-td {
    padding: 0 5px;
}
.ry-contact-table .ry-td:first-child {
    font-weight: 700;
    white-space: nowrap;
    min-width: 80px;
}
.ry-contact-table .ry-social-wrp {
    display: flex;
    align-items: center;
}
.ry-contact-table .ry-social-wrp .ry-td {
    display: flex;
    align-items: center;
}
.ry-contact-table .ry-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #b84a4b !important;
    color: #fff !important;
    margin-right: 8px;
    font-size: 16px;
    text-decoration: none;
}
.ry-btn.ry-btn-secondary {
    display: inline-block;
    background-color: #e8685a !important;
    color: #fff !important;
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-top: 10px;
}

/* ==========================================================================
   Footer Google Map - 3-column layout
   ========================================================================== */
.ry-map-footer {
    padding: 0;
}
.ry-map-footer .iframe-map {
    width: 100%;
    height: 100%;
    min-height: 300px;
}
.ry-map-footer .iframe-map iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
}

/* ==========================================================================
   Fix: Heading/paragraph spacing - live site uses empty tags as spacers.
   Add CSS margins so headings have proper spacing between sections.
   ========================================================================== */
.ry-text h4,
.ry-text h5,
.ry-left h4,
.ry-left h5 {
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}
.ry-text h2,
.ry-left h2 {
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}
.ry-text h3,
.ry-left h3 {
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}
.ry-text p,
.ry-left p {
    margin-bottom: 15px !important;
}
/* First heading shouldn't have extra top margin */
.ry-text > h2:first-child,
.ry-text > h4:first-child,
.ry-text > h5:first-child,
.ry-left > .ry-text > h2:first-child {
    margin-top: 0 !important;
}

/* ==========================================================================
   Fix: Footer copyright bar layout - match live site
   ========================================================================== */
/* Target the actual class name used in the HTML: ry-footer-btm */
/* Footer needs position:relative so the absolute-positioned svg-container wave sits correctly */
.module-161 {
    position: relative;
    z-index: 2;
}
.module-161 .ry-footer-btm,
#ry-pg-footer .ry-footer-btm,
#ry-footer .ry-footer-btm {
    overflow: visible !important;
    padding: 15px 0 !important;
    min-height: 50px !important;
    background: #ffcccb !important;
}
/* copyright-wrp flex row: copyright left, powered-by right */
.module-161 .ry-footer-btm .ry-copyright-wrp {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 10px;
}
/* copyright div — do NOT set width:100% (breaks flex row) */
.module-161 .ry-footer-btm .ry-copyright {
    flex: 1 1 auto;
    max-width: 440px;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    color: #5c606c;
    overflow: visible;
}
.module-161 .ry-footer-btm .ry-copyright a {
    color: #5c606c;
    opacity: 1;
    transition: opacity 0.3s;
}
.module-161 .ry-footer-btm .ry-copyright a:hover {
    opacity: 0.5;
}
/* "Powered by" section — flex, no-wrap, right-aligned */
.module-161 .ry-footer-btm .ry-powered {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    color: #5c606c;
}
.module-161 .ry-footer-btm .ry-powered span {
    margin-right: 6px;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
}
.module-161 .ry-footer-btm .ry-powered .img-wrap img {
    max-height: 20px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
/* Mobile: stack vertically and center */
@media (max-width: 991px) {
    .module-161 .ry-footer-btm .ry-copyright-wrp {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .module-161 .ry-footer-btm .ry-copyright {
        text-align: center;
        max-width: 100%;
        line-height: 24px;
    }
    .module-161 .ry-footer-btm .ry-powered {
        margin-top: 10px;
    }
}

/* ==========================================================================
   Contact form: hide labels to match live site (placeholder-only layout)
   Only apply to contact page (ID 20), not to bad experience page (ID 467)
   ========================================================================== */
.page-template-template-contact:not(.page-id-467) .fluentform .ff-el-input--label,
.page-template-template-contact:not(.page-id-467) .fluentform .ff-el-group .ff-el-input--label {
    display: none !important;
}
.page-template-template-contact .fluentform .ff-el-group {
    margin-bottom: 15px;
}
.page-template-template-contact .fluentform .ff-btn-submit {
    background-color: #208389 !important;
    border-color: #208389 !important;
    color: #fff !important;
}
.page-template-template-contact .fluentform .ff-btn-submit:hover {
    background-color: #166367 !important;
    color: #fff !important;
}
.page-template-template-contact .fluentform input::placeholder,
.page-template-template-contact .fluentform textarea::placeholder {
    color: #aaa !important;
    opacity: 1 !important;
}
/* Fluent Forms: global label-hidden override for forms where label_placement=hidden */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label,
.fluentform .ff-el-input--label label[for] {
    /* let label_placement=hidden do its work; just ensure consistent padding */
}

/* ==========================================================================
   Reviews page: Submit Your Review form layout
   ========================================================================== */

/* Page content padding - 100px top/bottom, 7.2% sides matches live site's ~104px margins */
.page-reviews #ry-pg-content {
    padding: 100px 7.2%;
}

/* Remove Bootstrap's default 15px gutter from the section so card fills exactly */
.page-reviews #review-main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Page heading "Lucky Puppy Optical" - brand color, uppercase, centered, large */
#review-main-section h1 {
    color: rgb(184, 74, 75);
    text-transform: uppercase;
    text-align: center;
    font-size: 38px;
    font-weight: 400;
}

/* Hide Fluent Forms labels on reviews page - live site shows placeholders only */
.page-reviews .fluentform .ff-el-input--label,
.page-reviews .fluentform .ff-el-group .ff-el-input--label {
    display: none !important;
}

/* "Submit Your Review!" heading - brand color, large size matching live */
#review-main-section h2 {
    color: rgb(184, 74, 75);
    margin-top: 20px;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
}

/* "Rate Us" label - brand color, uppercase */
.review-text,
.lp-rate-wrap .review-text {
    color: rgb(184, 74, 75);
    text-transform: uppercase;
    margin-top: 20px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Review box: subtle off-white background, top margin */
.review-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: rgb(253, 251, 251);
    margin-top: 20px;
}

/* Zero out Bootstrap column gutters inside the review card so image hugs left wall */
.page-reviews .content-wrapper,
.page-reviews #review-main-section > .col-xs-12,
.page-reviews .review-box [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Review image column: fill height via background-image cover */
.review-image.ry-el-bg {
    background-size: cover;
    background-position: center center;
    min-height: 400px;
    padding: 0 !important;
}
.review-image.ry-el-bg img {
    display: none;
}

/* Form column padding and background to match live site */
.review-box > div:last-child {
    padding: 20px 50px 50px !important;
    background: rgb(253, 251, 251) !important;
}

/* Textarea - match live site height and top padding */
.review-box .fluentform textarea {
    height: 165px !important;
    padding-top: 25px !important;
}

/* Submit button - white text */
.review-box .fluentform .ff-btn-submit {
    background-color: #208389 !important;
    border-color: #208389 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 0 40px !important;
    height: 60px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 400 !important;
}
.review-box .fluentform .ff-btn-submit:hover {
    background-color: #166367 !important;
}

/* Disclaimer text - 14px, left-aligned, teal link */
/* Use #review-main-section to beat the ID-specificity centering rule */
#review-main-section .disclaimer p {
    font-size: 14px !important;
    text-align: left !important;
    color: rgb(92, 96, 108) !important;
}
#review-main-section .disclaimer a {
    color: rgb(32, 131, 137) !important;
}
/* Bad experience page form - teal submit */
.page-id-467 .fluentform .ff-btn-submit,
.bad-experience-form .fluentform .ff-btn-submit {
    background-color: #208389 !important;
    border-color: #208389 !important;
    border-radius: 25px !important;
}
.page-id-467 .fluentform .ff-btn-submit:hover,
.bad-experience-form .fluentform .ff-btn-submit:hover {
    background-color: #166367 !important;
}

/* ==========================================================================
   Custom-services pages (ortho-k, myopia): video fills full column height
   ========================================================================== */
.custom-services .ry-container .ry-content .ry-each.each-left.video-poster-grid {
    display: flex !important;
    flex-direction: column !important;
}
.custom-services .ry-container .ry-content .ry-each.each-left.video-poster-grid .video-poster {
    flex: 1 1 auto !important;
    position: relative !important;
    min-height: 320px;
}
.custom-services .ry-container .ry-content .ry-each.each-left.video-poster-grid .iframe-aspect {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
}
.custom-services .ry-container .ry-content .ry-each.each-left.video-poster-grid .iframe-aspect iframe,
.custom-services .ry-container .ry-content .ry-each.each-left.video-poster-grid .iframe-aspect .videoPoster {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ==========================================================================
   Leave Us a Review: experience choice cards (matches live Roya CSS)
   ========================================================================== */
.review-wrap {
    margin-top: 30px;
}
.review-wrap .ry-flex {
    margin-left: -30px;
    width: calc(100% + 30px);
    display: flex;
    flex-wrap: wrap;
}
.review-wrap .ry-flex .ry-each {
    position: relative;
    margin-left: 30px;
    width: calc(50% - 30px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px;
    transition: 0.2s;
    min-height: 150px;
    display: flex !important;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #fff !important;
    cursor: pointer;
    text-align: center;
}
.review-wrap .ry-flex .ry-each .svg-icon svg {
    display: block;
    margin: 0 auto 20px;
    fill: rgb(229, 57, 53);
}
.review-wrap .ry-flex .ry-each:first-child .svg-icon svg {
    fill: rgb(67, 160, 71);
}
.review-wrap .ry-flex .ry-each .each-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
}
.review-wrap .ry-flex .ry-each .each-title span {
    color: rgb(229, 57, 53);
    font-weight: 700;
}
.review-wrap .ry-flex .ry-each:first-child .each-title span {
    color: rgb(67, 160, 71);
}
.review-wrap .ry-flex .ry-each .each-link,
.review-wrap .ry-flex .ry-each .each-link a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
    display: block;
}
.review-wrap .ry-flex .ry-each:hover {
    transform: scale(1.05);
    z-index: 1;
    transition: 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}