:root {
   --card-radius: 28px;
   --pad: 22px;
   --shadow: 0 18px 50px rgba(0, 0, 0, .25);
   --scale: 0.5;

   /* Apple-ish layout variables */
   --top-pad: 18px;
   --hero-h: 170px;
   --titleband-h: 66px;
 }

 /* Google Wallet Status Styling */
 .google-wallet-status {
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid #dee2e6 !important;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .google-wallet-status h6 {
   color: #333;
   margin-bottom: 0.75rem;
   font-weight: 600;
 }

 .google-wallet-status .text-success {
   color: #198754 !important;
 }

 .google-wallet-status .text-warning {
   color: #fd7e14 !important;
 }

 .google-wallet-status .text-danger {
   color: #dc3545 !important;
 }

 .google-wallet-status .badge {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }

 .google-wallet-status .bg-success {
   background-color: #198754 !important;
 }

 .google-wallet-status .bg-secondary {
   background-color: #6c757d !important;
 }

 .google-wallet-status ul {
   margin-bottom: 0.5rem;
 }

 .google-wallet-status li {
   font-size: 0.875rem;
   margin-bottom: 0.25rem;
 }

 /* End Google Wallet Status Styling */

 .icon-button {
   background: none;
   border: none;
   color: white;
   font-size: 1.25rem;
   cursor: pointer;
   padding: 0.5rem;
   border-radius: 4px;
   transition: background-color 0.2s;
 }

 .icon-button:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }

 .theme-settings {
   background: rgba(255, 255, 255, 0.1);
   padding: 1.5rem;
   margin-top: 1.5rem;
   border-radius: 8px;
   text-align: left;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .theme-settings h3 {
   color: white;
   margin-top: 0;
   margin-bottom: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding-bottom: 0.5rem;
 }

 .color-picker-group {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: center;
 }

 .color-picker {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

 .color-picker label {
   color: white;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
   opacity: 0.9;
 }

 .color-picker input[type="color"] {
   width: 50px;
   height: 30px;
   padding: 0;
   border: 2px solid white;
   border-radius: 4px;
   background: none;
   cursor: pointer;
 }

 .color-picker input[type="color"]::-webkit-color-swatch {
   border: none;
   border-radius: 2px;
 }


 .file-upload {
   margin-top: 1.5rem;
   text-align: center;
 }

 .upload-options {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1rem;
   flex-wrap: wrap;
 }

 .upload-or {
   color: rgba(255, 255, 255, 0.8);
   font-weight: 500;
 }

 #file-input {
   display: none;
 }

 /* Drop Zone Styling */
 .drop-zone {
   border: 2px dashed var(--tblr-border-color);
   border-radius: var(--tblr-border-radius);
   padding: 2rem;
   text-align: center;
   color: var(--tblr-secondary);
   transition: all 0.3s ease;
   cursor: pointer;
   background: var(--tblr-light);
 }

 .drop-zone:hover,
 .drop-zone.drag-over {
   border-color: var(--tblr-primary);
   background-color: rgba(32, 107, 196, 0.05);
 }

 .drop-zone-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

 .drop-zone-content i {
   font-size: 2rem;
   color: var(--tblr-primary);
   margin-bottom: 0.5rem;
 }

 .drop-zone-content small {
   opacity: 0.7;
   font-size: 0.85rem;
 }

 main {
   padding: 2rem;
   overflow-x: hidden;
   max-width: 100%;
 }

 .content-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: start;
   max-width: 100%;
   overflow-x: hidden;
 }

 .left-panel,
 .right-panel {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }

 .error,
 .success {
   padding: 1rem;
   border-radius: 4px;
   margin-bottom: 1rem;
   border-left: 4px solid;
 }

 .error {
   background-color: #fde8e8;
   color: var(--tblr-danger);
   border-left-color: var(--tblr-danger);
 }

 .success {
   background-color: #d1fae5;
   color: var(--tblr-success);
   border-left-color: var(--tblr-success);
 }

 .hidden {
   display: none;
 }

 /* Field Grid */
 .field-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
   margin-bottom: 1.5rem;
 }

 .field {
   padding: 1rem;
   border-radius: var(--tblr-border-radius);
   /* border: 1px solid var(--tblr-border-color); */
 }

 .field-label {
   font-weight: 600;
   color: var(--tblr-dark);
   margin-bottom: 0.5rem;
   display: block;
 }

 .field-value {
   word-break: break-word;
   color: var(--tblr-secondary);
 }

 /* Field Editor */
 #field-editor .editor-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1rem;
 }

 #field-editor .editor-card {
   background: var(--tblr-light);
   border: 1px solid var(--tblr-border-color);
   border-radius: var(--tblr-border-radius);
   padding: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 #field-editor .form {
   display: grid;
   gap: 0.75rem;
 }

 #field-editor .form-row {
   display: grid;
   gap: 0.25rem;
   font-size: 0.9rem;
 }

 #field-editor input[type="text"],
 #field-editor input[type="date"] {
   padding: 0.5rem 0.6rem;
   border: 1px solid var(--tblr-border-color);
   border-radius: var(--tblr-border-radius);
   background: #fff;
   font-size: 0.95rem;
   transition: border-color 0.2s;
 }

 #field-editor input[type="text"]:focus,
 #field-editor input[type="date"]:focus {
   outline: none;
   border-color: var(--tblr-primary);
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
 }

 /* Field Editor Cards */
 .field-editor-card {
   border: 1px solid #e9ecef;
   border-radius: 0.375rem;
   padding: 1rem;
   margin-bottom: 1rem;
   background: #fff;
 }

 .field-editor-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid #e9ecef;
 }

 .field-editor-header span {
   font-weight: 600;
   color: var(--tblr-dark);
   font-size: 0.9rem;
 }

 .field-editor-inputs {
   margin: 0;
 }

 .field-editor-inputs .form-control {
   margin-bottom: 0.5rem;
 }

 .field-editor-inputs .form-control:last-child {
   margin-bottom: 0;
 }

 /* Disabled field styling */
 .form-control:disabled {
   background-color: #f8f9fa;
   opacity: 0.6;
   cursor: not-allowed;
 }

 .form-text {
   font-size: 0.875rem;
   color: #6c757d;
   display: block;
   margin-top: 14px;
 }

 /* Switch toggle styling */
 .form-check-input:checked {
   background-color: #206bc4;
   border-color: #206bc4;
 }

 .form-check-input:focus {
   border-color: #206bc4;
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
 }

 /* Button variants */
 .btn-danger {
   background: var(--tblr-danger);
   color: white;
 }

 .btn-danger:hover {
   background: #c0392b;
 }

 .btn-outline:hover {
   background: var(--tblr-primary);
   color: white;
 }

 /* Pass color controls */
 .pass-config-card .color-pickers-row {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 }

 .pass-config-card .color-picker-item {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .pass-config-card label {
   font-weight: 600;
   margin-bottom: 0.5rem;
   color: var(--tblr-dark);
 }

 .pass-config-card input[type="color"] {
   width: 56px;
   height: 36px;
   padding: 0;
   border: 1px solid var(--tblr-border-color);
   border-radius: var(--tblr-border-radius);
   background: none;
   cursor: pointer;
   transition: transform 0.2s;
 }

 .pass-config-card input[type="color"]:hover {
   transform: scale(1.1);
 }

 /* Preview Layout - Both cards visible */
 .preview-layout {
   display: flex;
   flex-direction: row;
   gap: 2rem;
   align-items: flex-start;
   justify-content: center;
   margin-bottom: 2rem;
   margin-top: 20px;
   max-width: 100%;
   overflow-x: auto;
   /* prevent right panel dropping by allowing horizontal scroll when needed */
   flex-wrap: wrap;
 }

 /* Keep the two preview panels side-by-side on desktop */
 @media (min-width: 992px) {
   .preview-layout {
     flex-wrap: nowrap;
     justify-content: center;
   }
 }

 .card-front,
 .card-back {
   /* Mobile-first: stack */
   width: 100%;
   max-width: 100%;
   position: relative;
   overflow: hidden;
 }

 /* Desktop: keep both cards on one row with fixed basis */
 @media (min-width: 992px) {

   .card-front,
   .card-back {
     flex: 0 0 375px;
     width: 375px;
     max-width: 375px;
   }
 }

 .card-front h4,
 .card-back h4 {
   display: none;
 }

 /* Color Controls - Now integrated with preview */
 .pass-config-card {
   width: 100%;
   max-width: 375px;
   margin: 0 auto;
   padding: 1.5rem;
   background: var(--tblr-light);
   border-radius: var(--tblr-border-radius);
   border: 1px solid var(--tblr-border-color);
 }

 .pass-config-card h4 {
   text-align: center;
   color: var(--tblr-dark);
   margin-bottom: 1.5rem;
   font-size: 1.1rem;
   font-weight: 600;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--tblr-border-color);
 }

 .pass-config-card .color-pickers-row {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
   justify-content: center;
 }

 .pass-config-card .color-picker-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

 .pass-config-card label {
   font-weight: 600;
   margin-bottom: 0.25rem;
   color: var(--tblr-dark);
   font-size: 0.9rem;
   text-align: center;
 }

 .pass-config-card input[type="color"] {
   width: 60px;
   height: 40px;
   padding: 0;
   border: 2px solid var(--tblr-border-color);
   border-radius: 6px;
   background: none;
   cursor: pointer;
   transition: transform 0.2s, border-color 0.2s;
 }

 .pass-config-card input[type="color"]:hover {
   transform: scale(1.05);
   border-color: var(--tblr-primary);
 }

 .pass-config-card input[type="color"]:focus {
   outline: none;
   border-color: var(--tblr-primary);
   box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.2);
 }

 /* Pass Preview Styles - Apple Wallet Specification */
 .pass-preview {
   /* Apple PassKit standard dimensions: 375px wide */
   width: 375px;
   min-height: 475px;
   margin: 0 auto;
   font-family: 'InterVariable', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
   /* border-radius: 20px; */
   /* box-shadow: var(--tblr-box-shadow); */
   /* background: #f5f5f5; */
   color: inherit;
   overflow: hidden;
   padding: 0;
   font-size: 8pt;
   /* Base font size - overridden by specific elements */
   position: relative;
 }

 /* Pass content with backdrop filter - only for event tickets */
 .pass-eventTicket .pass-content {
   width: 100%;
   min-height: 475px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   position: relative;
   z-index: 1;
 }

 /* IMPORTANT: Ensure field values inherit the pass color, but labels should use label color */
 .pass-preview .field .value,
 .pass-preview .primary-field .primary-value,
 .pass-preview .secondary-fields .field .value,
 .pass-preview .auxiliary-fields .field .value,
 .pass-preview .back-field .value,
 .pass-preview .logo-text,
 .pass-preview .footer-text,
 .pass-preview .barcode,
 .pass-preview .qr-alt-text {
   color: inherit !important;
 }

 /* Ensure labels use the proper label color (not text color) */
 .pass-preview .field .label,
 .pass-preview .primary-field .primary-label,
 .pass-preview .secondary-fields .field .label,
 .pass-preview .auxiliary-fields .field .label,
 .pass-preview .back-field .label {
   color: var(--preview-label) !important;
   opacity: 0.8;
 }

 /* Apple PassKit Font Size Hierarchy */

 /* Logo Text - Prominent branding */
 .pass-preview .logo-text {
   font-size: 8pt !important;
   font-weight: 600;
 }

 /* Header Fields - Top section */
 .pass-preview .header-fields .field .label,
 .pass-preview .header-fields .field .value {
   font-size: 8pt !important;
 }

 /* Primary Fields - Most prominent */
 .pass-preview .primary-field .label,
 .pass-preview .primary-field .value {
   font-size: 8pt !important;
   font-weight: 600;
   text-align: left;
   /* Apple spec: left-aligned */
 }

 /* Secondary Fields - Supporting information */
 .pass-preview .secondary-fields .field .label,
 .pass-preview .secondary-fields .field .value {
   font-size: 8pt !important;
   text-align: left;
   /* Apple spec: left-aligned */
 }

 /* Auxiliary Fields - Less important details */
 .pass-preview .auxiliary-fields .field .label,
 .pass-preview .auxiliary-fields .field .value {
   font-size: 8pt !important;
   text-align: left;
   /* Apple spec: left-aligned */
 }

 /* Expiry Date - Small but readable */
 .pass-preview .expiry {
   font-size: 8pt !important;
   opacity: 0.8;
 }

 /* Footer Elements */
 .pass-preview .footer-text {
   font-size: 8pt !important;
 }

 /* Barcode Area */
 .pass-preview .barcode {
   font-size: 8pt !important;
 }

 /* Back of Pass - Organization and Description */
 .pass-preview .back-organization {
   font-size: 8pt !important;
   font-weight: 600;
 }

 .pass-preview .back-description {
   font-size: 8pt !important;
 }

 .pass-preview .back-field .label,
 .pass-preview .back-field .value {
   font-size: 8pt !important;
 }


 /* PassKit Field Layout - Apple Specifications */
 .pass-preview {
   /* Apple PassKit layout: flexbox for proper spacing */
   display: flex;
   flex-direction: column;
   width: 375px;
   padding: 0;
 }

 .pass-header {
   /* Apple PassKit header: positioned above strip image */
   position: relative;
   width: 100%;
   height: 60px;
   z-index: 5;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 10px !important;
   margin: 0;
 }

 .logo-container {
   /* Apple PassKit logo positioning: top left corner */
   display: flex;
   align-items: center;
   gap: 4px;
   max-width: 160px;
   flex-shrink: 0;
   justify-content: flex-start;
   float: left;
 }

 .page-body .logo-image {

   height: 50px;

   flex-shrink: 0;

 }

 .logo-text {
   font-weight: 600;
   font-size: 7pt !important;
   text-align: left;
 }

 .header-content {
   /* Apple PassKit header content: positioned at top right */
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   flex: 1;
 }

 /* No responsive styles - fixed layout for all screen sizes */

 .expiry {
   font-size: 7pt !important;
   font-weight: 400;
   text-align: right;
   opacity: 0.8;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   flex-shrink: 0;
 }

 .expiry .header-label {
   font-size: 7pt !important;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   opacity: 0.8;
   margin-bottom: 2px;
 }

 .expiry .header-value {
   font-size: 7pt !important;
   font-weight: 400;
 }

 .pass-body {
   /* Apple PassKit body: positioned below strip image and above footer */
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 8px;
   z-index: 3;
 }

 .pass-body-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 8px;
 }

 .strip-image {
   /* Apple PassKit strip image: 375 x 123 pixels */
   width: 100%;
   height: 144px;
   background-color: transparent;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;
   border-radius: 0;
   overflow: hidden;
   flex-shrink: 0;
   /* Ensure strip image takes full width without cropping */
   min-width: 100%;
   max-width: 100%;
 }

 .thumbnail {
   /* Apple PassKit thumbnail: 90x90 pixels, positioned at right side */
   width: 70px !important;
   height: 70px !important;
   background-color: transparent;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 0 !important;
   overflow: hidden;
   flex-shrink: 0;
   margin-left: auto;
   margin-right: 10px !important;
 }



 .primary-field {
   font-size: 7pt !important;
   font-weight: 600;
   line-height: 1.2;
   text-align: center;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .primary-field .primary-label {
   font-size: 7pt !important;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   opacity: 0.8;
   margin-bottom: 6px;
   color: var(--preview-label) !important;
 }

 .primary-field .primary-value {
   font-size: 7pt !important;
   font-weight: 600;
   line-height: 1.2;
 }

 .secondary-fields {
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: 8px;
   margin-bottom: 12px;
   width: 100%;
   /* Debug: make layout visible */
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 8px;
   /* Ensure grid works properly */
   grid-auto-flow: row;
   align-items: center;
 }

 /* Force grid layout with higher specificity */
 .pass-preview .secondary-fields {
   display: grid !important;
   grid-template-columns: 1fr !important;
   align-items: center;
 }

 /* Align preview primary fields with thumbnail height */
 .pass-preview .primary-field {
   align-self: center;
   margin-top: 0;
   margin-bottom: 0;
 }



 .secondary-fields .field {
   text-align: left;
   /* Apple spec: left-aligned */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   /* Changed from center to flex-start */
   min-width: 0;
   width: 100%;
   /* Debug: make field boundaries visible */
   border: 1px solid rgba(255, 255, 255, 0.05);
   padding: 4px;
   border-radius: 4px;
   /* Ensure fields don't take excessive height */
   min-height: auto;
   height: auto;
   /* Grid will handle the width distribution */
   /* Ensure fields stay within their grid areas */
   overflow: hidden;
   word-wrap: break-word;
 }

 .secondary-fields .field .label {
   font-size: 7pt !important;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 2px;
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 1px 2px;
   border-radius: 3px;
   line-height: 1;
 }

 .secondary-fields .field .label:hover {
   background-color: rgba(255, 255, 255, 0.1);
   transform: scale(1.02);
 }

 .secondary-fields .field .label:active {
   transform: scale(0.98);
 }

 .secondary-fields .field .value {
   font-size: 7pt !important;
   font-weight: 400;
   word-wrap: break-word;
   overflow-wrap: break-word;
   max-width: 100%;
   line-height: 1;
   margin-top: 0;
 }

 /* Default text alignment for all fields */
 .field,
 .back-field {
   text-align: left !important;
 }

 /* Text alignment for secondary fields according to Apple Wallet spec */
 .secondary-fields .field[data-text-alignment="PKTextAlignmentLeft"],
 .back-field[data-text-alignment="PKTextAlignmentLeft"] {
   text-align: left !important;
   align-items: flex-start !important;
   justify-self: start !important;
 }

 .secondary-fields .field[data-text-alignment="PKTextAlignmentCenter"],
 .back-field[data-text-alignment="PKTextAlignmentCenter"] {
   text-align: center !important;
   align-items: center !important;
   justify-self: center !important;
 }

 .secondary-fields .field[data-text-alignment="PKTextAlignmentRight"],
 .back-field[data-text-alignment="PKTextAlignmentRight"] {
   text-align: right !important;
   align-items: flex-end !important;
   justify-self: end !important;
 }

 /* Default text alignment for label and value elements */
 .field .label,
 .field .value,
 .back-field .label,
 .back-field .value {
   text-align: left !important;
 }

 /* Also apply text alignment to the label and value elements */
 .secondary-fields .field[data-text-alignment="PKTextAlignmentLeft"] .label,
 .secondary-fields .field[data-text-alignment="PKTextAlignmentLeft"] .value,
 .back-field[data-text-alignment="PKTextAlignmentLeft"] .label,
 .back-field[data-text-alignment="PKTextAlignmentLeft"] .value {
   text-align: left !important;
 }

 .secondary-fields .field[data-text-alignment="PKTextAlignmentCenter"] .label,
 .secondary-fields .field[data-text-alignment="PKTextAlignmentCenter"] .value,
 .back-field[data-text-alignment="PKTextAlignmentCenter"] .label,
 .back-field[data-text-alignment="PKTextAlignmentCenter"] .value {
   text-align: center !important;
 }

 .secondary-fields .field[data-text-alignment="PKTextAlignmentRight"] .label,
 .secondary-fields .field[data-text-alignment="PKTextAlignmentRight"] .value,
 .back-field[data-text-alignment="PKTextAlignmentRight"] .label,
 .back-field[data-text-alignment="PKTextAlignmentRight"] .value {
   text-align: right !important;
 }

 .auxiliary-fields {
   margin-top: 8px;
 }

 .auxiliary-fields .field {
   text-align: left;
   /* Apple spec: left-aligned */
 }

 .auxiliary-fields .field .label {
   font-size: 7pt !important;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 3px;
 }

 .auxiliary-fields .field .value {
   font-size: 7pt !important;
   font-weight: 400;
   opacity: 0.9;
 }

 .pass-footer {
   /* Apple PassKit footer: positioned at bottom */
   width: 100%;
   height: 150px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 20px;
   margin: 0;
   z-index: 5;
   flex-shrink: 0;
 }

 .page-body .footer-logo {
   /* Apple PassKit footer logo: bottom left corner */
   position: absolute;
   bottom: 13px;
   left: 14px;
   z-index: 10;
   width: 24px;
   height: 24px;
   background-color: transparent;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 3px;
   overflow: hidden;
 }

 .footer-left {
   flex-shrink: 0;
   display: flex;
   align-items: center;
 }

 .footer-center {
   flex: 1;
   text-align: center;
 }

 .footer-icon {
   width: 32px;
   height: 32px;
   background-color: rgb(255 255 255 / 60%);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 4px;
   overflow: hidden;
   position: absolute;
   flex-shrink: 0;
   margin: 10px !important;
   bottom: 0px;
   left: 0px;
   cursor: pointer;
   z-index: 1000;
   transition: transform 0.2s, box-shadow 0.2s;
   pointer-events: auto;
 }

 .footer-icon:hover {
   transform: scale(1.1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   background-color: rgb(255 255 255 / 80%);
 }

 .footer-icon:empty {
   background-color: rgb(200 200 200 / 60%);
   border: 2px dashed #999;
 }

 .footer-icon:empty::before,
 .footer-icon.empty-icon::before {
   content: '+';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 16px;
   color: #666;
   font-weight: bold;
 }

 .footer-icon.empty-icon {
   background-color: rgb(200 200 200 / 60%);
   border: 2px dashed #999;
 }

 /* App Logo Preview */
 .app-logo-preview {
   background-color: #f8f9fa;
   background-repeat: no-repeat;
   min-width: 29px;
   min-height: 29px;
 }

 .app-logo-preview:empty::after {
   content: '📱';
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   font-size: 16px;
 }

 .barcode {
   font-size: 7pt !important;
   margin-bottom: 12px;
 }

 .qr-code {
   /* Apple PassKit QR code dimensions and styling */
   width: 60px;
   height: 60px;
   background-color: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 4px auto;
 }

 .qr-code::before {
   content: '';
   width: 50px;
   height: 50px;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><rect width="50" height="50" fill="%23000"/><rect x="10" y="10" width="30" height="30" fill="%23fff"/><rect x="15" y="15" width="20" height="20" fill="%23000"/></svg>');
   background-size: contain;
   background-repeat: no-repeat;
 }

 .qr-alt-text {
   font-size: 6pt !important;
   text-align: center;
   color: inherit;
   opacity: 0.8;
   margin: 0;
 }

 .footer-text {
   font-size: 7pt !important;
   opacity: 0.7;
   /* Ensure footer text only appears on the front of the pass */
   position: relative;
   z-index: 10;
 }

 /* Allow footer text to appear on the back of the pass */
 .pass-back .footer-text {
   display: block !important;
   font-size: 7pt !important;
   opacity: 0.7;
   margin-top: 8px;
   text-align: center;
   color: #000000 !important;
 }

 /* Ensure footer text is properly contained within the front card */
 .card-front .footer-text {
   position: relative;
   z-index: 10;
   max-width: 100%;
   overflow: hidden;
 }

 /* Apple-like visual enhancements */

 .pass-preview::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
   pointer-events: none;
   z-index: 1;
 }

 .pass-preview>* {
   position: relative;
   z-index: 2;
 }

 /* Field hover effects for better interaction */
 .field:not(.secondary-fields .field) {
   transition: all 0.2s ease;
   border-radius: 8px;
   padding: 8px;
 }

 /* Override for secondary fields to keep them compact */
 .secondary-fields .field {
   padding: 2px !important;
   margin: 0 !important;
 }

 .field:not(.secondary-fields .field):hover {
   background-color: rgba(255, 255, 255, 0.05);
   transform: translateY(-1px);
 }

 /* Enhanced typography for Apple-like appearance */
 .pass-preview {
   font-family: 'InterVariable', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
 }

 /* Improved spacing and proportions */
 .pass-header {
   padding-bottom: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .pass-body {
   padding: 16px 0;
 }

 .pass-footer {
   padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Remove all default styling - let JSON control everything */
 .pass-preview * {
   transition: none;
 }

 .pass-preview .pass-header,
 .pass-preview .pass-body,
 .pass-preview .pass-footer {
   transition: none;
   background: transparent;
   color: inherit;
   padding: 0;
   margin: 0;
   border: none;
 }

 .pass-preview .field .label,
 .pass-preview .field .value,
 .pass-preview .primary-field {
   transition: none;
   background: transparent;
   color: inherit;
   padding: 0;
   margin: 0;
   border: none;
   border-radius: 0;
   font-size: inherit;
   font-weight: inherit;
   text-align: inherit;
 }

 /* Card Back Styles - also with Tabler styling */
.pass-back {
  min-height: 240px;
  background: #ebeef1 !important;
  color: #000 !important;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
   overflow: hidden;
   transition: box-shadow 0.15s ease-in-out;
   /* Ensure back is completely separate from front */
   position: relative;
   z-index: 1;
 }

 .pass-back:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   background: #f1f3f4;
 }

 .pass-back-header,
 .pass-back-body,
 .pass-back-footer {
   background: transparent;
   color: inherit;
   padding: 0;
   margin: 0;
   border: none;
 }

 .back-description {
   font-size: 14pt !important;
   font-weight: 600;
   text-align: center;
   margin-bottom: 20px;
   color: #000;
 }

 .back-description-container {
   text-align: center;
   font-weight: bold;
   margin-bottom: 12px;
   padding: 8px;
 }

 .back-description-container .back-description-text {
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   color: rgb(0 0 0 / 90%);
   transition: opacity 0.2s;
   text-align: center;
   min-width: 340px;
 }

 .back-description-container .back-description-text:hover {
   opacity: 0.8;
 }

 .back-description-container .btn {
   font-size: 12px;
   padding: 4px 12px;
 }

 .back-field .label,
 .back-field .value {
   background: transparent;
   color: inherit;
   padding: 0;
   margin: 0;
   border: none;
   border-radius: 0;
   font-size: inherit;
   font-weight: inherit;
 }

 .back-fields {
   display: block;
   gap: 0;
 }

 .back-field {
   background: transparent;
   border: none;
   border-radius: 0;
   padding: 12px 0;
   margin: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 .back-field:last-child {
   border-bottom: none;
 }

 .back-field .label {
   font-size: 7pt !important;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
   opacity: 0.7;
   color: #495057;
 }

 .back-field .value {
   font-size: 7pt !important;
   font-weight: 400;
   line-height: 1.4;
   color: #212529;
 }

 /* Pass type specific styling - removed, let JSON control everything */
 /* .pass-preview.pass-boardingPass,
.pass-preview.pass-storeCard,
.pass-preview.pass-eventTicket,
.pass-preview.pass-generic {
  // All styling removed - controlled by JSON
} */

 /* Event Ticket specific styling - nibble out of top middle */
 .pass-preview.pass-eventTicket {
   position: relative;
   border-radius: 0px;
 }

 .pass-preview.pass-eventTicket::before {
   content: '';
   position: absolute;
   top: -19px;
   left: 50%;
   transform: translateX(-50%);
   width: 70px;
   height: 30px;
   background: var(--tblr-body-bg, #ffffff);
   border-radius: 243px;
   z-index: 10;
   /* box-shadow: 0 0 0 2px var(--tblr-body-bg, #ffffff); */
   /* Ensure nibble doesn't cause horizontal overflow */
   /* overflow: hidden; */
   /* clip-path: inset(0 0 0 0); */
 }

 /* Ensure pass-preview-back always uses light grey with black text */
 #pass-preview-back.pass-preview.pass-back {
   background: #f8fafd !important;
   color: #000 !important;
 }

 #pass-preview-back.pass-preview.pass-back .back-description,
 #pass-preview-back.pass-back .back-field .label,
 #pass-preview-back.pass-preview.pass-back .back-field .value {
   color: #000 !important;
 }

 /* Ensure barcode alt text is always black */
 .barcode-alt-text {
   color: black !important;
 }

 /* Remove borders from all pass fields */
 .pass-field,
 .pass-field *,
 .primary-field,
 .secondary-field,
 .back-field {
   border: none !important;
 }

 /* Make preview barcode area bigger and remove text overflow restrictions */
 .preview-barcode {
   min-height: 80px;
   padding: 10px;
 }

 .barcode-alt-text {
   overflow: visible !important;
   text-overflow: clip !important;
   white-space: normal !important;
 }

 /* Back organization (larger than description, above it) */
 #pass-preview-back .back-organization {
   font-size: 21px !important;
   color: black !important;
   font-weight: 500;
   opacity: 0.85;
   text-align: center;
   margin-bottom: 4px;
 }

 #pass-preview-back .back-description {
   font-size: 12px;
   font-weight: 500;
 }

 /* Compact + add icon */
 .add-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   z-index: 1060 !important;
   /* Ensure add buttons appear above modals */
   height: 24px;
   line-height: 24px;
   padding: 0;
   border: 1px solid var(--tblr-warning);
   color: #206bc4;
   background: var(--tblr-warning) !important;
   border-radius: 4px;
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
 }

 /* Add logo button styling */
 .add-logo-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border: 2px dashed rgba(255, 255, 255, 0.5);
   color: rgba(255, 255, 255, 0.7);
   background: transparent;
   border-radius: 6px;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.2s ease;
 }

 .add-logo-btn:hover {
   border-color: rgba(255, 255, 255, 0.8);
   color: rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.1);
 }

 .add-icon-btn:hover {
   background: rgba(32, 107, 196, 0.08);
 }

 .secondary-fields .add-icon-btn.secondary-add-icon {
   justify-self: start;
 }

 /* Field Pair Editor Styles */
 .field {
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 4px;
   padding: 4px;
 }

 .field:hover {
   background-color: rgba(0, 0, 0, 0.05);
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .field:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 /* Placeholder button styles */
 .placeholder-btn {
   font-family: 'Courier New', monospace;
   font-size: 0.85rem;
   padding: 0.25rem 0.5rem;
 }

 .placeholder-btn:hover {
   background-color: #e9ecef;
   border-color: #adb5bd;
 }



 /* Field editor form improvements */
 #fieldPairEditorForm .form-label {
   font-weight: 500;
   color: #495057;
 }

 #fieldPairEditorForm .form-control:focus,
 #fieldPairEditorForm .form-select:focus {
   border-color: #206bc4;
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
 }

 /* Modal size adjustments */
 #fieldPairEditorModal .modal-dialog {
   max-width: 800px;
   height: 80vh;
   /* Double the height from default */
   z-index: 1050 !important;
   /* Ensure modal appears above navigation */
   margin-top: 5vh;
   /* Position modal lower on screen */
 }

 #fieldPairEditorModal .modal-body {
   max-height: 60vh;
   /* Increased from 70vh to accommodate larger dialog */
   overflow-y: auto;
 }

 /* Ensure modal backdrop appears above everything */
 #fieldPairEditorModal .modal-backdrop {
   z-index: 1040 !important;
 }

 /* Force proper positioning for field pair editor modal */
 #fieldPairEditorModal {
   z-index: 1050 !important;
 }

 #fieldPairEditorModal .modal-dialog-centered {
   z-index: 1050 !important;
   margin-top: 5vh !important;
   margin-bottom: 5vh !important;
 }

 /* Additional positioning fixes for Apple Pass placeholder editor */
 #fieldPairEditorModal .modal-dialog {
   position: relative !important;
   transform: none !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
 }

 /* Specific fix for primary field (front placeholder) editor */
 #fieldPairEditorModal.primary-field-editor .modal-dialog {
   margin-top: 5vh !important;
   margin-bottom: 5vh !important;
   z-index: 1050 !important;
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   transform: none !important;
 }

 #fieldPairEditorModal.primary-field-editor {
   z-index: 1050 !important;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
 }

 /* Nuclear option - force all field pair editor modals to be positioned correctly */
 #fieldPairEditorModal .modal-dialog {
   margin-top: 5vh !important;
   margin-bottom: 5vh !important;
   z-index: 1050 !important;
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   transform: none !important;
 }

 /* Google text module add button z-index */
 .add-google-text-module-btn {
   z-index: 1060 !important;
 }

 /* Quick placeholders grid */
 .quick-placeholders-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 0.5rem;
 }

 /* Field preview improvements */
 .field .label,
 .field .value {
   pointer-events: none;
 }

 /* Ensure fields are clickable even when empty */
 .field:empty::before {
   content: "Click to edit field";
   color: #6c757d;
   font-style: italic;
   font-size: 0.875rem;
   display: block;
   padding: 8px;
   text-align: center;
   border: 1px dashed #dee2e6;
   border-radius: 4px;
   background-color: #f8f9fa;
 }

 .pass-header,
 .pass-body,
 .pass-footer {
   padding: 0;
   margin: 0;
   background: transparent;
   color: inherit;
   border: none;
 }

 .pass-header {
   display: block;
   min-height: auto;
 }

 .logo-text {
   font-weight: inherit;
   font-size: inherit;
   flex: none;
 }

 .expiry {
   font-size: inherit;
   opacity: inherit;
   text-align: inherit;
   flex: none;
 }

 .pass-body {
   min-height: auto;
 }

 .primary-field {
   font-size: inherit;
   font-weight: inherit;
   margin: 0;
   color: inherit;
   text-align: inherit;
   /* padding: 10px !important; */
 }

 .auxiliary-fields {
   display: grid !important;
   grid-template-columns: 1fr 1fr 1fr !important;
   gap: 8px;
   margin: 0;
   padding: 10px;
   align-items: center;
 }

 .auxiliary-fields .field {
   text-align: left;
   /* Apple spec: left-aligned */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   /* Changed from center to flex-start */
   min-width: 0;
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.05);
   padding: 4px;
   border-radius: 4px;
   min-height: auto;
   height: auto;
   overflow: hidden;
   word-wrap: break-word;
 }

 .auxiliary-fields .field .label {
   font-size: 10px;
   opacity: 0.7;
   line-height: 1.1;
   margin-bottom: 2px;
   text-align: left;
   /* Apple spec: left-aligned */
 }

 .auxiliary-fields .field .value {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.2;
   text-align: left;
   /* Apple spec: left-aligned */
   word-wrap: break-word;
   overflow-wrap: break-word;
 }

 .field:not(.secondary-fields .field) {
   margin: 0;
   padding: 0;
   background: transparent;
   border-radius: 0;
 }

 .field .label {
   font-size: inherit;
   color: inherit;
   text-transform: none;
   letter-spacing: normal;
   margin: 0;
 }

 .field .value {
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
 }

 .pass-footer {
   min-height: auto;
   display: block;
 }

 .barcode {
   font-size: inherit;
   opacity: inherit;
   color: inherit;
 }

 .footer-text {
   font-size: inherit;
   color: inherit;
   text-align: inherit;
   flex: none;
   margin: 0;
 }

 /* JSON Editor Styles */
 .editor-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
 }

 .editor-actions {
   display: flex;
   gap: 0.5rem;
 }

 /* Google Template JSON Editor - not grey */
 #google-template-editor {
   background: #000000 !important;
   color: #d4d4d4 !important;
   border: 1px solid #333 !important;
   border-radius: 25px !important;
 }

 #google-template-editor:focus {
   border-color: var(--tblr-primary) !important;
 }

 /* Syntax highlighting for Google Template JSON */
 #google-template-editor .string {
   color: #ce9178;
 }

 #google-template-editor .number {
   color: #b5cea8;
 }

 #google-template-editor .boolean {
   color: #569cd6;
 }

 #google-template-editor .null {
   color: #569cd6;
 }

 #google-template-editor .placeholder {
   color: #ffff00;
   font-weight: 500;
 }

 #google-template-editor .key {
   color: #9cdcfe;
 }

 .json-editor {
   background: #000000;
   color: #d4d4d4;
   font-family: 'Courier New', monospace;
   padding: 1rem;
   border-radius: 25px;
   min-height: 500px;
   max-height: 500px;
   overflow: auto;
   white-space: pre;
   tab-size: 2;
   line-height: 1.4;
   outline: none;
   border: 1px solid #333;
   transition: border-color 0.2s;
 }

 .json-editor:focus {
   border-color: var(--tblr-primary);
 }

 /* Syntax highlighting for JSON */
 .json-editor .placeholder {
   color: #ffff00;
   font-weight: 500;
 }

 .json-editor .string {
   color: #ce9178;
 }

 .json-editor .number {
   color: #b5cea8;
 }

 .json-editor .boolean {
   color: #569cd6;
 }

 .json-editor .null {
   color: #569cd6;
 }

 .json-editor .key {
   color: #9cdcfe;
 }

 /* Editable JSON highlighting - preserves editability while providing visual feedback */
 .json-highlighted {
   position: relative;
 }

 /* Highlight placeholders (variables starting with $) */
 .json-highlighted::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background: linear-gradient(transparent 0%, transparent 100%);
   z-index: 1;
 }

 /* Alternative approach: Use CSS to highlight specific text patterns - handled by JavaScript */

 /* Pass type specific styling */
 .pass-type-section {
   margin-top: 2rem;
   border-top: 2px solid var(--tblr-border-color);
   padding-top: 1.5rem;
 }

 .pass-field {
   background: var(--tblr-light);
   border: 1px solid var(--tblr-border-color);
   border-radius: var(--tblr-border-radius);
   padding: 1rem;
   margin-bottom: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .pass-field-header {
   font-weight: 600;
   color: var(--tblr-dark);
   margin-bottom: 0.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .pass-field-content {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 0.5rem;
 }

 /* Full-width tab layout styles */
 .full-width-tabs {
   width: 100%;
 }

 .full-width-tabs .nav-tabs {
   border-bottom: 2px solid var(--tblr-border-color);
   margin-bottom: 1.5rem;
   gap: 0.75rem;
 }

 .full-width-tabs .nav-tabs .nav-link {
   border: none;
   border-radius: 0;
   color: var(--tblr-secondary);
   font-weight: 500;
   padding: 1rem 1.5rem;
   transition: all 0.2s ease;
 }

 .full-width-tabs .nav-tabs .nav-link:hover {
   color: var(--tblr-primary);
   background-color: rgba(32, 107, 196, 0.05);
 }

 .full-width-tabs .nav-tabs .nav-link.active {
   color: var(--tblr-primary);
   background-color: transparent;
   border-bottom: 3px solid var(--tblr-primary);
   font-weight: 600;
 }

 .full-width-tabs .tab-content {
   min-height: 600px;
 }

 .full-width-tabs .tab-pane {
   padding: 1.5rem 0;
 }

 /* Tab-specific preview layouts */
 #tab-apple .preview-layout,
 #tab-google .preview-layout {
   max-width: 1200px;
   margin: 0 auto;
 }

 #tab-apple .col-lg-6,
 #tab-google .col-lg-6 {
   padding: 0 1rem;
 }

 /* Configuration panels in tabs */
 #tab-apple .card,
 #tab-google .card {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--tblr-border-color);
 }

 #tab-apple .card-header,
 #tab-google .card-header {
   background: linear-gradient(135deg, var(--tblr-primary) 0%, #4a90e2 100%);
   color: white;
   border-bottom: none;
   padding: 1rem 1.5rem;
 }

 #tab-apple .card-title,
 #tab-google .card-title {
   margin: 0;
   font-size: 1.1rem;
   font-weight: 600;
 }

 /* Responsive adjustments */
 @media (max-width: 1200px) {
   .content-layout {
     grid-template-columns: 1fr;
     gap: 1rem;
   }

   .left-panel,
   .right-panel {
     gap: 1rem;
   }

   .full-width-tabs .nav-tabs .nav-link {
     padding: 0.75rem 1rem;
     font-size: 0.9rem;
   }
 }

 /* Relevancy Panel Styles */
 #locations-panel {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 1rem;
 }

 #locations-panel .card-title {
   color: #495057;
   font-weight: 600;
   margin-bottom: 1rem;
 }

 #locations-panel .alert {
   border-radius: 6px;
   border: none;
 }

 #locations-panel .alert-info {
   background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
   color: #0c5460;
 }

 #locations-panel .form-label {
   font-weight: 600;
   color: #495057;
   margin-bottom: 0.5rem;
 }

 #locations-panel .form-control {
   border: 1px solid #ced4da;
   border-radius: 4px;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
 }

 #locations-panel .form-control:focus {
   border-color: #80bdff;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 #locations-panel .form-text {
   font-size: 0.75rem;
   color: #6c757d;
   margin-top: 0.25rem;
 }

 #locations-panel .btn {
   border-radius: 4px;
   font-weight: 500;
   padding: 0.5rem 1rem;
 }

 #locations-panel .btn-primary {
   background: #007bff;
   border-color: #007bff;
 }

 #locations-panel .btn-primary:hover {
   background: #0056b3;
   border-color: #004085;
 }

 /* Location Management Styles */
 #locations-list {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 6px;
   padding: 1rem;
 }

 #locations-list .border-bottom:last-child {
   border-bottom: none !important;
 }

 .location-item {
   transition: background-color 0.2s;
   border: 1px solid #e9ecef;
   border-radius: 6px;
   padding: 1rem;
   margin-bottom: 0.5rem;
   background: white;
 }

 .location-item:hover {
   background-color: #f8f9fa;
   border-color: #adb5bd;
 }

 .location-item .location-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.5rem;
 }

 .location-item .location-title {
   font-weight: 600;
   color: #495057;
   margin: 0;
 }

 .location-item .location-coords {
   font-size: 0.875rem;
   color: #6c757d;
   margin: 0.25rem 0;
 }

 .location-item .location-details {
   font-size: 0.75rem;
   color: #868e96;
 }

 .location-item .location-actions {
   display: flex;
   gap: 0.5rem;
   margin-top: 0.75rem;
 }

 .location-item .btn-sm {
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
 }

 /* Relevancy Date/Time Inputs */
 #locations-panel input[type="datetime-local"] {
   font-family: monospace;
   font-size: 0.8rem;
 }

 /* Postcode Validation */
 #inp-postcode.is-valid {
   border-color: #28a745;
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }

 #inp-postcode.is-invalid {
   border-color: #dc3545;
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }

 /* Relevancy Text Input */
 #inp-relevantText {
   margin-top: 0.5rem;
 }

 /* Visual Pass Creator Config Grid */
 .vpc-config-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
 }

 /* Images tab specific styling - single column layout */
 #vpc-images-container.vpc-config-grid {
   grid-template-columns: 1fr;
 }


 /* Visual Pass Creator Relevancy and Locations Styling */
 .vpc-config-card {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 0;
   /* Remove margin since grid handles spacing */
 }

 .vpc-config-card .vpc-config-card-header {
   padding-bottom: 1rem;
   margin-bottom: 0;
   border-bottom: 1px solid #e9ecef;
 }

 .vpc-config-card .vpc-config-card-header h5 {
   color: #495057;
   font-weight: 600;
   margin-bottom: 0.25rem;
 }

 /* Switch rows: label + description on left, toggle on right */
 .vpc-config-switch {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.75rem;
   padding: 0.75rem 0;
   border-bottom: 1px solid #e9ecef;
 }

 .vpc-config-switch:last-of-type {
   border-bottom: none;
 }

 .vpc-config-switch .fw-semibold {
   color: #495057;
   margin-bottom: 0.125rem;
 }

 .vpc-config-switch .text-muted.small {
   font-size: 0.8125rem;
 }

 /* Clear separation between switch block and input row */
 .vpc-config-card .vpc-config-switch:last-of-type+.row.g-3 {
   margin-top: 1rem;
   padding-top: 0.5rem;
 }

 .vpc-config-card .text-muted {
   font-size: 0.875rem;
   color: #6c757d;
 }

 .vpc-config-card .form-label {
   font-weight: 600;
   color: #495057;
   margin-bottom: 0.5rem;
 }

 .vpc-config-card .form-control {
   border: 1px solid #ced4da;
   border-radius: 4px;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
 }

 .vpc-config-card .form-control:focus {
   border-color: #80bdff;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .vpc-config-card .btn {
   border-radius: 4px;
   font-weight: 500;
   padding: 0.5rem 1rem;
 }

 .vpc-config-card .btn-primary {
   background: #007bff;
   border-color: #007bff;
 }

 .vpc-config-card .btn-primary:hover {
   background: #0056b3;
   border-color: #004085;
 }


 /* Responsive adjustments for relevancy panel */
 @media (max-width: 768px) {
   #locations-panel .row.g-3.mb-3 .col-md-4 {
     margin-bottom: 1rem;
   }

   #locations-panel .col-md-6,
   #locations-panel .col-md-2 {
     margin-bottom: 1rem;
   }

   .vpc-config-card .row.g-3 .col-md-4 {
     margin-bottom: 1rem;
   }

   .vpc-config-card .col-md-6,
   .vpc-config-card .col-md-2 {
     margin-bottom: 1rem;
   }

   /* Single column layout on mobile for config grid */
   .vpc-config-grid {
     grid-template-columns: 1fr;
     gap: 1rem;
   }
 }

 #inp-postcode {
   flex: 2;
 }

 #inp-radius {
   flex: 1;
   min-width: 80px;
 }

 #add-location-btn {
   white-space: nowrap;
 }

 #add-location-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }

 /* Postcode validation styles */
 #inp-postcode.is-valid {
   border-color: var(--tblr-success);
   box-shadow: 0 0 0 0.2rem rgba(47, 179, 68, 0.25);
 }

 #inp-postcode.is-invalid {
   border-color: var(--tblr-danger);
   box-shadow: 0 0 0 0.2rem rgba(214, 57, 57, 0.25);
 }

 /* Pass type preview image styles */
 .pass-type-preview {
   min-height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .pass-type-preview-image {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out;
 }

 .pass-type-preview-image:hover {
   transform: scale(1.05);
 }

 /* Advanced configuration layout styles */
 .advanced-config-layout {
   padding: 2rem;
   background: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #dee2e6;
 }

 .advanced-config-layout .container-fluid {
   background: white;
   border-radius: 6px;
   padding: 1.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .advanced-config-layout .nav-tabs {
   border-bottom: 2px solid #dee2e6;
 }

 .advanced-config-layout .nav-tabs .nav-link {
   border: none;
   border-bottom: 2px solid transparent;
   color: #6c757d;
   font-weight: 500;
 }

 .advanced-config-layout .nav-tabs .nav-link.active {
   border-bottom-color: #0d6efd;
   color: #0d6efd;
   background: transparent;
 }

 .advanced-config-layout .json-editor {
   min-height: 500px;
   border: 1px solid #333;
   border-radius: 25px;
   padding: 1rem;
   font-family: 'Courier New', monospace;
   font-size: 0.875rem;
   line-height: 1.4;
   background: #000000;
   color: #d4d4d4;
   overflow-y: auto;
 }

 .advanced-config-layout .btn-group {
   gap: 0.5rem;
 }

 .advanced-config-layout .btn {
   border-radius: 6px;
   font-weight: 500;
 }

 .advanced-config-layout h4 {
   color: #495057;
   font-weight: 600;
 }

 .advanced-config-layout .tab-content {
   padding-top: 1rem;
 }

 /* Relevancy section styling */
 .form-check.form-switch {
   margin-bottom: 0.5rem;
 }

 .form-check.form-switch:last-child {
   margin-bottom: 0;
 }

 /* Diff viewer styling */
 .diff-pane {
   background: #fafbfc;
   font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 13px;
   line-height: 1.5;
   border-radius: 8px;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }

 .diff-line {
   padding: 4px 12px;
   white-space: pre-wrap;
   margin: 0;
   border-left: 4px solid transparent;
   min-height: 20px;
   font-size: 13px;
   transition: all 0.2s ease;
   position: relative;
 }

 .diff-line:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }

 .diff-line-number {
   display: inline-block;
   width: 40px;
   color: #6c757d;
   user-select: none;
   text-align: right;
   margin-right: 12px;
   font-size: 11px;
   font-weight: 500;
   opacity: 0.8;
 }

 .diff-line-added {
   background: linear-gradient(90deg, #d4edda 0%, #e8f5e8 100%);
   border-left-color: #28a745;
   color: #155724;
 }

 .diff-line-added:hover {
   background: linear-gradient(90deg, #c3e6cb 0%, #d4edda 100%);
 }

 .diff-line-removed {
   background: linear-gradient(90deg, #f8d7da 0%, #f5c6cb 100%);
   border-left-color: #dc3545;
   color: #721c24;
 }

 .diff-line-removed:hover {
   background: linear-gradient(90deg, #f1b0b7 0%, #f8d7da 100%);
 }

 .diff-line-modified {
   background: linear-gradient(90deg, #fff3cd 0%, #ffeaa7 100%);
   border-left-color: #ffc107;
   color: #856404;
 }

 .diff-line-modified:hover {
   background: linear-gradient(90deg, #ffeaa7 0%, #fdcb6e 100%);
 }

 .diff-line-context {
   background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
   border-left-color: #6c757d;
   color: #495057;
 }

 .diff-line-context:hover {
   background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
 }

 .diff-content {
   color: inherit;
   font-weight: 400;
 }

 .diff-line-added .diff-content {
   color: #155724;
 }

 .diff-line-removed .diff-content {
   color: #721c24;
 }

 .diff-line-modified .diff-content {
   color: #856404;
 }

 .diff-line-context .diff-content {
   color: #495057;
 }

 .diff-highlight {
   background: linear-gradient(45deg, #ffd93d, #ff6b6b);
   color: #fff;
   padding: 2px 4px;
   border-radius: 4px;
   font-weight: 600;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 /* Enhanced diff pane headers */
 .diff-pane-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 12px 16px;
   font-weight: 600;
   font-size: 14px;
   border-radius: 8px 8px 0 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .diff-pane-header i {
   margin-right: 8px;
   opacity: 0.9;
 }

 /* Diff summary enhancements */
 .diff-summary {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-top: 2px solid #dee2e6;
   padding: 12px 20px;
   font-size: 13px;
   min-height: 48px;
   display: flex;
   align-items: center;
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 }

 .diff-summary .badge {
   font-size: 11px;
   margin-left: 8px;
   padding: 4px 8px;
   border-radius: 12px;
   font-weight: 500;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease;
 }

 .diff-summary .badge:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }

 /* Enhanced modal styling */
 #compareSaveModal .modal-content {
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   border: none;
 }

 #compareSaveModal .modal-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border-radius: 12px 12px 0 0;
   border-bottom: none;
 }

 #compareSaveModal .modal-header .btn-close {
   filter: invert(1);
 }

 #compareSaveModal .modal-title {
   font-weight: 600;
   font-size: 18px;
 }

 #compareSaveModal .nav-tabs {
   border-bottom: 2px solid #e9ecef;
 }

 #compareSaveModal .nav-tabs .nav-link {
   border: none;
   border-radius: 8px 8px 0 0;
   margin-right: 4px;
   padding: 10px 16px;
   font-weight: 500;
   color: #6c757d;
   transition: all 0.2s ease;
 }

 #compareSaveModal .nav-tabs .nav-link:hover {
   background-color: #f8f9fa;
   color: #495057;
 }

 #compareSaveModal .nav-tabs .nav-link.active {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border: none;
   box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }

 #compareSaveModal .modal-footer {
   border-top: 2px solid #e9ecef;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 0 0 12px 12px;
 }

 .diff-summary {
   font-size: 12px;
   min-height: 32px;
   display: flex;
   align-items: center;
 }

 .diff-summary .badge {
   font-size: 10px;
   margin-left: 4px;
   padding: 2px 6px;
 }

 /* Media browser styling */
 .media-file-card {
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
 }

 .media-file-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .media-files-list {
   max-height: 300px;
   overflow-y: auto;
 }

 .media-files-list .card-img-top {
   border-bottom: 1px solid #e9ecef;
 }

 /* Pass viewer grid cards - consistent height */
 .pass-viewer-card {
   height: 100%;
   min-height: 200px;
   display: flex;
   flex-direction: column;
 }

 .pass-viewer-card .card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 1.5rem;
 }

 .pass-viewer-card .card-title {
   margin-bottom: 0.5rem;
   font-size: 12px;
   font-weight: 600;
   text-align: center;
 }

 .pass-viewer-card .design-name {
   font-size: 0.75rem;
   color: #ffffff;
   margin-bottom: 0.5rem;
   font-weight: 500;
   text-align: center;
   background: var(--tblr-primary);
   border: solid 1px #48a884;
   border-radius: 20px;
 }

 .pass-viewer-card .design-name:empty {
   display: none;
 }

 /* Hide buttons by default, show on card hover */
 .pass-viewer-card .card-footer {
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
 }

 .pass-viewer-card:hover .card-footer {
   opacity: 1;
 }


 .pass-viewer-card .google-wallet-indicator {
   margin-top: auto;
   padding-top: 0.5rem;
 }

 /* Mini pass preview (existing passes grid) */
 .mini-pass {
   width: 100%;
   max-width: 240px;
   height: 270px;
   margin: 0 auto;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }

 /* Mini pass content with backdrop filter */
 .mini-pass-content {
   width: 100%;
   height: 270px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
 }

 /* Pass preview existing with backdrop filter */
 .pass-preview-existing {
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   align-items: center;
   justify-content: center;
   /* background: #f8f9fa; */
   /* border: 1px solid #e9ecef; */
 }

 .pass-preview-existing-content {
   width: 100%;

   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Event ticket pass content - no border radius */
 .pass-eventTicket .pass-content {
   border-radius: 0px !important;
 }

 /* Event ticket mini-pass with backdrop filter */
 .pass-preview-existing .mini-pass-content {
   width: 100%;
   height: 100%;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
 }

 .mini-pass .mini-header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   min-height: 32px;
 }

 .mini-pass .mini-header .mini-logo {
   height: 20px;
   width: auto;
   border-radius: 3px;
 }

 .mini-pass .mini-header .mini-logo-text {
   font-size: 11px;
   opacity: 0.95;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
 }

 .mini-pass .mini-strip {
   width: 100%;
   aspect-ratio: 375 / 123;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
 }

 .mini-pass .mini-strip-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .mini-pass .mini-body {
   padding: 8px 10px 10px 10px;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .mini-pass .mini-primary-label {
   font-size: 9px;
   opacity: 0.7;
   line-height: 1.1;
   margin-bottom: 2px;
 }

 .mini-pass .mini-primary-value {
   font-size: 11px;
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 4px;
 }

 .mini-pass .mini-secondary-value {
   font-size: 10px;
   opacity: 0.9;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 2px;
 }

 .mini-pass .mini-org {
   display: none;
   /* Hide organization text as requested */
 }

 .mini-pass .mini-footer {
   padding: 6px 10px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .mini-pass .mini-badges {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
 }

 .mini-pass .mini-badge {
   font-size: 8px;
   padding: 2px 4px;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 3px;
   white-space: nowrap;
 }

 .mini-pass .mini-badge.mini-exp {
   background: rgba(255, 0, 0, 0.1);
   color: #d32f2f;
 }

 /* Responsive adjustments for 5-column layout */
 @media (max-width: 1400px) {
   .mini-pass {
     max-width: 220px;
     height: 250px;
   }
 }

 @media (max-width: 1200px) {
   .mini-pass {
     max-width: 200px;
     height: 230px;
   }
 }

 @media (max-width: 992px) {
   .mini-pass {
     max-width: 180px;
     height: 210px;
   }
 }

 @media (max-width: 768px) {
   .mini-pass {
     max-width: 160px;
     height: 190px;
   }
 }

 /* Prevent strip overlapping fields in main preview */
 .pass-preview .pass-body {
   position: relative;
 }

 .strip-image {
   position: relative;
   z-index: 1;
 }

 .pass-preview .pass-body-content,
 .pass-preview .secondary-fields,
 .pass-preview .auxiliary-fields {
   position: relative;
   z-index: 2;
 }

 /* Add a small spacer below strip for safety */
 .pass-preview .pass-body .strip-image+.pass-body-content {
   margin-top: 6px;
 }

 /* Mini preview separation */
 .mini-pass .mini-body {
   position: relative;
   z-index: 2;
 }

 .mini-pass .mini-strip {
   position: relative;
   z-index: 1;
 }

 /* Mini pass badges/footer */
 .mini-pass .mini-org {
   font-size: 10px;
   opacity: 0.75;
   margin-top: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .mini-pass .mini-footer {
   padding: 8px 10px 10px 10px;
   margin-top: auto;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }

 .mini-pass .mini-footer-icon {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   font-size: 12px;
   opacity: 0.7;
   max-width: 18px;
 }

 /* Templates Management Styles */
 .template-group-header {
   border-bottom: 2px solid #e9ecef;
   padding-bottom: 1rem;
 }

 .template-card {
   transition: all 0.2s ease-in-out;
   cursor: pointer;
 }

 .template-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .template-mini-preview {
   height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8f9fa;
   border-radius: 8px;
   overflow: hidden;
 }

 .template-mini-preview .mini-pass {
   transform: scale(0.8);
   transform-origin: center;
 }

 .template-info {
   max-height: 100px;
   overflow: hidden;
 }

 .template-info .card-text {
   font-size: 0.875rem;
   line-height: 1.4;
 }

 /* Mini pass styles for template previews */
 .template-mini-preview .mini-pass {
   width: 200px;
   height: 400px;
   aspect-ratio: 9/16;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
 }

 .template-mini-preview .mini-pass .mini-header {
   padding: 8px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 8px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
   background: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(2px);
   width: 100%;
   box-sizing: border-box;
 }

 .template-mini-preview .mini-pass .mini-logo {
   width: 20px;
   height: 20px;
   object-fit: contain;
 }

 .template-mini-preview .mini-pass .mini-logo-text {
   font-size: 10px;
   font-weight: 600;
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .template-mini-preview .mini-pass .mini-strip {
   height: 60px;
   overflow: hidden;
   position: relative;
   z-index: 1;
 }

 .template-mini-preview .mini-pass .mini-strip-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .template-mini-preview .mini-pass .mini-thumbnail {
   height: 30px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .template-mini-preview .mini-pass .mini-thumbnail-img {
   max-width: 55px;
   float: right;
   margin: 12px;
   object-fit: cover;
   border-radius: 4px;
 }

 .template-mini-preview .mini-pass .mini-body {
   padding: 4px 8px;
   flex: 1;
   position: relative;
   z-index: 2;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(2px);
 }

 .template-mini-preview .mini-pass .mini-org {
   font-size: 8px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .template-mini-preview .mini-pass .mini-footer {
   padding: 4px 8px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   position: relative;
   z-index: 2;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(2px);
 }

 .template-mini-preview .mini-pass .mini-footer-icon {
   font-size: 8px;
 }

 .template-mini-preview .mini-pass .mini-icon-img {
   width: 12px;
   height: 12px;
   object-fit: contain;
   max-width: 18px;
 }

 /* Templates Loading State */
 .templates-loading {
   opacity: 0.6;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 .templates-loading .template-card {
   opacity: 0.5;
   transition: opacity 0.3s ease;
 }

 .templates-loading .template-card:hover {
   opacity: 0.7;
 }

 /* Loading spinner animation */
 .spinner-border {
   animation: spinner-border 0.75s linear infinite;
 }

 @keyframes spinner-border {
   to {
     transform: rotate(360deg);
   }
 }

 /* Progress bar animation */
 .progress-bar-animated {
   animation: progress-bar-stripes 1s linear infinite;
 }

 @keyframes progress-bar-stripes {
   0% {
     background-position-x: 1rem;
   }
 }

 /* Template card loading state */
 .template-card {
   transition: opacity 0.3s ease, transform 0.2s ease;
 }

 .template-card.loading {
   opacity: 0.5;
   transform: scale(0.98);
 }

 .template-card.loaded {
   opacity: 1;
   transform: scale(1);
 }

 /* Background Image Support for Event Tickets */
 .pass-preview.has-background-image {
   position: relative;
 }

 .pass-preview.has-background-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: var(--background-image-url);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.3;
   z-index: 1;
   border-radius: inherit;
 }

 .pass-preview.has-background-image>* {
   position: relative;
   z-index: 2;
 }

 /* Background Image Preview Styles */
 #backgroundImagePreview {
   min-height: 120px;
   background-color: #f8f9fa;
   border: 2px dashed #dee2e6;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #backgroundImagePreview img {
   max-width: 100%;
   max-height: 100px;
   border-radius: 4px;
 }

 /* Background Image Upload Styles */
 #backgroundImageUpload {
   border: 2px dashed #dee2e6;
   background-color: #f8f9fa;
 }

 #backgroundImageUpload:hover {
   border-color: #007bff;
   background-color: #e7f3ff;
 }

 /* Background Image Controls */
 #backgroundImageControls {
   border-left: 4px solid #28a745;
 }

 #backgroundImageControls .card-header {
   background-color: #f8f9fa;
   border-bottom: 1px solid #dee2e6;
 }

 #backgroundImageControls .card-title {
   color: #28a745;
   font-weight: 600;
 }

 /* Filter controls */
 .input-group-sm .form-select,
 .input-group-sm .form-control {
   font-size: 0.875rem;
 }

 /* Empty state */
 #templates-empty-state {
   min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .mini-badges-under-status {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   justify-content: center;
   align-items: center;
   margin-top: 8px;
 }

 .mini-badges-under-status .mini-badge {
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.08);
   color: inherit;
   line-height: 1.2;
 }

 .mini-badges-under-status .mini-badge.mini-exp {
   background: rgba(0, 0, 0, 0.12);
 }

 /* Google Wallet Preview Styles */
 #googleWalletPreview {
   border-radius: 25px;
 }

 /* Google Wallet Preview Back Styles */
 .google-wallet-preview-back {
   background: #d5d2d2 !important;
   border-radius: 32px;
   overflow: hidden;
   position: relative;
   min-height: 200px;
 }

 .google-wallet-preview-back .card-body {
   padding: 16px;
 }

 .google-wallet-preview-back .back-header {
   font-size: 18px;
   font-weight: 700;
   color: #000 !important;
   margin-bottom: 16px;
   text-align: center;
 }

 .google-wallet-preview-back .back-field {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   color: #000 !important;
 }

 .google-wallet-preview-back .back-field:last-child {
   border-bottom: none;
 }

 .google-wallet-preview-back .back-field-label {
   font-size: 14px;
   font-weight: 600;
   opacity: 0.8;
   color: #000 !important;
 }

 .google-wallet-preview-back .back-field-value {
   font-size: 14px;
   font-weight: 500;
   text-align: right;
   max-width: 60%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #000 !important;
 }

 .google-wallet-preview .logo-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 16px;
   position: relative;
 }

 .google-wallet-preview .hero-image-row {
   width: 100%;
   height: 120px;
   overflow: hidden;
   position: relative;
 }

 .google-wallet-preview .hero-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .google-wallet-preview .logo {
   width: 40px;
   height: 40px;
   object-fit: contain;
   border-radius: 50%;
   background: #fff;
   padding: 3px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
   border: 2px solid #fff;
 }

 .google-wallet-preview .card-title {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   margin: 0 0 0 0 !important;
 }

 .google-wallet-preview .card-body {
   padding: 16px 16px 16px;
 }

 .google-wallet-preview .header {
   margin-top: 12px;
   font-size: 28px;
   font-weight: 700;
   color: #fff;
   line-height: 1.15;
   position: relative;
   overflow: hidden;
   /* Clear floats */
 }

 .google-wallet-preview .header-add-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 .google-wallet-preview .subheader {
   margin-top: 4px;
   font-size: 14px;
   color: #fff;
   opacity: .95;
   font-weight: 600;
   position: relative;
   overflow: hidden;
   /* Clear floats */
 }

 .google-wallet-preview .subheader-add-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 .google-wallet-preview .info-row {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 12px;
   color: #fff;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
 }

 .google-wallet-preview .module-pair {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   width: 100%;
 }

 .google-wallet-preview .info-row .label {
   font-size: 12px;
   opacity: .9;
   font-weight: 600;
 }

 .google-wallet-preview .info-row .value {
   font-size: 14px;
 }

 .google-wallet-preview .info-row .label,
 .google-wallet-preview .info-row .value {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
   word-wrap: break-word;
 }

 .google-wallet-preview .module-pair>div {
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }

 /* Clickable text module fields */
 .google-wallet-preview .text-module-header,
 .google-wallet-preview .text-module-body {
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 4px;
   padding: 2px 4px;
   margin: -2px -4px;
 }

 .google-wallet-preview .text-module-header:hover,
 .google-wallet-preview .text-module-body:hover {
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }

 .google-wallet-preview .text-module-header {
   font-weight: 600;
 }

 .google-wallet-preview .text-module-body {
   font-weight: 500;
 }

 /* Clickable barcode and caption */
 .google-wallet-preview .barcode,
 .google-wallet-preview .caption {
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 4px;
   padding: 2px 4px;
   margin: -2px -4px;
 }

 .google-wallet-preview .barcode:hover,
 .google-wallet-preview .caption:hover {
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }

 .google-wallet-preview .barcode {
   margin: 18px auto 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #fff;
   color: #111;
   border-radius: 8px;
   width: 160px;
   height: 160px;
   font-family: ui-monospace, monospace;
   font-size: 12px;
   overflow: hidden;
 }

 .google-wallet-preview .caption {
   text-align: center;
   font-size: 12px;
   color: #fff;
   opacity: .9;
   margin-top: 6px;
 }

 /* Card Title Add Button */
 .google-wallet-preview .card-title-add-icon {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: #fff;
   opacity: 0.7;
   transition: all 0.2s ease;
   z-index: 1060 !important;
   /* Ensure card title add button appears above modals */
   font-size: 10px !important;
   padding: 1px 4px !important;
   line-height: 1 !important;
   height: 20px !important;
   width: 20px !important;
   border-radius: 50% !important;
   margin-left: 8px !important;
 }

 .google-wallet-preview .card-title-add-icon:hover {
   opacity: 1;
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.5);
 }

 /* Header and Subheader Add Buttons */
 .google-wallet-preview .header-add-icon,
 .google-wallet-preview .subheader-add-icon {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: #fff;
   opacity: 0.7;
   transition: all 0.2s ease;
   z-index: 1060 !important;
   /* Ensure Google add buttons appear above modals */
   font-size: 10px !important;
   padding: 1px 4px !important;
   line-height: 1 !important;
   height: 20px !important;
   width: 20px !important;
   border-radius: 50% !important;
 }

 .google-wallet-preview .header-add-icon:hover,
 .google-wallet-preview .subheader-add-icon:hover {
   opacity: 1;
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.5);
 }

 /* Modal Header Title Styling */
 .modal-header .modal-title {
   color: white !important;
 }

 h5.modal-title {
   color: white !important;
 }

 /* Google Wallet Preview Styles */
 .google-wallet-preview {
   padding-top: 20px;
 }

 .google-wallet-preview .logo-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0px 16px;
   position: relative;
 }

 /* Image Inputs Panel Styling */
 .vpc-image-inputs-panel .vpc-config-card {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 1rem;
 }

 .vpc-image-inputs-panel .vpc-config-card-header h5 {
   color: #495057;
   font-weight: 600;
   margin-bottom: 1rem;
 }

 .vpc-image-inputs-panel .vpc-config-card-header .text-muted {
   font-size: 0.875rem;
   color: #6c757d;
 }

 .vpc-image-inputs-panel h6 {
   font-weight: 600;
   color: #495057;
   border-bottom: 1px solid #dee2e6;
   padding-bottom: 0.5rem;
 }

 .vpc-image-inputs-panel .form-label {
   font-weight: 600;
   color: #495057;
   margin-bottom: 0.5rem;
 }

 .vpc-image-inputs-panel .form-control {
   border: 1px solid #ced4da;
   border-radius: 4px;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
 }

 .vpc-image-inputs-panel .form-control:focus {
   border-color: #80bdff;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .vpc-image-inputs-panel .input-group .btn {
   border-radius: 4px;
   font-weight: 500;
   padding: 0.5rem 1rem;
 }

 .vpc-image-inputs-panel .input-group .btn-outline-primary {
   border-color: #007bff;
   color: #007bff;
 }

 .vpc-image-inputs-panel .input-group .btn-outline-primary:hover {
   background: #007bff;
   border-color: #007bff;
 }

 .vpc-image-inputs-panel .input-group .btn-outline-secondary {
   border-color: #6c757d;
   color: #6c757d;
 }

 .vpc-image-inputs-panel .input-group .btn-outline-secondary:hover {
   background: #6c757d;
   border-color: #6c757d;
 }

 /* Override Bootstrap interference with select elements */
 select.form-select {
   /* background-image: none !important; */
   /* border: 1px solid #ced4da !important; */
   border-radius: 0.375rem !important;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
   font-size: 1rem !important;
   line-height: 1.5 !important;
   color: #495057 !important;
   background-color: #fff !important;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
 }

 select.form-select:focus {
   border-color: #80bdff !important;
   outline: 0 !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
 }

 /* Hide inactive tab panes under VPC container - prevent invisible content affecting layout */
 #vpcPassGeneratorContainer .tab-content>.tab-pane:not(.show) {
   display: none !important;
 }

 /* VPC image buttons: add gap so buttons don't touch */
 .vpc-image-btn-group {
   gap: 0.5rem;
 }

 .vpc-image-btn-group .btn {
   margin: 0;
   border-radius: 0.25rem;
 }

 /* Placeholder dialog width */
 #vpc-fieldModal .modal-dialog {
   max-width: 410px;
 }

 /* Make inputs and selects same width in dialogs */
 #vpc-fieldModal .modal-body .form-control,
 #vpc-fieldModal .modal-body .form-select {
   width: 100%;
   box-sizing: border-box;
 }

 /* Alignment buttons in field modal - override Tabler .btn .icon (margin, size) */
 #vpc-fieldModal .btn-group label.btn[for^="align-"] .icon {
   margin: 0 !important;
   width: 18px !important;
   height: 18px !important;
   min-width: 18px !important;
   font-size: 18px !important;
   vertical-align: bottom;
   color: inherit;
 }

 #vpc-fieldModal .btn-group label.btn[for^="align-center"] {
   margin-left: 5px !important;
   margin-right: 5px !important;
 }

 /* Ensure placeholder pickers work properly */
 .placeholder-picker {
   pointer-events: auto !important;
   cursor: pointer !important;
 }

 /* Field clear button - solid gold with white X */
 .field-clear-btn {
   background-color: #FFD700 !important;
   border-color: #FFD700 !important;
   color: white !important;
 }

 .field-clear-btn:hover {
   background-color: #FFC700 !important;
   border-color: #FFC700 !important;
   color: white !important;
 }

 .field-clear-btn:active,
 .field-clear-btn:focus {
   background-color: #FFB700 !important;
   border-color: #FFB700 !important;
   color: white !important;
   box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.5) !important;
 }

 .field-clear-btn svg,
 .field-clear-btn .icon {
   color: white !important;
   stroke: white !important;
 }

 /* ============================================================================
   PASS PREVIEW STYLES - Consolidated from multiple files
   ============================================================================ */

 /* Pass Generator Edit Styles - Adapted from PassGenerator/styles.css */
 #vpc-apple-front,
 #vpc-apple-back,
 #vpc-apple-front .preview-label,
 #vpc-apple-front .preview-value,
 #vpc-apple-back .preview-label,
 #vpc-apple-back .preview-value {
   font-family: InterVariable, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
 }

 #vpc-apple-front .preview-label,
 #vpc-apple-back .preview-label,
 #vpc-apple-front .preview-value:not(.fs-2),
 #vpc-apple-back .preview-value {
   font-size: 12.66px;
   margin-right: 5px;
   margin-left: 5px;
 }

 #vpc-google-front,
 #vpc-google-back,
 #vpc-google-front .preview-label,
 #vpc-google-front .preview-value,
 #vpc-google-back .preview-label,
 #vpc-google-back .preview-value {
   font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: 0rem;
   line-height: 1.5rem;
   font-variation-settings: normal;
   word-break: break-word;
 }

 #vpc-google-front .preview-value[data-preview="header"] {
   cursor: pointer;
   color: rgb(255, 255, 255);
   font-size: 2.2em;
   text-wrap-mode: wrap;
   line-height: initial;
   margin-bottom: 10px;
 }

 .preview-label,
 .preview-value {
   margin: 0;
   padding: 0;
 }

 .pass-preview {
   /* background: #f8f9fa; */
   /* border: 1px solid #dee2e6; */
   /* border-radius: 14px; */
   /* padding: 16px; */
   min-height: 264px;
   /* box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); */
   text-align: right;
   width: 100%;
   /* max-width: 420px; */
   margin: 0 auto;
 }

 .pass-face {
   position: relative;
   border-radius: 14px;
   padding: 8px;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 8px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   min-height: 240px;
 }

