/**
 * Cookie Banner Module - Main Stylesheet
 * Optimized for PageSpeed and Responsive Design
 * 
 * @package Joomla.Site
 * @subpackage mod_cookiebanner
 * @copyright 2025
 * @license GNU General Public License version 2 or later
 */


:root{
 --cb-primary:#1e40af;
 --cb-secondary:#ffffff;
 --cb-text:#1f2937;
 --cb-border:#e5e7eb;
 --cb-shadow:0 10px 15px -3px rgba(0,0,0,0.1);
 --cb-transition:all 0.3s ease-in-out;
 --cb-z-index:9999;
}


.cookie-banner.light:not([style*="--cb-primary"]){
 --cb-primary:#1e40af;
 --cb-secondary:#ffffff;
 --cb-text:#1f2937;
 --cb-border:#e5e7eb;
}


.cookie-banner.dark:not([style*="--cb-primary"]){
 --cb-primary:#3b82f6;
 --cb-secondary:#1f2937;
 --cb-text:#f3f4f6;
 --cb-border:#374151;
}


#cookie-banner{
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 font-size:14px;
 line-height:1.5;
 color:var(--cb-text);
 background-color:var(--cb-secondary);
 border:1px solid var(--cb-border);
 box-shadow:var(--cb-shadow);
 position:fixed;
 z-index:var(--cb-z-index);
 opacity:0;
 visibility:hidden;
 transition:var(--cb-transition);
 max-width:600px;
 border-radius:8px;
 overflow:hidden;
}


#cookie-banner.cookie-banner-visible{
 opacity:1;
 visibility:visible;
}


#cookie-banner-backdrop{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:rgba(0,0,0,0.5);
 z-index:calc(var(--cb-z-index) - 1);
 opacity:0;
 visibility:hidden;
 transition:var(--cb-transition);
}

#cookie-banner.cookie-banner-visible ~ #cookie-banner-backdrop{
 opacity:1;
 visibility:visible;
}


#cookie-banner.position-bottom{
 bottom:20px;
 left:50%;
 margin-left:-300px;
 max-width:600px;
 width:600px;
}


@media (max-width:768px){
 #cookie-banner.position-bottom{
 left:20px;
 right:20px;
 margin-left:0;
 width:auto;
 max-width:calc(100% - 40px);
}
}


#cookie-banner.position-top{
 top:20px;
 left:20px;
 right:20px;
 max-width:calc(100% - 40px);
}


#cookie-banner.position-center{
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 max-width:600px;
 width:90%;
}

#cookie-banner.position-center.cookie-banner-visible{
 transform:translate(-50%,-50%);
}


.cookie-banner-content{
 padding:24px;
 display:flex;
 flex-direction:column;
 gap:16px;
}

.cookie-banner-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:16px;
}

.cookie-banner-title{
 font-size:18px;
 font-weight:600;
 margin:0;
 flex:1;
}

.cookie-banner-close{
 background:none;
 border:none;
 font-size:24px;
 cursor:pointer;
 color:var(--cb-text);
 padding:0;
 width:32px;
 height:32px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:4px;
 transition:var(--cb-transition);
 flex-shrink:0;
}

.cookie-banner-close:hover,
.cookie-banner-close:focus{
 background-color:var(--cb-border);
 outline:none;
}

.cookie-banner-message{
 font-size:14px;
 line-height:1.6;
 margin:0;
 color:var(--cb-text);
}

.cookie-banner-message a{
 color:var(--cb-primary);
 text-decoration:none;
 font-weight:500;
 transition:var(--cb-transition);
}

.cookie-banner-message a:hover,
.cookie-banner-message a:focus{
 text-decoration:underline;
 outline:none;
}


#cookie-banner-main{
 display:flex;
 flex-direction:column;
 gap:16px;
}


.cookie-banner-buttons{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
}

.cookie-banner-btn{
 flex:1;
 min-width:120px;
 padding:10px 16px;
 border:none;
 border-radius:6px;
 font-size:14px;
 font-weight:500;
 cursor:pointer;
 transition:var(--cb-transition);
 text-align:center;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 white-space:nowrap;
}

.cookie-banner-btn:focus{
 outline:2px solid var(--cb-primary);
 outline-offset:2px;
}

.cookie-banner-btn-primary{
 background-color:var(--cb-primary);
 color:white;
}

