/*Sign in Page*/
.oaklores-guest-main-text {
		width:100%;
		display: block;
    margin-top: 80px;
    text-align:center;
    font-size: 24px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.5px;
    line-height: 32px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
    justify-content: center;
}
.oaklores-guest-subheading {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.oaklores-art-studio-signbtn {	
    display: block;
	margin-top:25px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    text-align: center;
	z-index:10;
}
		.oaklores-art-studio-signbtn button{
			padding:0 15%;
		}
.oaklores-guest-bgimg-container {
	margin-top:35px;
    height: 45vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow:hidden;
    bottom: 0;
}

.oaklores-guest-bgimg-container img {
    max-width: 100%;
	max-height:100%;
    object-fit: contain;
}

/*Registeration form*/
.oaklores-registeration-form-card {
    font-family: "Helvetica Neue", sans-serif;
    margin: 10px 0 20px 0;

    /* Noticeable bluish gradient */
    background: linear-gradient(135deg, #e6f0ff 0%, #cddfff 50%, #9bbdff 100%);
    color: #162447;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    /* Typography */
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;

    /* Smooth transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oaklores-registeration-form-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.oaklores-registeration-form-card-premium {
    font-family: "Helvetica Neue", sans-serif;
    margin: 10px 0 20px 0;

    /* Subtle magenta gradient */
    background: linear-gradient(135deg, #ffe6f0 0%, #ffccdfff 50%, #ff99c8 100%);
    color: #2a0d2e; /* Darker shade for readability */
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    /* Typography */
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;

    /* Smooth transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oaklores-registeration-heading-card{
	 font-family: "Helvetica Neue", sans-serif;
    margin: 10px 0 20px 0;

    /* Greenish gradient instead of blue */
    background: linear-gradient(135deg, #e6ffe6 0%, #cddfcc 50%, #9bbd99 100%);
    color: #162447;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    /* Typography */
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;

    /* Smooth transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oaklores-registeration-heading-card:hover{
transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.oaklores-registeration-form-card-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.oaklores-registeration-form-card-premium span, .oaklores-registeration-form-card span, .oaklores-registeration-heading-card span{
font-weight:bold;
}
.oaklores-registeration-form-card-premium p, .oaklores-registeration-form-card p, .oaklores-registeration-heading-card p{
	color:#444;
	font-size:12px;
}
label span{
	border-radius:5px;
}
.oaklores-registeration-form-refferal-card span{
	font-size:12px;
}
.oaklores-horizontal-list {
    list-style: none;       /* remove default bullets */
    padding: 0;
    margin: 0;
    display: flex;          /* arrange items horizontally */
    gap: 20px;              /* spacing between items */
}

.oaklores-horizontal-list li {
    font-size: 10px;
    color: #555;
}
#country, #state{
	margin-bottom:20px;
}

/*PROFILE PAGE*/
	.oaklores-artist-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 10px;
	justify-content: center; 
}
.oaklores-artist-header .artist-dp img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* circular */
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.oaklores-artist-header .artist-info {
    flex: 1;
	text-align:left;
}
.oaklores-artist-header .artist-name {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 8px 0;
	text-align:left;
    color: #162447; /* matches your theme */
}

.oaklores-artist-header .artist-artforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oaklores-artist-header .artform-pill {
    display: inline-block;
    background: linear-gradient(135deg, #9be7ff, #7fd1b9, #fdd365); /* colorful pills */
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #162447;
    white-space: nowrap;
}
.artstudio_artist_stats {
    display: flex;
    justify-content: center;  /* centers the whole block */
    align-items: flex-start;
    gap: 40px; /* spacing between stats */
    margin: 10px 0;
    text-align: center;
}

.artstudio_artist_stats > div {
    display: flex;
    flex-direction: column; /* stack label and number */
    align-items: center;
    font-family: "Helvetica Neue", sans-serif;
    color: #162447;
}

.artstudio_artist_stats > div span.label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.artstudio_artist_stats > div span.value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1a73e8; /* highlight color, change to theme green if needed */
}
	.artstudio_upload_art_section{
		text-align:center;
	}
	
	.artstudio_upload_art_section {
    display: flex;
    gap: 10px; /* spacing between buttons */
    margin: 10px;
}

.artstudio_upload_art_section button {
    flex: 1;            /* makes both grow equally */
    padding: 12px 16px; /* consistent spacing */
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;           /* spacing between icon and text */
    border-radius: 8px;
}
.tab-content{
		display:none;
	}
/*BOTTOM SHEET STYLING*/
.upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240px;
  border: 2px dashed #aaa;
  border-radius: 10px;
  font-size: 48px;
  color: #777;
  cursor: pointer;
  transition: all 0.6s ease;
  margin: 0 auto;
  animation: boxHint 3s cubic-bezier(0.25, 1, 0.5, 1) 0.5s 1;
	
  overflow: hidden;
	position: relative;
    box-sizing: border-box;
}

/* Smooth and centered shrink/expand animation */
@keyframes boxHint {
  0% {
    width: 100%;
  }
  30% {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
  70% {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
  100% {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.upload-box:hover {
  border-color: #555;
  color: #333;
  background: #f9f9f9;
}
	.upload-box img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
	.filepond--drop-label, .filepond--credits, .filepond--hopper{display:none;}
	
	/* Make select look and behave like your .field.outline inputs */
#artist-artform {
  display: block;
  width: 100%;
  height: 42px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  background-color: #fff;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* remove weird browser "invalid" red outline/shadow */


/* Focused or valid state — same blue/gray outline as inputs */
#artist-artform:focus,
#artist-artform:valid {
  border-color: #007bff;
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
  outline: none;
}

/* optional: add dropdown arrow manually for a cleaner look */
#artist-artform {
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  border:0.5px solid #777;
}
/*REGULAR USER*/
 .oaklores-artist-form-container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .oaklores-artist-form-container h2 {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 24px;
            color: #333;
        }

        .oaklores-artist-form-container form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .oaklores-artist-form-container input,
        .oaklores-artist-form-container textarea,
        .oaklores-artist-form-container select {
            padding: 10px 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 15px;
            width: 100%;
        }

        .oaklores-artist-form-container label {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            color: #555;
        }

        .oaklores-artist-form-container button {
            padding: 12px;
            background-color: #4A90E2;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .oaklores-artist-form-container button:hover {
            background-color: #357ABD;
        }