/*!
 * Master Custom Stylesheet - Combined
 * Version: 1.0.0
 * Last Updated: 2025-12-01 20:07:16
 * 
 * This file combines all custom CSS modules for Power Pages
 * Load Order: Bootstrap -> Power Pages Theme -> This File
 * 
 * DO NOT EDIT THIS FILE DIRECTLY!
 * Edit files in custom-overrides/ folder, then run merge-css.ps1
 */

/* ========== GLOBAL OVERRIDES ========== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--pp-font-family);
  line-height: var(--pp-line-height);
}

html {
  scroll-behavior: smooth;
}

*:focus {
  outline: 2px solid var(--pp-color-primary);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* ========== VARIABLES ========== */
/*!
 * CSS Variables - Updated with Montserrat
 */

:root {
  /* === TYPOGRAPHY === */
  
  /* Font Families - Montserrat */
  /* --pp-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pp-font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-family-mono: 'Courier New', Courier, monospace;
   */
  /* Font Families - sans-serif */
  --pp-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --pp-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font Sizes */
  --pp-font-size-xs: 0.75rem;      /* 12px */
  --pp-font-size-sm: 0.875rem;     /* 14px */
  --pp-font-size-base: 1rem;       /* 16px */
  --pp-font-size-lg: 1.125rem;     /* 18px */
  --pp-font-size-xl: 1.25rem;      /* 20px */
  --pp-font-size-2xl: 1.5rem;      /* 24px */
  --pp-font-size-3xl: 1.875rem;    /* 30px */
  --pp-font-size-4xl: 2.25rem;     /* 36px */
  
  /* Font Weights - Montserrat available weights */
  --pp-font-weight-normal: 400;
  --pp-font-weight-medium: 500;
  --pp-font-weight-semibold: 600;
  --pp-font-weight-bold: 700;
  --pp-font-weight-extrabold: 800;
  
  /* Line Heights - Montserrat looks good with these */
  --pp-line-height-tight: 1.2;
  --pp-line-height-normal: 1.5;
  --pp-line-height-relaxed: 1.75;
  
  /* Letter Spacing - Montserrat benefits from slight spacing */
  --pp-letter-spacing-tight: -0.025em;
  --pp-letter-spacing-normal: 0;
  --pp-letter-spacing-wide: 0.025em;
  
  /* === COLORS === */
  --pp-color-primary: #00aaee;
  --pp-color-primary-dark: #005a9e;
  --pp-color-secondary: #6c757d;
  --pp-color-success: #28a745;
  /* --pp-color-danger: #fe001a; */
  --pp-color-danger: oklch(.637 .237 25.331);
  --pp-color-warning: #ffc107;
  --pp-color-info: #17a2b8;
  
  /* Grays */
  --pp-color-gray-100: #f8f9fa;
  --pp-color-gray-200: #e9ecef;
  --pp-color-gray-300: #d7d7d7;
  --pp-color-gray-400: #ced4da;
  --pp-color-gray-500: #adb5bd;
  --pp-color-gray-600: #6c757d;
  --pp-color-gray-700: #666666;
  --pp-color-gray-800: #343a40;
  --pp-color-gray-900: #333333;

  /* Red */
  --pp-color-red-100: #FFEFF0;

  /* Base colors */
  --pp-color-white: #ffffff;
  --pp-color-black: #000000;
  
  /* === SPACING === */
  --pp-spacing-xs: 0.25rem;   /* 4px */
  --pp-spacing-sm: 0.5rem;    /* 8px */
  --pp-spacing-md: 1rem;      /* 16px */
  --pp-spacing-lg: 1.5rem;    /* 24px */
  --pp-spacing-xl: 2rem;      /* 32px */
  --pp-spacing-2xl: 3rem;     /* 48px */
  
  /* === BORDERS === */
  --pp-border-width: 1px;
  --pp-border-width-thick: 2px;
  --pp-border-color: var(--pp-color-gray-300);
  --pp-border-radius-sm: 4px;
  --pp-border-radius-md: 8px;
  --pp-border-radius-lg: 12px;
  --pp-border-radius-xl: 16px;
  --pp-border-radius-xxl: 20px;
  --pp-border-radius-full: 9999px;
  
  /* === SHADOWS === */
  --pp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --pp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* === TRANSITIONS === */
  --pp-transition-fast: 150ms ease-in-out;
  --pp-transition-base: 200ms ease-in-out;
  --pp-transition-slow: 300ms ease-in-out;
}

/* === APPLY MONTSERRAT === */

/* Body text */
body {
  font-family: var(--pp-font-family);
  font-size: var(--pp-font-size-base);
  line-height: var(--pp-line-height-normal);
  font-weight: var(--pp-font-weight-normal);
  letter-spacing: var(--pp-letter-spacing-normal);
  color: var(--pp-color-gray-900);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pp-font-family-heading);
  font-weight: var(--pp-font-weight-bold);
  line-height: var(--pp-line-height-tight);
  letter-spacing: var(--pp-letter-spacing-tight);
  color: var(--pp-color-gray-900);
  margin-bottom: var(--pp-spacing-md);
}

h1 { 
  font-size: var(--pp-font-size-4xl); 
  font-weight: var(--pp-font-weight-extrabold);
}

h2 { 
  font-size: var(--pp-font-size-3xl); 
  font-weight: var(--pp-font-weight-bold);
}

h3 { 
  font-size: var(--pp-font-size-2xl); 
  font-weight: var(--pp-font-weight-bold);
}

h4 { 
  font-size: var(--pp-font-size-xl); 
  font-weight: var(--pp-font-weight-semibold);
}

h5 { 
  font-size: var(--pp-font-size-lg); 
  font-weight: var(--pp-font-weight-semibold);
}

h6 { 
  font-size: var(--pp-font-size-base); 
  font-weight: var(--pp-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pp-letter-spacing-wide);
}

/* Paragraphs */
p {
  margin-bottom: var(--pp-spacing-md);
  line-height: var(--pp-line-height-relaxed);
}

/* Links */
a {
  color: var(--pp-color-primary);
  text-decoration: none;
  transition: color var(--pp-transition-base);
}

a:hover {
  color: var(--pp-color-primary-dark);
  text-decoration: underline;
}

/* Buttons inherit Montserrat */
button,
.btn {
  font-family: var(--pp-font-family);
  font-weight: var(--pp-font-weight-semibold);
  letter-spacing: var(--pp-letter-spacing-wide);
}

/* Form elements */
input,
textarea,
select {
  font-family: var(--pp-font-family);
  font-size: var(--pp-font-size-base);
}

/* Strong/Bold text */
strong,
b {
  font-weight: var(--pp-font-weight-bold);
}

/* Small text */
small {
  font-size: var(--pp-font-size-sm);
}

/* ========== BOOTSTRAP OVERRIDES ========== */
/*!
 * Bootstrap 3.3.6 Overrides
 * Purpose: Override Bootstrap defaults without modifying core
 * Note: Use !important only when necessary to override Bootstrap specificity
 */