.cookie-banner-btn-primary:hover{
 opacity:0.9;
 transform:translateY(-2px);
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

.cookie-banner-btn-secondary{
 background-color:transparent;
 color:var(--cb-primary);
 border:2px solid var(--cb-primary);
}

.cookie-banner-btn-secondary:hover{
 background-color:var(--cb-primary);
 color:white;
}

.cookie-banner-btn-tertiary{
 background-color:var(--cb-border);
 color:var(--cb-text);
}

.cookie-banner-btn-tertiary:hover{
 background-color:#d1d5db;
}


#cookie-customize-panel{
 display:none;
 flex-direction:column;
 gap:16px;
}

.cookie-banner-categories{
 display:flex;
 flex-direction:column;
 gap:12px;
}

.cookie-category{
 display:flex;
 align-items:flex-start;
 gap:12px;
 padding:12px;
 background-color:var(--cb-border);
 border-radius:6px;
 transition:var(--cb-transition);
}

.cookie-category:hover{
 background-color:#d1d5db;
}

.cookie-category input[type="checkbox"]{
 width:20px;
 height:20px;
 margin-top:2px;
 cursor:pointer;
 accent-color:var(--cb-primary);
 flex-shrink:0;
}

.cookie-category input[type="checkbox"]:disabled{
 opacity:0.5;
 cursor:not-allowed;
}

.cookie-category-info{
 flex:1;
 display:flex;
 flex-direction:column;
 gap:4px;
}

.cookie-category-label{
 font-weight:500;
 cursor:pointer;
 user-select:none;
}

.cookie-category-description{
 font-size:13px;
 color:#6b7280;
 line-height:1.4;
}

.cookie-category.essential .cookie-category-label::after{
 content:' (required)';
 font-size:12px;
 color:#6b7280;
 font-weight:normal;
}


@media (max-width:640px){
 #cookie-banner{
 max-width:calc(100% - 20px);
 border-radius:4px;
}

 #cookie-banner.position-bottom{
 bottom:10px;
 left:10px;
 right:10px;
 max-width:calc(100% - 20px);
}

 #cookie-banner.position-top{
 top:10px;
 left:10px;
 right:10px;
 max-width:calc(100% - 20px);
}

 #cookie-banner.position-center{
 width:95%;
 max-width:100%;
}

 .cookie-banner-content{
 padding:16px;
 gap:12px;
}

 .cookie-banner-title{
 font-size:16px;
}

 .cookie-banner-buttons{
 flex-direction:column;
 gap:10px;
}

 .cookie-banner-btn{
 min-width:100%;
 width:100%;
}

 .cookie-banner-header{
 gap:12px;
}

 .cookie-banner-close{
 width:28px;
 height:28px;
 font-size:20px;
}
}

@media (max-width:480px){
 .cookie-banner-content{
 padding:12px;
 gap:10px;
}

 .cookie-banner-title{
 font-size:14px;
}

 .cookie-banner-message{
 font-size:13px;
}

 .cookie-banner-btn{
 padding:8px 12px;
 font-size:13px;
}

 .cookie-category{
 padding:10px;
 gap:10px;
}

 .cookie-category input[type="checkbox"]{
 width:18px;
 height:18px;
}

 .cookie-category-description{
 font-size:12px;
}
}


@media (min-width:768px){
 #cookie-banner{
 max-width:600px;
}

 #cookie-banner.position-bottom{
 bottom:24px;
 left:50%;
 margin-left:-300px;
 right:auto;
}

 #cookie-banner.position-top{
 top:24px;
 left:24px;
 right:auto;
}

 .cookie-banner-buttons{
 justify-content:flex-end;
}

 .cookie-banner-btn{
 flex:0 1 auto;
 min-width:140px;
}
}


@media (prefers-reduced-motion:reduce){
 #cookie-banner,
 .cookie-banner-btn,
 .cookie-category{
 transition:none;
}

 .cookie-banner-btn:hover{
 transform:none;
}
}


@media print{
 #cookie-banner,
 #cookie-banner-backdrop{
 display:none !important;
}
}


@media (prefers-contrast:more){
 #cookie-banner{
 border-width:2px;
}

 .cookie-banner-btn{
 border-width:2px;
}

 .cookie-banner-close:focus{
 outline-width:3px;
}
}


@media (prefers-color-scheme:dark){
 .cookie-banner.dark{
 --cb-primary:#60a5fa;
 --cb-secondary:#111827;
 --cb-text:#f9fafb;
 --cb-border:#374151;
}
}


#cookie-banner{
 contain:layout style paint;
}

.cookie-banner-btn{
 contain:layout style paint;
}


#cookie-banner-backdrop{
 will-change:opacity,visibility;
}