* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: system-ui, -apple-system, sans-serif;
 }

 /* Base styles for transparent OBS source */
 body {
     margin: 0;
     padding: 0;

     font-family: Arial, Helvetica, sans-serif;
     line-height: 1.6;
     /* overflow-y: auto; */
     --background_green: #007749;
     --background_yellow: #ebe710;
     --background_orange: #d6753c;
     --background_brown: #e25a24;
     --background_purple: #d149bf;

     --background_black_trans: #000000a1;

     --background_red: #f36f76;
     --background_light_red: #ec4d4d6e;
     --background_red_trans: #e74e4e67;

     --background_sky: #3d85af;
     --background_sky_trans: #00a2ff80;
     --background_sky_trans_lighter: #00a2ff18;

     --background_white: #ffffff;
     --background_white_trans: #f0f0f0c2;
     --background_gray: #988f99;
     --background_gray_trans: #9c9c9c21;
     --background_cream: #f7f7f7;
     --background_blue: #194b6d;
     --background_black: #000000;
     --background_blue_trans: #1f608baf;
     --background_blue_hover: #005f9e;
     --text_color: #777777;
     --text_white: #ffffff;
     --text_white_trans: #ffffffb7;
     --text_sky: #41b9ff;
     --text_green: #5cd498;
     --text_orange: #e9a251;
     --text_brown: #ad5938;
     --text_purple: #d149bf;
     --text_blue: #14708c;
     --text_black: #111111;
     --text_red: #db464e;
     --text_reddish: #ee5d5d;
     --text_gray: #9c9c9c;
     --text_gray_trans: #00000046;
     --transparent: transparent;

     --app_bg: #f4f7fb;
     --app_text: #222222;
     --surface: #ffffff;
     --surface_light: #fafafa;
     --surface_alt: #eef3ff;
     --brand: #3c8bd6;
     --brand_text: #ffffff;
     --button_brand: #3798da;
     --border_muted: #e1e5eb;
     --border_divider: #dddddd;
     --text_muted: #555;
     --text_muted_strong: #444444;

     /* Letter coded colors */

     --A: #55c4648c;
     /* Green */
     --B: #007bff8c;
     /* Blue */
     --C: #dc35458c;
     /* Red */
     --D: #ffc1078c;
     /* Yellow */
     --E: #28a7458c;
     /* Darker Green */
     --F: #6c757d8c;
     /* Gray */
     --G: #17a2b88c;
     /* Cyan */
     --H: #fd7e148c;
     /* Orange */
     --I: #5c35a38c;
     /* Purple */
     --J: #ffa4678c;
     /* Pink */
     --K: #00c8518c;
     /* Emerald Green */
     --L: #ee965c8c;
     /* Darker Blue */
     --M: #36c4f08c;
     /* Burgundy */
     --N: #ee9b4d8c;
     /* Dark Orange */
     --O: #8000808c;
     /* Purple */
     --P: #ff69b48c;
     /* Hot Pink */
     --Q: #0080808c;
     /* Teal */
     --R: #45accc8c;
     /* Brown */
     --S: #43a17a8c;
     /* Indigo */
     --T: #d2691e8c;
     /* Chocolate */
     --U: #008b8b8c;
     /* Dark Cyan */
     --V: #dd2f2f8c;
     /* Dark Red */
     --W: #0000808c;
     /* Navy */
     --X: #8080008c;
     /* Olive */
     --Y: #8080808c;
     /* Gray */
     --Z: #c454638c;
     /* Black */

     --border: 0.5px solid var(--border_divider);
     --border_bold: 2px solid var(--border_muted);
     --border_blue: 2px solid var(--background_blue);
     --border_sky: 0.5px solid var(--background_sky);
     --border_dashed_sky: 2px dashed var(--background_sky);
     --border_red: 1px solid var(--background_red);
     --border_white: 2px solid var(--text_white);
     --border_thin_white: 0.2px solid var(--text_white_trans);
     --shadow: -2px 2px 10px #00000005;

     --today_cell: 3;
     background-color: var(--background_white);
     margin: 0;
     padding: 0;

     --sunday_color: #e94f4f33;
     --saturday_color: #eb8f8f25;
 }

 body.dark-mode {
     --background_black_trans: #ffffffa6;

     --background_green: #256c47;
     --background_orange: #b86c1c;
     --background_brown: #ca4a23;
     --background_purple: #702c69;

     --background_white: #1d1d1d;
     --background_white_trans: #000000a6;
     --background_gray: #606060;
     --background_gray_trans: #44444463;
     --background_cream: #353535;
     --background_blue: #102f44;
     --background_blue_trans: #1f608b4b;
     --background_blue_hover: #007acc;

     --text_color: #cccccc;
     --text_white: #ffffff;
     --text_sky: #6dc1f3;
     --text_green: #5cd498;
     --text_orange: #e9a251;
     --text_brown: #ad5938;
     --text_purple: #d149bf;
     --text_blue: #5ca7e5;
     --text_black: #f0f0f0;

     --text_gray: #aaaaaa;
     --text_gray_trans: #aaaaaa42;
     --transparent: transparent;

     /* Letter coded colors stay mostly the same, or slightly dimmed if you want */

     --border: 0.5px solid var(--border_muted);
     --border_bold: 2px solid var(--text_muted);
     --border_blue: 2px solid var(--background_blue);
     --border_sky: 2px solid var(--background_sky);
     --border_red: 1px solid var(--background_red);
     --border_white: 0.5px solid var(--border_muted);
     --border_thin_white: 0.2px solid var(--text_white_trans);
     --app_bg: #1e1e1f;
     --app_text: #e4e1e1;
     --surface: #222;
     --surface_light: #333;
     --surface_alt: #2a2a2a;
     --brand: #1a4a8a;
     --brand_text: #ffffff;
     --button_brand: #1e5f99;
     --border_muted: #444;
     --border_divider: #666;
     --text_muted: #7c7c7c;
     --text_muted_strong: #cccccc;
     --today_cell: 3;
     background-color: var(--background_white);
     color: var(--text_color);
 }


 body {

     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

 }


 h2 {
     font-size: 1.2rem;
     margin-bottom: 12px;
     color: var(--text_black, #111);
     text-align: center;
 }

 .reader_scanner_container {
     max-width: 500px;
     margin: 0 auto;

 }

 #reader {
     width: 100%;
     border-radius: 12px;
     overflow: hidden;
     background: var(--background_cream, #9c9c9c);
     border: none;
     margin-bottom: 16px;
 }

 .torch_toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     margin: -4px 0 16px;
     padding: 12px;
     border: 0;
     border-radius: 10px;
     background: #f6c945;
     color: #211d0b;
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
 }

 .torch_toggle[aria-pressed='true'] {
     background: #211d0b;
     color: #f6c945;
 }

 .torch_toggle:focus-visible {
     outline: 3px solid #fff;
     outline-offset: 2px;
 }

 #reader__dashboard {
     background: var(--background_cream, #222)
 }

 #html5-qrcode-button-camera-stop {
     background: var(--background_red, #f36f76);
     color: var(--text_white, #fff);
     border: none;
     padding: 20px 12px;
     border-radius: 15px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     width: 50%;
 }

 #html5-qrcode-button-camera-start {
     background: var(--background_green, #007749);
     color: var(--text_white, #fff);
     border: none;
     padding: 20px 12px;
     border-radius: 15px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     width: 50%;
 }

 .card {
     background: var(--surface, #fff);
     border-radius: 12px;
     padding: 16px;
     box-shadow: var(--shadow, rgba(0, 0, 0, 0.05));
 }

 .data-row {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     border-bottom: 1px solid var(--border_divider, #ddd);
 }

 .data-row:last-child {
     border-bottom: none;
 }

 .label {
     font-weight: 600;
     color: var(--text_muted, #4b4b4b);
     font-size: 0.85rem;
 }

 .value {
     font-weight: 700;
     color: var(--text_black, #111);
     font-size: 0.95rem;
 }

 .status {
     margin-top: 12px;
     padding: 8px;
     border-radius: 6px;
     text-align: center;
     font-size: 0.85rem;
     display: none;
 }

 .status.success {
     background: var(--background_green, #007749);
     color: var(--text_white, #fff);
 }

 select,
 input {
     width: 40%;
     padding: 2px 8px;
     margin-bottom: 12px;
     border-radius: 6px;
     border: none;
     outline: none;
     font-size: 0.9rem;
     background: var(--surface_alt, #eef3ff);
     color: var(--text_black, #111);

 }


 .status.error {
     background: var(--background_light_red, #ec4d4d6e);
     color: var(--text_red, #db464e);
 }

 span {
     font-size: 0.75rem;
     color: var(--text_white, #fff);
     text-decoration: none;

 }


 button {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: var(--text_white, #fff);
     padding: 12px;
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     outline: none;

 }

 button:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
 }

 button:active {
     transform: translateY(0);
 }

 #html5-qrcode-anchor-scan-type-change {
     width: 100%;
     border-radius: 12px;
     overflow: hidden;
     /* background: #1557b0; */
     margin-bottom: 16px;
     text-decoration: none;
 }

 .sessions_link {
     padding-top: 50px;
 }

 .sessions_link a {
     color: var(--text_color, #fff);
     text-decoration: none;
     margin: 0 15px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: var(--text_white, #fff);
     padding: 10px 50px;
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     gap: 05px;
 }

 .sessions_link a span {
     color: var(--text_color, #fff);
     font-size: 1.3rem;

 }

 .sessions_link a:hover {
     background-color: var(--background_sky_trans_lighter);
 }

 /* Payment Success Page Styles */
 .main_container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     min-height: 100vh;
     width: 100%;
     padding: 20px;
     /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
     padding-top: 100px;
     padding-bottom: 100px;

 }

 .success-card {
     background: white;
     border-radius: 20px;
     padding: 60px 40px;
     max-width: 500px;
     width: 100%;
     text-align: center;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     animation: slideUp 0.6s ease-out;
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .success-icon {
     width: 100px;
     height: 100px;
     margin: 0 auto 30px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 50px;
     animation: scaleIn 0.6s ease-out;
 }

 .success-icon.success {
     background: var(--background_green, #0ac07a);
     color: var(--text_white, #fff);
 }

 .success-icon.failed {
     background: var(--background_red, #f36f76);
     color: var(--text_white, #fff);
 }

 .success-icon.cancelled {
     background: var(--background_orange, #f3b56f);
     color: var(--text_white, #fff);
 }



 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .success-card h2 {
     font-size: 32px;
     color: #333;
     margin: 20px 0 10px;
     font-weight: 700;
 }

 .success-message {
     font-size: 16px;
     color: #666;
     margin-bottom: 30px;
     line-height: 1.6;
 }

 .success-details {
     background: #f8f9fa;
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 30px;
     text-align: left;
 }

 .detail-row {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid #e0e0e0;
 }

 .detail-row:last-child {
     border-bottom: none;
 }

 .detail-label {
     font-weight: 600;
     color: #555;
 }

 .detail-value {
     color: #333;
 }

 .action-buttons {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .btn {
     padding: 12px 30px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
 }

 .btn-primary {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 05px;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
 }

 .btn-secondary {
     background: #f0f0f0;
     color: #333;
 }

 .btn-secondary:hover {
     background: #e0e0e0;
 }


 /* Error/Failed Payment Styles */
 .error-card {
     border: 2px solid #ff6b6b;
 }

 .error-icon {
     background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
     color: white;
 }

 .error-status {
     color: #ff6b6b;
     font-weight: 700;
 }

 /* Cancelled Payment Styles */
 .cancelled-card {
     border: 2px solid #ffa500;
 }

 .cancelled-icon {
     background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%) !important;
     color: white;
 }

 .cancelled-status {
     color: #ffa500;
     font-weight: 700;
 }

 @media (max-width: 768px) {

     /* Payment Success Page Styles */
     .main_container {

         width: 100%;
         padding: 5px;
         /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
         padding-top: 100px;
         padding-bottom: 100px;

     }

     .success-card {
         padding: 40px 20px;
     }

     .success-card h2 {
         font-size: 24px;
     }

     .action-buttons {
         flex-direction: column;
     }

     .btn {
         width: 100%;
     }



     input[type="text"],
     input[type="number"],
     input[type="email"],
     input[type="password"],
     input[type="search"],
     input[type="tel"],
     input[type="url"],
     textarea,
     select {
         font-size: 16px !important;
     }

 }