/* Colors: #C09336 (gold), #EFC360 (light gold), #EFE69B (pale), #141414 (black), #FFFFFF (white) */
/* Fonts: Ragnaroo for titles (fallback cursive), Lato for text */

body {
    font-family: 'Lato', sans-serif;
    color: #141414;
    background-color: #FFFFFF;
}

.rj-title {
    font-family: 'Ragnaroo', cursive; /* Assume loaded; fallback cursive */
    color: #C09336;
    font-size: 24px;
}

.rj-radio-group {
    display: flex;
    gap: 10px;
    text-align: center;
}

.rj-radio-group label {
    background-color: #EFE69B;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, border 0.3s, box-shadow 0.3s;
    border: 1px solid transparent;
    position: relative;
    font-size: 1rem;
}

.rj-radio-group input[type="radio"] {
    display: none;
}

.rj-radio-group label.active {
    background-color: #EFC360;
    color: #141414;
    border: 1px solid #C09336;
    box-shadow: 0 0 5px rgba(192, 147, 54, 0.5);
}

.rj-radio-group label.active::after {
    content: '\2713'; /* Checkmark */
    position: absolute;
    top: -5px;
    right: -5px;
    background: #C09336;
    color: #FFFFFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.rj-checkboxes label {
    background-color: #EFE69B;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, border 0.3s, box-shadow 0.3s;
    border: 1px solid transparent;
    position: relative;
    font-size: 1rem;
    display: inline-block;
    margin-right: 12px;
}

.rj-checkboxes input[type="checkbox"] {
    display: none;
}

.rj-checkboxes label.checked {
    background-color: #EFC360;
    color: #141414;
    border: 1px solid #C09336;
    box-shadow: 0 0 5px rgba(192, 147, 54, 0.5);
}

.rj-checkboxes label.checked::after {
    content: '\2713'; /* Checkmark */
    position: absolute;
    top: -5px;
    right: -5px;
    background: #C09336;
    color: #FFFFFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.rj-checkboxes label.rj-active {
    background-color: #EFC360;
    color: #141414;
    border: 1px solid #C09336;
    box-shadow: 0 0 5px rgba(192, 147, 54, 0.5);
}

button, 
.rj-button a {
    background-color: #C09336;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
}

.rj-button a:hover { color: #FFF; background-color: #EFC360 !important; }

button:hover {
    background-color: #EFC360;
}

.margin-top-sm { margin-top: 2.25rem !important; }

form label {
    display: block;
    margin: 10px 0;
}

form input, form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #EFC360;
    border-radius: 5px;
}

.article-field {
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: #fafafa;
}

#total-articles {
    font-weight: bold;
    margin-top: 10px;
}

.rj-form {
    padding: 50px;
    background-color: #F3F4F6;
    border-radius: 70px;
}

#rj-demande-form input[type="text"], 
#rj-demande-form input[type="password"], 
#rj-demande-form input[type="email"], 
#rj-demande-form input[type="tel"], 
#rj-demande-form input[type="url"], 
#rj-demande-form textarea {
	max-width: 100%;
}

#rj-demande-form input[type="number"] {
    border-radius: 30px;
    height: 60px;
}

#rj-demande-form button, 
.rj-button button[type="submit"], 
.rj-button a {
	color: #FFF;
	border-radius: 30px;
}

#rj-demande-form button[disabled] {
    opacity: 0.5;
}

#rj-demande-form button[disabled]:hover, 
.rj-button a:hover {
    background-color: #C09336;
}

.rj-user-form .rj-group {
    display: flex;
    gap: 20px;
}

.rj-user-form .rj-group label {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.rj-user-form .rj-group label input {
    max-width: 100%;
}

.rj-user-form .rj-group .full-width {
    width: 100%;
}

.rj-button {
    margin-top: 20px;
}

.rj-user-form {
    background: #fafafa;
    border: 1px solid #EFE69B;
    padding: 10px;
    margin-bottom: 20px;
}

#articles-container .article-field, .rj-user-form {
    border-radius: 20px;
}

/* RJ Group plugin — styles (do not change global theme) */

.rj-form { max-width: 1000px; margin: 0 auto; font-family: inherit; }
.rj-title { font-size: 1.1rem; margin-top: 1rem; margin-bottom: .5rem; }
.rj-radio-group label { display: inline-flex; margin-right: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; width: 25%; justify-content: center; align-items: center; }
.rj-radio-group label.active { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); }
.rj-radio-group input[type="radio"], .rj-checkboxes input[type="checkbox"] { margin-right: 6px; vertical-align: middle; }

