@charset "UTF-8";
/* CSS Document */

.buttons {
	text-align: center;
}
.buttons .button {
	display: inline-block;
	vertical-align: top;
}

.buttons .button[data-label="registration"] { background-color: #68a3d9; }
.buttons .button[data-label="board-rental"] { background-color: #b69c4b; }


#invitations .title.tilted.framed {
	display: inline-block;
	position: relative;
	border-width: 2px;
	border-style: dashed;
	color: var(--steel);
	background-color: #FFFFFFAA;
	transform:rotate(-4deg);
	padding: 10px 20px;
	font-size: 1.7rem;
	margin: 0 0 0 -20px;
	text-transform: uppercase;
}
#invitations .buttons {}
#invitations .buttons .button {}
#invitations .buttons .button.bs-L {
	font-size: 2rem;
	line-height: 1.2;
	padding: 10px 20px 10px 20px;
}
.buttons.max-width .button {
	width: calc(100% - 60px);
}
.invitation-poster-photo {
	display: block;
	vertical-align: top;
	width: 100%;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
}
.horizontal-rule {
	box-sizing: content-box;
	width: 100%;
	height: 50px;
	text-align: center;
	outline: 1px solid red;
	outline: none;
}
.horizontal-rule:before {
	content:"";
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: calc(100% - 100px);
	height: 1px;
	top: 20px;
	background-color: var(--steel);
}

.event-logo {
	background-image:url("../../images/logo/en/sup2025-full-logo-horizontal-positive.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	margin: 0; padding: 0;
	left: 50%;
	transform:translateX(-50%);
	height: 300px;
}
html[lang="en"] [data-lang="ar"] > h1,
html[lang="en"] [data-lang="ar"] > h2, 
html[lang="en"] [data-lang="ar"] > p {
	display: block;
	direction: rtl; 
	-webkit-direction: rtl;
	text-align: right;
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
	/*unicode-bidi: embed;*/
	/*unicode-bidi: bidi-override;*/
}
html[lang="en"] [data-lang="ar"] > h2 span.fit {
	display: block;
	direction: rtl;
	-webkit-direction: rtl;
	text-align: right;
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.18em;
	line-height: 1.25em;
	/*unicode-bidi: embed;*/
	/*unicode-bidi: bidi-override;*/
}
html[lang="en"] [data-lang="ar"] > p span.fit {
	display: block;
	direction: rtl;
	text-align: right;
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.2em;
	line-height: 1.25em;
	/*unicode-bidi: embed;*/
	/*unicode-bidi: bidi-override;*/
}
html[lang="en"] [data-lang="ar"] small { height: 18px; }

.lang-en {
	/*
  direction: ltr!important;
  display: inline;
  font-family: NunitoSans;
  */
}


ul.actions {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
}
ul.actions > li {
	list-style: none;
	margin: 0; 
	padding: 0 15px;
	display: inline-block;
	vertical-align: bottom;
}
ul.actions > li .buttons {}
ul.actions > li .buttons .button {
	
}

.buttons .button.bt-vip {
	font-size: 1.5rem;
	border-radius: 25px;
	padding: 15px 30px;
	background-color:rgba(18,170,233,1.00);
}

.registration-qr-photo,
.vip-invitation-poster-photo,
.registration-recreation-qr-photo,
.whatsapp-poster-photo {
	position: relative;
	width:  125px;
	height: 168px;
	margin-bottom: 25px;
	background-position: center;
	left: 50%;
	transform:translateX(-50%);
}

.registration-qr-photo             { background-image:url("../../images/page/invitation/registration-site-qr.webp"); }
.registration-recreation-qr-photo  { background-image:url("../../images/page/invitation/registration-recreation-qr.webp?v=2"); }
.vip-invitation-poster-photo       { background-image:url("../../images/page/invitation/invitation-cover.webp"); }
.whatsapp-poster-photo             { background-image:url("../../images/page/invitation/whatsapp-group-chat.webp"); }

.arabic {
	width: 100%;
	display: block;
	background-position: right top;
	background-size: contain;
	margin: 0; padding: 0;
	transform-origin: right top;
	transform:scale(1.3,1);
	outline: 1px solid red;
	outline: none;
}
.arabic[data-id="1"] {
	background-position: center top;
	transform-origin: center top;
}
.arabic > img {
	width: 60%;
	height: auto;
	visibility: hidden;
}

.arabic[data-id="1"]  { }
.arabic[data-id="2"]  { }
.arabic[data-id="3"]  { }
.arabic[data-id="4"]  { }
.arabic[data-id="5"]  { }
.arabic[data-id="6"]  { }
.arabic[data-id="7"]  { }
.arabic[data-id="8"]  { }
.arabic[data-id="9"]  { }
.arabic[data-id="10"] { }

/* XXXXL   */ @media screen and (min-width:1600px)                        {  }
/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) {  }
/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) {  }
/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) {  }
/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) {  }
/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) {  }
/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) {  }
/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) {  }
/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) {  }
/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) {  }
/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) {  }
/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) {  }
/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) {  }
/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) {  }
/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) {  }
/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) {  }
/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) {  }
/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) {  }
/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) {  }
/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) {  }
/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) {  }
/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) {  }
/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) {  }
/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) {  }


	@media screen and (min-width:   0px) and (max-width: 959px) {

		.css.tpl-invitation-vip .columns[data-split="1-1"] { display: flex; flex-direction: column; }
		.css.tpl-invitation-vip .columns[data-split="1-1"] > .column { }
		
		.css.tpl-invitation-vip .columns[data-split="1-1"] > .column[data-lang="ar"] { order: 2; margin-top:25px; }
		.css.tpl-invitation-vip .columns[data-split="1-1"] > .column[data-lang="en"] { order: 1; margin-top:25px; }
		
		.arabic[data-id="1"]  { background-position: top center; transform:scale(1,1); }

		
	}