/* ========== BUTTONS ========== */
.btn {
  border-radius: var(--pp-border-radius-xxl) !important;
  font-weight: 600;
  padding: 14px 27px !important;
  height: 40px;
  transition: all var(--pp-transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 155px;
  font-size: 16px;
}

.btn-primary {
  background-color: var(--pp-color-primary) !important;
  border-color: var(--pp-color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  /* background-color: var(--pp-color-primary-dark) !important; */
  /* border-color: var(--pp-color-primary-dark) !important; */
  /* transform: translateY(-2px); */
  /* box-shadow: var(--pp-shadow-md); */
}

.btn-success {
  background-color: var(--pp-color-success) !important;
  border-color: var(--pp-color-success) !important;
}

/* Button sizes */
.btn-lg {
  padding: 14px 28px !important;
  font-size: var(--pp-font-size-large) !important;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: var(--pp-font-size-small) !important;
}

/* ========== FORMS ========== */
.form-control {
  border-radius: var(--pp-border-radius-xxl) !important;
  border: 1px solid var(--pp-border-color) !important;
  padding: 10px 25px !important;
  min-height: 40px;
  transition: border-color var(--pp-transition-base);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--pp-color-gray-100);
}

.form-control:focus {
  border-color: var(--pp-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1) !important;
  outline: none !important;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 576px) {
  .form-control {
    font-size: 16px !important;
  }
}

.control-label,
label {
  font-weight: 600;
  color: var(--pp-color-gray-700);
  margin-bottom: var(--pp-spacing-sm);
}

/* ========== NAVIGATION ========== */
.navbar-default {
  background-color: var(--pp-color-white) !important;
  border-bottom: 2px solid var(--pp-color-gray-200) !important;
  box-shadow: var(--pp-shadow-sm);
}

.navbar-default .navbar-nav > li > a {
  color: var(--pp-color-gray-700) !important;
  font-weight: 500;
  transition: color var(--pp-transition-base);
}

.navbar-default .navbar-nav > li > a:hover {
  color: var(--pp-color-primary) !important;
  background-color: transparent !important;
}

.navbar-default .navbar-nav > .active > a {
  background-color: transparent !important;
  color: var(--pp-color-primary) !important;
  border-bottom: 3px solid var(--pp-color-primary);
}

/* ========== PANELS ========== */
.panel {
  border-radius: var(--pp-border-radius-lg) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  border: 1px solid var(--pp-border-color) !important;
}

.panel-heading {
  background-color: var(--pp-color-gray-100) !important;
  border-bottom: 2px solid var(--pp-color-gray-200) !important;
  font-weight: 600;
}

.panel-primary > .panel-heading {
  background-color: var(--pp-color-primary) !important;
  color: var(--pp-color-white) !important;
}

/* ========== ALERTS ========== */
.alert {
  border-radius: var(--pp-border-radius-md) !important;
  border-left: 4px solid !important;
  padding: var(--pp-spacing-md) !important;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.1) !important;
  border-left-color: var(--pp-color-success) !important;
  color: #155724 !important;
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border-left-color: var(--pp-color-danger) !important;
  color: #721c24 !important;
}

/* ========== TABLES ========== */
.table > thead > tr > th {
  background-color: var(--pp-color-gray-100) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--pp-color-gray-300) !important;
}

.table > tbody > tr:hover {
  background-color: var(--pp-color-gray-100) !important;
}

/* ========== MODALS ========== */
.modal-content {
  border-radius: var(--pp-border-radius-lg) !important;
  box-shadow: var(--pp-shadow-lg) !important;
  border: none !important;
}

.modal-header {
  background-color: var(--pp-color-gray-100);
  border-bottom: 2px solid var(--pp-color-gray-200) !important;
}

/* error modal */
.error-modal-dialog {
  background: transparent !important;
}

.error-modal-footer {
  height: 70px;
}

-----------------------------
/* navbar */
.navbar, .navbar-static-top.navbar-inverse  {
    display: flex;
    align-items: center;
    height: 60px;
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

.navbar-toggle {
    display: none;
}

.navbar, .navbar-static-top.navbar-inverse, .navbar-toggle {
    background-color: var(--pp-color-white);
    border: none;
}

.navbar .container {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

.navbar-static-top {
  z-index: 3;
}

.navbar-inverse .navbar-toggle {
    border: none;
}

/* power pages navbar logo container*/
.navbar-header {
  display: flex;
  align-items: center;
}

.navbar-header .xrm-attribute-value, .navbar-header{
    display: flex;
    align-items: center;
    vertical-align: middle;
    padding: 0;
    height: 100%;
}

.navbar-header .xrm-attribute-value > div {
  max-width: 150px;
} 

.navbar-header .logo {
  padding: 0;
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > .divider-vertical,
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:not([title="Product Registration"]):not([title="Warranty Support Request"]) {
display: none;
}


.sub-header {
  background-color: #F5F7F8;
  height: 54px;
  display: none;
  align-items: center;
  justify-content: space-between;
}

.sub-header .title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.52px;
  margin: 0;
  color: var(--pp-color-gray-900);;
}

/* .navbar-nav {
    display: none;
} */


/* footer */
.footer {
    background-color: #f6f7f8;
    color: var(--pp-color-gray-900);;
}

.footer .footer-bottom {
    background-color: #f6f7f8;
    color: var(--pp-color-gray-900);;
    padding: 20px;
    text-align: center;
}

.footer .footer-bottom p{
    font-size: 14px;
}

/* modal */
.modal {
  padding-right: 0;
  z-index: 5;
}

.modal-backdrop {
  z-index: 4;
}

.modal-dialog {
  z-index: 6;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  margin: auto auto;
  z-index: 7;
}

.modal-header {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--pp-border-color);
  border-radius: 20px 20px 0 0;
}

.modal-header h1{
  font-size: 18px;
  font-weight: 500;
}

.modal-header .form-close{
  top: 3% !important;
}

.modal-body {
  border: none; 
  border-radius: 20px;
  padding: 20px 20px;
}

.modal-body table.table {
  border: 1px solid var(--pp-border-color); 
  border-radius: 20px;
  padding: 20px 20px;
}

.modal-body table.table th{
  color: var(--pp-color-gray-900) !important;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}

.modal-body table.table td{
  color: var(--pp-color-gray-900);
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  text-align: left;
}

.modal-body .entity-lookup .view-grid{
  max-height: 301px;
}

.modal-body .pagination>li:first-child>a, .modal-body .pagination>li:last-child>a {
  border: 1px solid var(--pp-border-color);
  border-radius: 20px;
}

.modal-body .pagination>li>a {
  font-size: 12px;
  color: var(--pp-color-gray-900);
}

.modal-body .pagination > .active > a {
  border: none;
  color: var(--pp-color-white);
}

.modal-body #EntityFormPanel, .modal-body .cell{ 
  border: none;
}

.modal-body .grid-actions{
  border-bottom: none;
  padding: 0;
  margin-bottom: 25px;
}