/* Checkboxes group */
.rj-checkboxes label { display: inline-flex; align-items: center; margin-right: 10px; font-size: 0.9rem; }
.rj-checkboxes label.checked { background: rgba(0,0,0,0.03); border-radius: 4px; padding: 4px 6px; }

/* Form layout */
.rj-user-form .rj-group { display:flex; gap: 12px; flex-wrap:wrap; }
.rj-user-form label { display:block; flex: 1 1 250px; }
.rj-user-form input[type="text"], .rj-user-form input[type="email"], .rj-user-form input[type="tel"], .rj-user-form input[type="number"], .rj-user-form textarea, .rj-user-form input[type="url"] {
    width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px;
}

.rj-button { margin-top: 16px; }
.rj-button button, .rj-button a { cursor: pointer; border-radius: 30px; margin-top: 0; }

.rj-recap { min-width: 1200px; }
.rj-recap table { width:100%; margin-top: 12px; }

/* Small responsive tweaks */
@media (max-width:600px) {
    .rj-user-form .rj-group { flex-direction: column; }
}

/* New styles for added elements */
.rj-remove-btn {
    background-color: #eb3333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.rj-remove-btn:hover {
    background-color: #eb3333;
}

.rj-fees-note {
    border: 1px solid;
    font-weight: bold;
    color: #C09336;
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
}

.rj-preview-btn {
    background-color: #EFC360;
    cursor: pointer;
    margin-top: 20px;
}

.rj-preview-btn:hover {
    background-color: #C09336;
    color: #FFFFFF;
}

.rj-success-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 1000;
    text-align: center;
    border-radius: 10px;
}

.rj-success-popup button {
    background-color: #C09336;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.rj-success-popup button:hover {
    background-color: #EFC360;
}

.rj-title ~ p {
    font-weight: 600;
}

.rj-thankyou h2 {
    color: #C09336; 
    font-weight: 900;
}

.rj-thankyou p {
    font-size: 1.55rem;
    margin-bottom: 0;
}

/* Style for currency select in article fields */
#articles-container .article-currency,.rj-form .payer-currency {
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 2px;
    padding-left: 14px;
    border: 1px solid #eee;
    border-radius: 3px;
    width: 80px;
    font-size: 1.25rem;
    color: #141414;
    background-color: #ede599;
}

small {
    color: #666;
    font-size: 0.9em;
}

.invoice-preview .totals {
    text-align: right;
    font-size: 0.9rem;
}
.invoice-preview .totals > p:nth-child(1) {
    font-size: 1rem;
    font-weight: 600;
}
.rj-recap #download-devis {
    background-color: #141414;
    color: #FFF;
    border: 1px solid;
    border-radius: 30px;
}
.rj-recap #download-devis:hover {
    background-color: #FFF;
    color: #141414;
}
.rj-recap #payment-section {
    margin-bottom: 40px;
}
.rj-recap .rj-button {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 30px;
}
select[name="location"] {
    border-radius: 8px;
}

/* Styles pour Flatpickr (calendrier 7P) */
.flatpickr-calendar {
    background: #FFFFFF;
    border: 1px solid #EFC360;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(192, 147, 54, 0.1);
    font-family: 'Lato', sans-serif;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: #141414;
    background: #EFE69B;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
    background: #C09336;
    border-color: #C09336;
    color: #FFFFFF;
}

.flatpickr-calendar .flatpickr-day:hover {
    background: #EFC360;
    color: #141414;
}

.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    color: #C09336;
    fill: #C09336;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: #EFC360;
}

/* Styles pour le bouton planning 7P */
#rj-7p-plan-btn button {
    background-color: #C09336;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
}

#rj-7p-plan-btn button:hover {
    background-color: #EFC360;
}

/* Styles pour le tableau de conversion des taux */
.rj-currency-converter .rj-rates-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fafafa;
    border-radius: 10px;
    overflow: hidden;
}

.rj-currency-converter .rj-rates-table th,
.rj-currency-converter .rj-rates-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #EFC360;
}

.rj-currency-converter .rj-rates-table th {
    background-color: #C09336;
    color: #FFFFFF;
    font-weight: bold;
}

.rj-currency-converter .rj-rates-table tr:hover {
    background-color: #EFE69B;
}

/* Input pour le datepicker */
#rj-7p-datepicker {
    width: 100%;
    padding: 10px;
    border: 1px solid #EFC360;
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: 'Lato', sans-serif;
}

.rj-currency-converter p {
    text-align: center;
    color: #FFF;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0;
}

