/* Core App Container */
.pca-vault-container { width: 100%; max-width: 80%; margin: 0 auto; padding: 20px; }
/* Prize Banner Styles */
.pca-vault-prize-banner { position: relative; overflow: hidden; background-color: #071827bf; border-radius: 15px; padding: 20px; text-align: center; margin-bottom: 20px; min-height: 120px; }
.pca-vault-slider-container { display: flex; transition: transform 0.5s ease-in-out; width: 100%; }
.pca-vault-slide { flex: 0 0 100%; text-align: center; padding: 0 10px; }
.pca-vault-prize-title { font-size: 20px; font-weight: bold; color: #ffffff; margin: 0 0 5px; }
.pca-vault-prize-subtitle { font-size: 14px; color: #ffffff; margin: 0 0 15px; max-width: 70%; margin-left: auto; margin-right: auto; }
.pca-vault-prize-btn { background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease; margin-bottom: 10px; }
.pca-vault-prize-btn:hover { background-color: #45a049; }
.pca-vault-slide-prev { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; font-size: 24px; padding: 5px 12px; cursor: pointer; z-index: 10; border-radius: 5px; } 
.pca-vault-slide-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; font-size: 24px; padding: 5px 12px; cursor: pointer; z-index: 10; border-radius: 5px; }
.pca-vault-slide-prev { left: 10px; }
.pca-vault-slide-next { right: 10px; }
.pca-vault-slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.pca-vault-dot { width: 10px; height: 10px; background-color: rgba(0,0,0,0.3); border-radius: 50%; cursor: pointer; }
.pca-vault-dot.active { background-color: #fff; }
/* Header, Search, and Controls */
.pca-vault-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pca-vault-app-logo { font-size: 20px; font-weight: bold; color: #1a1a1a; flex-grow: 1; text-align: center; }
.pca-vault-action-btn { background: none; border: none; padding: 0; cursor: pointer; }
.pca-vault-search-bar { width: 100%; padding: 10px; border-width: 1px; border-style: solid; border-radius: 8px; margin-bottom: 10px; box-sizing: border-box; }
.pca-vault-controls-row { display: flex; justify-content: space-between; margin-bottom: 15px; }
.pca-vault-control-button { background: none; border: none; padding: 0; cursor: pointer; }
.pca-vault-control-text { font-size: 14px; font-weight: 600; }
/* NEW Header Styling */
.pca-vault-header-bar { display: flex; justify-content: space-between; align-items: center; }
.pca-vault-header-left, .pca-vault-header-right { flex: 1; }
.pca-vault-header-center { flex: 1; text-align: center; }
.pca-vault-app-logo { display: inline-block; max-width: 150px; height: auto; }
/* 2x2 Grid */
.pca-vault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1%; margin-top: 1%; max-width: auto; margin-left: 5%; margin-right: 5%; }
.pca-vault-grid-item { height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 15px; border-width: 1px; border-style: solid; text-decoration: none; cursor: pointer; background-color: #071827bf; }
.pca-vault-grid-text { font-size: 18px; font-weight: 200; color: white; }
/* Dashboard Container */
#pca-vault-dashboard-container { padding: 20px 0; }
#pca-vault-dashboard-content { display: grid; gap: 20px; padding: 0; border: none; border-radius: 15px; min-height: 400px; }
/* Dashboard Layouts */
.pca-vault-dashboard-single-col { grid-template-columns: 1fr; }
.pca-vault-dashboard-two-col { grid-template-columns: 1fr 1fr; }
.pca-vault-dashboard-two-row { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: 400px; }
.pca-vault-dashboard-three-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 400px; }
.pca-vault-dashboard-three-split .pca-vault-viewport-card:first-child { grid-column: 1 / 2; grid-row: 1 / 3; }
.pca-vault-dashboard-three-split .pca-vault-viewport-card:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.pca-vault-dashboard-three-split .pca-vault-viewport-card:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
/* Viewport Card Styling */
.pca-vault-viewport-card { background-color: #071827bf; border: none; border-radius: 10px; padding: 1%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: #ffffff}
.pca-vault-viewport-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #ffffff; }
.pca-vault-viewport-link { background-color: #4CAF50; color: white; border: none; padding: 8px 15px; border-radius: 8px; cursor: pointer; margin-top: 10px; }
/* Customize Button */
.pca-vault-btn-customize { background-color: #071827bf; color: #ffffff; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 70%; text-align: center; margin-left: 15%; margin-right: 15%; }
/* Modal Styling */
.pca-vault-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.pca-vault-modal-content { background-color: #fefefe; margin: auto; padding: 30px; border: 1px solid #888; border-radius: 15px; width: 80%; max-width: 400px; position: relative; }
.pca-vault-modal-close { color: #aaa; position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
.pca-vault-modal-close:hover { color: black; }
.pca-vault-template-selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.pca-vault-template-btn { background-color: #ffffff; border: 1px solid #ccc; padding: 10px; border-radius: 5px; cursor: pointer; flex: 1 1 45%; min-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1.2; }
/* New CSS to highlight active button */
.pca-vault-template-btn.active { background-color: #d1e5f8; border-color: #337ab7; }
/* New responsive rules for mobile screens */
@media (max-width: 480px) { .pca-vault-modal-content { width: 95%; padding: 20px; } .pca-vault-template-selector { flex-direction: column; } .pca-vault-template-btn { flex-basis: 100%; } }

/* Template Icon Styles - REVISED FOR BETTER RELIABILITY */
.pca-vault-template-icon { border: 1px solid #999; background-color: #fff; width: 40px; height: 30px; margin-bottom: 5px; box-sizing: border-box; }
.pca-vault-template-icon div { background-color: #d1d1d1; border: 1px solid #aaa; }

/* Styles for each specific icon layout */
.pca-vault-template-icon.single-col { display: flex; justify-content: center; align-items: center; }
.pca-vault-template-icon.single-col div { flex: 1; height: 100%; }
.pca-vault-template-icon.two-col { display: flex; }
.pca-vault-template-icon.two-col div { flex: 1; height: 100%; }
.pca-vault-template-icon.two-row { display: flex; flex-direction: column; }
.pca-vault-template-icon.two-row div { flex: 1; width: 100%; }
.pca-vault-template-icon.three-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 30px; }
.pca-vault-template-icon.three-split div:first-child { grid-column: 1 / 2; grid-row: 1 / 3; }
.pca-vault-template-icon.three-split div:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.pca-vault-template-icon.three-split div:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }

/* ---------------------------------- */
/* NEW COLLECTION PAGE CSS STARTS HERE */
/* ---------------------------------- */

/* Global container for all views */
.pca-vault-collection-container { margin-top: 20px; }

/* Desktop View (default) */
.pca-vault-desktop-view { display: block; }

/* Mobile View (hidden by default) */
.pca-vault-mobile-view { display: none; }

/* Collection Page Styles - Desktop View */
.pca-vault-desktop-view { display: block; }
.pca-vault-three-panel-grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr; grid-template-areas: "series-list-area sets-area" "series-list-area cards-area"; gap: 20px; margin-top: 20px; min-height: 500px; }
.pca-vault-panel { border: 1px solid #ccc; border-radius: 15px; padding: 15px; background-color: #071827bf; }
.pca-vault-panel h3 { margin-top: 0; text-align: center; }

/* Desktop Panel Layout */
.pca-vault-series-list-desktop { grid-area: series-list-area; }
.pca-vault-sets-within-series { grid-area: sets-area; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow-x: auto; }
.pca-vault-sets-within-series .pca-vault-set-block-desktop { background-color: #e9eef6; padding: 10px; border-radius: 8px; border: 1px solid #d1d9e6; display: flex; flex-direction: column; align-items: center; width: 150px; }
.pca-vault-sets-within-series .pca-vault-set-name { font-weight: bold; }

.pca-vault-card-images { grid-area: cards-area; }
.pca-vault-card-images .pca-vault-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; margin-top: 20px; }
.pca-vault-card-images .pca-vault-card-thumbnail { border: 1px solid #d1d9e6; border-radius: 8px; overflow: hidden; position: relative; }
.pca-vault-card-images .pca-vault-card-thumbnail img { max-width: 100%; height: auto; display: block; }

/* Desktop Series Button */
.pca-vault-series-btn-desktop { background: none; text-align: left; width: 100%; display: block; cursor: pointer; padding: none; }
.pca-vault-series-btn-desktop:last-child { border-bottom: none; }
.pca-vault-series-btn-desktop.active { background-color: #071827bf; }

/* Hidden set data container */
.pca-vault-all-sets-hidden { display: none; }
.pca-vault-all-sets-hidden .pca-vault-set-block-desktop { display: flex; flex-direction: column; }
.pca-vault-all-sets-hidden .pca-vault-set-info { flex-grow: 1; display: flex; flex-direction: column; }
.pca-vault-all-sets-hidden .pca-vault-set-name { font-size: 16px; font-weight: 600; color: inherit; }
.pca-vault-all-sets-hidden .pca-vault-set-tally { font-size: 12px; color: inherit; }
.pca-vault-all-sets-hidden .pca-vault-progress-bar-container { width: 80px; height: 8px; background-color: #555; border-radius: 4px; overflow: hidden; margin: 0 10px; flex-shrink: 0; }
.pca-vault-all-sets-hidden .pca-vault-progress-bar { height: 100%; background-color: #4CAF50; border-radius: 4px; transition: width 0.5s ease-out; }
.pca-vault-all-sets-hidden .pca-vault-set-percent { font-size: 14px; font-weight: bold; color: inherit; width: 45px; text-align: right; flex-shrink: 0; }


/* ------------------------------------- */
/* RESPONSIVE BREAKPOINT FOR MOBILE */
/* ------------------------------------- */

@media (max-width: 768px) {
    /* Hide desktop and show mobile view */
    .pca-vault-desktop-view { display: none; }
    .pca-vault-mobile-view { display: block; }
    
    /* Mobile Accordion Styles */
    .pca-vault-mobile-view .pca-vault-series-container-mobile { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
    .pca-vault-mobile-view .pca-vault-series-toggle-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px; border: none; background-color: #f9f9f9; font-size: 16px; font-weight: bold; cursor: pointer; }
    .pca-vault-mobile-view .pca-vault-series-toggle-mobile .toggle-icon { transition: transform 0.2s ease-in-out; }
    .pca-vault-mobile-view .pca-vault-series-toggle-mobile.expanded .toggle-icon { transform: rotate(90deg); }
    .pca-vault-mobile-view .pca-vault-sets-list-mobile { padding: 10px; background-color: #fff; }
    .pca-vault-mobile-view .pca-vault-set-block-mobile { border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; }
    .pca-vault-mobile-view .pca-vault-set-block-mobile:first-child { border-top: none; }
}