/* dropdown filter */
.modal-body #filterDropdownId, .modal-body #filterDropdownId:hover
{
  border: 1px solid var(--pp-color-primary);
  border-radius: 20px;
  font-size: 16px;
  background-color: var(--pp-color-white);
  color: var(--pp-color-primary);
  max-height: 40px;
  line-height: 12px;
  padding: 14px 27px;
  margin-right: 20px;
}

.modal #filterDropdownId a.selected-view.dropdown-toggle {
  padding: 0;
}

.modal-body #filterDropdownId
span.fa-list{
  display: none;
  
}

.modal-body #filterDropdownId
span.title{
  margin-right: 10px;
}


.modal .entitylist-search input.query.form-control  {
  border-right: none;
  border-radius: 25px 0 0 25px !important;
  border-color: var(--pp-border-color);  
}


.modal-body .entitylist-search button.btn{
  min-width: auto;
  width: auto;
  border-left: none;
  border-radius: 0 25px 25px 0 !important;
  border-color: var(--pp-border-color);
  color: var(--pp-color-gray-900);
  padding: 4px 17px !important;
}

.modal-body .view-grid.table-responsive > span[aria-label="Choose one record and click Select to continue"] {
  display: none;
}

.modal-body td{
  padding: 20px 0;
}

.modal-body .actions{ 
  border: none;
  display: flex;
  align-items: center;
  justify-content: end; 
  margin: 0;
  padding: 0;
}

.modal-body .actions input[type='button']{ 
  color: #fff;
  background-color: #f9B82D !important;
  font-size: 16px;
  border: none;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  border: none;
}

.modal-footer button.remove-value{
  display: none;
}

/* sir dj mockup design */
/* header */
.navbar {
  height: 77px !important;
  border-bottom: 1px solid oklch(.929 .013 255.508) !important;
  box-shadow: none !important;
  padding: 16px 24px;
}

.navbar .container{
  width: 100%;
}

.navbar .logo img{
  width: auto;
  height: 100%;
  max-height: 20px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* header navigation */
/* ===== MOBILE NAVIGATION ===== */
.navbar-navigation {
  position: absolute;
  top: 23px;
  right: 30px;
}

.nav-container {
    background: transparent;
    border-radius: 20px;
    padding: 4px;
    max-width: 1200px;
    position: relative;
}

/* Mobile Header - Right aligned */
.nav-mobile-header {
    display: flex;
    justify-content: flex-end; /* Right align hamburger */
    align-items: center;
}

.nav-mobile-title {
    font-size: 16px;
    font-weight: 600;
    color: oklch(.446 .043 257.281);
    display: none; /* Hide title on mobile */
}

/* Hamburger Button */
.nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.nav-hamburger:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: oklch(.446 .043 257.281);
    border-radius: 2px;
    transition: background 0.3s ease;
}

/* Mobile Menu List */
.nav-mobile-menu {
    display: none;
    /* flex-direction: column; */
    gap: 8px;
    margin-top: 22px;
    padding: 4px;
    background-color: oklch(.968 .007 247.896);
    animation: slideDown 0.3s ease;
    
}

.nav-mobile-menu.open {
    display: flex;
}

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

.nav-mobile-item {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: oklch(.446 .043 257.281);
    background: white;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    text-align: center;
}

.nav-mobile-item:hover {
    color: oklch(.208 .042 265.755);
    transform: translateX(4px);
}

.nav-mobile-item.active {
    color: white;
    background: linear-gradient(to right bottom, oklch(0.577 0.245 27.325) 0%, oklch(0.505 0.213 27.518) 100%);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

/* Desktop Tabs - Right aligned */
.nav-tabs {
    display: none;
    gap: 4px;
    border-bottom: none;
    justify-content: flex-end;
}

.nav-tab {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: oklch(.446 .043 257.281);
    background: transparent;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-tab:hover {
    color: oklch(.208 .042 265.755);
    background: white;
    text-decoration: none;
}

.nav-tab.active {
    color: white;
    background: linear-gradient(to right bottom, oklch(0.577 0.245 27.325) 0%, oklch(0.505 0.213 27.518) 100%);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

.nav-tab.active:hover {
    color: white;
    background: linear-gradient(to right bottom, oklch(0.577 0.245 27.325) 0%, oklch(0.505 0.213 27.518) 100%);
}

/* ===== DESKTOP VERSION (min-width: 768px) ===== */
@media (min-width: 768px) {
  .navbar-navigation {
    margin: 0 0 0 auto;
    position: relative;
    top: 0;
    right: 0;
  }

  .nav-container {
    background: oklch(.968 .007 247.896);
  }

  .nav-mobile-header {
      display: none;
  }
  
  .nav-mobile-menu {
      display: none !important;
  }
  
  .nav-tabs {
      display: flex;
  }
}


/* footer */
.footer {
  background-color: transparent !important;
}

.footer-bottom{
  background: transparent !important;
  padding: 48px 24px !important;
}

.footer-bottom p{
  font-size: 16px;
  color: oklch(.554 .046 257.417);
}

.footer-bottom a{
  color: oklch(.577 .245 27.325);
  text-decoration: underline;
}

/* modal */
.modal-body th a{
  color: oklch(.279 .041 260.031);
}

/* search field */
.modal-body .toolbar-actions:has(.entitylist-search), .modal-body .entitylist-search{
  width: 100%;
}

/* table first column */
.modal-body table.table th:first-child, .modal-body table.table td:first-child{
  display: none !important;
}

/* table selected */
.modal-body tr.selected td{
  background-color: oklch(.637 .237 25.331) !important;
  color: white !important;
}

.modal-body .pagination li.active a{
    background-color: oklch(.637 .237 25.331) !important;
    color: white;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);

}

.modal-body .pagination li a.entity-pager-prev-link, .modal-body .pagination li a.entity-pager-next-link{
    border: 1px solid oklch(.704 .191 22.216);
    color: oklch(.704 .191 22.216);
    background: white;

}

.modal-footer .btn-primary{
  background-color: oklch(.577 .245 27.325) !important;
  color: white;
  border: none;
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.modal-footer .cancel.btn-default{
  border: 1px solid oklch(.704 .191 22.216);
  color: oklch(.704 .191 22.216);
  background: white;
}

/* ========== COMPONENTS ========== */
/*!
 * Custom Components
 * Purpose: New components that don't exist in Bootstrap
 */

/* ========== MODERN CARD ========== */
.pp-card {
  background-color: var(--pp-color-white);
  border-radius: var(--pp-border-radius-lg);
  box-shadow: var(--pp-shadow-md);
  padding: var(--pp-spacing-lg);
  margin-bottom: var(--pp-spacing-lg);
  transition: transform var(--pp-transition-base), box-shadow var(--pp-transition-base);
}

.pp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-shadow-lg);
}

.pp-card__header {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pp-color-gray-800);
  margin-bottom: var(--pp-spacing-md);
  padding-bottom: var(--pp-spacing-md);
  border-bottom: 2px solid var(--pp-color-gray-200);
}

.pp-card__body {
  color: var(--pp-color-gray-700);
  line-height: var(--pp-line-height);
}