.pass-back {
  min-height: 240px;
  background: #ebeef1 !important;
  color: #000 !important;
}

 #vpc-apple-back .face-badge,
 #vpc-google-back .face-badge {
   color: #000;
   border-color: rgba(0, 0, 0, 0.2);
   background: #f8f9fa;
 }

 #vpc-apple-back .preview-label {
   color: #000 !important;
 }

 /* Apple back: single-column layout matching pkpass back */
 #vpc-apple-back.vpc-apple-back-fields .back-fields-list,
 #vpc-google-back .back-fields-list {
   display: flex;
   flex-direction: column;
   gap: 0;
   width: 100%;
 }

 #vpc-apple-back.vpc-apple-back-fields .back-field,
 #vpc-google-back .back-field {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
   padding: 10px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   width: 100%;
 }

 #vpc-apple-back.vpc-apple-back-fields .back-field:last-child,
 #vpc-google-back .back-field:last-child {
   border-bottom: none;
 }

 #vpc-apple-back.vpc-apple-back-fields .back-field .preview-label,
 #vpc-google-back .back-field .preview-label {
   font-size: 15px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 4px;
   opacity: 0.85;
 }

#vpc-apple-back.vpc-apple-back-fields .back-field .preview-value,
#vpc-google-back .back-field .preview-value {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  color: #3b3b3b !important;
}

