.satimpay-error {
    font-size: 130% !important;
    color: red !important;
    font-weight: 900 !important;
}

.satimpay-error img {
    height: 50px !important;
    width: auto !important;
    display: inline-block !important;
    top: -12px !important;
    right: 0 !important;
}

.payment_method_satimpay img {
    width: 35px !important;
}

.satimpay-pdf a {
	color: white !important;
	margin: 2px 10px 20px 0 !important;
	padding: 10px 20px !important;
	background-color:#111111 !important;
}

.woocommerce-thankyou-order-received,
.woocommerce-thankyou-order-details .order {
	display:none !important;
}

/* Woo */

.woocommerce-order-details, .woocommerce-customer-details {
 border-radius: 4px !important;
 background-color: white !important;
 padding: 20px;
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 width: 48% !important;
 float: left;
 min-height: 520px;
}

.woocommerce-customer-details {
	margin-left: 40px;
}

.woocommerce-order-details *, .woocommerce-customer-details *{
	color: #4a5568;
}

.woocommerce-order-details h2, .woocommerce-customer-details h2 {
color: #2d3748;
font-size: 2rem;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
position: relative;
padding-bottom: 15px;
}

.woocommerce-order-details h2::after, .woocommerce-customer-details h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}

.woocommerce-table.woocommerce-table--order-details.shop_table.order_details, address {
	border: none !important;
    border: 2px solid #1d4ed8 !important;
    border-radius: 4px !important;
}

.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
	display: none;
}

a.woocommerce-button.button.invoice order-actions-button {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

/* Thank you */

.main-container {
max-width: 1200px;
margin-bottom: 60px;
display: flex;
gap: 30px;
align-items: flex-start;
}

.tm5-check-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  padding: 20px;
}

.tm5-check-icon {
  width: 72px;
  height: 72px;
  stroke: #10b981;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm5-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: tm5-draw-circle 0.6s ease-out forwards;
}

.tm5-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: tm5-draw-check 0.4s ease-out forwards 0.6s;
}

.tm5-check-text {
  margin-top: 10px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #10b981;
  opacity: 0;
  animation: tm5-fade-in-text 0.3s ease 1.1s forwards;
}

@keyframes tm5-draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes tm5-draw-check {
  to { stroke-dashoffset: 0; }
}

@keyframes tm5-fade-in-text {
  to { opacity: 1; }
}


/* Styles pour la section facture */
#satimpay-succees {
/*flex: 1;*/
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 4px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideUp 0.6s ease-out;
animation-delay: 0.2s;
opacity: 0;
animation-fill-mode: forwards;
}

#satimpay-succees .satimpay-pdf h2 {
color: #2d3748;
font-size: 2rem;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
position: relative;
padding-bottom: 15px;
}

#satimpay-succees .satimpay-pdf h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 2px;
}

#satimpay-succees .satimpay-pdf p {
align-items: center;
color: #4a5568;
line-height: 1.6;
margin-bottom: 20px;
font-size: 1rem;
}

#satimpay-succees .satimpay-pdf a {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
text-decoration: none;
padding: 12px 25px;
border-radius: 6px;
font-weight: 600;
margin: 10px 10px 10px 0;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

#satimpay-succees .satimpay-pdf a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.7);
}

#satimpay-succees .satimpay-pdf input[type="email"] {
width: 100%;
padding: 15px;
margin: 0;
border: 2px solid #e2e8f0;
border-radius: 4px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f8fafc;
}

#satimpay-succees .satimpay-pdf input[type="email"]:focus {
outline: none;
border-color: #1d4ed8;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
background: white;
}

#satimpay-succees .satimpay-pdf #satimpay-succees-send-pdf {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

#satimpay-succees .satimpay-pdf #satimpay-succees-send-pdf:hover {
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.7);
}

/* Styles pour la section détails transaction */
#satimpay-header {
/*flex: 1;*/
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 4px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideUp 0.6s ease-out;
opacity: 0;
animation-fill-mode: forwards;
}

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

#satimpay-header h2 {
color: #2d3748;
font-size: 2rem;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
position: relative;
padding-bottom: 15px;
}

#satimpay-header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}

#satimpay-header .transaction-details {
display: grid;
gap: 15px;
margin-bottom: 40px;
}

/* Nouveau design pour les balises p avec strong */
#satimpay-header > p {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 4px;
padding: 18px 25px;
margin-bottom: 15px;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden;
}

#satimpay-header > p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(to bottom, #667eea, #764ba2);
transform: scaleY(0);
transition: transform 0.3s ease;
transform-origin: bottom;
}

#satimpay-header > p:hover {

box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
border-color: #667eea;
background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

#satimpay-header > p:hover::before {
transform: scaleY(1);
}

#satimpay-header > p strong {
color: #1e293b;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
margin-right: 15px;
position: relative;
min-width: 200px;
}

#satimpay-header > p strong::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #667eea;
border-radius: 50%;
opacity: 0.6;
}

/* Style spécial pour la valeur après le strong */
#satimpay-header > p {
color: #475569;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
}

/* Anciens styles de detail-item - on les garde au cas où */
#satimpay-header .detail-item {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 20px;
border-radius: 12px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

#satimpay-header .detail-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}

#satimpay-header .detail-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#satimpay-header .detail-item:hover::before {
opacity: 1;
}

#satimpay-header .detail-item strong {
color: #2d3748;
font-weight: 600;
font-size: 0.95rem;
display: block;
margin-bottom: 8px;
position: relative;
z-index: 1;
}

#satimpay-header .detail-item .value {
color: #4a5568;
font-size: 1.1rem;
font-weight: 500;
position: relative;
z-index: 1;
}

#satimpay-header .status-success {
color: #38a169 !important;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}

#satimpay-header .status-success::before {
content: '✓';
background: #38a169;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}

#satimpay-header .contact-info {
background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
padding: 25px;
border-radius: 12px;
border-left: 4px solid #e53e3e;
margin-bottom: 30px;
text-align: center;
}

#satimpay-header .contact-info strong {
color: #2d3748;
display: block;
margin-bottom: 10px;
font-size: 1rem;
}

#satimpay-header .contact-info a {
color: #e53e3e;
text-decoration: none;
font-weight: 700;
font-size: 1.3rem;
padding: 10px 20px;
background: white;
border-radius: 25px;
display: inline-block;
margin-top: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(229, 62, 62, 0.2);
}

#satimpay-header .contact-info a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(229, 62, 62, 0.3);
}

#satimpay-header .logos-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 30px 0;
padding: 20px;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border-radius: 12px;
}

#satimpay-header .logos-container img {
width: 70px;
height: auto;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

#satimpay-header .logos-container img:hover {
transform: scale(1.1);
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

#satimpay-header .summary-section h2 {
margin-top: 40px;
color: #2d3748;
border-top: 2px solid #e2e8f0;
padding-top: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
.main-container {
flex-direction: column;
gap: 20px;
padding: 10px;
}

#satimpay-succees,
#satimpay-header {
padding: 25px;
margin: 0;
}

#satimpay-succees .satimpay-pdf h2,
#satimpay-header h2 {
font-size: 1.5rem;
}

#satimpay-header .detail-item {
padding: 15px;
}

#satimpay-header .logos-container {
flex-direction: column;
gap: 15px;
}

#satimpay-succees .satimpay-pdf a {
display: block;
text-align: center;
margin: 10px 0;
}
}