/* Card variants */
.pp-card--primary {
  border-left: 4px solid var(--pp-color-primary);
}

/* ========== HERO SECTION ========== */
.pp-hero {
  background: linear-gradient(135deg, var(--pp-color-primary), var(--pp-color-primary-light));
  color: var(--pp-color-white);
  padding: var(--pp-spacing-xxl) var(--pp-spacing-lg);
  text-align: center;
  margin-bottom: var(--pp-spacing-xl);
}

.pp-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--pp-spacing-md);
}

.pp-hero__cta {
  display: inline-block;
  padding: var(--pp-spacing-md) var(--pp-spacing-xl);
  background-color: var(--pp-color-white);
  color: var(--pp-color-primary);
  border-radius: var(--pp-border-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--pp-transition-base);
}

.pp-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-lg);
  text-decoration: none;
  color: var(--pp-color-primary);
}

/* ========== STATUS BADGE ========== */
.pp-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--pp-border-radius-md);
  font-size: var(--pp-font-size-small);
  font-weight: 600;
}

.pp-status--success {
  background-color: rgba(40, 167, 69, 0.1);
  color: var(--pp-color-success);
}

.pp-status--pending {
  background-color: rgba(255, 193, 7, 0.1);
  color: var(--pp-color-warning);
}

/* content-wrapper */
.content-wrapper {

}

#mainContent.wrapper-body {
  min-height: calc(100vh - 125px);
  margin: 0;
  padding: 0;
}


/* forms section */
.form-section {
  min-height: calc(100vh - 659px);
  margin: 0;
  padding: 40px 0;
}

.form-section .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.form-section .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.form-section .content {
  max-width: 550px;
}

.form-section .content .title{
  color: var(--pp-color-gray-900);
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 25px;
}

.form-section .content .description {
  margin-bottom: 25px;
  font-size: 16px;
  color: var(--pp-color-gray-900);
  font-weight: 400;
}

.form-section .crm-form {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 550px;
}

.form-section .crm-form .crmEntityFormView{
  border: none;
  color: var(--pp-color-gray-900);
}

.crm-form .crmEntityFormView .cell {
  padding: 0 0 25px 0;
}

.crmEntityFormView fieldset {
  margin-bottom: 0;
}

.crmEntityFormView .section-title {
  margin: 0;
  margin-bottom: 25px;
  font-size: 16px;
  color: var(--pp-color-gray-900);
  font-weight: 700;
}

.crmEntityFormView .section-title h3 {
  margin: 0;
}

/* country selector */
.crmEntityFormView input.text.form-control.lookup.form-control  {
  border-right: none;
  border-radius: 25px 0 0 25px !important;
  border-color: var(--pp-border-color);  
}

.crmEntityFormView button.clearlookupfield {
  display: none !important;
}

.crmEntityFormView button.launchentitylookup {
  border-left: none;
  border-radius: 0 25px 25px 0 !important;
  border-color: var(--pp-border-color);
  min-width: 25px;
  color: var(--pp-color-gray-900);
  padding: 4px 17px !important;
}

/* datepicker */
/* Wrap the date input like a pill */
.crmEntityFormView .datetimepicker {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--pp-border-radius-xxl);
  border: 1px solid var(--pp-border-color);
}

/* Make the text box blend into the pill */
.crmEntityFormView .datetimepicker .form-control.input-text-box {
  box-shadow: none !important;
  outline: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  background: transparent;
  border: none !important;
}

/* Remove Bootstrap input-group look */
.crmEntityFormView .datetimepicker .input-group-addon {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-left: 1px solid var(--pp-border-color);
  width: auto;
  margin-right: 17px;
}

/* Calendar icon styling */
.crmEntityFormView .datetimepicker .iconBorder {
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--pp-color-gray-900);
  padding: 0;
}

/* select arrow */
/* Custom arrow for this specific select */
.crmEntityFormView select {
  /* Reset native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  background-color: #fff;

  /* Add our SVG triangle as background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2 L8 8 L14 2 Z' fill='black' stroke='black' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;  /* move arrow left/right as needed */
  background-size: 12px 8px;              /* size of the triangle */

  padding-right: 32px;                    /* space so text doesn’t overlap arrow */
}

/* Optional: hide IE/old Edge dropdown arrow if you care about it */
.crmEntityFormView select::-ms-expand {
  display: none;
}

.crmEntityFormView .cell .field-label {
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--pp-color-gray-900);
  margin-bottom: 0;
}

/* textarea */
.crmEntityFormView .cell textarea {
  resize: none;
}

/* attachment label */
.crmEntityFormView #NewAttachFileLabel {
  display: none;
}

.crmEntityFormView #newdivforfileinfo {
  margin: 0;
}

.crmEntityFormView #newdivforfileinfo .custom-button {
  max-width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 20px;
}

.crmEntityFormView .tab {
  margin-bottom: 0;
}

/* radio button */
.boolean-radio-cell {
  display: flex;
  align-items: center;
  padding: 0;
}

.boolean-radio-cell .info, .boolean-radio-cell .info .field-label {
  padding: 0;
  float: none;
}

.boolean-radio-cell .control label {
  margin: 0;
}

/* Wrapper: layout for the custom toggle */
.boolean-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-size: 12px;
  padding-left: 10px;
}

/* Hide the native radios */
.boolean-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Hide the first label text (we’ll only use the second one visually) */
.boolean-radio label[for$="_0"] {
  position: absolute;
  left: -9999px; /* keep it for accessibility but not visible */
}

/* Use the second label as the state text (No/Yes) */
.boolean-radio label[for$="_1"] {
  cursor: pointer;
  padding-left: 42px;            /* room for the switch */
  position: relative;
  color: #666;
  font-size: 16px;
  padding-bottom: 0;
}

/* The switch track */
.boolean-radio label[for$="_1"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #999;           /* OFF grey */
  border: 1px solid #d7d7d7;
}

/* The switch thumb */
.boolean-radio label[for$="_1"]::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  transition: transform 0.2s ease;
}

/* ON state (when Yes is selected) */
.boolean-radio.is-yes label[for$="_1"]::before {
  background: #00a8ff;           /* blue when ON */
  border: none;
}

.boolean-radio.is-yes label[for$="_1"]::after {
  transform: translate(16px, -50%);  /* thumb to the right */
}


/* attachment */
/* Layout: put drop-area on top, helper text below */
.file-cell.cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Drop area wrapper */
.file-cell .ContainerForFile {
  order: 1;
  width: 100%;
}

/* Helper text (the "You can upload a maximum..." part) */
.file-cell .info {
  order: 2;
  margin-top: 6px;
  font-size: 12px;
  color: #777;
}

/* Label inside info (you’ll change the text manually) */
.file-cell .info label {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 12px;
}

/* ===== Drop zone styling ===== */
.file-cell .buttonForFileUpload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px dashed #d3d3d3;
  background-color: #fafafa;
  color: #a0a0a0;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