#vpc-google-back .back-field .preview-label[data-preview^="googleBack"] {
  margin-top: 25px;
}

 /* Apple pass back: email and https links in Apple blue */
 #vpc-apple-back .vpc-apple-link {
   color: #007AFF !important;
 }

 .pass-front {
   margin-bottom: 12px;
 }

 .face-badge {
   display: none;
 }

 .preview-label {
   font-size: 13px;
   letter-spacing: 1.5px;
   font-weight: 700;
   margin-bottom: 8px;
   opacity: .95;
 }

 .preview-value {
   font-weight: 300;
   /* white-space: nowrap; */
   /* overflow: hidden; */
   text-overflow: ellipsis;
   line-height: 1.05;
 }

 .fs-3.preview-value {
   font-size: 28px !important;
 }

 .fs-2.preview-value {
   font-size: 34px !important;
 }

 .modal .form-label {
   font-size: 13px;
 }

 .modal .form-control,
 .modal .form-select {
   font-size: 14px;
 }

 /* Apple pass layout: 3 columns only (Left, Middle, Right). storeCard/giftCard/coupon: 4 fields (row1 L/M/R + row2Left); generic/eventTicket: 6 fields (row1 + row2) */
 .vpc-apple-fields-area {
   width: 100%;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 8px 12px;
   margin: 8px 0;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-row {
   display: contents;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col[data-vpc-limit-field] {
   display: none;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-width: 0;
   text-align: center;
   align-items: center;
   justify-content: center;
   gap: 2px;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col .preview-label,
 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col .preview-value {
   text-align: center;
   font-size: 10.66px;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col.right {
   text-align: center;
   align-items: center;
 }

 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col.right .preview-label,
 .vpc-apple-fields-area.vpc-apple-layout-2col .pair-col.right .preview-value {
   text-align: center;
 }

 .pair-row {
   display: flex;
   gap: 14px;
 }

 #vpc-google-front .pair-row,
 #vpc-google-back .pair-row {
   display: flex;
   gap: 14px;
   width: 100%;
 }

 .pair-col {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }

 .pair-col.right {
   text-align: right;
   align-items: flex-end;
 }

 .pair-col.right .preview-label {
   text-align: right;
   /* width: 100%; */
 }

 .pair-col.right .preview-value {
   text-align: right;
   width: 100%;
 }

 .pair-col[data-align="row1MiddleAlign"],
 .pair-col[data-align="row2MiddleAlign"] {
   align-items: center;
   text-align: center;
 }

 #vpc-apple-front .preview-label:hover,
 #vpc-apple-front .preview-value:hover,
 #vpc-google-front .preview-label:hover,
 #vpc-google-front .preview-value:hover {
   background: #d9d9d947;
   text-decoration: underline;
 }

 .placeholder-badge {
   display: inline-block;
   padding: 4px 8px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .18);
   border: 1px solid rgba(255, 255, 255, .20);
   backdrop-filter: blur(3px);
 }

 #vpc-apple-front,
 #vpc-apple-back {
   /* background: #0b5ed7; */
   border-radius: var(--card-radius);
   width: 420px;
   aspect-ratio: 3 / 4.1;
   position: relative;
   transition: box-shadow 0.5s;
   border: 2px solid rgba(0, 0, 0, .15);
   /* overflow: hidden; */
   display: flex;
   flex-direction: column;
 }

 #vpc-apple-back {
   padding: 25px;
 }

 /* Subtle inner border effect */
 #vpc-apple-front:before {
   content: "";
   position: absolute;
   inset: 10px;
   border-radius: calc(var(--card-radius) - 10px);
   pointer-events: none;
 }

 /* Decorations - background effects */
 .decorations {
   pointer-events: none;
   position: absolute;
   inset: 0;
   opacity: .08;
   /* background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%); */
 }

 /* Strip overlay for text positioning */
 .strip-overlay {
   position: absolute;
   inset: 0;
   padding: 12px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   pointer-events: none;
 }

 /* Top area */
 .pass-top {
   padding: 18px 22px 10px;
   min-height: 86px;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
   position: relative;
   z-index: 1;
 }

 /* Title band */
 .titleBand {
   background: #fff;
   padding: 14px 22px;
   text-align: center;
   border-top: 1px solid rgba(0, 0, 0, .06);
   border-bottom: 1px solid rgba(0, 0, 0, .06);
   height: 66px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 1;
 }

 .titleBand .title {
   width: 100%;
   max-width: 320px;
   height: 40px;
   border-radius: 6px;
   background: rgba(0, 0, 0, .12);
 }

 /* Content area */
 .pass-body {
   padding: 14px 22px 22px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   flex: 1 1 auto;
   position: relative;
   z-index: 1;
 }

 #vpc-google-front,
 #vpc-google-back {
   border-radius: var(--card-radius);
   width: 420px;
   position: relative;
   transition: box-shadow 0.5s;
   display: flex;
   flex-direction: column;
 }

 #vpc-google-front {
   border: 2px solid rgba(0, 0, 0, .15);
 }

 #vpc-google-back {
   border: none;
 }

 #vpc-google-front.pass-face {
   position: relative;
   border-radius: 14px;
   padding: 12px;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 8px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   min-height: 240px;
 }

