:root {
    --color1: #0073aa;
    --color2: #005177;
    --color3: #a8ce84;
}

.bg-color1 { background-color: var(--color1)!important; }
.bg-color2 { background-color: var(--color2)!important; }
.bg-color3 { background-color: var(--color3)!important; }
.bg-white { background-color: var(--white)!important; }

.bg-site1 { background-color: var(--color1)!important; }
.bg-site2 { background-color: var(--color2)!important; }
.bg-site3 { background-color: var(--color3)!important; }

.bg-text { background-color: var(--color3); background-clip: text; -webkit-background-clip: text; color: transparent; }

.text-black { color: #000!important; }
.text-site1 { color: var(--color1); }
.text-site2 { color: var(--color2); }
.text-site3 { color: var(--color3); }

.d-inline-block { display: inline-block; }

h1.entry-title { display: none!important; }

.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.mr-2 { margin-right: 0.5rem; }

.nectar-accent-color { color: var(--nectar-accent-color)!important; }

.back-btn { background-color: var(--nectar-accent-color); border-radius: 25px; color: var(--white); display: inline-block; font-size: 12px; line-height: 17px; padding: 4px 16px; text-transform: uppercase; }
.back-btn:hover { background-color: #02325f; color: var(--white); }

.btn-group-xs>.btn, .btn-xs { border-radius: .15rem; font-size: .8rem; line-height: 1.3; padding: 0.2rem .25rem 0; }
.btn-delete { background-color: #dc3545!important; border-color: #dc3545!important; color: var(--white); }

.white-box { background-color: var(--white); border-radius: 10px; padding: 30px; }
.white-box + .white-box { margin-top: 20px; }

.white-box h3 > a.button { background-color: var(--nectar-accent-color); border-radius: 6px; color: var(--white); display: inline-block; float: right; font-size: 14px; font-weight: normal; line-height: 19px; padding: 6px 12px }
.white-box h3 > a.button:hover { background-color: #02325f; color: var(--white); }

.information { background-color: #f2f2f2; border-radius: 6px; color: var(--black); display: block; font-size: 14px; font-style: italic; line-height: 19px; margin-top: 15px; padding: 8px 20px!important; width: fit-content; }

.white-box form .row { padding-bottom: 0; }
.white-box form .form-group { margin-bottom: 15px; }

.ver-registro { border: 0; box-shadow: none; }
.ver-registro:hover { background-color: #4e73df; }

body[data-form-submit="regular"] button[type=submit].button-extra-color-1 { background-color: #f40f02; }
body[data-form-submit="regular"] button[type=submit].button-extra-color-1:hover { color: var(--white); }

@media (max-width: 999px) {
    .white-box { padding: 25px; }
}

@media (max-width: 690px) {
    .white-box { padding: 25px 15px; }

    .white-box h3 > a.button { clear: both; display: block; float: none; margin-block: 10px 25px; width: fit-content; }
}


/***********************
 DATATABLES
 ***********************/
#clients-panel .dataTables_wrapper { border: 1px solid #EAEAEA; border-radius: 10px; font-weight: normal; padding: 25px 15px; }
#clients-panel div.dataTables_wrapper label, .dataTables_info { font-size: 14px; line-height: 18px; }
#clients-panel table.dataTable > thead > tr > th, #clients-panel table.dataTable > tbody > tr > td { padding: 0.8rem 1.5rem 0.8rem 0!important; }
#clients-panel table.dataTable > thead > tr > th { border-bottom: 0; color: rgb(153, 161, 183); text-transform: uppercase; }
#clients-panel table.dataTable > tbody > tr > td { border-bottom: 1px dashed rgb(241, 241, 244); color: #252F4A; }
#clients-panel .dataTables_wrapper > .row:last-child { margin-top: 15px; }

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li:not(:last-child) { margin-right: 5px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a { border: 1px solid #EAEAEA; border-radius: 5px; color: #7a7a7a; font-size: 13px; line-height: 18px; padding: 5px 10px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.active > a { color: #ffffff; border-color: #4e73df; }


/***********************
 CHECKING / CHECKOUT
 ***********************/
#coz-form-checkin-checkout {
    margin: 0 auto;
    max-width: 530px;
    min-height: 100vh;
    text-align: center;
    
}

#coz-form-checkin-checkout form { left: 50%; max-width: 530px; padding-inline: 15px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; }

#coz-form-checkin-checkout .display-input {
    background-color: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    box-shadow: none;
    font-size: 18px;
    padding: 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

#coz-form-checkin-checkout .btn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#coz-form-checkin-checkout .btn {
    font-size: 1.5rem !important;
    padding: 1rem !important;
    cursor: pointer !important;
    border: none !important;
    background: #0073aa !important;
    color: #fff !important;
    border-radius: 8px !important;
}

#coz-form-checkin-checkout .btn:hover {
    background: #005177 !important;
}

#coz-form-checkin-checkout .btn-clear {
    background: #888 !important;
}

#coz-form-checkin-checkout .btn-clear:hover {
    background: #555 !important;
}

#coz-form-checkin-checkout .btn-submit {
    background: #2ea2cc !important;
}

#coz-form-checkin-checkout .btn-submit:hover {
    background: #1e8caa !important;
}

#coz-form-checkin-checkout .message {
    margin-top: 1rem;
    font-size: 1.2rem;
    padding: 1rem;
    border-radius: 5px;
}

#coz-form-checkin-checkout .message.error {
    color: #b30000;
    background-color: #fdd;
    border: 1px solid #b30000;
}

#coz-form-checkin-checkout .message.success {
    color: #006600;
    background-color: #dfd;
    border: 1px solid #006600;
}

@media (max-width: 999px) {
    #coz-form-checkin-checkout .btn-grid { gap: 10px; }
    #coz-form-checkin-checkout .btn { font-size: 1.2rem !important; }
}

/***********************
 DEMO
 ***********************/
#coz-form-demo { margin: 0 auto; text-align: center; }


/***********************
 CHECKOUT
 ***********************/
.wc-block-components-form .wc-block-components-checkout-step { margin-bottom: 10px!important; }
.wp-block-woocommerce-checkout-shipping-method-block, .wp-block-woocommerce-checkout-pickup-options-block { display: none!important; }
.wp-block-woocommerce-checkout-order-summary-block { background-color: var(--white); }
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) { background-color: var(--site1); border: 0; border-radius: 10px; color: var(--white); }
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover { background-color: var(--black); }


/***********************
 ACCORDION
 ***********************/
details { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); margin: 1rem 0; padding: 0.8rem 1rem; transition: all 0.3s ease; }
details:hover { border-color: #0073aa; box-shadow: 0 4px 12px rgba(0,115,170,0.1); }

details summary { color: #005177; cursor: pointer; font-size: 1rem; font-weight: 600; list-style: none; padding-right: 1.5rem; position: relative; }
details summary::after { content: "➕"; color: #0073aa; font-size: 1rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease, content 0.3s ease; }  

details[open] { animation: openDetails 0.3s ease; }
details[open] summary { margin-bottom: 15px; }
details[open] summary::after { content: "➖"; transform: translateY(-50%) rotate(180deg); }

@keyframes openDetails { 
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}