/* Icon + text inside the drop zone (visual only) */
/* .file-cell .buttonForFileUpload::before {
  content: "⬆";
  display: inline-block;
  font-size: var(--pp-font-size-lg);
  margin-right: 8px;
  opacity: 0.5;
} */

.file-cell .buttonForFileUpload::after {
  content: "Drop files to upload or choose file";
  white-space: nowrap;
}

/* Real button: keep it for click/JS, but make the whole box clickable & invisible */
.file-cell .buttonForFileUpload > button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;  /* override inline width: fit-content */
  height: 100%;
  display: block;
  opacity: 0;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Optional: hide the original arrow icon inside the real button */
.file-cell .buttonForFileUpload > button .fa {
  display: none;
}

/* Error messages inside buttonForFileUpload */
.file-cell .buttonForFileUpload .errordiv {
  position: static;
  margin-top: 6px;
  width: 100%;
}

.crmEntityFormView .cell div.info.required label:after {
  color: var(--pp-color-danger);
}

/* alert message */
.validation-summary.alert-error, .alert-error, .alert-success.success, .alert.alert-info {
  border-radius: 20px !important;
  color: var(--pp-color-gray-900);
  margin-bottom: 25px;
  padding: 25px !important;
  font-size: 14px;
  font-weight: 400;
  border: none !important;
}

/* .validation-summary.alert-error, .alert-error {
  border: 1px solid var(--pp-color-danger);
}

.alert-success.success {
  border: 1px solid var(--pp-color-success);
} */

.alert-success.success .close {
  /* font-size: 18px;
  background-color: transparent;
  margin-left: 20px; */
  display: none;
}

.alert-success.success #message-label {
  font-size: 16px;
  color: var(--pp-color-gray-900);
  font-weight: 400;
}

.validation-summary.alert-error .validation-header {
  font-size: 20px;
}

/* submit button */
.crmEntityFormView .actions {
  margin: 0;
  border: none;
  padding: 0;
}

.crmEntityFormView .actions .submit-btn{
  display: block;
  width: 100%;
}

.crmEntityFormView .actions input.submit-btn{
  line-height: 15px;
}


/* Sign in */
#content-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#content {
  max-width: 550px;
  /* min-height: calc(100vh - 179px); */
  min-height: calc(100vh - 125px);
  padding: 40px 0;
}

/* nav tab */
#content .nav.nav-tabs{
  display: flex;
  align-items: center;
  justify-content: center;
}

#content .nav-tabs{
  border-bottom: 1px solid var(--pp-border-color);
}

#content .nav-tabs a{
  color: var(--pp-color-gray-900);
  font-size: 14px;
  font-weight: 400;
}

#content .nav-tabs li:nth-child(3) {
  display: none;
}

#content .nav-tabs li.active a{
  color: var(--pp-color-gray-900);
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid var(--pp-color-black);
}

#content .nav-tabs span.fa-sign-in{
  display: none;
}

/* sign in content */
#content #mainContent{
  margin: 40px 0 40px 0;
}

#content #mainContent .login-heading-section{
  border: 0;
  padding: 0;
  margin: 0 0 25px 0;
}

/* #content #mainContent #ContentContainer_MainContent_MainContent_ExternalLogin{
  border-top: 1px solid var(--pp-border-color);
} */

#content #mainContent .row, #content #mainContent .row #ContentContainer_MainContent_MainContent_LocalLogin {
  display: block;  
}

#mainContent .row > div, #content #mainContent .row > div > div{
  text-align: center; 
  width: 100%;
}

/* sign in form */
#mainContent form .form-group{
  margin: 0 0 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainContent form .col-sm-offset-4 {
  margin-left: 0;
}

#mainContent form .form-group .control-label{
  width: auto;
  padding: 0;
}

#mainContent form .control-label:before{
  display: none;
}

/* remember me */
#mainContent form .form-group:has(.checkbox input[type="checkbox"]) {
  display: none;
}

/* sign in buttons */
#mainContent form .col-sm-offset-4:has(> .btn) {
  display: flex;
  flex-direction: column;
  flex-flow: column-reverse;
}

#mainContent form .col-sm-offset-4 .btn {
  margin-bottom: 25px;
}

#mainContent form .col-sm-offset-4 input.btn, #mainContent form .entity-form input.btn {
  line-height: 15px;
}

#mainContent form .col-sm-offset-4 #submit-signin-local {
  margin: auto auto 25px;
  width: 100%;
  max-width: 257px;
}

#mainContent form .col-sm-offset-4 a.btn {
  border: 0;
  margin: auto auto 15px;
  padding-top: 0;
  font-size: 14px;
}

#mainContent form .col-sm-offset-4 a.btn:hover {
  background-color: transparent;
}

#mainContent form button[name='provider'] {
  display: inline-flex;
  margin: 0 5px 10px 5px;
  border: 1px solid var(--pp-color-primary);
  color: var(--pp-color-primary);
  background-color: var(--pp-color-white) !important;
  width: 50%;
}

#mainContent form button[name='provider']:nth-last-of-type {
  margin: 0 0 10px 5px;
}

#mainContent form button[name='provider']:nth-of-type(1) {
  margin: 0 5px 10px 0;
}

#mainContent .form-horizontal:has(button[name='provider']) {
  padding-top: 25px;
  margin-top: 20px;
}

/* The "or" */
#mainContent .form-horizontal:has(button[name='provider']):has(button[name='provider'])::before {
  content: "or";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  font-size: 12px;
  color: var(--pp-color-gray-700);                 
  background-color: var(--pp-color-white); 
  z-index: 1;
}

/* The horizontal line behind it */
#mainContent .form-horizontal:has(button[name='provider']):has(button[name='provider'])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3%;
  border-bottom: 1px solid var(--pp-border-color);
  transform: translateY(-3%);
  margin: 0 15px 0 15px;
  z-index: 0;
}

/* external */

/* forgot password */
#mainContent .form-horizontal:has(h1.forgot-password-heading) {

}

#mainContent .form-horizontal h1.forgot-password-heading {
  color: var(--pp-color-gray-900);
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 25px; 
  border-bottom: none;
}

#mainContent .form-horizontal:has(h1.forgot-password-heading) .form-group{
  align-items: baseline !important;
}

#mainContent .col-sm-offset-2.col-sm-10:has(button#submit-forgot-password) {
  width: 100%;
  padding: 0 28px 0 57px;
  margin: 0;
}

#mainContent button#submit-forgot-password {
  width: 100%;
}

/* registration */
#mainContent #ContentContainer_MainContent_MainContent_SecureRegister .col-sm-4.control-label{
  padding: 0;
  width: 23%;
}

#mainContent #ContentContainer_MainContent_MainContent_SecureRegister .col-sm-8{
  width: 100%;
}

#mainContent #ContentContainer_MainContent_MainContent_SecureRegister #ctl00_ctl00_ContentContainer_MainContent_MainContent_captcha_SpamProtectorPanel  {
    display: flex;
}

#ContentContainer_MainContent_MainContent_SecureRegister #ContentContainer_MainContent_MainContent_CaptchaRowPlaceHolder .col-sm-4.control-label {    
    display: none;
}