#vpc-google-back.pass-face {
  position: relative;
  border-radius: 14px;
  padding: 30px;
  color: #000;
  background: #f8fafd;
   display: flex;
   flex-direction: column;
   gap: 8px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   min-height: 240px;
 }

 #vpc-google-front {
   background: #4285f4;
   text-align: left;
   align-items: flex-start;
 }

 #vpc-apple-front #vpc-apple-banner-img {
   display: block;
   aspect-ratio: 3 / 1;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin: 0;
   margin-left: -10px;
 }

#vpc-google-front #vpc-google-strip-img {
  display: block;
  width: calc(100% + 28px);
  aspect-ratio: 3 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* margin: 0; */
  margin-left: -14px;
  margin-bottom: -14px !important;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}

 /* Subtle inner border effect */
 #vpc-google-front:before {
   content: "";
   position: absolute;
   inset: 10px;
   border-radius: calc(var(--card-radius) - 10px);
   pointer-events: none;
 }

 .pass-back {
   text-align: left;
   align-items: flex-start;
 }

.barcode-center {
    text-align: center;
    width: 100%;
    display: block;
    margin: 6px auto 0;
    font-size: 10px !important;
    opacity: 0.9;
    color: #000 !important;
  }

  #vpc-apple-front .logo-text-add {
    display: none;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  #vpc-apple-front .logo-text-add.placeholder-badge {
    display: inline-flex;
    align-items: center;
  }

 .barcode-preview {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
 }

 #vpc-apple-front .barcode-preview {
   margin-top: auto;
   margin: auto;
   color: black !important;
 }

