/*
Theme Name: Brently Glass
Theme URI: https://roguedesigngroup.com
Description: Designed by Rogue Design Group | Developed by Jess
Version: 123456789 
Author: Rogue Design Group
Author URI: https://roguedesigngroup.com
*/

/* CSS Variables */
:root {
    /* Font Sizes */
    --font-size-h1: 44px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-body: 15px;
    --font-size-nav: 22px;

    /* Line Heights */
    --line-height-h1: 62px;
    --line-height-h2: 38px;
    --line-height-h3: 34px;
    --line-height-body: 23px;
    --line-height-nav: 110px;
}

/* Reset & Base Styles */
html, body {
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    font-size:15px;
    line-height:23px;
    font-family: "Roboto", sans-serif;
    padding: 0;
    color:#9C9D9F;
    background:#18181a;
}

a { color: #E18753; text-decoration: none; outline: none; }

a.button {
    color: #E18754;
    border: 1px solid #E18754;
    display: inline-block;
    background: transparent;
    padding: 15px 80px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-weight:400;
    margin-top:20px;
}

a.button:hover {
    background: #E18754;
    color: #fff;
}


h1, h1 a {
    color: #666669;
    font-size:55px;
    line-height:62px;
    font-weight:bold;
    margin: 0 0 20px 0;
    padding: 0 0 0 0;
    text-decoration: none;
    font-family: "gigalypse", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform:uppercase;
}

h2, h2 a {
    color: #666669;
    font-size:36px;
    line-height:40px;
    font-weight:bold;
    margin: 25px 0 15px 0;
    padding: 0;
    font-family: "gigalypse", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform:uppercase;
    letter-spacing:1px;
}

h3, h3 a {
    color: #9C9D9F;
    font-size:24px;
    margin: 0 0 10px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
}
.order-form  h3 { font-weight:600; }

h4 {    
    color: #000;
    font-size:16px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

h5 {    
    color: #000;
    font-size:14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

h6 {    
    color: #000;
    font-size:12px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

img { border: none; }

.highlight { background: yellow; }

strong { font-weight:800; }

p {
    text-align: left;
    color:#9C9D9F;
    font-size: 20px;
    line-height: 28px;
    font-weight: 200;
      margin:0 0 30px;
}
#content ul {
    margin-bottom:30px;
}
#content li {
    text-align: left;
    color:#9C9D9F;
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
}



/* Navigation */
.nav-link {
    text-transform: uppercase;
}

.page-copy { padding-top:70px; }
.wrapper { margin: 0 auto; max-width:1275px; max-width:1000px; }

/* Header */

#header { background: #000000 url(images/header-bg2.jpg) no-repeat; background-position: top right; padding:10px 0; background-size: auto 100%; }
#header img { max-width:340px; float:left; padding:20px 0; }
#header .wrapper { width:95%; max-width:1400px; }

/* Footer */
#footer {
    margin: 0;
    padding: 60px 0 70px;
    text-align: left;
    overflow: hidden;
    background: #000000;
    color: #fff;
    font-size: 22px; 
    line-height: 28px;
}
#footer img.footer-logo { float: left; max-width:50%; display:inline-block; }
.social-links { float:right; display:inline-block; max-width:45%; width:45%; text-align:right; padding-top:50px; }
.social-links img { margin-left:40px; 
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.social-links img:hover { opacity:.7; }

.etsy-banner { background:#E18753; color:#fff; padding:125px 0 30px; text-align:left; }
.etsy-logo { float:left; display:inline-block; max-width:17%; }
.etsy-copy { float:left; display:inline-block; max-width:80%; margin-left:50px; font-size: 24px;
  line-height: 36px; }
.etsy-copy strong, .etsy-copy span { display:block; color:#fff; font-weight:200; }
.etsy-copy strong { font-weight:400; }

.copyright { display: block; margin-top: 70px; text-align:center; opacity:.5; margin-bottom:-10px;}
.copyright, .copyright a { 
    color: #fff; 
    text-transform: uppercase; 
    font-size: 16px; 
    line-height: 20px;
    font-weight:300;
}

/* Defaults */
.page-copy { text-align:left; padding-bottom: 100px;}
.page-copy img { max-width:100%; }
.header-image-full img { display:block; margin: 0 auto 50px; max-width:100%; width:100%; }

/* Home */
.brently-glass { background:#000; }
.brently-glass #header img { display:none; }
.brently-glass #header { height:0px; background:transparent; }
.brently-glass .header-image-full img { max-width:500px; margin:140px auto; }
.page-copy.home-page { background:#000000; padding-bottom:50px; }
.page-copy.home-page p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 40px;
}

.home-columns { padding:50px 0; background:#18181a; text-align:center;}
.brently-glass h3, .brently-glass h3 a { color: #E18753; font-weight:bold; }
.brently-glass h3 { margin: 10px 0 25px; }
.home-columns p { text-align:center; }

/* Products */
/* Parent container - add this */
.products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom:100px;
  color:#66666A;
  font-size:18px;
}

/* Update product class */
.product {
  /* Remove float:left */
  display: inline-block;
  width: 33%;
  text-align: center;
  margin-bottom: 50px;
  /* Ensure proper sizing */
  box-sizing: border-box;
  padding: 0 10px;
}
.product.product-half {
  /* Remove float:left */
  display: inline-block;
  width: 50%;
  text-align: center;
  margin-bottom: 50px;
  /* Ensure proper sizing */
  box-sizing: border-box;
  padding: 0 10px;
}

.product img {
  display: block;
  margin: 0 auto 30px;
  max-width: 90%;
}

/* Container with animated gradient border */
        .form-container {
            position: relative;
            width: 95%;
            padding: 40px;
            border-radius: 15px;
            background-color:#18181a;
            border: 2px solid transparent;
            background-clip: padding-box;
            margin:70px auto 100px;
        }
        .form-wrap {
            max-width: 600px;
            margin:0 auto;
        }
        
        /* Animated gradient border effect */
        .form-container::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            margin: -2px;
            border-radius: inherit;
            background: linear-gradient(
                90deg, 
                #408EC1, /* Dark Blue */
                #6DC2EA, /* Light Blue */
                #F6D88B, /* Yellow */
                #E28853, /* Orange */
                #D44F34, /* Red */
                #408EC1  /* Back to Dark Blue for seamless loop */
            );
            background-size: 300% 100%;
            animation: gradientBorder 15s ease infinite;
        }
        
        @keyframes gradientBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .form-container p { text-align:center; font-size:24px; }

.clear {clear:both;}
 .stretch,
    .clear {
        clear: both;
        height: 1px;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1px;
    }
    .clearfix:after {
        clear: both;
        height: 0;
        display: block;
        visibility: hidden;
        content: ".";
    }
    .clearfix {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix {display:block;}
    /* End hide from IE Mac */


/* Navigation */
#header .fat-nav {  }
.hamburger__icon, 
.hamburger__icon:before, 
.hamburger__icon:after {
    background-color: #E18754;
}
.hamburger.active .hamburger__icon::before {
    -moz-transform: translateY(11px)rotate(45deg);
    -ms-transform: translateY(11px)rotate(45deg);
    -webkit-transform: translateY(11px)rotate(45deg);
    transform: translateY(11px)rotate(45deg);
}
.hamburger.active .hamburger__icon::after {
    -moz-transform: translateY(-11px)rotate(-45deg);
    -ms-transform: translateY(-11px)rotate(-45deg);
    -webkit-transform: translateY(-11px)rotate(-45deg);
    transform: translateY(-11px)rotate(-45deg);
}

.hamburger { right:70px; top:70px; }

/* Debug styles */
.hamburger {
    position: fixed !important;
    position: absolute !important;
    top: 60px !important;
    right: 60px !important;
    z-index: 9999 !important;
    display: block !important;
    background: transparent !important;
    padding: 25px 0 0 13px !important;
    width:70px;
    height:70px;
}

.hamburger__icon {
    background: #E18754 !important;
}
.hamburger.active .hamburger__icon {
    background: transparent !important;
}
.hamburger.active { background: transparent!important; }

.fat-nav {
    background: #262628;
}
.hamburger.active .hamburger__icon { background:transparent!important;  }
.hamburger.active .hamburger__icon::before { top:-3px; }
.hamburger.active .hamburger__icon::before, .hamburger.active .hamburger__icon::after { background:#fff; }
.hamburger__icon, .hamburger__icon::before, .hamburger__icon::after { height:7px; }

.fat-nav__wrapper { top:-50px; }
.fat-nav li { padding: 10px 150px 10px 0; }
.fat-nav li:first-child { margin-top:-160px; }
.fat-nav li, .fat-nav li a { font-size: 30px!important; line-height:50px; color: #E18753; margin:0; text-transform:uppercase; font-weight:400; }

.hamburger__icon, .hamburger__icon::before, .hamburger__icon::after {
  width: 35px;
  }
.hamburger__icon::before {
  top: -14px;
}
.hamburger__icon::after {
  top: 14px;
}
.hamburger.active .hamburger__icon::before {
  top: -7px;
}
.fat-nav { max-width:500px; }
.fat-nav li, .fat-nav li a { font-size:20px!important; line-height:35px!important; }

/* Forms */
input, textarea, select {

}
.wpcf7-form { text-align:center; }
.wpcf7-form input,
.wpcf7-form textarea {
    border: 1px solid #F6D88B;
    padding: 12px;
    display: block;
    background: transparent;
    width: 95%;
    font-size: 20px;
    font-weight: 300;
    color:#9B9D9F;
    font-family: "Roboto", sans-serif;
}
.wpcf7-form input[type="radio"] {
    opacity:0; display:inline-block;
}
.for-a-pet .wpcf7-list-item { display:inline-block!important; }
.for-a-pet .wpcf7-list-item-label { color: #9C9D9F;  font-size: 18px; }
.fot-a-pet .radio-controls { position:relative; top:-20px; }

.wpcf7-form input.wpcf7-submit { -webkit-appearance: none; display:inline-block; margin: 0 auto; color:#DF8652; border: 1px solid #DF8652;  
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.wpcf7-form input.wpcf7-submit:hover { background:#DF8652; color:#fff; }

/* Hide the actual checkbox */
.wpcf7-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the label */
.wpcf7-list-item { display:block!important; margin-left:0!important; }
.wpcf7-list-item-label {
  display: inline-block;
  padding: 10px 0px;
  cursor: pointer;
  color: #E18754; /* Orange color matching your accordion */
  transition: color 0.3s ease;
  font-size: 24px;
}

/* Style for the checked state */
.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label {
  color: white;
}

/* Optional: Add some spacing between items */
.wpcf7-list-item {
  display: block;
  margin: 8px 0;
}
/* CSS Styling */
.quantity-selector {
  width: 100%;
  border-top: 1px solid rgba(225, 135, 84, 0.4);
  border-bottom: 1px solid rgba(225, 135, 84, 0.4);
  padding: 15px 0;
  margin: 15px 0;
}

.quantity-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-label {
  color: #888;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 500;
}

.quantity-controls {
  display: flex;
  align-items: center;
  min-width:100px;
  color:#9C9D9F;
}
.quantity-controls p { width:100%; margin:0; }
.quantity-label p, .radio-selector p { font-weight:600; margin:0; }

.quantity-increase, 
.quantity-decrease {
  background: transparent;
  border: none;
  color: #9C9D9F!important;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.quantity-value {
  color: #9C9D9F!important;
  font-size: 24px;
  margin: 0 10px;
  min-width: 15px;
  text-align: center;
}
.quantity-increase { float:left; }
.quantity-decrease { float:right; }
.quantity-value { margin-top:30px; }

/* CSS Styling for Radio Buttons */
.radio-selector {
  width: 100%;
  border-top: 1px solid rgba(225, 135, 84, 0.4);
  border-bottom: 1px solid rgba(225, 135, 84, 0.4);
  padding: 15px 0;
  margin: 15px 0;
}

.radio-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radio-label {
  color: #888;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 500;
}

.radio-controls {
  min-width: 100px;
  text-align: right;
}

.radio-options {
  color: #9C9D9F;
  font-size: 18px;
}

.radio-separator {
  margin: 0 10px;
  color: #9C9D9F;
}

/* Hide actual radio buttons */
.hidden-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style for radio button labels */
.radio-option label {
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Style for selected radio button */
.hidden-radio:checked + label {
  color: #E18754;
}

.s {   /* Search Field */
    background: transparent;
    border: 0px solid #c7c7c7;
    color: #383d44;
    height: 15px;
    padding-left: 3px;
    vertical-align: middle;
    width: 220px;
}

.alignleft {
    float: left;
    text-align: left;
    margin: 0 20px 10px 0;
}

.alignright {
    float: right;
    margin-top: -1px;
    text-align: right;
    margin: 0 0 10px 20px;
}

.aligncenter { 
    display: block; 
    margin: 0 auto 30px; 
}

.half { float: left; display: inline-block; width: 48%; }
.half.last { float: right; display: inline-block; width: 48%; }

.third { float: left; display: inline-align; width: 30%; margin: 0 4.5% 0 0; }
.third.last { float: right; margin: 0; }

.fourth { float: left; display: inline-block; width: 22%; margin: 0 3% 0 0; }
.fourth.last { float: right; margin: 0; }

hr { display: block; margin: 40px auto 70px; border: 0; height: 1px; background: #656568; }


 .accordion-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .accordion-header {
            background: transparent;
            padding: 15px 15px;
            margin-top: 25px;
            cursor: pointer;
            border: 1px solid #E18754;
            border-radius: 0px;
            color:#E18754;
        }
        
        .accordion-content {
            padding: 0 15px;
            text-align:left;
            border-top: none;
            display: none; /* Initially hidden */
        }
        .form-container .accordion-content p, .form-container .accordion-content li { text-align:left; } 
        
        /* Classes used by the plugin */
        .accordion-open {
            background: transparent;
        }
        
        .accordion-close {
            /* Any specific styling for closed headers */
        }
        .accordion-header {
            background: transparent;
            padding: 15px 15px;
            margin-top: 25px;
            cursor: pointer;
            border: 1px solid #E18754;
            border-radius: 0px;
            color: #E18754;
            position: relative; /* Needed for positioning the arrow */
            text-align:left;
        }

        /* Add the arrow with a pseudo-element */
        .accordion-header::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 12px solid #E18754;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease; /* This creates the animation */
        }

        /* Rotate the arrow when open */
        .accordion-open::after {
            transform: translateY(-50%) rotate(180deg);
        }

/* Animations */
.fade-in {
    -webkit-animation: fade-in 2s ease;
    -moz-animation: fade-in ease-in-out 2s both;
    -ms-animation: fade-in ease-in-out 2s both;
    -o-animation: fade-in ease-in-out 2s both;
    animation: fade-in 2s ease;
    visibility: visible;
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fade-out {
    -webkit-animation: fade-out 2s ease;
    -moz-animation: fade-out ease-in-out 2s both;
    -ms-animation: fade-out ease-in-out 2s both;
    -o-animation: fade-out ease-in-out 2s both;
    animation: fade-out 2s ease;
    visibility: visible;
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-o-keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.clear {
    clear: both;
    height: 1px;
    margin: 0;
    padding: 0;
}


ol, form { margin: 0; padding: 0; }

small { font-size: 10px; }

ul {
    list-style-type: disc; 
    margin: 0 0 0 25px; 
    padding: 0; 
}

ul li {
    margin: 0; 
    padding: 0px; 
}

ol {
    margin: 0 0 0 25px; 
    padding: 0; 
}

ol li {
    margin: 0; 
    padding: 0px; 
}


/****************  PAGE COLORS  **********************/

.header-table { 
    display: table; 
    width: 100%; 
    height: 100%; 
    vertical-align: middle; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 4; 
}

.header-cell { 
    display: table-cell; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    font-weight: bold;
    color: #fff; 
    font-size: 110px; 
    line-height: 120px; 
    font-family: var(--font-caption);
}

.caption { 
    font-size: 100px; 
    text-align: center; 
    display: block; 
    color: #fff; 
}


/* Responsive Styles */
@media screen and (max-width: 1450px) {
    .square p { font-size: 18px; line-height: 26px; }
    #menu { width: 50%; }
    #menu { padding-right: 50px; }
    .sf-menu li li a { 
        font-size: 16px;
        line-height: 18px; 
        padding: 10px 15px;
    }
}

@media screen and (max-width: 1360px) {
    .wrapper { max-width: 90%; }
    #content .wrapper { max-width: 975px; }
    #menu { width: 50%; }
    #menu { padding-right: 50px; }
    .sf-menu li li a { 
        font-size: 16px;
        line-height: 18px;  
        padding: 10px 15px;
    }
}

@media screen and (max-width: 1200px) {
    .wrapper { max-width: 90% !important; }
    .square a.button { padding-right: 40px; padding-left: 40px; font-size: 18px; line-height: 24px; }
    #logo { width: 25%; }
    #menu { width: 75%; padding-right: 0;}
    .header-cell { font-size: 60px; line-height: 80px; }
    .header-image-caption { font-size: 90px; top: 15%; }
    .form-container { width:90%; }
    .fat-nav li:first-child { margin-top:0px; }
}

@media screen and (max-width: 960px) {
    #logo { float: none; display: block; margin: 0 auto; width: auto; max-width: 300px; }
    #menu { float: none; display: block; margin: 15px auto 0; width: 100%; }
    #header { padding-bottom: 0; }
    .sf-menu { text-align: center; }
    .sf-menu a { padding: 15px 15px 35px; font-size: 16px;}
    .title { font-size: 60px; line-height: 75px; }
    .header-cell { font-size: 50px; line-height: 60px; }
    .product { width: 50%; }
    .form-container { width:85%; }
}

@media screen and (max-width: 767px) {
    #header img { max-width:300px; padding:20px 0; }
    .home .header-image-full img { max-width:80%; }
    .hamburger { top: 45px !important; right: 10px !important; }
    .fat-nav li, .fat-nav li a { font-size: 24px !important; line-height: 34px; }
    .page-copy { padding-top:0; }
    .no-header-image { margin-bottom:40px; }
    .product, .product.product-half { width: 100%; }

    #footer { padding:50px 0 20px; }
    #footer img.footer-logo { float:none; display:block; margin:0 auto; max-width:80%; }
    .social-links { float:none; display:block; margin:0px 0 0; width:100%; text-align:center; max-width:100%;}
    .social-links img { display:inline-block; margin:20px 0; }
    .etsy-logo { float:none; display:block; width:100%; margin: 0 auto; text-align:center; }
    .etsy-logo img { max-width:100%; }
    .etsy-copy { float:none; display:block; width:100%; margin: 0 auto; max-width:100%; }
    .half, .half.last, .third, .third.last, .fourth, .fourth.last, .square { 
        float: none; 
        display: block; 
        width: 100%; 
        margin: 0 auto 60px; 
    }
    .form-container { width:80%; }
}

@media screen and (max-width: 479px) {
    #header img { max-width:270px; }
    .form-container { width:75%; }
}