/* Language based contents */

.spi .has-conditional                                                        .flyer img { display: none; }
.spi .has-conditional:has(.lang-chooser label[data-lang="en"] input:checked) .flyer img[data-lang="en"],
.spi .has-conditional:has(.lang-chooser label[data-lang="ar"] input:checked) .flyer img[data-lang="ar"],
.spi .has-conditional:has(.lang-chooser label[data-lang="ta"] input:checked) .flyer img[data-lang="ta"] {
  display: block;
}

.spi                                                          .buttons.has-conditional a.button { display: none; }
.spi:has(.lang-chooser label[data-lang="en"] input:checked)   .buttons.has-conditional a.button[data-lang="en"],
.spi:has(.lang-chooser label[data-lang="ar"] input:checked)   .buttons.has-conditional a.button[data-lang="ar"],
.spi:has(.lang-chooser label[data-lang="ta"] input:checked)   .buttons.has-conditional a.button[data-lang="ta"] {
  display: inline-block;
}

.lang-chooser {
	position: relative;
	top: -10px;
}
.lang-chooser label {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 15px;
	font-family: NunitoSans;
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.2;
	margin-right: 5px;
	background-color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
	opacity: 0.33;
	filter:grayscale(1);
}
.lang-chooser label:hover {
	opacity: 1;
	filter:none;
}

.lang-chooser label input[type="radio"] { 
	position: absolute; 
	opacity: 0;
}
.lang-chooser label i {
	pointer-events: none;
	display: inline-block;
	position: relative;
	width: 20px;
	height: 12px;
	top: 1px;
	margin-right: 3px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.lang-chooser label em {
	pointer-events: none;
}
.lang-chooser label[data-lang="en"] em:before { content:"English version"; }
.lang-chooser label[data-lang="ar"] em:before { content:"Arabic version"; }
.lang-chooser label[data-lang="ta"] em:before { content:"Tagalog version"; }

.lang-chooser label[data-lang="en"] i { background-image:url("../../images/flag/gb.svg"); }
.lang-chooser label[data-lang="ar"] i { background-image:url("../../images/flag/ae.svg"); }
.lang-chooser label[data-lang="ta"] i { background-image:url("../../images/flag/ph.svg?v=2"); }

.has-conditional .lang-chooser label[data-lang="ar"]:has(input:checked),
.has-conditional .lang-chooser label[data-lang="en"]:has(input:checked),
.has-conditional .lang-chooser label[data-lang="ta"]:has(input:checked) {
	background-color:#DDDDDD;
	opacity: 1;
	filter: none;
}




/* Special invitations */

.spi {}
.spi .flyer {
	display: block;
	width: 100%;
	height: auto;
}
.spi .flyer img {
	display: block;
	width: 100%;
	height: auto;
	border:none;
	box-shadow:0 5px 15px 0 rgba(171,171,171,1.00);
}
.spi .buttons .button.bs-L {
	font-size: 2rem;
	line-height: 1.2;
	padding: 10px 30px 10px 30px;
	text-wrap: balance;
}
.spi .buttons .button.bs-M {
	font-size: 1.5rem;
	line-height: 1.2;
	padding: 5px 30px 5px 30px;
	text-wrap: balance;
}
.spi .button-gap {
	display: inline-block;
	width: 15px;
	height: 100%;
}
/*    -M   */ @media screen and (min-width: 0px) and (max-width: 959px) {  .spi .button-gap { display: block; height: 10px; } }

.spi .buttons[data-space_top="5"] {
	margin-top: 15px; 
}
.title.tilted.framed {
	display: inline-block;
	position: relative;
	border-color:#BF0000;
	border-width: 2px;
	border-style: dashed;
	color: #BF0000;
	background-color: white;
	transform:rotate(-2.5deg);
	padding: 10px 20px;
	font-size: 1.2rem;
	margin: 0 0 5px -20px;
}