#rj-currency-info-devise {
    font-size: 2rem;
    background-color: #C09336;
    color: #FFF;
    text-align: center;
    border-radius: 30px;
}

/* Ajouter ces styles pour intégrer le datepicker dans le formulaire combiné (pas de changements majeurs sinon) */
#rj-7p-form #rj-7p-datepicker {
    width: 100%;
    padding: 10px;
    border: 1px solid #EFC360;
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: 'Lato', sans-serif;
}

#rj-7p-form #rj-7p-message {
    text-align: center;
    color: #C09336;
    margin-top: 10px;
}

#rj-7p-form, 
#rj-flash-form, 
#rj-student-form, 
#rj-anticip-form {
    max-width: 100% !important;
}

.gf-amount-container {
    display: flex;
    max-width: 400px;
}
.gf-amount-container .gf-devise {
    width: 70px;
    background-color: #e9c25d;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    margin-left: -4px;
    border-radius: 0 4px 4px 0;
}
.gf-amount-container .gf-currencies {
    width: auto;
}

.rj-fieldset {
    border-width: 2px;
    border-color: #bb9233;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 20px;
}
.rj-fieldset legend {
    color: #444444;
}
.rj-block {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
}
.rj-block li {
    font-weight: 400;
    padding-left: 24px;
    position: relative;
}
.rj-block li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #bb9233;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

@media (max-width: 600px) {
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:nth-child(7) {
		top: 140px !important;
	}
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:nth-child(8) {
		top: 390px !important;
	}
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:nth-child(10) {
		top: 430px !important;
        left: -183px !important;
	}
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:last-child {
		top: 355px !important;
		left: 30px !important;
	}
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:nth-child(8) button {
		width: 185px !important;
	}
	#depicter-1-section-1 .depicter-layers-fold > .depicter-pos-absolute:nth-child(10) img {
		max-height: 350px;
    	object-fit: contain;
	}
	#depicter-1-section-1 h1 {
		font-size: 26px;
		line-height: normal;
	}
	.rj-radio-group {
		flex-direction: column;
	}
	.rj-radio-group label {
		width: 100%;
	}
	.rj-user-form .rj-group label {
		width: 100% !important;
		flex: 1;
	}
    .rj-form {
        padding: 30px;
    }
	.rj-form .rj-title, 
	.rj-user-form .rj-title {
		font-size: 22px;
	}
	.rj-form select {
		width: 100%;
	}
	.rj-recap {
		min-width: auto;
	}
	.invoice-header h2 {
		font-size: 20px !important;
	}
}

.rj-dropzone.drag-over {
    background-color: #EFC360;
    border-color: #C09336;
}

.rj-info-note {
    color: #C09336;
    margin-bottom: 0;
}
#rj-warning-amount {
    color: #c52f2f;
}

