:root {
	/* ===================================================
     Base Colors
  =================================================== */
	--color-primary: #1e97e0;
	--color-dark: #191919;
	--color-light: #ffffff;
	/* Secondary Supporting */
	--color-secondary: #2a425d;

	/* Semantic Tokens */
	--color-bg: var(--color-light);
	--color-text: var(--color-dark);
	--color-accent: var(--color-primary);
	--color-border: var(--gray-300);
	--color-muted: var(--gray-500);

	/* ===================================================
     Blue Tints & Shades (Primary)
  =================================================== */
	--blue-50: #e1ebf1;
	--blue-100: #d3e4ef;
	--blue-200: #c5dded;
	--blue-300: #b6d4ea;
	--blue-400: #a8cee9;
	--blue-500: #99c6e6;
	--blue-600: #8dc0e3;
	--blue-700: #7fb7e1;
	--blue-800: #71afdf;
	--blue-900: #64a9de;

	/* ===================================================
     Grayscale (Based on #181818)
  =================================================== */
	--gray-50: #d7dcdf;
	--gray-100: #c2c5c9;
	--gray-200: #adb0b4;
	--gray-300: #979b9e;
	--gray-400: #838587;
	--gray-500: #6c6f70;
	--gray-600: #575a5b;
	--gray-700: #434445;
	--gray-800: #2d2e2e;
	--gray-900: #181818;

	/* ===================================================
     Secondary Color Shades (#2E415C)
  =================================================== */
	--secondary-50: #64A9DE;
	--secondary-100: #5F9ED0;
	--secondary-200: #5792C1;
	--secondary-300: #5286B3;
	--secondary-400: #4C7AA3;
	--secondary-500: #456F95;
	--secondary-600: #406386;
	--secondary-700: #3A5778;
	--secondary-800: #344D6A;
	--secondary-900: #2E415C;
}


/* ==========================================================================
   BEM CSS Scaffold
   - All classes follow the Block Element Modifier (BEM) naming convention.
   ========================================================================== */

/* ===== Base Styles ===== */
.p-btn {
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 400;
  padding: 6px 20px;
  border-radius: 50px;
  border: 3px solid var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  text-decoration: none;
  background-color: transparent;
  line-height: 1.5; 
  letter-spacing: 1px;
  white-space: nowrap;
  /* Ensure completely flat appearance - no shadows or effects */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none;
  filter: none;
  background-image: none;
}

.p-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== Elements ===== */
.p-btn__icon {
  display: inline-flex;
  margin-right: 0.5rem;
}

.p-btn__label {
  display: inline-block;
}

/* ===== Modifiers ===== */

/* Primary */
.p-btn--primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.p-btn--primary:hover:not(:disabled) {
  background-color: rgba(43, 66, 93, 1);
  color: #fff;
  border: 3px solid rgba(43, 66, 93, 1);
}

/* Secondary */
.p-btn--secondary {
  color: #fff;
  background-color: #6C757D;   
  border: 3px solid #6C757D;
}

.p-btn--secondary:hover:not(:disabled) {
  background-color: #5a6268;   /* darker gray on hover */
  color: #fff;
  border: 3px solid #5a6268;
}

/* Button Danger */
.p-btn--danger {
  color: #fff;
  background-color: #dc3545; /* Bootstrap's red */
  border: 3px solid #dc3545;
}

.p-btn--danger:hover:not(:disabled) {
  background-color: #c82333; /* darker red on hover */
  color: #fff;
  border: 3px solid #c82333;
}

/* Outline - Reference: 3px solid border, completely flat */
.p-btn.p-btn--outline-primary,
.p-btn--outline-primary {
  color: #2b425d;
  border: 3px solid #2b425d !important;
  background-color: transparent;
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
  -webkit-box-shadow: none !important;
  background-image: none;
}

.p-btn.p-btn--outline-primary:hover:not(:disabled),
.p-btn--outline-primary:hover:not(:disabled),
.p-btn.p-btn--outline-primary:focus,
.p-btn--outline-primary:focus,
.p-btn.p-btn--outline-primary:active,
.p-btn--outline-primary:active {
  color: #fff;
  background-color: #2b425d;
  border: 3px solid #2b425d !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none;
}

.p-btn--outline-secondary {
  color: rgb(10, 10, 10);
  border: 1px solid rgb(224, 224, 224);
  background-color: transparent;
  margin:0 10px 10px 0;
  font-family: 'Open Sans', sans-serif;
}

.p-btn.p-btn--outline-secondary:active,
.p-btn.p-btn--outline-secondary.active,
.p-btn--outline-secondary.active,
.p-btn--outline-secondary:hover:not(:disabled) {
  color: #fff;
  background-color: #1e97e0;
  border: 1px solid #1e97e0;  
}

/* Large button or group */
.p-btn--lg {
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 25px; 
}

/* Small button or group */
.p-btn--sm {
  padding: 6px 16px;
  font-size: 0.875rem;
  border-radius: 25px; 
}

.p-btn-inline {
  display: inline-flex;      
  gap: 25px;                 
  align-items: center;      
}

/* Square modifier */
.p-btn--sqr {
  border-radius: 8px; /* standard square-ish corners */
}

/* On small screens (mobile) */
@media (max-width: 576px) {
  .p-btn-inline {
    flex-direction: column;   /* stack buttons vertically */
    gap: 15px;                /* smaller gap for vertical */
    width: 100%;              /* optional: make them full-width */
    justify-content: center;  /* center buttons horizontally */
  }
  
  /* Reduce button border thickness on mobile (2px instead of 3px) */
  .p-btn,
  .p-btn--primary:hover:not(:disabled),
  .p-btn--secondary,
  .p-btn--secondary:hover:not(:disabled),
  .p-btn--danger,
  .p-btn--danger:hover:not(:disabled),
  .p-btn--outline-secondary,
  .p-btn--outline-secondary:hover:not(:disabled) {
    border-width: 1px;
  }
  
  .p-btn.p-btn--outline-primary,
  .p-btn--outline-primary,
  .p-btn.p-btn--outline-primary:hover:not(:disabled),
  .p-btn--outline-primary:hover:not(:disabled),
  .p-btn.p-btn--outline-primary:focus,
  .p-btn--outline-primary:focus,
  .p-btn.p-btn--outline-primary:active,
  .p-btn--outline-primary:active {
    border-width: 2px !important;
  }
  
  /* Ensure primary buttons maintain white color on mobile */
  .p-btn--primary {
    color: #fff !important;
  }
  
  /* Make large buttons full-width on mobile */
  .p-btn--lg {
    /* width: 100%; */
  }
}
.platpay__wrapper {
	max-width: 1600px;
	padding-inline: 10px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}


/* Utility: Reusable icon sizes */
.p-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.p-icon--sm {
  font-size: 0.875rem; 
}

.p-icon--md {
  font-size: 1.25rem; 
}

.p-icon--lg {
  font-size: 2.5rem; 
}

.p-icon--xl {
  font-size: 3rem; 
}

	/* ===================================================
     CARDS
  =================================================== */

/* Grid wrapper for p-cards */
.p-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* or space-between/space-evenly */
  margin: 2rem 0;
}

/* Row layout */
.p-card-grid--row > .p-card {
  flex: 1 1;
  max-width: 250px;
}
.top-offset {
  padding-top: 70px;
}