#ContentContainer_MainContent_MainContent_SecureRegister #ctl00_ctl00_ContentContainer_MainContent_MainContent_captcha_SpamProtectorPanel div, #ContentContainer_MainContent_MainContent_SecureRegister #ctl00_ctl00_ContentContainer_MainContent_MainContent_captcha_SpamProtectorPanel p  {    
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

#mainContent #ContentContainer_MainContent_MainContent_SecureRegister .form-group .col-sm-offset-4.col-sm-8:has(input[title='Register']) {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainContent #ContentContainer_MainContent_MainContent_SecureRegister input[title='Register']{
  width: 100%;
  max-width: 275px;
}

/* for the updated design by sir dj */
#mainContent {
  background: linear-gradient(to bottom, oklch(.984 .003 247.858), var(--pp-color-white));
  min-height: calc(100vh - 198px) !important;
}

/* form main body */
#mainContent .form-section{
  padding: 48px 0;
}

#mainContent .form-section .container > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

#mainContent .form-section .registration-form{
  padding: 0 10px;
}

#mainContent .form-section:has(.registration-form) fieldset, #mainContent .form-section:has(.registration-form) .file-cell.cell:has(.ContainerForFile) {
  margin-bottom: 32px;
}

#mainContent .form-section .content{
  max-width: 624px;
  padding: 0 50px;
  margin-bottom: 23px;
}

#mainContent .form-section .registration-form{
  padding: 0 10px;
}

#mainContent .form-section .crm-form{
  max-width: 624px;
  width: 100%;
}

#mainContent .crm-form > div {
  width: 100%
}

/* content image */
#mainContent .content .icon-container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

#mainContent .icon-container > div{
  max-width: 64px;
  min-height: 64px;
  vertical-align: middle;
}

#mainContent .icon-container img{
  width: auto;
  height: 100%;
  vertical-align: middle;
}

/* content title */
#mainContent .content .title{
  font-size: 48px;
  color: oklch(.279 .041 260.031);
  font-weight: 400;
  margin: 16px 0 16px 0;
}

#mainContent .content .description{
  text-align: center;
  color: oklch(.279 .041 260.031);
  font-weight: 400;
}

/* section */
#EntityFormPanel{
  color: oklch(.279 .041 260.031);
  background-color: transparent !important;
}

#EntityFormPanel fieldset, #EntityFormPanel .file-cell.cell:has(.ContainerForFile){
  margin:0 0 40px 0;
  padding: 90px 32px 32px 32px;
  background-color: var(--pp-color-white);
  border-radius: 16px;
  border: 1px solid oklch(.929 .013 255.508);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 3px 0 #0000001a;
  position: relative;
}

/* section title */
#EntityFormPanel fieldset .section-title{
  margin: 0;
  position: absolute;
  top: 25px;
  left: 35px;
  /* transform: translate(-10%, 0); */
  width: auto;
}

#EntityFormPanel fieldset .section-title h3{
  color: oklch(.279 .041 260.031);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

#EntityFormPanel fieldset .section-title h3::before {
  content: "";
  display: inline-block;
  width: 10px;             /* size of the dot */
  height: 10px;
  border-radius: 50%;
  background-color: oklch(.637 .237 25.331);  /* red */
  margin-bottom: 2px;
  margin-right: 10px;          /* space between dot and text */
}

/* first section, pr second section */
#EntityFormPanel table tbody:has(input[id='mt_requestor_name']), #EntityFormPanel table tbody:has(input[id='mt_first_name']), #EntityFormPanel table tbody:has(input[id='mt_serial_number']){
  display: flex;
  flex-wrap: wrap;
}

/* first name field, phone number field */
#EntityFormPanel table tr:has(input[id='mt_requestor_name']), #EntityFormPanel table tr:has(input[id='mt_first_name']), #EntityFormPanel table tr:has(input[id='mt_pr_phonenumber']), #EntityFormPanel table tr:has(input[id='mt_date_of_purchase_datepicker_description']) {
  width: 50%;
  max-width: 50%;
}

#EntityFormPanel table td:has(input[id='mt_requestor_name']), #EntityFormPanel table td:has(input[id='mt_first_name']),#EntityFormPanel table td:has(input[id='mt_pr_phonenumber']),#EntityFormPanel table td:has(input[id='mt_date_of_purchase_datepicker_description']) {
  width: 100%;
  padding-right: 20px;
}

/* last name field, country field */
#EntityFormPanel table tr:has(input[id='mt_requestor_last_name']), #EntityFormPanel table tr:has(input[id='mt_last_name']), #EntityFormPanel table tr:has(input[id='mt_country_name']), #EntityFormPanel table tr:has(select[id='mt_purchasechannel'])  {
  width: 50%;
  display: flex;
}

#EntityFormPanel table td:has(input[id='mt_requestor_last_name']), #EntityFormPanel table td:has(input[id='mt_last_name']), #EntityFormPanel table td:has(input[id='mt_country_name']), #EntityFormPanel table td:has(select[id='mt_purchasechannel']) {
  width: 100%;
  max-width: 100%;
}

/* adjust others row */
#EntityFormPanel table td:has(input[id='mt_date_of_purchase_datepicker_description']) {
  padding-bottom: 12px;
}

#EntityFormPanel table td:has(select[id='mt_purchasechannel']) {
  padding-bottom: 12px;
}


/* others field */
#EntityFormPanel table tr:has(input[id='cr2d4_other'])  {
  margin-left: 50%;
  width: 50%;
  display: flex;
}

#EntityFormPanel table td:has(input[id='cr2d4_other']) {
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
}

#EntityFormPanel table td:has(input[id='cr2d4_other']) .info {
  display: none;
}

/* email field, pr brand, pr model name, pr serial number fields */
#EntityFormPanel table tr:has(input[id='mt_contact_email']), #EntityFormPanel table tr:has(select[id='mt_pr_brand']), #EntityFormPanel table tr:has(input[id='mt_product_code']), #EntityFormPanel table tr:has(input[id='mt_serial_number']) {
  width: 100%;
  display: flex;
}

#EntityFormPanel table td:has(input[id='mt_contact_email']), #EntityFormPanel table td:has(select[id='mt_pr_brand']), #EntityFormPanel table td:has(input[id='mt_product_code']), #EntityFormPanel table td:has(input[id='mt_serial_number']) {
  width: 100%;
  max-width: 100%;
}


/* forms fields */
#EntityFormPanel fieldset .form-control-cell {
  padding: 0 0 20px 0;
}

#EntityFormPanel fieldset select {
  /* Reset native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  background-color: #fff;

  /* Updated SVG chevron arrow (V-shaped, lighter gray) */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 9px;

  padding-right: 40px;
  transition: all 0.3s ease;
}

#EntityFormPanel fieldset .form-control-cell label,  #EntityFormPanel fieldset .picklist-cell label{
  color: oklch(.446 .043 257.281);
  font-weight: 500;
  line-height: 1;
  padding: 0 0 8px 0;
}