.rj-payment-options {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff9c3;
    border-radius: 10px;
}
.rj-payment-options label {
    display: block;
    margin-bottom: 10px;
}
.rj-paypal-note, 
.rj-mobile-note {
    background-color: #EFC360;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
}
.rj-select {
    width: 100%;
    border-radius: 5px !important;
}
#sender-extra-7p, 
#recipient-extra-7p {
    flex-direction: column;
}
.rj-bank > label:not(:last-child) {
    width: 30%;
    flex: 1 1 20%;
}
.rj-bank > label:last-child {
    width: 10%;
    flex: 1 1 5%;
}
.rj-dropzone {
    border: 2px dashed #C09336; 
    padding: 20px; 
    text-align: center; 
    cursor: pointer;
}
.rj-payment-note p, 
.rj-reception-note p {
    margin-bottom: 10px;
    font-weight: 600;
    background-color: #ad0606;
    color: #FFF;
    padding: 8px 16px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 5px;
}
#recipient-extra .rj-group.rj-bank {
    width: 100%;
}
.rj-row {
    display: flex;
    flex-wrap: wrap;
}
.rj-row .phone-code-select {
    width: 45%;
    padding: 0;
}
.rj-row .phone-number {
    width: 55% !important;
}
.rj-warning-address {
    display: block;
    width: 100%;
}
.rj-group > label > select[name$="_mobile_operator"] {
    padding: 4px;
    border-radius: 4px;
}
.rj-inline {
    display: flex;
    gap: 10px;
    width: 50%;
}
.rj-offer-info p, 
.rj-currency-converter-block {
    font-size: 26px;
    text-align: center !important;
    background-color: #bb9233;
    color: #FFFFFF;
    padding: 5px 25px;
    border-radius: 10px;
}
.rj-currency-converter-block {
    background-color: #141414;
    margin-top: 5px;
}
.rj-no-mb { margin-bottom: 0 !important; }
.rj-link {
    color: #C09336 !important;
    text-decoration: underline !important;
}
.rj-country {
    padding: 5px !important;
    width: 100%;
    border-radius: 5px !important;
}
.rj-inline-row {
    display: inline-flex;
    align-items: center;
}
.rj-inline-row .rj-span {
    border: 1px solid #AAAAAA50;
    border-radius: 4px;
    padding: 4px;
}
.rj-label input {
    display: inline-block;
    width: 15px;
}
input[name="payment_reference"] {
    padding: 5px;
}
.rj-curr {
    background-color: #ede599;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #141414;
}
.rj-warning-info, 
.rj-simple-warning-info {
    color: #ff1e1e;
    font-weight: 600;
}
.rj-warning-info {
    font-size: 1.25rem;
}
.rj-offer-info-recep p, 
.rj-offer-text p {
    font-size: 20px;
    text-align: center;
    margin-bottom: 0;
}
.rj-flex-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}
.rj-recap-table {
    width: 100%;
}
.rj-vertical-flex {
    justify-content: center;
    position: relative;
    background-color: #0f3a56;
}
.rj-vertical-flex h3 {
    z-index: 1;
    color: #FFF;
}
.rj-vertical-flex::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #C09336;
    border-radius: 16px;
    opacity: 0;
    transition: all .4s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.rj-vertical-flex:hover:before {
    opacity: 1;
    transition: all .4s ease;
}
.rj-d-none { display: none !important; }
#rj-student-form .gf-devise select {
    padding: 5px 30px 3px 10px;
    border: none;
    background-color: transparent;
    width: auto;
    margin: 0;
    font-size: 1em;
}
#rj-student-form #amount-mga-student + .gf-devise {
    padding: 5px 38px;
}
.rj-flex-column-inverse {
    display: flex;
    flex-direction: column-reverse;
}
.rj-col-2 {
    display: flex;
}
.rj-col-2 > label {
    width: 30%;
} 
.rj-col-2 > div {
    width: 70%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rj-infos-dispo span {
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 8px;
    border: none;
    color: #FFFFFF;
}
.rj-infos-dispo-7p span {
    background-color: #C09336;
}
.rj-infos-dispo-mlam span {
    background-color: #6d0d0d;
}
#offre-choice {
    flex-direction: column;
}
.rj-title-h1 {
    font-family: "Ragnaroo", Sans-serif;
    font-size: 40px;
    font-weight: 600;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    color: var(--e-global-color-primary);
    margin-bottom: 1rem;
    text-align: center;
}
.info-anticip {
    background-color: var(--e-global-color-f75e16a);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
}
.info-anticip p {
    text-align: center;
    margin-bottom: 0;
    font-size: 20px;
}
p#rj-info-amount-subtitle {
    background-color: #f7bb2e;
    color: #141414;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 15px;
}
div#rj-info-amount-text {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    background-color: #3f3d3d;
}
div#rj-info-amount-text p {
    color: #FFFFFF !important;
}
#fixed-operation-display label {
    flex-direction: column;
}
.rj-subtitle { font-weight: 600; }
#rj-payment-date-info {
    margin: 10px 0;
    font-weight: 600;
    background-color: #ad0606;
    color: #FFF;
    padding: 8px 16px;
    border-radius: 10px;
    display: inline-block;
}
.rj-reception-note p:empty {
  display: none;
}
.rj-flex-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}
@media (min-width: 1240px) {
    body .rj-group-block > .rj-full-inline {
        width: 100% !important;
    }
    .rj-full-inline .rj-address-lb {
        width: 50% !important;
    }
    .rj-group-block > label {
        width: 30% !important;
    }
    .rj-group-block > .rj-inline {
        width: 70% !important;
    }
    .rj-group-block > .rj-inline > label:first-child {
        flex: 1 1 420px;
    }
}
@media (max-width: 620px) {
    .rj-flex-row, .rj-row, .rj-inline {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .rj-row .phone-number, 
    .rj-row .phone-code-select {
        width: 100% !important;
    }
    .rj-flex-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }
    .rj-currency-converter p {
        font-size: 2rem;
    }
    .rj-recap-table { overflow-x: scroll; }
    .rj-col-2 { flex-direction: column; }
    .rj-col-2 > div {
        align-items: start;
        width: 100%;
        flex-direction: column;
    }
    .rj-col-2 > label, .rj-infos-dispo span { width: 100%; }
    #taux-info { font-size: 2.08rem; }
}