/* --- web/css/frontend/html-reset.css --- */
/*-------------------------------------------------------------------------------
HTML5 Reset :: style.css for Ismael Salamano
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://ericmeyer.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}
img{vertical-align:top;}
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}
/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 1em; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
table {font-size: inherit; font: 1em;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid var(--gray); margin: 1rem 0; padding: 0;}
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}
/*Focus*/
*:focus {outline: none;}
/*Form*/
input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 1em sans-serif;}
/*Remove AutoFIll*/
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
-webkit-text-fill-color:var(--gray) !important;
}
/*PlaceHolder*/
input::-webkit-input-placeholder { /* Edge */
/*color: transparent;*/
}
input:-ms-input-placeholder { /* Internet Explorer */
/*color: transparent;*/
}
input::placeholder {
/*color: transparent;*/
}
textarea::-webkit-input-placeholder { /* Edge */
/*color: transparent;*/
}
textarea:-ms-input-placeholder { /* Internet Explorer */
/*color: transparent;*/
}
textarea::placeholder {
/*color: transparent;*/
}
input:invalid{box-shadow:none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{/*-webkit-appearance:none; margin:0;*/}
input[type=number]{/*-moz-appearance:textfield;*/}
/**/
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
p, span{-webkit-text-size-adjust:none; }
/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* hand cursor on clickable elements */
.clickable,
input[type=button],
input[type=submit],
button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix {}
/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 16px Arial, Helvetica, sans-serif;}
/* using local fonts? make sure to read up on Paul Irish's
Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */
/* we like off-black for text */
body, select, input, textarea {color:var(--black); -webkit-appearance:none; -moz-appearance:none; border-radius:0px;}
a{color:var(--dark-gray);}
a:hover{color:var(--gray);}
/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background:var(--dark-gray); color:var(--white); text-shadow: none;}
::selection {background:var(--dark-gray); color:var(--white); text-shadow: none;}
/* j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color:var(--black-02);}
ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
/* --- commons/vendors/slick/slick.css --- */
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* --- web/css/frontend/styles.css --- */
@charset "utf-8";
/* CSS Document */
/*LOADER*/
/* .content_loading{height:100%; position:fixed; top:0; left:0; background:var(--black); transition:all 0.5s ease-in-out; z-index:9999; opacity:1;}
.content_loading.hide{opacity:0; pointer-events:none;} */
/*FONTS*/
@font-face {
font-family: 'OPTIBalloon';
src: url('fonts/OPTIBalloon-Bold2.woff2') format('woff2'),
url('fonts/OPTIBalloon-Bold2.woff') format('woff');
font-weight: bold;
font-style: normal;
}
/*COLORS*/
:root{
/*White*/
--white-01:rgba(250,250,250,0.1);
--white-02:rgba(250,250,250,0.2);
--white-03:rgba(250,250,250,0.3);
--white-04:rgba(250,250,250,0.4);
--white-05:rgba(250,250,250,0.5);
--white-06:rgba(250,250,250,0.6);
--white-07:rgba(250,250,250,0.7);
--white-08:rgba(250,250,250,0.8);
--white-09:rgba(250,250,250,0.9);
--white:#FFFFFF;
/*Black*/
--black-01:rgba(0,0,0,0.1);
--black-02:rgba(0,0,0,0.2);
--black-03:rgba(0,0,0,0.3);
--black-04:rgba(0,0,0,0.4);
--black-05:rgba(0,0,0,0.5);
--black-06:rgba(0,0,0,0.6);
--black-07:rgba(0,0,0,0.7);
--black-08:rgba(0,0,0,0.8);
--black-09:rgba(0,0,0,0.9);
--black:#000000;
--soft-gray:#D2D2D2;
--gray:#999999;
--soft-white:#E8E8E8;
--soft-gray02: #F3F3F3;
--medium-gray:#D9D9D9;
--dark-gray: #5E5E5E;
--blue: #00547E;
--blue01: #2DCCFC;
--blue02: #1B7996;
--green: #B7D562;
--yellow: #FFD167;
--mustard: #DBA934;
--custom-light-green: #176D39;
--custom-light-green-01: rgb(23, 109, 58, 0.1);
--custom-dark-green: #0C4222;
--custom-dark-green-04: rgb(12, 66, 34, 0.4);
--custom-darker-green: #1B281E;
--custom-warn: #9C281D;
--custom-button-gray: #4A4A4A;
--custom-lighter-gray: #F2F2F2;
--custom-light-gray: #D9D9D9;
--warning:#d22c1d;
--warning-toast:#dd6464;
}
/*GENERICS*/
html{width:100%; height:100%}
html.no_overflow{overflow: hidden;}
body{width:100%; height:100%; background:var(--white); font-size:1rem; font-family:'Nunito', sans-serif; font-weight:400; color:var(--black); -webkit-font-smoothing:antialiased;}
a{color:var(--black); text-decoration:none; transition: all 0.35s ease-in-out;}
header, section, article, aside, footer, nav, figure, div, a{box-sizing:border-box; position:relative;}
/*Form*/
/*Input (excluir checkbox/radio/file/hidden: la regla “tipo texto” los aplastaba o los dejaba como una raya) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]){border-radius: 12px; height: 50px; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%;}
input[type="checkbox"],
input[type="radio"]{
width: 1.25rem;
height: 1.25rem;
min-width: 1.25rem;
min-height: 1.25rem;
padding: 0 !important;
margin: 0;
border-radius: 4px;
vertical-align: middle;
accent-color: var(--custom-dark-green);
flex-shrink: 0;
box-sizing: border-box;
}
select{border-radius: 12px; height: 50px; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%; padding: 0 15px;}
/*TextArea*/
textarea{border-radius: 12px; height: auto; border: 1px solid var(--soft-white); background: var(--soft-gray02); width: 100%; padding: 15px;}
/*Select*/
.select_style{height:50px; border-bottom:var(--green) 1px solid; border-right:none; border-left:none; border-top:none;}
.select_style::before{width:17px; height:17px; position:absolute; top:0; bottom:0; right:0; margin:auto 0; background:url(../../img/bg_arrow.svg) no-repeat; pointer-events:none; content:''}
.select_style select{border:none; background:var(--white); height:100%; color:var(--black); box-sizing:border-box; -webkit-box-sizing:border-box;}
/*Floating Label*/
label.floating_label{position:absolute; top:14px; left:0; font-family:'Muli', sans-serif; font-weight:400; color:var(--gray); pointer-events:none; z-index:10; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; will-change:font-size, color, top; touch-action:manipulation;}
input:not(:placeholder-shown) + label,
input:focus + label {top:0px; font-size:0.750rem;}
input:not(:placeholder-shown),
input:focus{padding:0 15px !important;}
select:focus + label,
select:not([value=""]):valid + label{top:0px; font-size:0.750rem;}
textarea:not(:placeholder-shown) + label,
textarea:focus + label {top:0px; font-size:0.750rem;}
textarea:not(:placeholder-shown),
/*Checkbox*/
.label-check {float:left; position:relative; cursor:pointer; margin:0;}
.label-check input[type="checkbox"] { opacity:0; position:absolute; left:0; top:0; margin:0; z-index:1; cursor:pointer; width:24px; height:24px;}
.label-check span.label_check { position:relative; top:-2px; background:var(--gray-02); display:inline-block; vertical-align:bottom; margin-right:5px; width:24px; height:24px; border-radius:2px; box-shadow:inset 0 2px 1px 0 rgba(0, 0, 0, 0.1);}
.label-check input[type="checkbox"]:checked + span:after { content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:24px; height:24px; background-image:url(../../img/bg_check.svg); background-color:var(--green); background-repeat:no-repeat; border-radius:2px; background-position:center;}
/*Warning*/
/*Input*/
.warning input{border:var(--warning) 1px solid}
/*Input*/
.warning textarea{border:var(--warning) 1px solid}
/*Select*/
.warning .select_style{border-bottom:var(--warning) 1px solid}
/*Label*/
.warning label{color:var(--warning);}
/*CheckBox*/
.warning .label-check span.label_check{background:var(--warning);}
/*Terms*/
.warning .terms{color:var(--warning);}
/* BUTTON */
.button{height: 50px; border-radius: 25px; cursor: pointer;}
/*Enter button*/
.button.enter{background-color: var(--custom-darker-green);}
.button.enter:hover{background-color: var(--custom-light-green);}
/*Warn button*/
.button.warn{background-color: var(--custom-warn);}
.button.warn:hover{background-color: var(--warning);}
/*Grey button*/
.button.secondary{background-color: var(--custom-button-gray);}
.button.secondary:hover{background-color: var(--dark-gray);}
.button span{justify-content: center; align-items: center; color: var(--white); font-size: 1.25rem; font-weight: 700;}
/* ROUND BUTTON */
.round_button{width: 14px; height: 14px; background: var(--medium-gray); border-radius: 50%; margin: 0 10px 0 0;}
.round_button.active{background: var(--dark-gray);}
.round_button:last-child{margin: 0;}
/*LAYOUT*/
.row{width:100%; display:flex; flex-wrap:wrap;}
.center_content{width:1200px; margin:0 auto; display:flex; flex-wrap:wrap;}
/* BUTTON FIXED */
.button_fix{position: fixed; z-index: 4; bottom: 25px; left: 0; justify-content: center;}
.button_fix .button.enter{background: var(--custom-dark-green); width: 350px;}
.button_fix .button.enter:hover{background: var(--custom-light-green);}
/* Modal */
.modal{position: fixed; justify-content: center; align-items: center; height: 100dvh; z-index: 100; opacity: 0; transition: opacity .5s ease-in-out;}
.modal.hide{visibility: hidden;}
.modal.show{visibility: visible; opacity: 1;}
.modal .modal_background{position: absolute; height: 100dvh; background-color: var(--black-07);}
.modal .modal_content{justify-content: center; max-height: calc(100dvh - 40px); max-width: 700px; align-items: center; background-color: var(--white); margin: 20px; padding:0 25px 50px 25px; border-radius: 15px; overflow-y: auto; z-index: 10;}
.modal .modal_content .cross{height: 50px; align-items: center; justify-content: end; cursor: pointer;}
.modal .modal_content .modal_body{padding-bottom: 20px; justify-content: center;}
.modal .modal_content .modal_body input{height: 42px;}
.modal .modal_content .modal_body h2{font-size: 1.5rem; font-weight: 700; line-height: 32px; padding-bottom: 20px; text-align: center;}
.modal .modal_content .modal_body p{font-size: 1rem; font-weight: 400; line-height: 23px;}
.modal .modal_content .modal_body p span{font-weight: 700;}
/*Modal buttons*/
.modal .modal_content .buttons_container{width: 100%;}
.modal .modal_content .buttons_container .content_button:not(:first-child){margin-top: 15px;}
.modal .modal_content .content_button .button span{font-size: 1rem;}
/*Profile detail modal*/
.modal.profile_pet_image .modal_content{background-color: transparent; position: relative; padding: 0; max-width: 400px; aspect-ratio: 320/360;}
.modal.profile_pet_image .modal_content .modal_body{width: 100%; height: 100%; padding: 0;}
.modal.profile_pet_image .modal_content .cross{position: absolute; top: 0; right: 20px; z-index: 10;}
.modal.profile_pet_image .modal_content .cross svg path{fill: var(--white);}
.modal.profile_pet_image .modal_content .modal_body figure{width: 100%; height: 100%;}
.modal.profile_pet_image .modal_content .modal_body figure img{width: 100%; height: 100%; object-fit: cover;}
/*Associate modal*/
.modal.associate_modal .modal_content .modal_body figure{margin-top: 20px; width: 150px; height: 150px;}
.modal.associate_modal .modal_content .modal_body figure img{width: 100%; height: 100%; object-fit: contain;}
.modal.associate_modal .modal_content .modal_body label{font-size: .6rem; font-weight: 700; color: black; justify-content: center;}
/*Heading content*/
/* Logo */
.center_content{padding: 50px 25px;}
.heading_logo{justify-content: center; align-items: center; height: fit-content;}
.heading_logo figure{height: 50px; width: 180px; margin-bottom: 45px;}
.heading_logo figure img{width: 100%; height: 100%; object-fit: contain;}
.content_heading .heading_text{align-items: center; padding: 0 25px 30px;}
.home .content_heading .heading_text{height: fit-content;}
.content_heading .heading_text h2{font-size: 1.5rem; font-weight: 700; line-height: 25px; justify-content: center; text-align: center;}
.content_heading .heading_text h3{font-size: 1.1rem; font-weight: 400; line-height: 25px; justify-content: center; text-align: center;}
/*Alert*/
.alert{position: fixed; top: 0; left: 0; justify-content: center; align-items: center; min-height: 75px; padding: 20px 50px 20px 20px; border-bottom: 1px solid var(--white-03); color: var(--white); z-index: 100; opacity: 0; clip-path: inset(0 0 100% 0); transition: all .5s ease-in-out; z-index: 200;}
.alert span{text-align: center;}
.alert .cross{position: absolute; display: flex; align-items: center; right: 20px; transform: translateY(1px);}
.alert .cross svg{width: 12px;}
.alert .cross svg path{fill: var(--white);}
.alert.warning{background-color: var(--custom-warn);}
.alert.warning.active{clip-path: inset(0 0 0 0); opacity: 1;}
.alert.success{background-color: var(--custom-light-green); opacity: 0;}
.alert.success.active{clip-path: inset(0 0 0 0); opacity: 1;}
/* FORGOT PASSWORD */
.forgot_password .go_back_button:hover{background-color: var(--soft-gray);}
.forgot_password .go_back_button span{color: var(--black);}
/* FORM PAGE CONTENT */
/* Elements */
.form_page_content .content_elements{background-color: var(--white); border-radius: 30px 30px 0 0;}
/* Form */
.form_page_content .content_elements .form .data{margin: 0 0 25px;}
.form_page_content .content_elements .form .data:last-child{margin: 0;}
.form_page_content .content_elements .form .data label{font-size: 1.25rem; color: var(--black); margin: 0 0 10px;}
.form_page_content .content_elements .form .data input{padding: 0 15px;}
/* Buttons */
.form_page_content .content_buttons{align-items: center;}
.form_page_content .content_buttons .button.enter{background: var(--custom-darker-green); margin: 25px 0;}
.form_page_content .content_buttons .button.enter:hover{background: var(--custom-light-green);}
.form_page_content .content_buttons .round_buttons{justify-content: center; margin: 40px 0 0;}
/* LOGIN */
.home .content_login .center_content{padding: 50px 0 0 0; background-color: var(--custom-light-green)}
.home .content_login .heading_text h1{font-family: "OPTIBalloon"; font-size: 1.25rem; color: var(--white); justify-content: center; text-align: center;}
.home .content_login .center_content{max-height: 100vh; padding: 50px 0 0 0; background-color: var(--custom-light-green)}
.home .content_login .center_content .content_elements{padding: 35px 20px 0; height: 100%;}
/* Buttons */
.home .content_login .content_buttons{height: auto; width: 100%; align-items: start;}
.home .content_login .content_buttons .button.enter{background: var(--custom-dark-green); margin: 25px 0;}
.home .content_login .content_buttons .button.signup{background: var(--custom-darker-green)}
.home .content_login .content_buttons .button.enter:hover,
.home .content_login .content_buttons .button.signup:hover{background: var(--custom-light-green);}
/* Sign Up */
.home .content_login .content_elements .create label{justify-content: center; text-align: center; font-size: 1.125rem; color: var(--black); padding: 25px 0;}
.home .content_login .content_elements .create label:last-child{margin: 0;}
.home .content_login .content_elements .create label a{color: var(--blue); margin: 0 0 0 2px;}
.home .content_login .content_elements .create label a:hover{text-decoration: underline;}
/* NAVIGATION */
.content_navigation{position: absolute; top: 0; left: 0; align-items: flex-start; z-index: 5;}
.content_navigation .center_content{padding: 15px 15px 0;}
/* BTN Burger */
.content_navigation .burger_menu{width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; background: var(--white); border-radius: 12px; cursor: pointer;}
.content_navigation .btn_burger{display: block; width: 15px; height: 15px; position: relative;}
.content_navigation .btn_burger::after{width:100%; height:1px; position:absolute; top:0; right:0; background:var(--black); content:'';}
.content_navigation .btn_burger::before{width:100%; height:1px; position:absolute; bottom:0; right:0; background:var(--black); content:'';}
.content_navigation .btn_burger span{width:100%; height:1px; position:absolute; top:0; bottom:0; right:0; margin:auto; background:var(--black); font-size:0;}
.content_navigation .btn_burger span::before{width:15px; height:1px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; background:var(--black); content:'';}
/*Animations*/
.content_navigation .btn_burger::before,
.content_navigation .btn_burger::after{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:opacity; transition-delay:0.5s; -webkit-transition-delay:0.5s;}
.content_navigation .btn_burger.open::before,
.content_navigation .btn_burger.open::after{opacity:0; transition-delay:0s; -webkit-transition-delay:0s;}
.content_navigation .btn_burger span{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:transform; transition-delay:0.35s; -webkit-transition-delay:0.35s;}
.content_navigation .btn_burger.open span{transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.content_navigation .btn_burger span::before{transition:all 0.35s ease-in-out; -webkit-transition:all 0.35s ease-in-out; will-change:transform; transition-delay:0.35s; -webkit-transition-delay:0.35s;}
.content_navigation .btn_burger.open span::before{transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
/* Menu */
.content_navigation .menu_wrapper{position: absolute; top: calc(100% + 5px); background: var(--white); border-radius: 12px; display: grid; grid-template-rows: 0fr; opacity: 0; transition: all .5s ease-in-out; box-shadow: 0 0 30px 0px var(--black-04); }
.content_navigation .menu{overflow: hidden; padding: 0 15px; row-gap: 5px; display: flex; flex-wrap: wrap; width: 140px;}
.content_navigation .menu li:first-child{padding-top: 15px;}
.content_navigation .menu li:last-child{padding-bottom: 15px;}
.content_navigation .menu .item{font-size: 1.125rem; font-weight: 700; color: var(--black);}
.content_navigation .menu .item::before{position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: var(--black); transform: scaleX(0); transition: all 0.35s ease-in-out; content: '';}
.content_navigation .menu .item:hover::before{transform: scaleX(1.0);}
/* Open */
.content_navigation.open .menu_wrapper{grid-template-rows: 1fr; opacity: 1; pointer-events: all;}
/* PROFILE DETAIL */
/* Button fixed */
.profile_detail .button_fix svg{ margin-right: 10px;}
/* Modal align */
.profile_detail .modal .modal_content{align-self: end;}
/* Mascota perdida (tag público y perfil dueño) */
.profile_detail .content_hero .pet_lost_banner{
width: 100%;
background: #c62828;
color: #fff;
text-align: center;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.12em;
padding: 12px 16px;
text-transform: uppercase;
box-sizing: border-box;
}
/* Hero */
.profile_detail .content_hero .center_content,
.profile .content_hero .center_content{background-color: var(--custom-light-green); padding: 80px 0 70px;}
/* Pic */
.profile_detail .content_hero .profile_pic,
.profile .content_hero .heading{justify-content: center;}
.profile_detail .content_hero .profile_pic figure{height: 165px; width: 165px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.profile_detail .content_hero .profile_pic figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; }
.profile_detail .content_hero .profile_pic figure img{height: 95%; width: 95%; object-fit: contain; border-radius: 50%; position: relative;}
/* Detail */
.profile_detail .content_detail .center_content{padding: 0 20px 150px;}
.profile_detail .content_detail .center_content::before,
.profile .content_pets .center_content::before{height: 50px; width: 100%; position: absolute; top: -35px; left: 0; background: var(--white); border-radius: 30px 30px 0 0; content: ''; }
/* Pet */
.profile_detail .content_detail .intro h3{font-weight: 700; color: var(--black); font-size: 1.5rem;}
.profile_detail .content_detail .intro h4{font-weight: 400; margin-top: 10px;}
/* Divider */
.profile_detail .content_detail .divider{margin: 25px 0;}
.profile_detail .content_detail .divider svg{width: 100%; min-height: 5px;}
/* Details */
.profile_detail .content_detail .details{justify-content: space-between;}
.profile_detail .content_detail .details .data{width: 33%; align-content: center; border-radius: 12px;}
.profile_detail .content_detail .details .data label{justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 0 5px;}
/* Parents */
.profile_detail .content_detail .parents{row-gap: 20px;}
.profile_detail .content_detail .parents .ppl_data .phone{width: calc(100% - 120px);}
.profile_detail .content_detail .parents .ppl_data .phone label{font-size: 1.25rem; font-weight: 700;}
.profile_detail .content_detail .parents .ppl_data .phone span{font-size: 1.125rem;}
.profile_detail .content_detail .parents .ppl_data .call{column-gap: 10px; width: 120px; justify-content: flex-end;}
.profile_detail .content_detail .parents .ppl_data .call a:hover{opacity: 0.5;}
/* Address */
.profile_detail .content_detail .address{margin-bottom: 25px;}
.profile_detail .content_detail .address label{font-size:1.25rem; font-weight: 700; margin: 0 0 10px;}
.profile_detail .content_detail .address span{font-size: 1.125rem;}
/* Comportamiento / datos relevantes — tabs (sin .row en tabs/paneles: evita width 100% y display:flex que rompen hidden) */
.profile_detail .pet_info_tabs{margin-bottom: 28px; width: 100%;}
.profile_detail .pet_info_tablist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: 4px 8px;
width: 100%;
margin: 0 0 12px;
padding: 0;
border-bottom: 2px solid var(--medium-gray, #e0e0e0);
box-sizing: border-box;
}
.profile_detail .pet_info_tablist[hidden]{display: none !important;}
.profile_detail .pet_info_tab{
appearance: none;
border: none;
background: transparent;
font: inherit;
cursor: pointer;
padding: 10px 16px 12px;
margin: 0 0 -2px;
border-radius: 10px 10px 0 0;
color: var(--dark-gray, #444);
font-weight: 600;
font-size: 1rem;
border-bottom: 3px solid transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease;
width: auto;
max-width: 100%;
flex: 0 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.profile_detail .pet_info_tab:hover{background: rgb(0 0 0 / 4%);}
.profile_detail .pet_info_tab.is-active{
color: var(--custom-dark-green, #176d39);
border-bottom-color: var(--custom-dark-green, #176d39);
background: rgb(23 109 57 / 8%);
}
.profile_detail .pet_info_tab:focus-visible{
outline: 2px solid var(--custom-dark-green, #176d39);
outline-offset: 2px;
}
.profile_detail .pet_info_panels{width: 100%; display: block; box-sizing: border-box;}
.profile_detail .pet_info_panel[hidden],
.profile_detail .pet_info_panels .pet_info_panel[hidden]{
display: none !important;
}
.profile_detail .pet_info_panel{
padding: 16px 18px;
border-radius: 12px;
min-height: 0;
box-sizing: border-box;
display: block;
width: 100%;
}
.profile_detail .pet_info_panel.green{background: var(--green);}
.profile_detail .pet_info_panel.yellow{background: var(--yellow);}
.profile_detail .pet_info_panel_body{
margin: 0;
font-size: 1.0625rem;
line-height: 1.45;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
}
/* PROFILE */
/* Heading */
.profile .content_hero .heading h2{justify-content: center; padding: 0 20px; font-size: 2rem; font-weight: 700; color: var(--white);}
/* Add */
.profile .content_hero .content_button{justify-content: center;}
.profile .content_hero .content_button .button_add{display: flex; align-items: center; justify-content: space-evenly; height: 30px; background: var(--custom-dark-green); border: 1px solid transparent; border-radius: 15px; width: 120px; align-content: center; margin: 20px 0 0;}
.profile .content_hero .content_button .button_add span{font-weight: 700; color: var(--white); justify-content: center; transition: all .5s ease-in-out;}
/* Hover */
.profile .content_hero .content_button .button_add:hover{border: 1px solid var(--custom-dark-green); background-color: var(--custom-darker-green); backdrop-filter: blur(10px)}
.profile .content_hero .content_button .button_add:hover span{color: var(--custom-light-green);}
/* Pets */
.profile .content_pets .center_content{padding: 0 25px 150px;}
.profile .content_pets .list{row-gap: 65px; padding: 25px 0 0;}
/* Pet */
.profile .content_pets .list li{position: relative; background-color: var(--custom-lighter-gray); border: 1px solid var(--custom-light-gray); border-radius: 10px; transition: all .5s ease-in-out;}
.profile .content_pets .list li .pet{padding: 60px 20px 10px; justify-content: center; align-items: center;}
/* Figure */
.profile .content_pets .list li .pet figure{position: absolute; top: -45px; left: calc(50% - 45px); height: 90px; width: 90px; display: flex; align-items: center; justify-content: center;}
.profile .content_pets .list li .pet figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; transition: all .5s ease-in-out;}
.profile .content_pets .list li .pet figure img{height: 100%; width: 100%; object-fit: cover; border-radius: 50%; position: relative; clip-path: circle(48% at 50% 50%);}
/* Name */
.profile .content_pets .list li .pet .name label{font-size: 1.25rem; font-weight: 700; color: var(--black); justify-content: center; text-align: center;}
/*Buttons*/
.profile .content_pets .list li .pet .content_buttons{justify-content: center; gap: 10px; margin-top: 10px;}
.profile .content_pets .list li .pet .content_buttons .pets_button{flex: 1; height: 40px; max-width: 170px; padding: 0 14px; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.profile .content_pets .list li .pet .content_buttons .pets_button svg{padding-bottom: 2px;}
/*Button outline*/
.profile .content_pets .list li .pet .content_buttons .pets_button.outline{border: 1px solid var(--custom-dark-green);}
.profile .content_pets .list li .pet .content_buttons .pets_button.outline svg{fill: var(--custom-dark-green); padding-right: 5px; }
.profile .content_pets .list li .pet .content_buttons .pets_button.outline label{font-family: 'Nunito'; font-size: .8rem; font-weight: 700; color: var(--custom-dark-green);cursor: pointer;}
/*Button associate*/
.profile .content_pets .list li .pet .content_buttons .pets_button.associate{background-color: var(--custom-warn);}
.profile .content_pets .list li .pet .content_buttons .pets_button.associate svg{fill: var(--white); padding-right: 5px;}
.profile .content_pets .list li .pet .content_buttons .pets_button.associate label{font-family: 'Nunito'; font-size: .8rem; font-weight: 700; color: var(--white);cursor: pointer;}
/* Warning */
.profile .content_pets .warning{justify-content: center; padding: 0 25px;}
.profile .content_pets .warning svg path{stroke: var(--custom-dark-green);}
.profile .content_pets .warning h2{font-size: 1.5rem; color: var(--black); justify-content: center; text-align: center; padding-top: 25px;}
/* EDIT PET */
/* Pic */
.edit_pet .form_page_content .center_content .pet_pic_content{margin: 5px 0 35px;}
.edit_pet .form_page_content .center_content .pet_pic_content,
.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic{justify-content: center;}
.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure{height: 165px; width: 165px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure::before{height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; background: var(--black); content: ''; z-index: 10;}
.edit_pet .form_page_content .center_content .pet_pic_content .pet_pic figure img{height: 100%; width: 100%; object-fit: cover; clip-path: circle(48% at 50% 50%); position: relative; z-index: 20;}
/* Input */
.edit_pet .form_page_content .center_content .pet_pic_content input{display: none;}
.edit_pet .form_page_content .center_content .pet_pic_content label{position: absolute; top: 150px; display: flex; align-items: center; justify-content: center; width: 125px; height: 32px; border: 1px solid transparent; border-radius: 16px; background-color: var(--custom-dark-green); cursor: pointer; z-index: 30; transition: all .5s ease-in-out;}
.edit_pet .form_page_content .center_content .pet_pic_content label span{color: var(--white); font-size: 1rem; font-weight: 700; padding-left: 5px; transition: color .5s ease-in-out;}
.edit_pet .form_page_content .center_content .pet_pic_content label:hover span{color: var(--custom-light-green);}
/* Secciones del form */
.edit_pet .pet_form .form_section{margin: 0 0 18px; padding: 18px 16px; background: var(--white); border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px rgba(23,109,57,0.06);}
.edit_pet .pet_form .form_section:last-child{margin-bottom: 0;}
.edit_pet .pet_form .form_section_head{padding: 0 4px 10px; border-bottom: 1px dashed rgba(23,109,57,0.18); margin-bottom: 14px;}
.edit_pet .pet_form .form_section_head h3{font-size: 1.05rem; font-weight: 700; color: var(--custom-dark-green); letter-spacing: .2px;}
.edit_pet .pet_form .form_section_body .data{margin: 0 0 14px;}
.edit_pet .pet_form .form_section_body .data:last-child{margin: 0;}
.edit_pet .pet_form .form_section_body .data label{font-size: 1.05rem; color: var(--black); margin: 0 0 6px;}
.edit_pet .pet_form .form_section_body .data input,
.edit_pet .pet_form .form_section_body .data select,
.edit_pet .pet_form .form_section_body .data textarea{width: 100%;}
.edit_pet .pet_form .form_section_body .data input[type="checkbox"],
.edit_pet .pet_form .form_section_body .data input[type="radio"]{width: auto; min-width: 1.1rem; height: auto; padding: 0; flex-shrink: 0;}
.edit_pet .pet_lost_editor{margin-top: 4px;}
.edit_pet .pet_lost_row{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; width: 100%;}
.edit_pet .pet_lost_checkbox{
appearance: none;
-webkit-appearance: none;
width: 1.35rem !important;
height: 1.35rem !important;
min-width: 1.35rem !important;
min-height: 1.35rem !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
background: var(--white);
border: 2px solid var(--custom-light-green);
border-radius: 4px;
cursor: pointer;
position: relative;
transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.edit_pet .pet_lost_checkbox:hover{ border-color: var(--custom-dark-green); }
.edit_pet .pet_lost_checkbox:focus-visible{ outline: 2px solid var(--custom-light-green); outline-offset: 2px; }
.edit_pet .pet_lost_checkbox:checked{ background: var(--custom-light-green); border-color: var(--custom-light-green); }
.edit_pet .pet_lost_checkbox:checked::after{
content: '';
position: absolute;
left: 4px;
top: 0;
width: 6px;
height: 11px;
border: solid var(--white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.edit_pet .pet_form .form_section_body .data.pet_lost_editor .pet_lost_editor_label{
display: block;
flex: 1 1 auto;
cursor: pointer;
font-weight: 600;
margin: 0;
line-height: 1.35;
font-size: 1.05rem;
}
.edit_pet .pet_lost_editor_hint{font-size: 0.88rem; opacity: 0.85; margin: 8px 0 0 0; padding-left: calc(1.35rem + 12px); line-height: 1.35;}
.edit_pet .pet_form .form_grid{display: grid; gap: 12px;}
.edit_pet .pet_form .form_grid.two_col{grid-template-columns: 1fr 1fr;}
.edit_pet .pet_form .form_grid .data{margin: 0;}
@media (max-width: 500px){ .edit_pet .pet_form .form_grid.two_col{grid-template-columns: 1fr;} }
/* Vacunas (editor) */
.edit_pet .vaccines_block{margin-top: 6px;}
.edit_pet .vaccines_head{margin-bottom: 10px;}
.edit_pet .vaccines_head label{font-size: 1.05rem; color: var(--black); margin: 0;}
.edit_pet .vaccines_hint{font-size: .8rem; color: #6b7280; margin-top: 2px;}
.edit_pet .vaccines_list{display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px;}
.edit_pet .vaccine_item{display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #f4faf6; border: 1px solid rgba(23,109,57,0.15); border-radius: 14px;}
.edit_pet .vaccine_info{flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;}
.edit_pet .vaccine_name{font-size: 1rem; font-weight: 700; color: var(--custom-dark-green); margin: 0; word-break: break-word;}
.edit_pet .vaccine_meta{font-size: .82rem; color: #374151;}
.edit_pet .vaccine_notes{font-size: .82rem; color: #4b5563; margin: 2px 0 0; white-space: pre-wrap; word-break: break-word;}
.edit_pet .vaccine_actions{display: flex; gap: 6px; align-items: center;}
.edit_pet .vaccine_action_btn{background: transparent; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s;}
.edit_pet .vaccine_action_btn:hover{background: rgba(23,109,57,0.08);}
.edit_pet .vaccine_action_btn.danger:hover{background: rgba(179,38,30,0.08);}
.edit_pet .vaccines_empty{padding: 10px 14px; border: 1px dashed rgba(23,109,57,0.25); border-radius: 12px; background: #fbfffc;}
.edit_pet .vaccines_empty span{font-size: .88rem; color: #4b5563;}
.edit_pet .vaccine_form{margin: 12px 0 6px; padding: 14px; background: #ffffff; border: 1px solid rgba(23,109,57,0.18); border-radius: 14px;}
.edit_pet .vaccine_form .data{margin: 0 0 12px;}
.edit_pet .vaccine_form .data:last-child{margin: 0;}
.edit_pet .vaccine_form_actions{display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px;}
/* Botones pill del bloque de vacunas (ghost / enter small / add) */
.edit_pet .button.ghost,
.edit_pet .button.enter.small,
.edit_pet .add_vaccine{height: auto; width: auto; min-height: 40px; padding: 8px 18px; margin: 0; border-radius: 999px; flex: 0 0 auto; flex-wrap: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .05s ease;}
.edit_pet .button.ghost:active,
.edit_pet .button.enter.small:active,
.edit_pet .add_vaccine:active{transform: translateY(1px);}
.edit_pet .button.ghost{background: transparent; border: 1.5px solid rgba(23,109,57,0.45);}
.edit_pet .button.ghost span,
.edit_pet .add_vaccine span{width: auto; color: var(--custom-dark-green); font-size: .95rem; font-weight: 700; display: inline-flex;}
.edit_pet .button.ghost:hover{background: rgba(23,109,57,0.08); border-color: var(--custom-dark-green);}
.edit_pet .button.enter.small{background-color: var(--custom-dark-green);}
.edit_pet .button.enter.small:hover{background-color: var(--custom-light-green) !important;}
.edit_pet .button.enter.small span{width: auto; font-size: .95rem; font-weight: 700; color: var(--white);}
.edit_pet .add_vaccine{align-self: flex-start; margin-top: 10px;}
.edit_pet .add_vaccine svg{flex: 0 0 auto;}
/* .row tiene display:flex y anula el atributo [hidden] de HTML; forzamos el comportamiento esperado dentro del editor */
.edit_pet [hidden]{display: none !important;}
/* Una columna: .form_section_body es .row (flex wrap) y los hijos sin .row quedaban al lado y se veía “raro” */
.edit_pet .owner_audio_section .form_section_body{display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px;}
.edit_pet .owner_audio_section .form_section_body > *{width: 100%; max-width: 100%; box-sizing: border-box;}
.edit_pet .owner_audio_hint{font-size: .88rem; color: #4b5563; line-height: 1.45; margin: 0;}
.edit_pet .owner_audio_saved{margin: 0; padding: 12px 14px; background: #f4faf6; border: 1px solid rgba(23,109,57,0.15); border-radius: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;}
.edit_pet .owner_audio_saved[hidden]{display: none !important;}
.edit_pet .owner_audio_saved_head{display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.edit_pet .owner_audio_saved_label{font-size: .95rem; font-weight: 600; margin: 0; flex: 1; min-width: 0;}
.edit_pet .owner_audio_trash{flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: none; background: transparent; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s;}
.edit_pet .owner_audio_trash:hover{background: rgba(179,38,30,0.1);}
.edit_pet .owner_audio_trash:focus-visible{outline: 2px solid var(--custom-dark-green, #176d39); outline-offset: 2px;}
.edit_pet .owner_audio_player{width: 100%; max-width: 100%; margin: 0; display: block;}
.edit_pet .owner_audio_saved .owner_audio_player,
.edit_pet .owner_audio_preview_mount .owner_audio_player{min-height: 40px;}
.edit_pet .owner_audio_preview_wrap{display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0;}
.edit_pet .owner_audio_preview_wrap[hidden]{display: none !important;}
.edit_pet .owner_audio_preview_title{font-size: .95rem; font-weight: 600; color: var(--black);}
.edit_pet .owner_audio_preview_mount{min-height: 0;}
.edit_pet .owner_audio_controls{display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;}
.edit_pet .owner_audio_controls .button.small span{width: auto;}
.edit_pet .owner_audio_timer{font-size: .9rem; font-weight: 600; color: var(--custom-dark-green);}
.edit_pet .owner_audio_err{font-size: .85rem; color: #b3261e; margin: 8px 0 0;}
/* PERFIL MASCOTA (dueño) — Vacunas */
.vaccines_panel{margin: 20px 0 0; padding: 16px 18px; background: var(--white); border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px rgba(23,109,57,0.06);}
.vaccines_panel_head{padding-bottom: 10px; border-bottom: 1px dashed rgba(23,109,57,0.18); margin-bottom: 12px;}
.vaccines_panel_head h5{font-size: 1rem; font-weight: 700; color: var(--custom-dark-green); letter-spacing: .2px;}
.vaccines_panel_body{display: flex; flex-direction: column; gap: 10px;}
.vaccine_item_ro{padding: 10px 12px; background: #f4faf6; border: 1px solid rgba(23,109,57,0.15); border-radius: 12px; display: flex; flex-direction: column; gap: 4px;}
.vaccine_item_ro h6{font-size: .98rem; font-weight: 700; color: var(--custom-dark-green); margin: 0;}
.vaccine_item_ro .vaccine_item_applied,
.vaccine_item_ro .vaccine_item_next{font-size: .82rem; color: #374151;}
.vaccine_item_ro .vaccine_item_notes{font-size: .82rem; color: #4b5563; margin: 4px 0 0; white-space: pre-wrap; word-break: break-word;}
/* Mensaje en audio (perfil dueño + tag público) */
.profile_detail .owner_audio_public{margin: 18px 0 0; padding: 16px 18px; background: var(--white); border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px rgba(23,109,57,0.06);}
.profile_detail .owner_audio_public h5{font-size: 1rem; font-weight: 700; color: var(--custom-dark-green); margin: 0 0 6px;}
.profile_detail .owner_audio_public_hint{font-size: .88rem; color: #4b5563; margin: 0 0 12px; line-height: 1.4;}
.profile_detail .owner_audio_player{width: 100%; max-width: 100%; display: block;}
/*FIRST STEP*/
.first_step .content_heading h3{padding-top: 25px;}
.first_step .first_step_content{justify-content: center; padding: 40px 20px 0;}
.first_step .body_content{max-width: 400px; justify-content: center;}
/*Profile modal*/
.first_step .body_content label{font-size: 1.1rem; font-weight: 400;}
.first_step .body_content figure{margin-top: 20px; width: 118px; height: 118px;}
.first_step .body_content figure img{width: 100%; height: 100%; object-fit: cover;}
.first_step .body_content p{font-size: .6rem; font-weight: 700; color: black; justify-content: center;}
.first_step .first_step_content .content_button{justify-content: center; margin-top: 30px;}
.first_step .first_step_content .content_button .button.enter{background: var(--custom-dark-green); width: 400px;}
.first_step .first_step_content .content_button .button.enter:hover{background: var(--custom-light-green);}
/*Media Query Ipad Portrait General*/
@media (max-width: 1200px) {
.center_content{width: 100%;}
}
/*Media Query Ipad Portrait General*/
@media (max-width: 1000px) {
/* BUTTON ENTER */
.home .content_login .content_elements .content_buttons .button.enter:hover{background: var(--custom-dark-green) !important;}
.home .content_login .content_elements .content_buttons .button.signup:hover{background: var(--custom-darker-green) !important;}
.button.enter:hover{background-color: var(--custom-darker-green) !important;}
/* BUTTON FIX */
.button_fix{padding: 0 20px;}
.button_fix .button.enter{width: 100%;}
}
/* Phone Prefix Selector Styles */
.phone_container {
display: flex;
gap: 10px;
align-items: center;
}
.phone_prefix {
min-width: 180px;
padding: 12px;
border: 1px solid var(--medium-gray);
border-radius: 8px;
background: var(--white);
font-size: 14px;
color: var(--black);
cursor: pointer;
transition: all 0.3s ease;
}
.phone_prefix:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}
.phone_number {
flex: 1;
padding: 12px;
border: 1px solid var(--medium-gray);
border-radius: 8px;
font-size: 16px;
color: var(--black);
transition: all 0.3s ease;
}
.phone_number:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}
.phone_prefix option {
padding: 8px;
}