#EntityFormPanel fieldset .form-control-cell .form-control, #EntityFormPanel fieldset select{
  background-color: #f3f3f5 !important;
  font-size: 16px;
  line-height: calc(1.25 / .875);
  outline: none;
  padding: 4px 12px !important;
  border: 1px solid oklch(.869 .022 252.894) !important;
  border-radius: calc(.625rem - 2px) !important;
}

/* textarea */
#EntityFormPanel fieldset .form-control-cell #mt_anythingelseyoudliketoshare, #EntityFormPanel fieldset .form-control-cell #mt_issue_description{
  height: 64px;
}

/* multiselect */
#EntityFormPanel fieldset #mt_whatwillyouusethisfor_i{
  background-color: #f3f3f5 !important;
  font-size: 16px;
  line-height: calc(1.25 / .875);
  outline: none;
  padding: 4px 12px !important;
  border: 1px solid oklch(.869 .022 252.894) !important;
  border-radius: calc(.625rem - 2px) !important;
}

#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-input-container {
    padding: 0;
}


#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-selected-display-item {
    margin: 2.5px 7px 2.5px 0 !important;
    background: oklch(.971 .013 17.38) !important;
    color: oklch(.505 .213 27.518);
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 4px 12px;
    vertical-align: middle;
}

#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-quick-delete, #EntityFormPanel #mt_whatwillyouusethisfor_i .msos-selecteditems-toggle {
  color: oklch(.505 .213 27.518) !important;
  background: oklch(.971 .013 17.38) !important;
}

#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-quick-delete {
  background: oklch(.971 .013 17.38) !important;
}


#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-input {
  font-size: 16px;
}

#EntityFormPanel #mt_whatwillyouusethisfor_i .msos-caret-button {
  background-color: #f3f3f5 !important;;
}

/* input group */
/* #EntityFormPanel fieldset .form-control-cell .input-group{
  border-radius: calc(.625rem - 2px) 0 0 calc(.625rem - 2px) !important;
} */

#EntityFormPanel fieldset .form-control-cell .input-group .form-control{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
}

#EntityFormPanel fieldset .form-control-cell .input-group .btn{
  border-left: none;
  background-color: #f3f3f5 !important;
  border-color: oklch(.869 .022 252.894);
  border-radius: 0 calc(.625rem - 2px) calc(.625rem - 2px) 0 !important;
  padding: 4px 12px !important;
  color: oklch(.446 .043 257.281);
}

/* datepicker */
#EntityFormPanel fieldset .form-control-cell .datetimepicker{
  background-color: #f3f3f5 !important;
  color: oklch(.446 .043 257.281);
  border-radius: calc(.625rem - 2px) !important;
}

#EntityFormPanel fieldset .form-control-cell .datetimepicker .form-control{
  border: none !important;
}

#EntityFormPanel fieldset .form-control-cell .mt_date_of_purchase_description{
  margin-right: 10px;
  border: none !important;
}

#EntityFormPanel fieldset .form-control-cell #mt_date_of_purchase_datepicker_description{
  border-right: none;
}

/* upload */
#EntityFormPanel .file-cell.cell:has(.ContainerForFile){
  display: flex ;
  flex-direction: column-reverse;
  padding: 32px;  
}

#EntityFormPanel .file-cell.cell .info {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

#EntityFormPanel .file-cell.cell #NewAttachFileLabel {
  display: block;
  color: oklch(.279 .041 260.031);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

#EntityFormPanel .file-cell.cell #NewAttachFileLabel::before {
  content: "";
  display: inline-block;
  width: 10px;             /* size of the dot */
  height: 10px;
  border-radius: 50%;
  background-color: oklch(.554 .046 257.417);  /* gray */
  margin-bottom: 2px;
  margin-right: 10px;          /* space between dot and text */
}

#EntityFormPanel .file-cell.cell .buttonForFileUpload  {
  min-height: 168px;
  border: 2px dashed oklch(.869 .022 252.894);
  border-radius: 14px;
  background-color: var(--pp-color-white);
  margin-top: 24px;
}

#EntityFormPanel .file-cell.cell .buttonForFileUpload:hover  {
  background-color: oklch(.971 .013 17.38);
  border-color: oklch(.704 .191 22.216);
}

#EntityFormPanel .file-cell.cell .buttonForFileUpload::after  {
  content: "Click to upload files";
    white-space: nowrap;
    color: oklch(.372 .044 257.287);
    font-size: 16px;
}

/* form submit button  */
#EntityFormPanel .actions{
  display: flex;
  align-items: center;
  justify-content: center;
}

#EntityFormPanel .actions input.submit-btn{
  color: var(--pp-color-white);
  font-weight: 500;
  font-size: 14px;
  background-color: oklch(.577 .245 27.325) !important;
  padding: 24px 48px !important;
  line-height: 0 !important;
  border: none !important;
  border-radius: 25px !important;
  /* max-width: 203px; */
  width: auto;
}

/* form note */
.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-note p{
  margin: 16px 0 0 0;
  font-size: 14px;
  color:oklch(.554 .046 257.417);
}

/* registration content */
.registration-content{
  display: block;
  align-items: start;
  justify-content: center;
  margin-top: 64px;
  padding: 0;
}

.registration-content p{
  margin-bottom: 0;
}

.registration-content > div {
  text-align: center;
  padding: 24px;
}

.registration-content .icon-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.registration-content .title{
  font-size: 16px;
  margin: 0 0 8px 0;
  color: oklch(.279 .041 260.031);
}

.registration-content .description{
  font-size: 14px;
  color:oklch(.446 .043 257.281);
}

/* stepper part */
/* ===== STEPPER CONTAINER ===== */
.custom-stepper-wrapper {
    width: 100%;
    max-width: 624px;
    margin: 0 auto 40px;
}

.stepper-progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stepper-progress-text {
    font-size: 14px;
    color: oklch(.446 .043 257.281);
    font-weight: 400;
}

.stepper-completion {
    font-size: 14px;
    color: oklch(.446 .043 257.281);
    font-weight: 400;
}