#vpc-apple-front .barcode-preview img {
  object-fit: contain;
  display: block;
  opacity: .8;
}

 /* Add Barcode button: no outline, text inherits pass face color (white on dark / dark on light) */
 #vpc-apple-front .vpc-add-barcode-btn {
   border: none;
   outline: none;
   box-shadow: none;
   background: transparent;
   color: inherit;
 }

 #vpc-apple-front .vpc-add-barcode-btn:hover,
 #vpc-apple-front .vpc-add-barcode-btn:focus {
   background: rgba(255, 255, 255, 0.15);
   color: inherit;
   border: none;
   box-shadow: none;
 }

 #vpc-apple-front .vpc-add-barcode-btn i {
   color: inherit;
 }

 .vpc-advanced-only {
   display: none;
 }

 #vpc-google-front .barcode-preview {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   border-radius: 20px;
   margin: auto;
 }

 .barcode-preview img {
   height: 80px;
   object-fit: contain;
   background: #fff;
   margin: 0 auto;
   display: block;
 }

 .vpc-barcode-options {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .vpc-barcode-option {
   position: relative;
 }

 .vpc-barcode-option input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
 }

 .vpc-barcode-option label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border: 1px solid #dee2e6;
   border-radius: 10px;
   background: #fff;
   cursor: pointer;
   transition: all 0.15s ease;
   min-width: 110px;
 }

 .vpc-barcode-option label:hover {
   border-color: var(--tblr-primary);
   box-shadow: 0 2px 6px rgba(32, 107, 196, 0.15);
 }

 .vpc-barcode-option input[type="radio"]:checked+label {
   border-color: var(--tblr-primary);
   box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.2);
 }

 .barcode-swatch {
   width: 44px;
   height: 32px;
   border-radius: 6px;
   background: #f8f9fa;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 700;
   color: #212529;
   border: 1px solid #dee2e6;
 }

 .barcode-swatch.none {
   background: repeating-linear-gradient(45deg, #e9ecef 0 6px, #fff 6px 12px);
   color: #6c757d;
 }

 .barcode-swatch.qr {
   background-image:
     linear-gradient(90deg, #000 12px, transparent 12px),
     linear-gradient(#000 12px, transparent 12px);
   background-size: 12px 12px;
   background-position: 0 0, 6px 6px;
   background-repeat: repeat;
 }

 .barcode-swatch.pdf417 {
   background: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px);
 }

 .barcode-swatch.aztec {
   background:
     linear-gradient(90deg, transparent 45%, #000 45% 55%, transparent 55%),
     linear-gradient(0deg, transparent 45%, #000 45% 55%, transparent 55%);
   background-size: 100% 100%, 100% 100%;
   position: relative;
 }

 .barcode-swatch.code128 {
   background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
 }

 .image-box {
   width: 64px;
   height: 64px;
   border-radius: 14px;
   overflow: hidden;
   flex: 0 0 auto;
 }

 /* Show background when no image is present */
 .image-box:not(.has-image) {
   background: rgba(255, 255, 255, .20);
 }

 /* Show background on hover when image is present */
 .image-box.has-image:hover {
   background: rgba(255, 255, 255, .20);
 }

 .image-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
 }

 .image-box[data-image-upload],
 .thumb-span[data-image-upload],
 .bottom-icon[data-image-upload],
 .strip-span[data-image-upload] {
   cursor: pointer;
 }

 .image-box.logo {
   width: auto;
   min-width: 64px;
   max-width: 160px;
   height: 64px;
   border-radius: 0;
   margin-bottom: 10px;
 }

 .image-box.logo img {
   height: 100%;
   width: auto;
   object-fit: contain;
   display: block;
 }

 .strip-span {
   position: relative;
   height: 170px;
   width: 420px;
   margin-left: -10px;
   overflow: hidden;
   border-radius: 0;
   background-repeat: no-repeat;
   background-size: contain;
 }

 .strip-span[data-image-platform="google"] {
   width: 100%;
   height: auto;
   aspect-ratio: 1032 / 326;
   margin-left: 0;
   overflow: hidden;
   margin-top: auto;
 }

 /* Background styling removed for strip-span */


 /* Strip upload button overlay */
 .strip-upload-btn {
   position: absolute;
   top: 8px;
   right: 8px;
   z-index: 10;
   opacity: 0.8;
   border: 2px solid rgba(255, 255, 255, 0.8) !important;
   background-color: rgba(0, 0, 0, 0.6) !important;
   color: white !important;
   padding: 4px 8px !important;
   border-radius: 6px !important;
   font-size: 12px !important;
   transition: opacity 0.2s ease;
 }

 .strip-upload-btn:hover {
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.8) !important;
 }

 .pass-face {
   position: relative;
 }

 .bottom-icon {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, .18);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   position: absolute !important;
   bottom: 12px;
   left: 16px;
 }

 /* Show background when no image is present */
 .bottom-icon:not(.has-image) {
   background: rgba(255, 255, 255, .20);
 }

 /* Bottom icon hover effect removed */

 .pass-notch {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   width: 24px;
   height: 24px;
   background: #f5f7fb;
   border-radius: 50%;
   display: none;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
 }

 .thumb-span {
   width: 74px;
   height: 74px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .20);
   border: 1px solid rgba(255, 255, 255, .18);
   background-size: cover;
   background-position: center;
   flex: 0 0 auto;
 }

 /* Right-aligned thumbnail for Apple generic passes */
 .thumb-span-generic {
   width: 74px;
   height: 74px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .20);
   border: 1px solid rgba(255, 255, 255, .18);
   background-size: cover;
   background-position: center;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
 }

 /* Show/hide logic for Apple pass types */
 .pass[data-kind="generic"] [data-pass-type="non-generic"] {
   display: none !important;
 }

 .pass[data-kind="generic"] [data-pass-type="generic"] {
   display: block !important;
 }

 .pass:not([data-kind="generic"]) [data-pass-type="generic"] {
   display: none !important;
 }

 .pass:not([data-kind="generic"]) [data-pass-type="non-generic"] {
   display: block !important;
 }

 #vpc-apple-logo-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: none;
 }

 #vpc-google-logo-img {
   border-radius: 115px;
   object-fit: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border: none;
 }


 .placeholder-picker {
   margin-top: 0;
 }

 .with-picker {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .with-picker input.form-control {
   flex: 1;
 }

 .with-picker .placeholder-picker {
   width: 150px;
   min-width: 130px;
 }

 .with-picker.custom-selected .placeholder-picker {
   width: 50%;
   min-width: 50%;
   flex: 0 0 50%;
   order: 1;
 }

 .with-picker.custom-selected input.form-control {
   width: 50%;
   flex: 0 0 50%;
   order: 2;
 }

 .picker-highlight {
   box-shadow: 0 0 0 2px #4c8bf5;
   outline: none;
   transition: box-shadow 0.2s ease;
 }

 .picker-input-hidden {
   display: none !important;
 }

 .clear-wrap {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .clear-btn {
   white-space: nowrap;
 }

 #vpc-form-apple .col-md-6,
 #vpc-form-apple .col-md-4,
 #vpc-form-google .col-md-6,
 #vpc-form-google .col-md-4 {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }

 #vpc-form-apple .form-label,
 #vpc-form-google .form-label {
   margin-bottom: 0;
   white-space: nowrap;
 }

 #vpc-form-apple .form-control,
 #vpc-form-apple .form-select,
 #vpc-form-apple .with-picker,
 #vpc-form-apple textarea,
 #vpc-form-google .form-control,
 #vpc-form-google .form-select,
 #vpc-form-google .with-picker,
 #vpc-form-google textarea {
   flex: 1 1 0%;
 }

 #vpc-form-apple textarea,
 #vpc-form-google textarea {
   min-height: 38px;
 }

 /* Advanced mode: tidy 3-column layout (labels above inputs) */
 body.vpc-advanced-mode #vpc-form-apple .col-md-6,
 body.vpc-advanced-mode #vpc-form-apple .col-md-4,
 body.vpc-advanced-mode #vpc-form-apple .col-md-3,
 body.vpc-advanced-mode #vpc-form-apple .col-12,
 body.vpc-advanced-mode #vpc-form-google .col-md-6,
 body.vpc-advanced-mode #vpc-form-google .col-md-4,
 body.vpc-advanced-mode #vpc-form-google .col-md-3,
 body.vpc-advanced-mode #vpc-form-google .col-12 {
   display: block;
 }

 body.vpc-advanced-mode #vpc-form-apple .form-label,
 body.vpc-advanced-mode #vpc-form-google .form-label {
   display: block;
   width: 100%;
   margin-bottom: 0.35rem;
   white-space: normal;
 }

 body.vpc-advanced-mode #vpc-form-apple .with-picker,
 body.vpc-advanced-mode #vpc-form-google .with-picker {
   display: grid;
   grid-template-columns: 1fr;
   gap: 6px;
 }

 body.vpc-advanced-mode #vpc-form-apple .with-picker input.form-control,
 body.vpc-advanced-mode #vpc-form-apple .with-picker .placeholder-picker,
 body.vpc-advanced-mode #vpc-form-google .with-picker input.form-control,
 body.vpc-advanced-mode #vpc-form-google .with-picker .placeholder-picker {
   width: 100%;
 }

 body.vpc-advanced-mode .vpc-form-section-title {
   margin-top: 0.75rem;
   padding-top: 0.5rem;
   border-top: 1px solid #e9ecef;
   font-weight: 600;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: #6c757d;
 }

 .swatch {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   border: 1px solid #dee2e6;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }

 .json-area {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

 /* JSON preview */
 .json-pretty {
   background-color: #ffffff;
   color: #212529;
   font-family: var(--tblr-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
   min-height: 240px;
   white-space: pre;
   overflow: auto;
 }

 .json-pretty .json-key {
   color: #93c5fd;
 }

 .json-pretty .json-string {
   color: #a7f3d0;
 }

 .json-pretty .json-number {
   color: #fbbf24;
 }

 .json-pretty .json-boolean {
   color: #f472b6;
 }

 .json-pretty .json-null {
   color: #cbd5e1;
 }

 /* Image upload + previews */
 .media-file-item .card {
   min-height: 120px;
 }

 .media-file-item img {
   width: 100%;
   height: 80px;
   object-fit: contain;
 }

 #vpc-mediaLibraryList {
   scrollbar-width: thin;
 }

 .input-group .btn-outline-primary i,
 .input-group .btn-outline-secondary i {
   pointer-events: none;
 }

 div#vpcTypeHelp {
   display: none;
 }

 /* Pass Generator Type Overrides */
 #visualPassCreatorEditPage .pass-face {
   background-repeat: no-repeat;
   background-size: cover;
 }

 /* Apple type styles */
 #visualPassCreatorEditPage.vpc-appletype-generic #vpc-apple-front {
   background-image: none;
 }

 #visualPassCreatorEditPage.vpc-appletype-eventticket #vpc-apple-front {
   background-image:
     radial-gradient(1000px 400px at 10% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
     linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
 }


 /* Coupon: ensure pair-col has same layout as storeCard/giftCard (2x2 grid) */
 #visualPassCreatorEditPage.vpc-appletype-coupon .vpc-apple-fields-area .pair-col {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }

 /* Google type styles */
 #visualPassCreatorEditPage.vpc-googletype-generic #vpc-google-front {
   background-image: none;
   overflow: clip;
 }

 #visualPassCreatorEditPage.vpc-googletype-eventticket #vpc-google-front {
   background-image:
     linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
 }

 #visualPassCreatorEditPage.vpc-googletype-storecard #vpc-google-front {
   background-image:
     radial-gradient(900px 320px at 20% 0%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 60%);
 }

 #visualPassCreatorEditPage.vpc-googletype-giftcard #vpc-google-front {
   background-image:
     radial-gradient(800px 320px at 70% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
 }

 /* Field clear buttons - darker solid gold with white X/text */
 .field-clear-btn,
 #vpc-fieldModalClear {
   background-color: #DAA520 !important;
   border-color: #DAA520 !important;
   color: white !important;
 }

 .field-clear-btn:hover,
 #vpc-fieldModalClear:hover {
   background-color: #C9941A !important;
   border-color: #C9941A !important;
   color: white !important;
 }

 .field-clear-btn:active,
 .field-clear-btn:focus,
 #vpc-fieldModalClear:active,
 #vpc-fieldModalClear:focus {
   background-color: #B8860B !important;
   border-color: #B8860B !important;
   color: white !important;
   box-shadow: 0 0 0 0.2rem rgba(218, 165, 32, 0.5) !important;
 }

 .field-clear-btn svg,
 .field-clear-btn .icon {
   color: white !important;
   stroke: white !important;
 }

 /* Hide elements in advanced mode on all tabs */
 body.vpc-advanced-mode .vpc-hide-in-advanced {
   display: none !important;
 }

 /* Scale pass previews to 90% */
 .pass-preview,
 #vpc-apple-front,
 #vpc-apple-back,
 #vpc-google-front,
 #vpc-google-back {
   transform: scale(0.9);
   transform-origin: top center;
 }

 .barcode-preview {
   display: flex;
   justify-content: center;
   align-items: center;
   width: inherit;
 }

 form#vpcEditForm {
   width: 1240px !important;
 }