/* Progress Bar */
.stepper-progress-bar {
    width: 100%;
    height: 8px;
    background: oklab(0.107362 0.00829332 -0.0438692 / 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

.stepper-progress-fill {
    height: 100%;
    background: #030213;
    transition: width 0.4s ease;
    border-radius: 10px;
}

/* ===== STEPPER STYLES ===== */
.stepper-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.stepper-step {
    display: flex;
    align-items: center;
    flex-direction: row; /* KEEP TEXT HORIZONTAL */
    gap: 10px;
    position: relative;
}

.stepper-step:first-of-type {
    justify-content: flex-start;
}

.stepper-step:last-of-type {
    justify-content: flex-end;
}

/* Step Number Circle */
.stepper-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: oklch(.929 .013 255.508);
    color: oklch(.704 .04 256.788);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Active State */
.stepper-step.active .stepper-step-number {
    background: oklch(.637 .237 25.331);
    color: white;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

/* Completed State */
.stepper-step.completed .stepper-step-number {
    background: oklch(.637 .237 25.331);
    color: white;
    font-size: 0;
}

.stepper-step.completed .stepper-step-number::after {
    /* content: '✓';
    font-size: 14px; */
    content: '';
    background-image: url('https://cdn.mediavalet.com/aunsw/musictribe/TU3f9RCLQ0ugjFoFSlz4Fg/P6D84uFkrkyCZkR7-x5Czg/Original/check-icon_circle.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
}

/* Step Label */
.stepper-step-label {
    font-size: 14px;
    font-weight: 400;
    color: oklch(.704 .04 256.788);
    transition: color 0.3s ease;
    white-space: nowrap;
    display: none;
}

.stepper-step.active .stepper-step-label {
    color: oklch(.279 .041 260.031);
    font-weight: 400;
}

.stepper-step.completed .stepper-step-label {
    color: oklch(.279 .041 260.031);
}

/* Connecting Line */
.stepper-line {
    height: 2px;
    background: oklch(.929 .013 255.508);
    min-width: 110px;
    margin: 0 10px;
    transition: background 0.3s ease;
}

/* .stepper-step.completed .stepper-line {
    background: oklch(.637 .237 25.331);
} */

.stepper-step.active .stepper-line {
    background: oklch(.929 .013 255.508);
}

/* ===== FORM SECTION CONTROL ===== */
/* Hide all fieldsets by default - using multiple selectors */
.form-section-container:has(#mt_first_name) fieldset {
    display: none !important;
}

.form-section-container:has(#mt_first_name) fieldset.active-section {
    display: block !important;
}


/* ===== CUSTOM BUTTONS ===== */
.custom-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 624px;
}

.custom-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-btn-back {
    background: var(--pp-color-white);
    color: oklch(.372 .044 257.287);
    font-size: 14px;
    border: 1px solid oklch(.869 .022 252.894);
}

.custom-btn-back:hover {
    background: oklch(.984 .003 247.858);
    color: #030213;
}

.custom-btn-back:disabled {
    opacity: 0;
    /* cursor: not-allowed; */
}

.custom-btn-next {
    background: oklch(.577 .245 27.325);
    color: white;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.custom-btn-next:hover {
    background: oklch(.505 .213 27.518);
}

.custom-btn-submit {
    background: oklch(.577 .245 27.325);
    color: white;
    display: none;
}

.custom-btn-submit:hover {
    background: oklch(.505 .213 27.518);
}

/* validation before proceeding to next section */
/* Validation error styling */
.validation-error {
    border: 2px solid #e63946 !important;
    background-color: #fff5f5 !important;
}

.validation-message {
    color: #e63946;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.validation-message.show {
    display: block;
}

.validation-summary {
    max-width: 624px;
    width: 100%;
    border-radius: 20px !important;
    color: var(--pp-color-gray-900);
    margin-bottom: 25px;
    padding: 25px !important;
    font-size: 14px;
    font-weight: 400;
    border: none !important;
    background-color: rgba(220, 53, 69, 0.1);
    display: none;
}

.validation-summary h3{
    font-size: 20px;
    margin: 0;
}

.validation-summary.show {
    display: block;
}

.validation-summary ul {
    margin: 10px 0 0 0;
    padding-left: 5px;
    list-style-type: none;
}

.validation-summary li {
    color: #175f96 !important;
    margin-bottom: 5px;
}

/* Hide original submit button */
.form-section:has(.registration-form) .actions {
    display: none !important;
}

/* File upload section */
.file-cell {
    margin-top: 20px;
}

/* ===== RESPONSIVE ===== */
/* media query */
@media (min-width: 768px) {
  /* first name field */
  #EntityFormPanel table td:has(input[id='mt_requestor_name']), #EntityFormPanel table td:has(input[id='mt_first_name']), #EntityFormPanel table td:has(input[id='mt_pr_phonenumber']), #EntityFormPanel table td:has(input[id='mt_date_of_purchase_datepicker_description']){
    width: 50%;
  }

  .registration-content {
    padding: 0 190px;
    display: flex; 
  }

  /* stepper area */
  .stepper-step-label {
    display: block;
}

  .stepper-step {
      justify-content: center;
  }

  .custom-form-actions {
      padding: 0;
  }
}




/* ========== UTILITIES ========== */
/*!
 * Utility Classes
 * Purpose: Helper classes for common styling needs
 */

/* ========== SPACING ========== */
.pp-mt-sm { margin-top: var(--pp-spacing-sm) !important; }
.pp-mt-md { margin-top: var(--pp-spacing-md) !important; }
.pp-mt-lg { margin-top: var(--pp-spacing-lg) !important; }

.pp-mb-sm { margin-bottom: var(--pp-spacing-sm) !important; }
.pp-mb-md { margin-bottom: var(--pp-spacing-md) !important; }
.pp-mb-lg { margin-bottom: var(--pp-spacing-lg) !important; }

.pp-p-md { padding: var(--pp-spacing-md) !important; }
.pp-p-lg { padding: var(--pp-spacing-lg) !important; }

/* ========== TEXT ========== */
.pp-text-primary { color: var(--pp-color-primary) !important; }
.pp-text-muted { color: var(--pp-color-gray-600) !important; }
.pp-text-bold { font-weight: 700 !important; }
.pp-text-center { text-align: center !important; }

/* ========== BACKGROUNDS ========== */
.pp-bg-gray-light { background-color: var(--pp-color-gray-100) !important; }
.pp-bg-white { background-color: var(--pp-color-white) !important; }

/* ========== SHADOWS ========== */
.pp-shadow-sm { box-shadow: var(--pp-shadow-sm) !important; }
.pp-shadow-md { box-shadow: var(--pp-shadow-md) !important; }

/* ========== DISPLAY ========== */
.pp-flex { display: flex !important; }
.pp-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ========== HOVER EFFECTS ========== */
.pp-hover-lift {
  transition: transform var(--pp-transition-base);
}

.pp-hover-lift:hover {
  transform: translateY(-4px);
}

/* -------------------------------------- */

/* custom */
.text-danger {
  color: var(--pp-color-danger);
}

/* ========== RESPONSIVE ========== */
/*!
 * Responsive Overrides
 * Purpose: Mobile-first responsive adjustments
 */

/* ========== MOBILE (up to 576px) ========== */
@media (max-width: 575px) {
  .pp-hero {
    padding: var(--pp-spacing-xl) var(--pp-spacing-md);
  }
  
  .pp-hero__title {
    font-size: 2rem;
  }
  
  .pp-card {
    margin-bottom: var(--pp-spacing-md);
  }
  
  /* Hide on mobile */
  .pp-mobile-hide {
    display: none !important;
  }
}

/* ========== TABLET AND UP (768px+) ========== */
@media (min-width: 768px) {
  /* Show on desktop only */
  .pp-desktop-only {
    display: block !important;
  }
  
  .pp-mobile-only {
    display: none !important;
  }

    .banner .banner_content .title {
        font-size: 54px;
        margin-bottom: 20px;
    }

    .banner .banner_content .description {
        font-size: 24px;
        margin-bottom: 25px;
}
}